:root{color-scheme:dark;font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 38%,#272a36 0%,#151721 48%,#0b0c12 100%);color:#fff;min-height:100svh;display:grid;place-items:center}
main{width:min(100%,1150px);padding:clamp(20px,4vw,48px) 16px 42px;text-align:center}
.stage{position:relative;width:100%;aspect-ratio:1776/886;isolation:isolate}
.stage img{position:absolute;height:auto;display:block;pointer-events:none;user-select:none}
.letters{width:100%;left:0;top:0;z-index:4}
.headlamp{width:18.2%;left:53.1%;top:31.8%;z-index:2;transform-origin:50% 50%}
.mirror{width:22%;left:69.6%;top:5.5%;z-index:0;transform-origin:9% 91%}
.rays{width:12.4%;left:57.2%;top:17%;z-index:5;filter:drop-shadow(0 0 14px #fff4c0)}
.glow{position:absolute;z-index:1;width:31%;aspect-ratio:1;left:46.5%;top:23%;border-radius:50%;background:radial-gradient(circle,rgba(255,183,36,.42),rgba(255,172,23,.1) 45%,transparent 72%);pointer-events:none}
.copy{margin-top:-2%;position:relative;z-index:6}
.tagline{font-size:clamp(25px,4.2vw,50px);letter-spacing:-.04em;font-weight:800;margin:0}
.description{font-size:clamp(15px,1.6vw,19px);color:#d0d1db;line-height:1.6;max-width:580px;margin:18px auto 0}
.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 25px;margin-top:26px}
.contact a{color:#ffcc6c;text-underline-offset:4px}
.controls{margin-top:34px}
button{border:1px solid #ffffff4b;background:#ffffff13;border-radius:999px;padding:12px 22px;color:#fff;font:inherit;cursor:pointer}
button:hover{background:#ffffff27}
button:focus-visible,a:focus-visible{outline:3px solid #ffca55;outline-offset:4px}
.hint{font-size:12px;color:#8f91a1;margin:12px 0 0}


/* Headlamp approaches from the distance, accelerating toward the viewer. Other layers follow after its arrival. */
.play .headlamp{animation:lamp 1.65s cubic-bezier(.55,.02,.82,.52) both}
.play .glow{animation:light 1s 1.32s both}
.play .letters{animation:rope 1.05s 1.78s cubic-bezier(.2,1.2,.35,1) both}
.play .mirror{animation:mirror .85s 2.48s cubic-bezier(.2,1.25,.4,1) both}
.play .rays{animation:rays .8s 3.05s both}
.copy.play{animation:reveal .75s 3.65s both}
.copy.play .description{animation:reveal .7s 3.95s both}
.copy.play .contact{animation:reveal .7s 4.15s both}

@keyframes lamp{0%{opacity:.12;transform:translateY(-18%) scale(.075);filter:blur(5px)}
18%{opacity:.5;filter:blur(3px)}
65%{opacity:1;filter:blur(0)}
88%{transform:translateY(0) scale(1.045)}
100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes rope{0%{opacity:0;transform:translateY(-30%) scaleX(.83) scaleY(1.16)}
50%{opacity:1;transform:translateY(5%) scaleX(1.025) scaleY(.94)}
72%{transform:translateY(-2%) scaleX(.99) scaleY(1.02)}
100%{opacity:1;transform:none}
}
@keyframes mirror{0%{opacity:0;transform:rotate(35deg) translateY(-15%)}
65%{opacity:1;transform:rotate(-7deg)}
100%{opacity:1;transform:none}
}
@keyframes rays{0%,15%{opacity:0;transform:scale(.5)}
38%{opacity:1;transform:scale(1.25)}
60%{opacity:.55;transform:scale(.93)}
100%{opacity:1;transform:scale(1)}
}
@keyframes light{0%{opacity:0;transform:scale(.5)}
45%{opacity:1;transform:scale(1.2)}
100%{opacity:.75;transform:scale(1)}
}
@keyframes reveal{from{opacity:0;transform:translateY(18px)}
to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){.play *{animation:none!important}
.play .glow{opacity:.75}
}
/* Reveal Replay button after the intro finishes */
#replayBtn {
  opacity: 0;
  animation: replay-reveal 0.6s ease-out 4.2s both;
}

@keyframes replay-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Reveal copyright after the intro completes */
footer {
  opacity: 0;
  animation: footer-reveal 0.6s ease-out 4.8s both;
}

@keyframes footer-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}