/* ============================================================
   VARA — RITUAL LAYER
   Loading gate · glitch engine · scanlines · realm intro
   Loaded after the main <style> block in index.html.
   ============================================================ */

/* ---------- glitch tokens ---------- */
:root{
  --gl-amp:  2px;                       /* chromatic split distance   */
  --gl-cyan: rgba(0, 229, 255, .8);     /* aberration cool channel    */
  --gl-red:  var(--red);                /* aberration warm channel    */
  --scan-op: .05;                       /* baseline scanline strength */
}
body.glitch-heavy { --gl-amp: 5px; --scan-op: .11; }
body.glitch-off   { --gl-amp: 0px; --scan-op: 0;   }

/* ============================================================
   SCANLINE / CRT OVERLAY  (whole page, non-interactive)
   ============================================================ */
.vara-scan{
  position: fixed; inset: 0; z-index: 75; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,.55) 3px,
    rgba(0,0,0,0)   4px
  );
  opacity: var(--scan-op);
  mix-blend-mode: multiply;
  transition: opacity .12s steps(2);
}
.vara-scan::after{                       /* slow rolling CRT band */
  content:""; position:absolute; left:0; right:0; height: 26vh;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.045), transparent);
  animation: scanSweep 8s linear infinite;
}
.vara-scan.is-tear{ opacity: calc(var(--scan-op) + .28); }
.vara-scan.is-tear::before{
  content:""; position:absolute; left:0; right:0; top: var(--tear-top, 42%);
  height: 12px; background: rgba(223,4,40,.3);
  mix-blend-mode: screen; transform: translateX(4px);
}
body.glitch-off .vara-scan{ display:none; }
@keyframes scanSweep{ 0%{ transform: translateY(-40vh);} 100%{ transform: translateY(150vh);} }

/* reveal flash when the gate opens */
body.is-revealing{ animation: revealFlash .55s ease-out; }
@keyframes revealFlash{
  0%  { filter: brightness(2.4) contrast(1.5); }
  22% { filter: invert(.12) hue-rotate(12deg); }
  55% { filter: brightness(.7); }
  100%{ filter: none; }
}

/* ============================================================
   GLITCH — chromatic split (triggered, multi-line safe)
   JS adds .is-glitching for ~360ms; CSS hover also fires it.
   ============================================================ */
.glitch-shadow{ position: relative; }
.glitch-shadow.is-glitching{ animation: glxShadow .34s steps(2,end) 1; }
.glitch-hover:hover{ animation: glxShadow .3s steps(2,end) 1; }
@keyframes glxShadow{
  0%   { text-shadow:none; transform:none; clip-path: inset(0 0 0 0); }
  18%  { text-shadow: calc(-1*var(--gl-amp)) 0 var(--gl-red), var(--gl-amp) 0 var(--gl-cyan);
         transform: translate3d(var(--gl-amp),0,0); }
  36%  { text-shadow: var(--gl-amp) 0 var(--gl-red), calc(-1*var(--gl-amp)) 0 var(--gl-cyan);
         transform: translate3d(calc(-1*var(--gl-amp)),0,0); clip-path: inset(16% 0 52% 0); }
  54%  { text-shadow: calc(-2*var(--gl-amp)) 0 var(--gl-red), calc(2*var(--gl-amp)) 0 var(--gl-cyan);
         transform: translate3d(1px,0,0); clip-path: inset(58% 0 12% 0); }
  72%  { text-shadow: var(--gl-amp) 0 var(--gl-red), calc(-1*var(--gl-amp)) 0 var(--gl-cyan);
         clip-path: inset(0 0 0 0); }
  100% { text-shadow:none; transform:none; }
}

/* GLITCH — continuous chromatic split for single-line text (uses data-text) */
.glitch-split{ position: relative; display: inline-block; }
.glitch-split::before,
.glitch-split::after{
  content: attr(data-text);
  position: absolute; top:0; left:0; width:100%; height:100%;
  overflow: hidden; pointer-events:none;
}
.glitch-split::before{ color: var(--gl-red);  animation: splitA 2.6s infinite steps(2,end) alternate; }
.glitch-split::after { color: var(--gl-cyan); animation: splitB 3.3s infinite steps(2,end) alternate; }
@keyframes splitA{
  0%{ transform: translateX(0); clip-path: inset(0 0 85% 0); }
  50%{ transform: translateX(calc(-1*var(--gl-amp))); clip-path: inset(40% 0 40% 0); }
  100%{ transform: translateX(var(--gl-amp)); clip-path: inset(80% 0 2% 0); }
}
@keyframes splitB{
  0%{ transform: translateX(0); clip-path: inset(70% 0 10% 0); }
  50%{ transform: translateX(var(--gl-amp)); clip-path: inset(20% 0 55% 0); }
  100%{ transform: translateX(calc(-1*var(--gl-amp))); clip-path: inset(0 0 88% 0); }
}

