/* =====================================================================
   OPTION B — "CENTRE STAGE"
   The landing page as an empty stage moments before curtain-up:
   a spotlight warms up from the rig, the logo stands on a glossy
   dance floor (with its reflection), stage spike-tape marks the
   positions, and a slanted ticker carries the call to action.
   Builds on styles.css tokens.
   ===================================================================== */

.stage {
  --px: 0; --py: 0;           /* pointer, -1..1, eased in the page script */
  --floor-h: 40vh;
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr var(--floor-h) auto;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #0b0b0c 0%, #000 70%);
}

/* ---------- Lighting rig ---------- */
.stage__beam {
  position: absolute; z-index: -1; pointer-events: none;
  top: -6vh; left: 50%; width: 76vw; height: calc(100vh - var(--floor-h) + 26vh);
  transform-origin: 50% 0;
  transform: translateX(-50%) rotate(calc(var(--px) * -7deg));
  background: linear-gradient(to bottom, rgba(255,255,255,.26), rgba(255,255,255,.07) 55%, rgba(255,255,255,.02) 85%, transparent);
  clip-path: polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%);
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity: 0;
}
.stage__lamp {
  position: absolute; z-index: -1; top: -14px; left: 50%; width: 150px; height: 38px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, #fff 0%, rgba(255,255,255,.55) 30%, transparent 70%);
  filter: blur(4px); opacity: 0;
}
.stage__pool {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: calc(var(--floor-h) * .38 + 52px); width: 70vw; height: 22vh;
  transform: translate(calc(-50% + var(--px) * 7vw), 50%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 40%, transparent 70%);
  opacity: 0;
}
.stage.is-lit .stage__beam,
.stage.is-lit .stage__lamp,
.stage.is-lit .stage__pool { animation: lights-up 2.2s steps(1, end) forwards, warm 2.2s ease-out forwards; }
@keyframes lights-up {      /* a quick tungsten flicker as the lamp strikes */
  0% { opacity: 0; } 8% { opacity: .5; } 12% { opacity: .05; } 20% { opacity: .7; } 24% { opacity: .2; } 30% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes warm { from { filter: blur(22px) brightness(.6); } to { filter: blur(22px) brightness(1); } }
.stage__lamp { animation-name: lights-up !important; }

/* Giant outlined year behind everything */
.stage__year {
  position: absolute; z-index: -2; left: 50%; top: 46%;
  transform: translate(calc(-50% + var(--px) * -18px), calc(-50% + var(--py) * -10px));
  margin: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: min(44vw, 82vh); line-height: .8; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.11);
  opacity: 0; animation: fade-in 2.4s var(--ease) 1.2s forwards;
}

/* Opacity-only entrance for elements that carry their own transform */
.fade { opacity: 0; animation: fade-in 1.6s var(--ease) var(--d, 0s) forwards; }
@keyframes fade-in { to { opacity: 1; } }
.stage__reflection.fade { animation-name: fade-reflect; }
@keyframes fade-reflect { to { opacity: .2; } }

/* ---------- Top bar ---------- */
.stage__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px var(--gutter);
  font-size: 12px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
}
.stage__bar .text-link { color: var(--text); }

/* ---------- Upstage: logo ---------- */
.stage__upper {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 var(--gutter) 0; text-align: center;
}
.stage__eyebrow { margin-bottom: clamp(26px, 4vh, 44px); color: var(--text); }
.stage__eyebrow span { color: var(--faint); }
.stage__logo { width: min(900px, 70vw); margin: 0; position: relative; }
.stage__logo img { width: 100%; filter: drop-shadow(0 0 24px rgba(255,255,255,.18)); }

/* ---------- The floor ---------- */
.stage__floor { position: relative; perspective: 520px; perspective-origin: 50% 0; }
.stage__floor::before { /* stage edge / horizon */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 30%, rgba(255,255,255,.55) 70%, transparent);
  box-shadow: 0 0 18px rgba(255,255,255,.35);
}
.stage__plane {
  position: absolute; left: -100%; right: -100%; top: 0; height: 260%;
  transform-origin: 50% 0; transform: rotateX(76deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 7.5vw),           /* floor seams */
    linear-gradient(to bottom, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, transparent);   /* gloss */
  -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 35%, transparent 75%);
          mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 35%, transparent 75%);
}
.stage__reflection {
  position: absolute; left: 50%; top: 2px; width: min(900px, 70vw);
  transform: translateX(-50%) scaleY(-1); transform-origin: 50% 50%;
  opacity: .2; filter: blur(1.5px);
  -webkit-mask: linear-gradient(to top, rgba(0,0,0,.9), transparent 70%);
          mask: linear-gradient(to top, rgba(0,0,0,.9), transparent 70%);
  pointer-events: none;
}

