/* ==========================================================================
   HAUNEN — entry
   Deep space, rendered live: a nebula, a parallax starfield, a lit ringed
   world, orbital tracks with satellites, a rocket on a long burn, and
   meteors. Three plates fly in from the dark and tilt under the cursor.
   ========================================================================== */

:root{
  --ground:#03060F;
  --night:#070D1E;

  --text:#EDF2F8;
  --muted:#9FB2CC;
  --dim:#6D80A0;

  --gold:#F9CB33;
  --gold-l:#FFE87C;
  --gold-d:#EFA412;
  --aqua:#3FB8C4;
  --aqua-l:#7BE0E8;
  --violet:#7C5CE0;

  --line:rgba(255,255,255,.15);
  --line-soft:rgba(255,255,255,.05);

  --f-display:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Roboto Mono","SF Mono",Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(15px,.35vw + 14px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;            /* single screen — never scrolls */
}
a{color:inherit;text-decoration:none}
svg{display:block}

/* ==========================================================================
   the sky — one canvas, drawn at device resolution
   ========================================================================== */
#sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;display:block;
  opacity:0;transition:opacity 2s var(--ease-out);
}
.ready #sky{opacity:1}

.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(126% 96% at 50% 44%,transparent 44%,rgba(1,3,9,.8) 100%);
}
/* a pool of dark behind the stack, so type never fights the starfield */
.hearth{
  position:fixed;left:50%;top:50%;width:min(1080px,96vw);height:min(720px,90vh);
  transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;
  background:radial-gradient(56% 50% at 50% 50%,rgba(3,7,16,.8),rgba(3,7,16,.4) 60%,transparent 78%);
}
.seam{
  position:fixed;left:0;right:0;top:0;height:1px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(249,203,51,.55),transparent);
  transform:scaleX(0);animation:seamIn 1.6s var(--ease-out) .1s forwards;
}
@keyframes seamIn{to{transform:scaleX(1)}}

/* ==========================================================================
   stage — everything below lives inside one perspective
   ========================================================================== */
.stage{
  position:relative;z-index:2;
  height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(18px,3.5vh,54px) clamp(18px,5vw,48px);
  text-align:center;
  perspective:1150px;
  perspective-origin:50% 45%;
}
.deck{
  width:100%;display:flex;flex-direction:column;align-items:center;
  transform-style:preserve-3d;
  will-change:transform;
}

/* ---------- wordmark ---------- */
.brand{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(27px,3.4vw + 1.6vh,52px);letter-spacing:.16em;
  margin:0 0 8px;padding-left:.16em;
  display:flex;justify-content:center;
  transform-style:preserve-3d;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.8));
}
.brand i{
  font-style:normal;display:inline-block;
  /* one continuous gradient across the word; each letter shows its own slice */
  background-image:linear-gradient(96deg,
    #FFFFFF 0%,
    #C9DBED 32%,
    var(--gold) 38.5%,
    var(--gold-d) 52%,
    var(--gold) 65%,
    #C9DBED 70.5%,
    #DCE8F4 84%,
    #EAF2FA 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(28px) rotateX(-88deg);
  transform-origin:50% 100%;
  animation:letterIn .95s var(--ease-out) forwards;
  animation-delay:calc(.18s + var(--i) * .075s);
}
@keyframes letterIn{to{opacity:1;transform:none}}

.tagline{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);margin:0 0 clamp(18px,4vh,50px);
  opacity:0;animation:rise 1s var(--ease-out) .72s forwards;
}
@keyframes rise{to{opacity:1;transform:none}}

/* ==========================================================================
   plates
   ========================================================================== */
.ovals{
  width:100%;max-width:680px;
  display:flex;flex-direction:column;gap:clamp(10px,2.2vh,24px);
  transform-style:preserve-3d;
}

/* the slot handles the fly-in, the plate handles the tilt — kept apart so
   the two transforms never fight each other */
.slot{
  transform-style:preserve-3d;
  opacity:0;
  transform:translate3d(0,42px,-620px) rotateX(-34deg);
  animation:slotIn 1.15s var(--ease-out) forwards;
  animation-delay:calc(.62s + var(--i) * .34s);
}
@keyframes slotIn{to{opacity:1;transform:none}}

.oval{
  position:relative;display:block;
  min-height:clamp(74px,13.5vh,132px);
  padding:clamp(14px,2.2vh,24px) 62px;
  border-radius:999px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  isolation:isolate;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .45s var(--ease-out);
}

