/* ============================================================
   ZEO STUDIOS ink header — fully scoped under #zsh so it can
   never touch the main site's styles (and vice versa).
   ============================================================ */

#zsh{
  --paper:#f2efe8;
  --ink:#101010;
  --char:#161616;
  --bone:#efece4;
  --title-font:"hagrid-black", sans-serif;

  position:relative;
  height:340vh;
}

/* The pinned screen: stays put while the journey happens, then releases
   and scrolls up normally, revealing the site below. */
#zsh .stage{
  position:sticky; top:0;
  height:100vh;
  overflow:hidden;
  /* dark, matching the sky's edge — tilting the world can only ever
     reveal darkness, never white paper */
  background:#0e0e0e;
}
#zsh #tiltWrap{
  position:absolute; inset:0;
  will-change:transform;
}
#zsh .world{
  position:absolute; inset:0;
  will-change:transform;
}
/* The frame: a single canvas drawing the paper mask and wobbly ink border
   as one — redrawn only when the scroll actually moves it. */
#zsh #frame{
  position:absolute;
  left:-12vw; top:-12vh;
  width:124vw; height:124vh;
  pointer-events:none;
}

/* The quote: two comic caption boxes floating IN FRONT of the frame */
/* Glass caption boxes — same material as the pill nav */
#zsh .quote{
  position:absolute;
  max-width:26ch;
  background:rgba(20, 28, 62, 0.55);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255, 255, 255, 0.1);
  border-radius:16px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  padding:18px 28px;
  font-family:'Geist Mono', ui-monospace, monospace;
  font-weight:500;
  font-size:clamp(15px, 1.25vw, 20px);
  line-height:1.45;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255, 255, 255, 0.85);
  opacity:0;
  scale:0.4;
  transition:opacity .25s ease, scale .25s ease;
  will-change:transform,opacity;
  pointer-events:none;
  z-index:6;
}
/* Pop into existence: quick overshoot, one wobble, settle. The parallax
   lives on the inline transform, so the pop animates the separate
   `scale` property and never fights it. */
#zsh .quote.on{
  opacity:1;
  scale:1;
  animation:quotePop .42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes quotePop{
  0%   { scale:0.4;  opacity:0; }
  18%  { opacity:1; }
  55%  { scale:1.045; }
  75%  { scale:0.982; }
  90%  { scale:1.01; }
  100% { scale:1;    opacity:1; }
}
#zsh #q1{ left:4.5vw; top:30vh; }
#zsh #q2{ right:4.5vw; top:78vh; }

#zsh .sky{
  /* oversized beyond the viewport so the hover tilt can never expose
     its edges */
  position:absolute; top:-8vh; left:-8vw;
  width:116vw; height:141vh;
  background:radial-gradient(ellipse at 50% 34%, #1b1b1b 0%, #141414 62%, #0e0e0e 100%);
  overflow:hidden;
}
#zsh #streaks{ position:absolute; inset:0; width:100%; height:100%; display:block; }

#zsh #ink{
  position:absolute; top:80vh; left:0;
  width:100%; height:75vh;
  pointer-events:none;
  filter:url(#cloudRough);   /* jiggly ripped-paper edges, like the letters */
}

#zsh #floor{
  position:absolute; top:125vh; left:0;
  width:100%; height:195vh;
  pointer-events:none;
}
#zsh #wind{
  position:absolute; top:95vh; left:0;
  width:100%; height:140vh;
  pointer-events:none;
}
/* Bam & Tyco — feet anchored to the floor, mid-plane. */
#zsh #mascots{
  position:absolute;
  left:50%; top:127.4vh;
  height:43vh;
  pointer-events:none;
  display:none;
  will-change:transform;
}

/* ---------- Title ---------- */
#zsh .title-wrap{
  position:absolute; top:44%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:3;
  will-change:transform;
  filter:url(#roughen);
}
#zsh h1{
  font-family:var(--title-font);
  font-weight:400;
  color:var(--bone);
  line-height:.95;
  user-select:none;
  margin:0;
}
#zsh .line{ display:block; white-space:nowrap; perspective:900px; }
#zsh .line-1{ font-size:clamp(44px, 9.4vw, 150px); letter-spacing:.005em; }
#zsh .letter-space{ display:inline-block; width:.34em; }

#zsh .letter{
  display:inline-block;
  opacity:0;
  transform-origin:50% 55%;
  will-change:transform,opacity;
}
#zsh .reveal .letter{
  animation:zshSwingIn .95s cubic-bezier(.16,.8,.22,1) forwards;
  animation-delay:var(--d);
}
/* fly in from outside the word, edge-on and streaking, overshoot through
   the middle, then spring-settle into place */
@keyframes zshSwingIn{
  0%{
    opacity:0;
    transform:translate(var(--dx), var(--dy)) scale(1.28)
              rotateY(var(--ry)) rotateZ(var(--rz));
    filter:blur(5px);
  }
  16%{ opacity:1; }
  58%{
    transform:translate(calc(var(--dx)*-.07), calc(var(--dy)*-.09)) scale(1.03)
              rotateY(calc(var(--ry)*.12)) rotateZ(calc(var(--rz)*-.22));
    filter:blur(.6px);
  }
  78%{
    transform:translate(0,0) scale(.985)
              rotateY(0deg) rotateZ(calc(var(--rz)*.07));
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translate(0,0) scale(1) rotateY(0deg) rotateZ(0deg);
    filter:blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  #zsh .reveal .letter{ animation-duration:.01s; animation-delay:0s; }
}