/* © 2026 Dennis Andres */
.stage { --px: 0; --py: 0; position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-rows: auto auto; padding-top: calc(var(--cc-header) + clamp(32px, 6vh, 72px)); color: var(--cc-snow); background: var(--cc-plum-deep); }
.stage-sky { position: absolute; z-index: -4; inset: 0; }
.stage-sky-img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 64%; transform: scaleX(-1); animation: stage-sky-in 1.8s var(--cc-ease) both; }
.stage-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 5, 20, .9) 0%, rgba(14, 5, 20, .74) 34%, rgba(14, 5, 20, .2) 64%, rgba(14, 5, 20, .12) 100%), linear-gradient(0deg, rgba(14, 5, 20, .9) 0%, rgba(14, 5, 20, 0) 40%), linear-gradient(180deg, rgba(14, 5, 20, .6), transparent 24%); }
.stage-sun { position: absolute; z-index: -3; top: 6%; right: 4%; width: min(52vw, 780px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 154, 90, .5), rgba(255, 59, 141, .24) 46%, transparent 72%); animation: stage-sun 9s ease-in-out infinite alternate; pointer-events: none; }
.stage-plane { position: absolute; z-index: -2; top: 20%; left: 0; width: clamp(260px, 24vw, 460px); opacity: 0; animation: stage-plane 24s linear 1.2s infinite; pointer-events: none; }
.stage-plane img { width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(4, 1, 8, .45)); }

.stage-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; min-height: min(640px, calc(100svh - var(--cc-header) - 220px)); gap: clamp(28px, 4vw, 72px); padding-bottom: clamp(16px, 3vh, 40px); }
.stage-copy { display: grid; gap: 22px; justify-items: start; max-width: 700px; }
.stage-kicker { animation: stage-fade-in .8s var(--cc-ease) both; }
.stage-title { font-size: clamp(2.9rem, 1rem + 5vw, 6.1rem); letter-spacing: -.06em; line-height: .9; text-transform: uppercase; }
.stage-title > span:not(.kw) .kw-i { color: transparent; background: linear-gradient(100deg, #ff5fb3, #ffa36f); -webkit-background-clip: text; background-clip: text; }
.kw { display: inline-block; overflow: clip; vertical-align: top; margin: -.04em -.03em -.1em; padding: .04em .03em .1em; }
.kw-i { display: inline-block; animation: kw-rise .95s var(--cc-ease) both; }
.kw-2 .kw-i { animation-delay: 70ms; }
.kw-3 .kw-i { animation-delay: 140ms; }
.kw-4 .kw-i { animation-delay: 210ms; }
.kw-5 .kw-i { animation-delay: 280ms; }
.kw-6 .kw-i { animation-delay: 350ms; }
.kw-7 .kw-i { animation-delay: 420ms; }
.kw-8 .kw-i { animation-delay: 490ms; }
.kw-9 .kw-i, .kw-10 .kw-i, .kw-11 .kw-i, .kw-12 .kw-i { animation-delay: 560ms; }
.stage-lead { color: #f2e6f4; animation: stage-fade-in .9s var(--cc-ease) .45s both; }
.stage-actions { animation: stage-fade-in .9s var(--cc-ease) .6s both; }
.stage-actions .btn { min-height: 56px; padding-inline: 26px; }

.stage-side { display: grid; justify-items: center; gap: 26px; }
.stage-logo { width: min(540px, 100%); translate: calc(var(--px) * 10px) calc(var(--py) * 8px); transition: translate .8s var(--cc-ease); animation: stage-logo-in 1.1s var(--cc-ease) .15s both; }
.stage-logo img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(255, 59, 141, .35)); }
.stage-clock { display: grid; gap: 12px; width: min(480px, 100%); animation: stage-fade-in .9s var(--cc-ease) .75s both; }
.stage-clock .countdown.is-coarse, .dates-clocks .countdown.is-coarse { width: auto; min-width: 0; justify-self: stretch; }
.is-beta + .countdown.is-coarse { gap: 6px; padding-block: 14px; }
.is-beta + .countdown.is-coarse .countdown-value { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); }
.stage-crowd { position: relative; z-index: 1; margin-top: -48px; translate: calc(var(--px) * -16px) 0; transition: translate .9s var(--cc-ease); pointer-events: none; }
.stage-crowd-img { width: 100%; max-width: none; height: auto; transform-origin: 50% 100%; animation: stage-crowd-in 1.3s var(--cc-ease) .2s both; }

