@font-face{font-family:"Oxanium";src:url("fonts/oxanium-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Cormorant";src:url("fonts/cormorant-italic-400.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Jura";src:url("fonts/jura-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --neon:#5fdcff; --neon-hot:#c9f6ff; --neon-deep:#0a8cff;
  --ink:#03060c;
  --mx:0; --my:0;
  --shift:-4vh;            /* lift the scene so the quote has room */
  --title-size:min(8.4vw, 15vh);
  --title-top:12vh;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);overflow:hidden}
body{color:#dfe8f1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.stage{position:fixed;inset:0;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 45%, #0a1420 0%, #050a12 55%, #02040a 100%)}

/* 16:9 scene that behaves like background-size:cover */
.scene{position:absolute;left:50%;top:50%;
  width:max(100vw, 177.78vh);height:max(100vh, 56.25vw);
  transform:translate(-50%, calc(-50% + var(--shift)));pointer-events:none}
.scene-front{z-index:3}
.layer{position:absolute;inset:0;will-change:transform}
.bg-wrap{-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}
.bg,.bg img{display:block;width:100%;height:100%}
.bg img{object-fit:cover;transform-origin:52% 50%;animation:kenburns 90s ease-in-out infinite alternate;opacity:0;transition:opacity 2.2s ease}
.bg img.loaded{opacity:1}
@keyframes kenburns{
  0%{transform:scale(1.02) translate3d(0,0,0)}
  50%{transform:scale(1.07) translate3d(-.8%,.4%,0)}
  100%{transform:scale(1.11) translate3d(.6%,-.5%,0)}
}

#stars{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

/* monolith — 1748,886 → 2079,1825 on the 3840×2160 plate */
.monolith{position:absolute;left:45.52%;top:41.02%;width:8.62%;height:43.47%;
  border:0;background:none;padding:0;cursor:pointer;pointer-events:auto;
  animation:float 16s ease-in-out infinite;-webkit-tap-highlight-color:transparent;outline:none}
.monolith img{position:absolute;inset:0;width:100%;height:100%;display:block}
.monolith picture{position:absolute;inset:0}
.mono-glow{filter:brightness(0) drop-shadow(0 0 .35vw rgba(120,210,255,.55)) drop-shadow(0 0 2.2vw rgba(60,150,255,.35));
  animation:rim 7s ease-in-out infinite;transition:filter .6s}
.monolith:hover .mono-glow,.monolith:focus-visible .mono-glow{filter:brightness(0) drop-shadow(0 0 .5vw rgba(150,225,255,.8)) drop-shadow(0 0 3vw rgba(70,160,255,.55))}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-1.1%,0)}}
@keyframes rim{0%,100%{opacity:.55}50%{opacity:1}}

/* live reflection of the astronaut on the monolith's lit side face (positioned by main.js) */
.mono-refl{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  clip-path:polygon(83.4% 0.6%, 98.3% 3.1%, 98.3% 97.4%, 83.4% 99.2%)}
.monolith .mono-refl picture{position:static}
/* the wallpaper's own reflection, cut out at 1:1: plate px 2018,1215 → 2079,1525 */
.monolith .mono-refl img{position:absolute;inset:auto;left:81.57%;top:35.04%;width:18.43%;height:33.01%;
  transform-origin:52% 49.4%;will-change:transform}

/* astronaut — 2158,1218 → 2363,1551 */
.astro{position:absolute;left:56.2%;top:56.39%;width:5.34%;height:15.42%;
  animation:drift 34s ease-in-out infinite;transform-origin:50% 45%}
.astro img{width:100%;height:100%;display:block;filter:drop-shadow(0 0 .5vw rgba(255,200,170,.12))}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) rotate(0deg)}
  25% {transform:translate3d(8%,-5%,0) rotate(5deg)}
  50% {transform:translate3d(14%,2%,0) rotate(9deg)}
  75% {transform:translate3d(5%,6%,0) rotate(3deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}

.vignette{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% 46%, transparent 52%, rgba(2,4,9,.55) 80%, rgba(2,4,9,.92) 100%),
    linear-gradient(to bottom, rgba(2,4,9,.0) 62%, rgba(2,4,9,.55) 86%, rgba(2,4,9,.85) 100%)}

.scan{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(to bottom, rgba(140,220,255,.06) 0 1px, transparent 1px 3px);mix-blend-mode:screen}

/* ---------- neon title ---------- */
.title{position:absolute;z-index:6;left:0;right:0;top:var(--title-top);text-align:center;
  font-family:"Oxanium","Orbitron","Eurostile",system-ui,sans-serif;font-weight:300;
  font-size:var(--title-size);line-height:1;letter-spacing:.012em;white-space:nowrap;
  transform:translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px), 0);pointer-events:none}