/* ============================================================
   THE GATE  (loading ritual)
   Hidden by default — JS reveals it only when needed, so a
   JS failure never traps the visitor behind a black screen.
   ============================================================ */
.vara-gate{
  position: fixed; inset: 0; z-index: 300;
  display: none; place-items: center;
  background: #000;
  overflow: hidden;
}
.vara-gate.is-active{ display: grid; }
.vara-gate.is-closing{ animation: gateClose .55s ease forwards; }
@keyframes gateClose{ to{ opacity:0; visibility:hidden; } }

/* scanlines + flicker over the black */
.vara-gate::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(255,255,255,.06) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: screen;
  animation: gateFlicker .11s steps(2) infinite;
}
@keyframes gateFlicker{ 0%{opacity:.35;} 50%{opacity:.62;} 100%{opacity:.42;} }
.vara-gate::after{                       /* grain */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.07; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.vara-gate__inner{
  position: relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap: 26px;
  padding: 28px; text-align:center;
  animation: gateJitter .24s steps(2) infinite;
}
@keyframes gateJitter{
  0%{ transform: translate(0,0); }
  20%{ transform: translate(-1px,1px); }
  40%{ transform: translate(1px,-1px); }
  60%{ transform: translate(0,0); }
  100%{ transform: translate(1px,0); }
}
.vara-gate__mark{
  width: 60px; height:auto;
  filter: drop-shadow(0 0 22px rgba(223,4,40,.6));
  animation: markPulse 2.6s ease-in-out infinite;
}
@keyframes markPulse{ 0%,100%{ opacity:.85;} 50%{ opacity:1;} }
.vara-gate__line{
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(24px, 5vw, 54px); line-height: 1;
  letter-spacing: .02em; color: var(--text); margin: 0;
  max-width: 15ch; text-shadow: 0 0 40px rgba(223,4,40,.3);
}
.vara-gate__whisper{
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted); margin-top: -8px;
  min-height: 14px; opacity: 0; transition: opacity .4s ease;
}
.vara-gate__whisper.show{ opacity: .7; }

/* shockwave ring + flash for the blast */
.vara-gate__shock{
  position:absolute; left:50%; top:50%; z-index:3;
  width: 60px; height: 60px; border-radius:50%;
  border: 2px solid rgba(255,90,118,.9);
  transform: translate(-50%,-50%) scale(0); opacity:0; pointer-events:none;
}
.vara-gate__flash{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #ff5a76 32%, rgba(223,4,40,.55) 52%, transparent 72%);
}

/* THE BLAST — explosion into the logo */
.vara-gate.is-blast{ animation: gateShake .5s steps(3) 1; }
@keyframes gateShake{
  0%{ transform: translate(0,0); } 20%{ transform: translate(-9px,7px); }
  40%{ transform: translate(8px,-8px); } 60%{ transform: translate(-6px,5px); }
  80%{ transform: translate(5px,-4px); } 100%{ transform: translate(0,0); }
}
.vara-gate.is-blast .vara-gate__flash{ animation: gateFlash .7s ease-out forwards; }
@keyframes gateFlash{ 0%{ opacity:0; transform: scale(.3);} 10%{ opacity:1;} 34%{ opacity:.85;} 100%{ opacity:0; transform: scale(1.7);} }
.vara-gate.is-blast .vara-gate__shock{ animation: gateShockwave .75s cubic-bezier(.15,.6,.3,1) forwards; }
@keyframes gateShockwave{ 0%{ transform: translate(-50%,-50%) scale(0); opacity:.95;} 100%{ transform: translate(-50%,-50%) scale(26); opacity:0;} }
.vara-gate.is-blast .vara-gate__inner{ animation: none; }
.vara-gate.is-blast .vara-gate__line,
.vara-gate.is-blast .vara-gate__whisper{ animation: blastHide .22s ease forwards; }
@keyframes blastHide{ to{ opacity:0; filter: blur(10px); transform: scale(.9);} }
.vara-gate.is-blast .vara-gate__mark{ animation: markBlast .75s cubic-bezier(.18,.85,.25,1) forwards; }
@keyframes markBlast{
  0%  { transform: scale(1); filter: drop-shadow(0 0 22px rgba(223,4,40,.6)); }
  16% { transform: scale(.78); }
  100%{ transform: scale(3.4); filter: drop-shadow(0 0 80px rgba(223,4,40,1)) drop-shadow(0 0 160px rgba(255,90,118,.7)); }
}

