:root{
  --opal:linear-gradient(100deg,#f2c49a 0%,#f7e4d4 28%,#cdc8ff 60%,#8ed2f2 100%);
  --c1:#f2c49a;--c2:#f7e4d4;--c3:#cdc8ff;--c4:#8ed2f2;
  --glow:205,200,255;
  --ink:#f5f5f7;--g1:#a1a1a6;--g2:#86868b;--g3:#6e6e73;--line:#2c2c2e;
  --fd:'Inter Tight',system-ui,sans-serif;--fb:Inter,system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
}
html[data-night]{
  --opal:linear-gradient(100deg,#9fb4ff 0%,#e3dcff 30%,#8a7bff 62%,#5fe0d2 100%);
  --c1:#9fb4ff;--c2:#e3dcff;--c3:#8a7bff;--c4:#5fe0d2;
  --glow:150,140,255;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;-webkit-text-size-adjust:100%}
body{background:#000;color:var(--ink);font-family:var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--g3)}
.grain{position:fixed;inset:0;z-index:50;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}

/* HUD */
.hud{position:fixed;inset:0;z-index:40;pointer-events:none}
.hud-tl{position:absolute;top:calc(24px + env(safe-area-inset-top));left:28px}
.hud-tr{position:absolute;top:calc(24px + env(safe-area-inset-top));right:28px;font-variant-numeric:tabular-nums}
.night-tag{display:none}
html[data-night] .night-tag{display:inline;color:var(--c3)}

/* scenes */
.scene{position:relative}
.stick{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
#portal{height:440vh}
main,.foot{position:relative;z-index:1}
#find{height:230vh}

/* 1 arrival */
#dust{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:0;pointer-events:none}
.ring,.halo{position:absolute;left:50%;top:50%;aspect-ratio:1;border-radius:50%;will-change:transform,opacity}
.ring{width:min(56vh,74vw);translate:-50% -50%;
  background:conic-gradient(from 200deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64.2%,#000 65.6%,transparent 67%);
  mask:radial-gradient(circle,transparent 63%,#000 64.2%,#000 65.6%,transparent 67%);
  filter:drop-shadow(0 0 18px rgba(var(--glow),.45));animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}
.halo{width:min(74vh,96vw);translate:-50% -50%;background:radial-gradient(circle,rgba(var(--glow),.16) 0%,rgba(142,210,242,.07) 38%,transparent 66%);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6}}
.wm{position:relative;font-family:var(--fd);font-weight:300;font-size:15px;letter-spacing:.5em;text-indent:.5em;color:var(--g1);will-change:opacity,transform}
.wm-dot{margin:0 .1em}
.hint{position:absolute;bottom:calc(48px + env(safe-area-inset-bottom));color:var(--g3);font-size:13px}
.hint b{display:block;margin:12px auto 0;width:1px;height:36px;background:linear-gradient(var(--g3),transparent);animation:drip 2.4s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(247,228,212,.9),rgba(var(--glow),.35) 35%,transparent 70%);opacity:0;pointer-events:none}

/* 2 inside: the line condenses out of the stars (canvas), then the real type takes over */
/* x-ray model egg: lens follows pointer/finger; holding still reveals it */
.xr{position:absolute;left:-7vw;top:5vh;width:min(30vw,46vh,460px);aspect-ratio:1200/512;z-index:1;pointer-events:none;--mx:-999px;--my:-999px;--lr:0px;--rv:0}
.xr img{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;user-select:none}
.xr-lens{-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,#000 calc(var(--lr) * .35),transparent var(--lr));mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,#000 calc(var(--lr) * .35),transparent var(--lr));opacity:.9}
.xr-full{opacity:calc(var(--rv) * .45);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 calc(25% + var(--rv) * 35%),transparent calc(55% + var(--rv) * 45%));mask-image:radial-gradient(ellipse at 50% 45%,#000 calc(25% + var(--rv) * 35%),transparent calc(55% + var(--rv) * 45%))}
.xr-ha{position:absolute;left:0;top:0;z-index:3;margin:0;font-size:12px;color:var(--c2);text-shadow:0 0 14px rgba(var(--glow),.7);opacity:0;transform:translate(var(--hx,-999px),var(--hy,-999px));transition:opacity .45s;pointer-events:none;white-space:nowrap}
.xr-ha.on{opacity:1}
.inside{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.q{position:relative;z-index:2;max-width:1000px;padding:0 24px;font-family:var(--fd);font-weight:700;letter-spacing:-.035em;line-height:1.04;font-size:clamp(36px,5.6vw,80px);text-wrap:balance}
.q em{font-style:normal}
.q .w{color:var(--ink);opacity:0;will-change:opacity,filter}
.q .w.op{background:var(--opal);-webkit-background-clip:text;background-clip:text;color:transparent}
.sig-by{position:relative;z-index:2;margin-top:clamp(26px,4vh,44px);--s:0;opacity:calc(var(--s) * 4)}
.sig{display:block;width:clamp(230px,32vw,400px);height:auto;overflow:visible;transform:rotate(-3deg);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--s) * 108% - 8%),transparent calc(var(--s) * 108%));
  mask-image:linear-gradient(90deg,#000 calc(var(--s) * 108% - 8%),transparent calc(var(--s) * 108%))}
.sig path{fill:var(--ink);stroke:var(--ink);stroke-width:14;stroke-linejoin:round;paint-order:stroke}

/* 3 closer */
#closer{position:relative;height:135vh;min-height:780px;overflow:hidden;cursor:none;touch-action:pan-y}
.field{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);align-content:space-evenly;justify-items:center;padding:22vh 3vw 38vh;font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;user-select:none;pointer-events:none}
.field span{padding:6px 0;white-space:nowrap}
.field.dim{color:#232328}
.field.lit{color:var(--g1);
  -webkit-mask-image:radial-gradient(circle var(--r,210px) at var(--x,50%) var(--y,60%),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
  mask-image:radial-gradient(circle var(--r,210px) at var(--x,50%) var(--y,60%),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%)}
.field.lit .key{color:var(--c2);text-shadow:0 0 14px rgba(var(--glow),.9),0 0 34px rgba(var(--glow),.5)}
.cur{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid var(--c2);border-radius:50%;pointer-events:none;z-index:4;box-shadow:0 0 24px 6px rgba(var(--glow),.18);will-change:transform}
.note{position:absolute;top:calc(var(--ty,62%) + 52px);left:0;right:0;z-index:4;text-align:center;color:var(--c2);opacity:.85;transition:opacity .6s;pointer-events:none}
.tgt{position:absolute;left:var(--tx,50%);top:var(--ty,62%);width:64px;height:64px;margin:-32px 0 0 -32px;z-index:3;pointer-events:none;transition:opacity .6s}
.tgt i{position:absolute;inset:0;border:1px solid var(--c2);border-radius:50%;box-shadow:0 0 22px rgba(var(--glow),.35);animation:tgt 2.4s ease-out infinite}
.tgt i+i{animation-delay:1.2s}
@keyframes tgt{0%{transform:scale(.35);opacity:0}25%{opacity:.9}100%{transform:scale(1.25);opacity:0}}
#closer.got .tgt,#closer.got .note{opacity:0}
.haha{position:absolute;left:calc(var(--tx,50%) + 44px);top:var(--ty,62%);z-index:5;margin:0;transform:translate(-6px,-50%);font-size:13px;color:var(--c2);text-shadow:0 0 14px rgba(var(--glow),.7);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;white-space:nowrap}
.haha.on{opacity:1;transform:translate(0,-50%)}
.sig-by{pointer-events:auto;-webkit-tap-highlight-color:transparent}
.pnote{position:relative;z-index:2;margin:clamp(14px,2.4vh,26px) 0 0;max-width:min(560px,86vw);font-family:'Nothing You Could Do',cursive;font-size:clamp(20px,2.2vw,28px);line-height:1.35;color:var(--ink);text-align:center;transform:rotate(-2deg);height:0;overflow:visible}
.pnote span{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path 0s}
.pnote.on span{clip-path:inset(0 0 0 0);transition:clip-path 2.6s cubic-bezier(.45,.05,.4,1)}

/* 4 find */
.whisper{position:absolute;top:46%;left:0;right:0;transition:opacity .4s}
.dot{position:absolute;left:50%;top:62%;width:6px;height:6px;margin:-3px 0 0 -3px;border:0;border-radius:50%;background:var(--c2);cursor:pointer;
  box-shadow:0 0 16px 4px rgba(var(--glow),.45);animation:pulse 3.2s ease-in-out infinite;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.dot::after{content:"";position:absolute;inset:-22px;border-radius:50%}
.dot:hover,.dot.near{transform:scale(2.2)}
.dot:focus-visible{outline:1px solid var(--c3);outline-offset:8px}
@keyframes pulse{50%{box-shadow:0 0 26px 8px rgba(var(--glow),.6)}}
.card{position:absolute;left:50%;top:50%;width:min(560px,90vw);padding:44px 40px 36px;border-radius:32px;text-align:left;
  background:rgba(18,18,20,.72);border:1px solid var(--line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 0 140px rgba(var(--glow),.16);opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.06);transform-origin:50% 72%;transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.found .card{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.found .dot{opacity:0;pointer-events:none}
.found .whisper{opacity:0}
.card .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--g2);text-transform:uppercase}
.card h2{font-family:var(--fd);font-weight:700;font-size:46px;letter-spacing:-.03em;margin:14px 0 10px;background:var(--opal);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.card p{color:var(--g1);font-size:16px;line-height:1.5}
#nf{display:flex;gap:10px;margin-top:28px}
.nf-in{flex:1;min-width:0;height:52px;border-radius:999px;border:1px solid #3a3a3c;background:transparent;color:var(--ink);padding:0 22px;font:inherit;font-size:16px;outline:none;transition:border-color .2s}
.nf-in:focus{border-color:var(--c3)}
.nf-in[aria-invalid=true]{border-color:#ff6961}
.nf-in::placeholder{color:var(--g3)}
.nf-btn{height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--ink);color:#000;font:500 15px var(--fb);cursor:pointer;transition:opacity .2s}
.nf-btn:disabled{opacity:.5;cursor:default}
.nf-msg{margin-top:16px;font-size:12px!important;color:var(--g3)!important}
.nf-msg.err{color:#ff8a80!important}
.done #nf{display:none}
.done .nf-msg{font-size:15px!important;color:var(--ink)!important;margin-top:22px}

.foot{position:relative;padding:40px 0 calc(32px + env(safe-area-inset-bottom));text-align:center}

@media (max-width:700px){
  .hud-tl{left:20px}.hud-tr{right:20px}
  .hud-lon{display:none}
  html[data-night] .night-tag{display:none}
  html[data-night] #clk{color:var(--c3)}
  .field span:nth-child(n+43){display:none}
  #portal{height:350vh}.xr{left:-30vw;top:7vh;width:72vw}.xr-ha{font-size:11px}#find{height:200vh}
  .field{grid-template-columns:repeat(3,1fr);font-size:11px;padding:20vh 2vw 38vh}
  .card{padding:34px 24px 26px;border-radius:26px}
  .card h2{font-size:36px}
  #nf{flex-direction:column}
  .nf-in{flex:none}
  .nf-btn{width:100%}
}
@media (hover:none){#closer{cursor:auto}}
@media (prefers-reduced-motion:reduce){
  .ring,.halo,.hint b,.dot{animation:none}
  .card{transition:opacity .3s}
  .sig-by{--s:1!important}
}

/* egg 5 · scroll up and down three or four times → a handwritten question */
.snote{position:fixed;left:50%;top:50%;z-index:40;margin:0;width:max-content;max-width:86vw;font-family:'Nothing You Could Do',cursive;font-size:clamp(24px,2.8vw,36px);line-height:1.3;color:var(--ink);text-align:center;transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none;opacity:0;transition:opacity .6s ease}
.snote span{display:inline-block;clip-path:inset(0 100% 0 0)}
.snote.on{opacity:1;transition:opacity .2s ease}
.snote.on span{clip-path:inset(0 0 0 0);transition:clip-path 1.8s cubic-bezier(.45,.05,.4,1)}
.snote::before{content:'';position:absolute;inset:-40px -60px;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.78),rgba(0,0,0,0));}

/* egg 5: the question comes forward, everything else falls back */
#dust,main,.hud,.foot{transition:filter 1s ease,opacity 1s ease}
html.looking #dust,html.looking main,html.looking .hud,html.looking .foot{filter:blur(6px);opacity:.5;transition:filter .5s ease,opacity .5s ease}
@media (prefers-reduced-motion:reduce){html.looking #dust,html.looking main,html.looking .hud,html.looking .foot{filter:none;opacity:.2}}