*{margin:0;padding:0;box-sizing:border-box}
:root{
  --u:calc(100vw / 1440);
  --cream:#FFFCE4;
  --pitch:#052416;
  --blush:#FFC4E8;
  --acid:#DDE85C;
  --grey:#6E6E6E;
}
html,body{height:100%;overflow:hidden;background:var(--pitch)}
body{color:var(--cream);font-family:"JetBrains Mono",monospace;-webkit-font-smoothing:antialiased}

/* grain */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── GATE (dark starfield) ── */
/* green from the first paint; only the stars/pulses fade in */
#gate{position:fixed;inset:0;background:var(--pitch);overflow:hidden}
#gate > *{opacity:0;transition:opacity 1.2s ease 1.4s}
.ready #gate > *{opacity:1}
#gate-stars{position:absolute;inset:0}
.star{position:absolute;background:var(--cream);border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite var(--delay,0s)}
@keyframes twinkle{0%,100%{opacity:.1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.pulse-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.gate-pulse{position:absolute;width:200px;height:200px;border:1px solid rgba(255,196,232,.15);border-radius:50%;animation:pulse-ring 3s ease-out infinite}
.gate-pulse:nth-child(2){animation-delay:1s}
.gate-pulse:nth-child(3){animation-delay:2s}
@keyframes pulse-ring{0%{transform:scale(.5);opacity:.8}100%{transform:scale(4);opacity:0}}

/* ── CONTENT ── */
.intro{position:relative;z-index:2;height:100vh;height:100dvh;width:100%;overflow:hidden}
/* the 1440×900 design, scaled to fit and centred in the window */
.stage{position:absolute;left:50%;top:50%;width:calc(1440*var(--u));height:calc(900*var(--u));transform:translate(-50%,-50%);--off:calc((1440*var(--u) - 100vw) / 2)}
.stage > *{position:absolute}

.corner{top:calc(41*var(--u));font-size:calc(14.82*var(--u));color:var(--grey);text-transform:uppercase;line-height:1.3}
.corner{font-size:max(10px,calc(14.82*var(--u)))}
.corner.tl{left:calc(var(--off) + 41*var(--u))}
.corner.tr{right:calc(var(--off) + 45*var(--u))}

.intro-word{left:0;right:0;top:calc(105*var(--u));text-align:center;font-family:"Fraunces",serif;font-size:calc(25.7*var(--u));color:#C2C2C2;opacity:.8;line-height:calc(33*var(--u))}
.intro-word span{color:var(--blush)}

.intro-logo{left:calc(589*var(--u));top:calc(138*var(--u));width:calc(273*var(--u));height:calc(182*var(--u));object-fit:cover;animation:breathe 5s linear infinite}

.intro-tagline{left:0;right:0;top:calc(320*var(--u));text-align:center;font-family:"Fraunces120",serif;font-weight:400;font-size:calc(76.9*var(--u));line-height:calc(64*var(--u));color:var(--cream);letter-spacing:-.01em}
.intro-tagline em{color:var(--blush)}

.intro-sub{left:0;right:0;top:calc(471*var(--u));text-align:center;font-size:calc(15*var(--u));color:#C2C2C2;opacity:.8;text-transform:uppercase;letter-spacing:.02em}

.intro-enter{left:calc(559*var(--u));top:calc(537*var(--u));width:calc(332*var(--u));height:calc(59*var(--u));display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,252,228,.45);border-radius:100px;color:#fff;text-decoration:none;font-size:calc(15.9*var(--u));text-transform:uppercase;overflow:hidden;transition:border-color .3s}
.intro-enter::before{content:'';position:absolute;inset:0;background:var(--blush);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.76,0,.24,1);border-radius:100px}
.intro-enter span{position:relative;z-index:1;transition:color .3s}
.intro-enter:hover{border-color:var(--blush)}
.intro-enter:hover::before{transform:scaleX(1)}
.intro-enter:hover span{color:var(--pitch)}
/* on click: play the full pink fill, hold, then fade the page out before going to home.html */
.intro-enter.go{border-color:var(--blush)}
.intro-enter.go::before{transform:scaleX(1);transition-duration:.7s}
.intro-enter.go span{color:var(--pitch)}
body{transition:opacity .45s ease}
body.leaving{opacity:0}

.intro-marquee{left:var(--off);right:var(--off);top:calc(790*var(--u));height:calc(26*var(--u));overflow:hidden;
  border-top:1px solid rgba(110,110,110,.4);border-bottom:1px solid rgba(110,110,110,.4);display:flex;align-items:center}
.intro-marquee .track{display:flex;white-space:nowrap;animation:marquee 38s linear infinite;opacity:.65}
.intro-marquee span{font-size:max(10px,calc(12.7*var(--u)));color:var(--grey);text-transform:uppercase;padding-left:calc(14*var(--u))}
@keyframes marquee{to{transform:translateX(-50%)}}

@keyframes breathe{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-25px,0)}100%{transform:translate3d(0,0,0)}}

/* entrance */
.reveal{opacity:0;transition:opacity 1.2s ease var(--d,0s)}
.intro-word.reveal{transition-duration:1.2s}
.ready .reveal{opacity:1}
.ready .intro-word.reveal{opacity:.8}
.ready .intro-sub.reveal{opacity:.8}
.blur-in{filter:blur(18px);opacity:0;transition:filter 1.6s ease, opacity 1.2s ease}
.ready .blur-in{filter:blur(0);opacity:1}

.corner.tl{margin-left:env(safe-area-inset-left,0px)}
.corner.tr{margin-right:env(safe-area-inset-right,0px)}
@media (orientation:portrait) and (max-width:1100px){
  :root{--u:calc(100vw / 380)}
  .stage{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;transform:none;--off:0px}
  .corner{top:calc(20*var(--u));font-size:calc(10*var(--u))}
  .corner.tl{left:16px}.corner.tr{right:16px}
  .intro-word{top:calc(50svh - 230*var(--u));font-size:calc(20*var(--u));line-height:calc(26*var(--u))}
  .intro-logo{left:50%;top:calc(50svh - 196*var(--u));width:calc(170*var(--u));height:calc(113*var(--u));margin-left:calc(-85*var(--u))}
  .intro-tagline{top:calc(50svh - 70*var(--u));font-size:calc(44*var(--u));line-height:calc(40*var(--u));padding:0 16px}
  .intro-sub{top:calc(50svh + 25*var(--u));font-size:calc(10*var(--u));padding:0 16px}
  .intro-enter{left:50%;top:calc(50svh + 65*var(--u));width:calc(240*var(--u));height:calc(48*var(--u));margin-left:calc(-120*var(--u));font-size:calc(13*var(--u))}
  .intro-marquee{top:calc(50svh + 298*var(--u));bottom:auto;height:calc(24*var(--u))}   /* button ends at 50svh+113u → 185u gap, sits lower on phones */
  .intro-marquee span{font-size:calc(11*var(--u));padding-left:14px}
}
/* upright iPads: the intro is scaled up to 2× for bigger type, but the button and the scroller
   should keep the same real size and spacing as on laptop/phone (≈300×60px button, ≈120px gap) */
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px){
  .intro-enter{width:calc(150*var(--u));height:calc(30*var(--u));margin-left:calc(-75*var(--u));font-size:calc(8.5*var(--u))}
  .intro-marquee{top:calc(50svh + 190*var(--u));height:calc(18*var(--u))}   /* button ends at 50svh+95u → 95u ≈ 190px gap */
  .intro-marquee span{font-size:calc(8*var(--u))}
  /* corner labels at their laptop size (~14px), with an even 32px inset from the edges */
  .corner{top:calc(16*var(--u));font-size:calc(7*var(--u));letter-spacing:.06em}
  .corner.tl{left:32px}.corner.tr{right:32px}
}
/* centre the logo → button block on screen (it sat high, with a big gap above the scroller) */
.intro-word,.intro-tagline,.intro-sub{translate:0 var(--dy,0px)}
.intro-logo{translate:calc(-5*var(--u)) var(--dy,0px)}      /* logo + button were a few px right of centre */
.intro-enter{translate:calc(-4*var(--u)) var(--dy,0px)}
:root{--dy:calc(60*var(--u))}
@media (orientation:portrait) and (max-width:1100px){
  :root{--dy:calc(40*var(--u))}
  .intro-logo,.intro-enter{translate:0 var(--dy)}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px){ :root{--dy:calc(35*var(--u))} }