/* smoked glass, so the sky reads through the plate without eating the type */
.oval .pane{
  position:absolute;inset:0;border-radius:999px;z-index:-1;
  background:linear-gradient(180deg,rgba(14,22,44,.6),rgba(4,8,18,.78));
  -webkit-backdrop-filter:blur(9px) saturate(120%);
  backdrop-filter:blur(9px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* the drawn outline */
.oval .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.oval .ring rect{
  fill:none;
  stroke:var(--stroke,rgba(255,255,255,.4));
  stroke-width:1.4;
  stroke-linecap:round;
  transition:stroke-dashoffset 1.15s var(--ease-out),stroke .4s var(--ease),stroke-width .4s var(--ease);
}
.oval:hover .ring rect{stroke:var(--accent);stroke-width:1.8}

/* fill that blooms on hover */
.oval::before{
  content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;
  background:
    radial-gradient(360px 150px at var(--mx,50%) var(--my,50%),var(--wash),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  opacity:0;transition:opacity .45s var(--ease);
}
.oval:hover::before{opacity:1}

/* soft outer halo, pushed behind the plate in space */
.oval::after{
  content:"";position:absolute;inset:-2px;border-radius:999px;z-index:-2;
  box-shadow:0 26px 60px -28px var(--accent);
  opacity:0;transition:opacity .45s var(--ease);
  transform:translateZ(-30px);
}
.oval:hover::after{opacity:.85}

/* a specular sheen that slides across the glass as the plate turns */
.glare{
  position:absolute;inset:0;border-radius:999px;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%);
  background-size:260% 100%;
  background-position:var(--glare,50%) 0;
  opacity:0;transition:opacity .45s var(--ease);
  mix-blend-mode:screen;
}
.oval:hover .glare{opacity:1}

/* content, lifted off the plate so it reads as engraved above the surface */
.oval .inner{
  position:relative;z-index:2;
  transform:translateZ(26px);
  opacity:0;
  transition:opacity .7s var(--ease-out);
}
.oval h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(16.5px,1.3vw + .8vh,25px);letter-spacing:-.01em;line-height:1.15;
  margin:0 0 5px;color:#F6FAFE;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.oval p{
  margin:0 auto;font-size:clamp(13px,1vw + .55vh,18px);font-weight:400;
  line-height:1.4;color:var(--muted);max-width:36ch;
  transition:color .4s var(--ease);
}
.oval:hover p{color:#CBDAE8}

/* arrow that slides out on hover */
.oval .arw{
  position:absolute;right:26px;top:50%;z-index:2;
  width:34px;height:34px;margin-top:-17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--muted);
  transform:translateZ(34px) translateX(-8px);
  opacity:0;
  transition:opacity .4s var(--ease),transform .5s var(--ease-back),
             background .4s,color .4s,border-color .4s;
}
.oval .arw svg{width:15px;height:15px}
.oval:hover .arw{
  opacity:1;transform:translateZ(34px) translateX(0);
  color:var(--accent);border-color:var(--accent);
  background:var(--wash);
}
.oval:focus-visible{outline:none}
.oval:focus-visible .ring rect{stroke:var(--accent);stroke-width:2.2}
.oval:focus-visible::before{opacity:1}
.oval:focus-visible .arw{opacity:1;transform:translateZ(34px) translateX(0)}

/* per-plate accents */
.oval.v1{--accent:var(--gold);   --wash:rgba(249,203,51,.16); --stroke:rgba(249,203,51,.45)}
.oval.v2{--accent:var(--aqua-l); --wash:rgba(63,184,196,.16); --stroke:rgba(63,184,196,.45)}

/* third plate — coming soon, not clickable */
.oval.v3{
  --accent:#8497B5; --wash:rgba(255,255,255,.05); --stroke:rgba(255,255,255,.22);
  cursor:default;min-height:clamp(58px,9vh,92px);
}
.oval.v3::after{display:none}
.oval.v3 .ring rect{stroke-dasharray:none}
.oval.v3 h2{
  font-family:var(--f-mono);font-weight:400;
  font-size:clamp(12px,1.2vw,14px);letter-spacing:.26em;text-transform:uppercase;
  color:#8FA2BE;margin:0;
}
.oval.v3 .pulse{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-right:11px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(249,203,51,.6);animation:pip 2.6s infinite;
}
@keyframes pip{
  0%{box-shadow:0 0 0 0 rgba(249,203,51,.55)}
  70%{box-shadow:0 0 0 10px rgba(249,203,51,0)}
  100%{box-shadow:0 0 0 0 rgba(249,203,51,0)}
}

/* revealed state, set by script */
.oval.show .inner{opacity:1}

/* ---------- closing quote ---------- */
.quote{
  margin:clamp(20px,4.2vh,58px) auto 0;
  max-width:44ch;position:relative;
  font-family:var(--f-display);font-weight:600;font-style:italic;
  font-size:clamp(13.5px,1.1vw + .7vh,21px);line-height:1.4;letter-spacing:-.005em;
  color:#BFD0E4;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
  opacity:0;transform:translateY(12px);
  animation:rise 1.1s var(--ease-out) 2.6s forwards;
}
.quote::before,.quote::after{
  content:"";position:absolute;top:50%;width:clamp(26px,5vw,58px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(249,203,51,.55),transparent);
}
.quote::before{right:calc(100% + 20px)}
.quote::after{left:calc(100% + 20px)}
.quote b{
  font-weight:700;
  background:linear-gradient(100deg,var(--gold-l),var(--gold-d) 70%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- footer ---------- */
.foot{
  margin-top:clamp(14px,2.6vh,36px);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#5A6F8E;opacity:0;animation:rise 1s var(--ease-out) 3s forwards;
}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .oval{padding:20px 26px;border-radius:60px}
  .oval .arw{display:none}
  .ovals{gap:14px}
  .quote::before,.quote::after{display:none}
  .quote{max-width:32ch}
}
@media (max-height:640px){
  .tagline{margin-bottom:14px}
  .oval{padding:12px 54px;border-radius:999px}
  .quote{margin-top:16px}
  .foot{margin-top:12px}
}
@media (max-height:500px){
  .tagline,.foot{display:none}
  .oval .arw{right:18px}
  .quote{margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .brand i,.tagline,.quote,.foot,.slot{opacity:1;transform:none}
  .seam{transform:scaleX(1)}
  .oval .inner{opacity:1}
}