.title .tube,.title .glow,.title .core{display:inline-block}
.title .core{position:absolute;left:0;right:0;color:transparent;-webkit-text-stroke:max(.6px,.01em) rgba(225,250,255,.92);
  animation:breathe 5.5s ease-in-out infinite}
.title .tube{position:relative;color:rgba(1,8,20,.62);
  -webkit-text-stroke:max(1.6px,.034em) #33c2ff;
  filter:drop-shadow(0 0 .03em rgba(120,220,255,.95)) drop-shadow(0 0 .11em rgba(20,140,255,.8)) drop-shadow(0 0 .3em rgba(10,100,255,.35));
  animation:breathe 5.5s ease-in-out infinite}
.title .glow{position:absolute;left:0;right:0;color:transparent;
  -webkit-text-stroke:.07em rgba(40,160,255,.9);filter:blur(.16em);opacity:.55;
  animation:halo 5.5s ease-in-out infinite}
.title .ch{display:inline-block;transition:opacity .05s}
.title .ch.off{opacity:.18}
.title .ch.dim{opacity:.55}
@keyframes breathe{0%,100%{opacity:.88}50%{opacity:1}}
@keyframes halo{0%,100%{opacity:.35}50%{opacity:.7}}
/* neon ignition on load */
.title.igniting .tube,.title.igniting .glow,.title.igniting .core{animation:ignite 2.2s steps(1,end) both}
@keyframes ignite{
  0%{opacity:0}8%{opacity:.7}10%{opacity:0}22%{opacity:.9}24%{opacity:.1}27%{opacity:.8}
  29%{opacity:0}45%{opacity:1}47%{opacity:.4}50%{opacity:1}100%{opacity:1}}
.title.flicker .tube{animation:flick .55s steps(1,end) 1}
.title.flicker .glow,.title.flicker .core{animation:flick .55s steps(1,end) 1}
@keyframes flick{0%{opacity:1}12%{opacity:.25}18%{opacity:.95}30%{opacity:.4}36%{opacity:1}62%{opacity:.7}68%{opacity:1}}

/* ---------- quote ---------- */
.quote{position:absolute;z-index:6;left:50%;bottom:max(5.5vh, 28px);width:min(92vw, 34em);
  font-size:clamp(1.15rem, .55rem + 1.25vw, 4.4rem);
  transform:translateX(-50%);text-align:center;pointer-events:none}
.quote blockquote p{font-family:"Cormorant","Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;
  font-size:1em;line-height:1.3;color:#e9f1f8;letter-spacing:.005em;
  text-shadow:0 0 18px rgba(2,6,14,.95),0 0 4px rgba(2,6,14,.9),0 0 26px rgba(90,190,255,.18);text-wrap:balance}
.quote .w{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.25em);
  transition:opacity 1.6s ease,filter 1.6s ease,transform 1.6s ease}
.quote.on .w{opacity:1;filter:blur(0);transform:none}
.quote figcaption{margin-top:.9em;font-family:"Jura",system-ui,sans-serif;text-transform:uppercase;
  font-size:max(.66rem,.4em);letter-spacing:.42em;color:rgba(130,215,255,.82);
  text-shadow:0 0 10px rgba(40,160,255,.45);opacity:0;transition:opacity 2.4s ease 0s}
.quote figcaption::before{content:"";display:inline-block;width:2.2em;height:1px;margin-right:1em;vertical-align:middle;
  background:linear-gradient(90deg,transparent,rgba(130,215,255,.8))}
.quote figcaption::after{content:"";display:inline-block;width:2.2em;height:1px;margin-left:.6em;vertical-align:middle;
  background:linear-gradient(90deg,rgba(130,215,255,.8),transparent)}
.quote.cap figcaption{opacity:1}

/* ---------- whisper ---------- */
.whisper{position:absolute;z-index:6;left:0;right:0;text-align:center;margin:0;bottom:max(2vh,10px);
  font-family:"Jura",ui-monospace,monospace;font-size:max(.62rem,.62vw);letter-spacing:.28em;
  text-transform:lowercase;color:rgba(140,205,240,.42);opacity:0;transition:opacity 3s ease}
.whisper.on{opacity:1}
.cursor{display:inline-block;margin-left:.15em;animation:blink 1.1s steps(1,end) infinite;color:rgba(120,220,255,.85)}
@keyframes blink{50%{opacity:0}}