.countdown { display: grid; gap: 12px; padding: 18px 22px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--cc-r-lg); color: var(--cc-snow); background: rgba(16, 7, 22, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.countdown.is-beta { border-color: rgba(53, 201, 238, .5); }
.countdown.is-beta .countdown-label { color: #8fe3f7; }
.countdown-label { color: var(--cc-pink-soft); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.countdown-cell { display: grid; gap: 2px; padding: 2px 14px; border-left: 1px solid rgba(255, 255, 255, .16); text-align: left; }
.countdown-cell:first-child { padding-left: 0; border-left: 0; }
.countdown-value { font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.75rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-unit { color: var(--cc-snow-soft); font-size: .75rem; font-weight: 700; }
.countdown-note { color: var(--cc-snow-soft); font-size: .875rem; }
.countdown.is-coarse { width: fit-content; min-width: min(360px, 100%); max-width: 100%; justify-self: center; }
.is-coarse .countdown-grid { grid-template-columns: minmax(0, 1fr); }
.is-coarse .countdown-cell { display: flex; align-items: baseline; gap: 12px; padding: 0; }
.is-coarse .countdown-value { font-size: clamp(2.6rem, 1.8rem + 2vw, 3.5rem); }
.is-coarse .countdown-unit { font-size: 1rem; }

@keyframes kw-rise { from { opacity: 0; translate: 0 105%; } to { opacity: 1; translate: 0 0; } }
@keyframes stage-fade-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes stage-sky-in { from { scale: 1.08; } to { scale: 1; } }
@keyframes stage-logo-in { from { scale: .94; } to { scale: 1; } }
@keyframes stage-crowd-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes stage-sun { from { opacity: .7; scale: .96; } to { opacity: 1; scale: 1.04; } }
@keyframes stage-plane { 0% { opacity: 0; transform: translate3d(46vw, 5vh, 0) scale(.6); } 12% { opacity: .85; } 86% { opacity: .75; } 100% { opacity: 0; transform: translate3d(108vw, -7vh, 0) scale(.95); } }
@keyframes stage-plane-wide { 0% { opacity: 0; transform: translate3d(-60vw, 3vh, 0) scale(.7); } 12% { opacity: .85; } 86% { opacity: .75; } 100% { opacity: 0; transform: translate3d(120vw, -4vh, 0) scale(.95); } }
@keyframes stage-sky-scroll { to { transform: translateY(16%); } }
@keyframes stage-side-scroll { to { transform: translateY(-14%); } }
@keyframes stage-copy-scroll { to { opacity: .4; transform: translateY(-8%); } }
@keyframes stage-crowd-scroll { to { transform: translateY(-10%); } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage-sky { animation: stage-sky-scroll linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .stage-side, .stage-copy, .stage-crowd { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 0 120vh; }
    .stage-side { animation-name: stage-side-scroll; }
    .stage-copy { animation-name: stage-copy-scroll; }
    .stage-crowd { animation-name: stage-crowd-scroll; }
  }
}

@media (max-width: 1023px) {
  .stage { min-height: 0; padding-top: calc(var(--cc-header) + 28px); }
  .stage-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .stage-side { display: contents; }
  .stage-logo { order: -1; width: min(420px, 80vw); justify-self: center; }
  .stage-copy { order: 1; max-width: none; }
  .stage-clock { order: 2; width: 100%; }
  .stage-sky::after { background: linear-gradient(0deg, rgba(14, 5, 20, .95) 0%, rgba(14, 5, 20, .7) 50%, rgba(14, 5, 20, .5) 100%); }
  .stage-plane { top: calc(var(--cc-header) + 64px); width: 56vw; animation-name: stage-plane-wide; }
  .stage-crowd { margin-top: 12px; }
  .stage-crowd-img { width: 190%; margin-left: -45%; }
}
@media (max-width: 520px) {
  .stage-title { font-size: clamp(2.5rem, 11.4vw, 3.3rem); }
  .countdown { padding: 14px 16px; }
  .countdown-cell { padding: 2px 8px; }
  .countdown-value { font-size: 1.6rem; }
}