/* ============================================================
   REALM ENTER  — full-bleed immersive title sequence (top of page)
   ============================================================ */
.realm-enter{
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  background: #000;
  isolation: isolate; overflow: hidden;
  border-bottom: 1px solid rgba(223,4,40,.22);
}
.realm-enter__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit: cover; object-position: center 35%;
  filter: var(--about-photo-filter, grayscale(.9) contrast(1.12) brightness(.8)) brightness(.62) contrast(1.1);
  animation: realmKen 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes realmKen{ 0%{ transform: scale(1.08);} 100%{ transform: scale(1.22) translate3d(2%, -2%, 0);} }

/* heartbeat red wash behind the figure */
.realm-enter__pulse{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode: screen;
  background: radial-gradient(70% 80% at 50% 62%, rgba(223,4,40,.34), transparent 62%);
  animation: realmHeart 2.6s ease-in-out infinite;
}
@keyframes realmHeart{
  0%, 100%{ opacity:.35; transform: scale(1); }
  14%{ opacity:.85; transform: scale(1.04); }
  28%{ opacity:.45; }
  42%{ opacity:.7; transform: scale(1.02); }
  56%{ opacity:.35; }
}
.realm-enter__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(78% 70% at 50% 46%, transparent 0%, rgba(0,0,0,.55) 72%, #000 100%),
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 26%, transparent 56%, var(--bg) 100%);
}
.realm-enter__scan{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.5) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
  animation: realmFlick .12s steps(2) infinite;
}
@keyframes realmFlick{ 0%{opacity:.42;} 50%{opacity:.58;} 100%{opacity:.46;} }
.realm-enter__grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.08; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.realm-enter__inner{ position: relative; z-index:4; text-align:center; padding: 0 24px; }
.realm-enter__kicker{
  display:inline-flex; align-items:center; gap:14px; justify-content:center;
  margin-bottom: 30px;
  font-family: var(--mono); font-size:11px; letter-spacing:.4em;
  text-transform: uppercase; color: var(--text);
}
.realm-enter__kicker .bar{ width:30px; height:1px; background: var(--red); }
.realm-enter__kicker .t[data-flicker]{ animation: textFlicker 5s infinite steps(1); }
@keyframes textFlicker{
  0%,18%,22%,40%,100%{ opacity:.85; }
  19%{ opacity:.15; } 21%{ opacity:.9; }
  41%{ opacity:.2; } 43%{ opacity:.85; }
}
.realm-enter__title{
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(52px, 11vw, 168px); line-height: .86;
  margin: 0; letter-spacing: .005em;
  text-shadow: 0 0 80px rgba(0,0,0,.8), 0 0 50px rgba(223,4,40,.2);
}
.realm-enter__title .accent{ color: var(--red); }
.realm-enter__title{ animation: realmTitleIn 1.3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes realmTitleIn{
  0%  { opacity:0; filter: blur(18px); transform: scale(1.04);
        text-shadow: 12px 0 var(--gl-red), -12px 0 var(--gl-cyan); }
  50% { opacity:1; filter: blur(0);
        text-shadow: 4px 0 var(--gl-red), -4px 0 var(--gl-cyan); }
  62% { transform: translateX(-5px); clip-path: inset(30% 0 44% 0); }
  70% { transform: translateX(5px); clip-path: inset(4% 0 60% 0); }
  78% { transform: none; clip-path: inset(0 0 0 0); }
  100%{ opacity:1; text-shadow: 0 0 80px rgba(0,0,0,.8), 0 0 50px rgba(223,4,40,.2); }
}

.realm-enter__cue{
  position:absolute; left:50%; bottom: 34px; transform: translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center; gap: 12px;
  font-family: var(--mono); font-size:10px; letter-spacing:.4em;
  text-transform: uppercase; color: var(--muted);
  transition: color .2s ease;
}
.realm-enter__cue:hover{ color: var(--red); }
.realm-enter__cue .ln{ width:1px; height:48px; background: linear-gradient(180deg, var(--red), transparent); animation: cueDrop 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cueDrop{ 0%,100%{ transform: scaleY(.55); opacity:.5;} 50%{ transform: scaleY(1); opacity:1;} }

@media (max-width: 640px){
  .realm-enter{ min-height: 92svh; }
}
@media (prefers-reduced-motion: reduce){
  .realm-enter__img{ animation: none; transform: scale(1.1); }
  .realm-enter__pulse, .realm-enter__scan, .realm-enter__title,
  .realm-enter__kicker .t[data-flicker], .realm-enter__cue .ln{ animation: none; }
}

/* ============================================================
   NAV — sound toggle
   ============================================================ */
.nav__sound{
  background: transparent; border: 1px solid rgba(255,255,255,.14);
  color: var(--muted); width: 30px; height: 30px;
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.nav__sound:hover{ color: var(--red); border-color: var(--red); transform: translateY(-1px); }
.nav__sound.is-on{ color: var(--red); border-color: var(--hairline); }
.nav__sound svg{ width: 14px; height: 14px; }
.nav__sound .eq{ display:none; }
.nav__sound.is-on .eq{ display:inline; }
.nav__sound.is-on .mute{ display:none; }

/* ============================================================
   REDUCED MOTION  — calm everything down
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .vara-scan::after,
  .glitch-split::before, .glitch-split::after,
  .vara-gate__mark, .vara-gate__inner, .vara-gate::before,
  .vara-gate.is-blast, .vara-gate.is-blast .vara-gate__mark,
  .vara-gate.is-blast .vara-gate__shock{ animation: none !important; }
  body.glitch-heavy{ --gl-amp: 2px; --scan-op: .06; }
  .glitch-shadow.is-glitching, .glitch-hover:hover{ animation-duration: .2s; }
  body.is-revealing{ animation: none; }
  .vara-gate__enter.show{ animation: none; }
}

@media (max-width: 640px){
  .realm-intro{ min-height: 84svh; }
  .realm-intro__inner{ padding: 14vh 0; }
  .realm-intro__cue{ margin-top: 34px; }
}

/* ============================================================
   HERO — cinematic / experiential
   (CTAs untouched — only atmosphere & the title get treatment)
   ============================================================ */
.hero__img{
  animation: heroKen 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKen{
  0%  { transform: scale(1.05); }
  100%{ transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}

/* atmosphere layer: drifting haze + rising embers (sits above image, below content) */
.hero__embers{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero__embers::before,
.hero__embers::after{
  content:""; position:absolute; border-radius:50%;
  filter: blur(72px); mix-blend-mode: screen;
}
.hero__embers::before{
  width:62vw; height:62vw; left:-12vw; top:-14vh;
  background: radial-gradient(circle, rgba(31,20,40,.6), transparent 70%);
  animation: hazeA 24s ease-in-out infinite alternate;
}
.hero__embers::after{
  width:54vw; height:54vw; right:-14vw; bottom:-16vh;
  background: radial-gradient(circle, rgba(223,4,40,.16), transparent 70%);
  animation: hazeB 30s ease-in-out infinite alternate;
}
@keyframes hazeA{ to{ transform: translate(8vw, 6vh); } }
@keyframes hazeB{ to{ transform: translate(-7vw, -5vh); } }

.hero__ember{
  position:absolute; bottom:-12px; border-radius:50%;
  background: var(--red); box-shadow: 0 0 8px 1px rgba(223,4,40,.6);
  opacity:0; animation: emberRise linear infinite;
}
@keyframes emberRise{
  0%  { transform: translateY(0) translateX(0); opacity:0; }
  12% { opacity:.7; }
  85% { opacity:.3; }
  100%{ transform: translateY(-80vh) translateX(var(--drift,0)); opacity:0; }
}

/* title: glitch-reveal into a slow breathing glow */
.hero__title{ position:relative; }
.hero__title.fx-in{
  animation: heroTitleIn 1.1s cubic-bezier(.2,.7,.2,1) both,
             heroGlow 6s ease-in-out 1.25s infinite;
}
@keyframes heroTitleIn{
  0%  { opacity:0; filter: blur(16px); transform: translateY(10px) scale(1.02);
        text-shadow: 9px 0 var(--gl-red), -9px 0 var(--gl-cyan); }
  55% { opacity:1; filter: blur(0); transform: none;
        text-shadow: 3px 0 var(--gl-red), -3px 0 var(--gl-cyan); }
  68% { transform: translateX(-4px); clip-path: inset(28% 0 40% 0); }
  76% { transform: translateX(4px); clip-path: inset(0 0 0 0); }
  100%{ opacity:1; transform: none; text-shadow: 0 0 60px rgba(31,20,40,.4); }
}
@keyframes heroGlow{
  0%,100%{ text-shadow: 0 0 48px rgba(223,4,40,.12), 0 0 90px rgba(31,20,40,.3); }
  50%    { text-shadow: 0 0 70px rgba(223,4,40,.30), 0 0 130px rgba(31,20,40,.5); }
}

@media (prefers-reduced-motion: reduce){
  .hero__img{ animation: none; transform: scale(1.06); }
  .hero__embers::before, .hero__embers::after, .hero__ember{ animation: none; }
  .hero__title.fx-in{ animation: none; }
}