/* ---------- transmission (monolith easter egg) ---------- */
.transmit .scan{animation:scan 2.6s ease-out}
.transmit .mono-glow{animation:surge 2.6s ease-out}
.transmit .bg img{filter:brightness(1.15) saturate(1.1)}
.transmit .whisper{color:rgba(170,235,255,.9)}
@keyframes scan{0%{opacity:0}6%{opacity:1}10%{opacity:.2}14%{opacity:.9}60%{opacity:.5}100%{opacity:0}}
@keyframes surge{0%{opacity:.6}8%{opacity:1;filter:brightness(0) drop-shadow(0 0 .8vw #bff) drop-shadow(0 0 5vw #39f)}100%{opacity:.6}}

/* ---------- portrait / phones ---------- */
@media (max-aspect-ratio: 4/5){
  :root{--shift:-18.5vh;--title-size:11.6vw;--title-top:6.5vh}
  .quote{bottom:max(7vh,36px);width:88vw}
  .whisper{left:0;right:0;text-align:center}
}
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4){
  :root{--shift:-7vh;--title-size:10vw;--title-top:12vh}
}

@media (orientation: landscape) and (max-height: 520px){
  :root{--shift:-8vh;--title-size:min(13vh, 8vw);--title-top:7vh}
  .quote{font-size:max(.9rem, 4.6vh);bottom:4vh;width:min(94vw, 40em)}
  .quote figcaption{margin-top:.5em}
  .whisper{display:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .bg img,.monolith,.astro,.mono-glow,.title .tube,.title .glow,.title .core,.cursor{animation:none!important}
  .quote .w{transition:opacity .8s ease;filter:none;transform:none}
  .title{transform:none}
}

/* ---------- the machine's name (star gate) ---------- */
.monolith{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.ear{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;
  font-size:16px;color:transparent;background:transparent;caret-color:transparent;pointer-events:none;z-index:-1}
.attune .mono-glow{opacity:1;filter:brightness(0) drop-shadow(0 0 .6vw rgba(190,240,255,.9)) drop-shadow(0 0 4vw rgba(80,170,255,.6))}
.awaken .mono-glow{animation:none;opacity:1;transition:filter 1.6s ease;
  filter:brightness(0) drop-shadow(0 0 .8vw #fff) drop-shadow(0 0 4vw #8df) drop-shadow(0 0 12vw #39f)}
.awaken .scan{animation:scan 2.6s ease-out infinite}
.awaken .whisper{color:rgba(190,240,255,.95);text-shadow:0 0 8px rgba(90,200,255,.6)}
.title.glitch .tube,.title.glitch .glow,.title.glitch .core{animation:glitch .9s steps(1,end) both}
@keyframes glitch{
  0%{opacity:1;transform:none}8%{opacity:.2;transform:translateX(.04em) skewX(-8deg)}12%{opacity:1;transform:translateX(-.06em)}
  20%{opacity:.6;transform:translateX(.02em) skewX(12deg);clip-path:inset(20% 0 45% 0)}26%{opacity:1;transform:none;clip-path:none}
  38%{opacity:.1}44%{opacity:.9;transform:translateX(-.03em)}52%{opacity:.3;clip-path:inset(55% 0 10% 0)}60%{opacity:1;clip-path:none;transform:none}
  72%{opacity:.15}80%{opacity:.7}88%{opacity:.05}100%{opacity:0}}
.title{transition:opacity .5s ease}
.title.dark{opacity:0}
.gate{position:fixed;inset:0;z-index:100;background:#000;opacity:0;transition:opacity 1.2s ease;cursor:default}
.gate.in{opacity:1}
.gate.out{opacity:0;transition:opacity 1.5s ease;pointer-events:none}
.gate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gate.calm{background:
  radial-gradient(60% 50% at 50% 50%, rgba(255,40,180,.35), transparent 70%),
  radial-gradient(80% 60% at 30% 60%, rgba(30,200,255,.30), transparent 70%),
  radial-gradient(70% 60% at 70% 40%, rgba(255,160,30,.22), transparent 70%), #02030a}
.gate.calm::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px 4px rgba(200,225,255,.9),0 0 60px 18px rgba(120,170,255,.35)}
.gate-line{position:absolute;left:0;right:0;top:calc(50% + 11vh);text-align:center;
  font-family:"Cormorant",Georgia,serif;font-style:italic;font-size:clamp(1.2rem,.6rem + 1.6vw,3.6rem);
  color:#eef4ff;letter-spacing:.04em;text-shadow:0 0 18px rgba(120,180,255,.5);opacity:0;transition:opacity 2.2s ease}
.gate-line.on{opacity:1}
@media (prefers-reduced-motion: reduce){
  .awaken .scan{animation:none}
  .gate,.gate.out{transition:opacity 2.5s ease}
}

/* ---------- contact ---------- */
.ctc{position:fixed;z-index:50;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(3px + env(safe-area-inset-bottom));font-family:"Jura",monospace;font-size:max(.6rem,.6vw);letter-spacing:.26em;text-transform:none;color:rgba(130,215,255,.82);background:transparent;border:1px solid transparent;border-radius:999px;padding:4px 10px;text-shadow:0 0 10px rgba(40,160,255,.45);cursor:pointer;transition:color .2s,text-shadow .2s}
.ctc:hover,.ctc:focus-visible{color:#5fdcff;text-shadow:0 0 8px rgba(95,220,255,.8);outline:none}.ctc:focus-visible{border-color:rgba(95,220,255,.5)}
.whisper{bottom:calc(max(2vh,10px) + 32px)!important}
@media (max-width:640px){.ctc{font-size:.6rem;letter-spacing:.24em}}
dialog.bc{margin:auto;inset:0;position:fixed;border:1px solid rgba(95,220,255,.5);border-radius:14px;background:rgba(3,8,16,.92);color:#c9f6ff;padding:26px 28px;width:min(440px,90vw);max-height:92dvh;overflow:auto;box-sizing:border-box;box-shadow:0 0 30px rgba(10,140,255,.35);font-family:"Jura",monospace}
dialog.bc::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.bc h2{margin:0 0 4px;font-family:"Oxanium",sans-serif;font-weight:300;letter-spacing:.12em;color:#5fdcff;text-shadow:0 0 8px rgba(95,220,255,.8);outline:none}
.bc .sub{margin:0 0 16px;font-family:"Cormorant",serif;font-style:italic;font-size:1.1rem;color:#9fdcf0}
.bc label{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;margin:12px 0 5px;color:#7fbcd0}
.bc input,.bc textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid rgba(95,220,255,.35);border-radius:8px;background:rgba(0,0,0,.5);color:#e6faff;font:inherit;font-size:16px}
.bc input:focus,.bc textarea:focus{outline:none;border-color:#5fdcff;box-shadow:0 0 10px rgba(95,220,255,.4)}
.bc textarea{min-height:110px;resize:vertical}
.bc .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bc .count{text-align:right;font-size:.62rem;color:#5f8fa0;margin-top:4px;letter-spacing:.1em}
.bc .row{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.bc button{padding:8px 18px;border-radius:999px;border:1px solid rgba(95,220,255,.45);background:transparent;color:#c9f6ff;font:inherit;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;cursor:pointer}
.bc button:focus-visible{outline:2px solid #5fdcff;outline-offset:2px}
.bc button.pri{background:#5fdcff;color:#03060c;box-shadow:0 0 14px rgba(95,220,255,.6)}
.bc button[disabled]{opacity:.55;cursor:wait}
.bc .msg{margin:14px 0 0;font-size:.8rem;letter-spacing:.08em;min-height:1em}
.bc .msg.err{color:#ff8fa3;text-shadow:0 0 6px rgba(255,90,120,.6)}
.bc .done{text-align:center;padding:18px 0 4px}
.bc .done .big{font-family:"Oxanium",sans-serif;font-weight:300;font-size:1.4rem;letter-spacing:.14em;color:#5fdcff;text-shadow:0 0 10px rgba(95,220,255,.9);margin:0 0 8px}
@media (min-width:641px){.quote{bottom:calc(max(5.5vh, 28px) + 33px)}}
@media (max-width:640px){.quote{bottom:calc(max(7vh,36px) + 21px)}}
.ctc{opacity:0;visibility:hidden;transition:opacity 2.5s ease,visibility 0s linear 2.5s,color .2s,text-shadow .2s}
.ctc.on{opacity:1;visibility:visible;transition:opacity 2.5s ease,visibility 0s,color .2s,text-shadow .2s}
@media (min-aspect-ratio: 16/9) and (min-height: 521px){
  :root{--lift:min(calc((56.25vw - 100vh) * .28 + 30px), calc(12vh - 18px));--shift:calc(-4vh - var(--lift));--title-top:calc(12vh - var(--lift))}
}
/* whisper pinned under the monolith (top set by contact.js) */
.whisper.pinned{bottom:auto!important}
@media (min-aspect-ratio: 21/9) and (min-height: 521px){.quote{bottom:calc(max(5.5vh, 28px) + 10px)}}
/* smaller quote, tucked just above the contact footer */
@media (min-height: 521px){
  .quote{font-size:clamp(.95rem, .45rem + 1vw, 3.5rem);bottom:calc(50px + env(safe-area-inset-bottom))!important}
  .quote figcaption{font-size:max(.56rem,.4em);margin-top:.6em}
}
@media (min-height: 521px){.ctc{bottom:calc(17px + env(safe-area-inset-bottom))}}
/* phones: quote sits one footer-line higher */
@media (max-aspect-ratio: 4/5) and (min-height: 521px){.quote{bottom:calc(63px + env(safe-area-inset-bottom))!important}}
/* desktop: larger contact link, quote nudged up to keep the gap */
@media (min-width: 641px) and (min-height: 521px){
  .ctc{font-size:max(.78rem,.78vw)}
  .quote{bottom:calc(55px + env(safe-area-inset-bottom))!important}
}