/* Spike tape — the marks dancers use to find their spot */
.spike { position: absolute; width: 26px; height: 26px; opacity: .55; transform: rotate(var(--r, 0deg)); }
.spike::before, .spike::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 4px; border-radius: 1px;
  background: #fff; transform: translate(-50%, -50%);
}
.spike::after { transform: translate(-50%, -50%) rotate(90deg); }
.spike--sm { width: 18px; height: 18px; opacity: .35; }

/* Downstage: headline + action */
.stage__call {
  position: absolute; left: 0; right: 0; bottom: 18%; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 56px);
  padding: 0 var(--gutter);
}
.stage__headline {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(48px, 5.6vw, 88px); line-height: .9; text-transform: uppercase; text-align: right;
  letter-spacing: .005em;
}
.stage__headline em { font-style: italic; color: transparent; -webkit-text-stroke: 1.5px #fff; }
.stage__rule { width: 1px; align-self: stretch; background: linear-gradient(transparent, rgba(255,255,255,.6), transparent); }
.stage__action { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; }
.stage__action p { margin: 0; color: var(--muted); font-weight: 300; font-size: 16px; max-width: 30ch; line-height: 1.5; }
.stage__cta { --pad-y: 20px; --pad-x: 40px; font-size: 14px; }
.stage__cta svg { width: 24px; height: 24px; }

/* ---------- Ticker ---------- */
.ticker {
  display: block; position: relative; z-index: 3; text-decoration: none;
  margin: 0 -4vw -6px; padding: 0;
  transform: rotate(-2.2deg) translateY(-18px);
  background: #fff; color: #000; overflow: hidden;
  box-shadow: 0 -20px 60px rgba(255,255,255,.08);
}
.ticker__track {
  display: flex; width: max-content; padding: 15px 0 14px;
  animation: ticker 38s linear infinite;
}
.ticker:hover .ticker__track, .ticker:focus-visible .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex; align-items: center; gap: 36px; padding-right: 36px; white-space: nowrap;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 26px;
  letter-spacing: .06em; text-transform: uppercase;
}
.ticker__item i { font-style: normal; font-size: 16px; }
.ticker__item .o { color: transparent; -webkit-text-stroke: 1.2px #000; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Stage frame corners (like gaffer-tape corners on a marked stage) */
.corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255,255,255,.35); z-index: 2; pointer-events: none; }
.corner--tl { top: 16px; left: 16px; border-top-width: 1.5px; border-left-width: 1.5px; }
.corner--tr { top: 16px; right: 16px; border-top-width: 1.5px; border-right-width: 1.5px; }


/* ---------- Phones & small tablets ---------- */
@media (max-width: 720px) {
  .stage { --floor-h: 52svh; }
  .stage__bar { padding: 24px var(--gutter); font-size: 11px; }
  .stage__beam { width: 130vw; }
  .stage__pool { width: 120vw; }
  .stage__logo, .stage__reflection { width: 86vw; }
  .stage__eyebrow { margin-bottom: 22px; }
  .stage__call {
    flex-direction: column; gap: 18px; bottom: auto; top: 16%;
    text-align: center;
  }
  .stage__headline { text-align: center; font-size: clamp(52px, 15vw, 68px); }
  .stage__rule { width: 56px; height: 1px; align-self: center; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
  .stage__action { align-items: center; text-align: center; gap: 18px; }
  .stage__action p { font-size: 15px; max-width: 28ch; }
  .stage__cta { --pad-y: 17px; --pad-x: 30px; font-size: 13px; white-space: nowrap; }
  .stage__cta svg { width: 20px; height: 20px; }
  .stage__buttons { justify-content: center; }
  .spike--sm { display: none; }
  .spike { opacity: .3; }
  .ticker__track { padding: 12px 0 11px; }
  .ticker__item { font-size: 20px; gap: 26px; padding-right: 26px; }
  .ticker__item i { font-size: 13px; }
  .corner { width: 16px; height: 16px; top: 12px; }
  .corner--tl { left: 12px; } .corner--tr { right: 12px; }
}
@media (max-width: 720px) and (max-height: 640px) {
  .stage { --floor-h: 58svh; }
  .stage__call { top: 8%; gap: 12px; }
  .stage__headline { font-size: 46px; }
}

/* Phones turned sideways: let the stage scroll instead of squashing it */
@media (max-height: 520px) and (orientation: landscape) {
  .stage { --floor-h: 320px; min-height: 0; }
  .stage__upper { padding-top: 28px; }
  .stage__logo, .stage__reflection { width: min(560px, 60vw); }
}

@media (prefers-reduced-motion: reduce) {
  .stage__beam, .stage__lamp, .stage__pool, .stage__year { opacity: 1 !important; animation: none !important; }
  .ticker__track { animation: none; }
}