/* STAGECOCKPIT launch countdown ("Blackout").
 * The numbers only, over a faint crowd backdrop. Three moving heads sweep through the haze;
 * the centre one carries the highlight across the digits (same 7s timing as clock-sweep).
 * The STAGECOCKPIT lockup sits under the clock, above the launch date; the legal link bottom right.
 * The moving heads keep their pace to the end; the clock stops at 00 00 00 00.
 * Values follow the STAGECOCKPIT website design tokens (stagecockpit-website, src/tokens.css).
 */

/* Self-hosted fonts: Inter Tight, the typeface of logo variant 24 (Latin subset,
 * SIL Open Font License, see assets/fonts/OFL-InterTight.txt).
 * 600 the countdown digits, 700 labels, date and links (the claim style), 900 the wordmark. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/inter-tight-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/inter-tight-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./assets/fonts/inter-tight-900.woff2") format("woff2");
}

:root {
  --amber-rgb: 255, 204, 0;
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;

  --black: rgb(var(--black-rgb));
  --black-56: rgba(var(--black-rgb), 0.57);
  --black-72: rgba(var(--black-rgb), 0.72);
  --black-88: rgba(var(--black-rgb), 0.88);
  --white-16: rgba(var(--white-rgb), 0.15);
  --white-22: rgba(var(--white-rgb), 0.22);
  --white-24: rgba(var(--white-rgb), 0.24);
  --white-32: rgba(var(--white-rgb), 0.32);
  --text: #d8d8dc;
  --text-strong: #f4f4f4;
  --wordmark-on-dark: #ffffff;
  --text-muted-strong: rgba(var(--white-rgb), 0.52);
  --amber-text: #ffe187;
  --amber-text-soft: rgba(var(--amber-rgb), 0.72);
  --amber-tint: rgba(var(--amber-rgb), 0.08);
  --amber-glow-soft: rgba(var(--amber-rgb), 0.11);
  --amber-soft: rgba(var(--amber-rgb), 0.15);
  --amber-glow-strong: rgba(var(--amber-rgb), 0.18);

  --display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --brand-display: var(--display);

  /* Inter Tight is wider than a condensed face: 14vw keeps four groups on one line at 360 px;
     the cap stops the digits taking over a desktop screen */
  --clock-size: clamp(2.4rem, 14vw, 7rem);
  --brand-size: clamp(1.3rem, 2.6vw, 2.1rem);
  --text-3xs: 0.75rem;
  --text-xs: 0.85rem;
  --text-2xs: 0.8rem;
  --text-lg: 1.05rem;
  --text-2xl: 1.2rem;
  --date-size: 1rem;

  /* Layout rhythm: the clock is one block, lockup and date a second one, with real air between. */
  --clock-gap: clamp(14px, 3vw, 44px);
  --clock-label-gap: clamp(10px, 1.5vh, 18px);
  --block-gap: clamp(56px, 10vh, 104px);
  --date-gap: clamp(16px, 2.4vh, 26px);

  --leading-1: 0.9;
  --leading-wordmark: 1;

  --tracking-wordmark: 0.01em;
  --tracking-label-sm: 0.08em;
  --tracking-label: 0.2em;
  --tracking-digits: -0.02em;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-12: 48px;

  --rig-opacity: 0.72;
  --brand-mark-opacity: 1;
  --beam-side-opacity: 0.52;
  --fade-slow: opacity 1000ms ease;
  --fade-quick: color 160ms ease;
  --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Entrance, one after another: countdown, then the STAGECOCKPIT lockup, then the launch date,
     and last the moving heads fade up slowly. */
  --reveal-clock: reveal 2.4s var(--ease-reveal) both;
  --reveal-brand: reveal 2s 1.6s var(--ease-reveal) both;
  --reveal-date: reveal 2s 2.8s var(--ease-reveal) both;
  /* backwards, not both: once faded in, .rig's own opacity takes over */
  --reveal-rig: rig-in 5s 3.6s ease-in-out backwards;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--black);
}

/* At launch the screen goes to black and the website comes out of the same black (countdown.js, src/site.css). */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--black);
  opacity: 0;
  transition: opacity 900ms ease-in;
  pointer-events: none;
}

html.is-launching::after {
  opacity: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--black);
  color: var(--text);
  font-family: var(--display);
  font-weight: 700;
  text-align: center;
}

/* Crowd in the fog, barely visible and still. */
.screen::before {
  content: "";
  /* fixed, so the backdrop does not add scrollbars. Overshoot the viewport:
     a blurred layer fades out at its own edges and would leave a dark rim. */
  position: fixed;
  inset: -60px;
  background: url("./assets/images/audience-background.jpg") center bottom / cover no-repeat;
  filter: grayscale(1) blur(7px) brightness(0.32) contrast(1.15);
  z-index: -1;
}

/* Vignette: the edges fall away into black. */
.screen::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, var(--black-72) 70%, var(--black) 100%),
    linear-gradient(180deg, var(--black-56) 0%, transparent 40%, var(--black-88) 100%);
  pointer-events: none;
  z-index: -1;
}

/* --- Moving heads --- */

.rig {
  position: fixed;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: var(--rig-opacity);
  pointer-events: none;
  transition: var(--fade-slow);
  animation: var(--reveal-rig);
}

/* The wrapper swings and blurs; the clipped cone inside it, so the blur softens the cone's edges. */
.beam {
  position: absolute;
  top: -4vh;
  width: 26vmax;
  height: 140vh;
  margin-left: -13vmax;
  filter: blur(16px);
  transform-origin: 50% 0;
}

.beam::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--amber-glow-strong) 0%, var(--amber-soft) 18%, var(--amber-tint) 50%, transparent 85%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
}

.beam-left {
  left: 6%;
  opacity: var(--beam-side-opacity);
  animation: beam-left 11s ease-in-out infinite alternate;
}

.beam-center {
  left: 50%;
  animation: beam-center 7s ease-in-out infinite alternate;
}

.beam-right {
  left: 94%;
  opacity: var(--beam-side-opacity);
  animation: beam-right 13s ease-in-out infinite alternate;
}

/* --- Clock --- */

.blackout {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* The clock keeps its own drop-shadow filter, so the blur-in runs on this wrapper instead. */
.clock-reveal {
  animation: var(--reveal-clock);
}

.clock {
  display: flex;
  justify-content: center;
  gap: var(--clock-gap);
  background: linear-gradient(100deg, var(--white-22) 0%, var(--white-22) 42%, var(--amber-text) 50%, var(--white-22) 58%, var(--white-22) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 28px var(--amber-glow-soft));
  animation: clock-sweep 7s ease-in-out infinite alternate;
}

.clock-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--clock-label-gap);
}

.clock-group [data-countdown] {
  color: transparent;
  font-size: var(--clock-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-1);
  letter-spacing: var(--tracking-digits);
  /* negative tracking lets the last digit overhang its box; take that overhang back in */
  padding-right: calc(-1 * var(--tracking-digits));
}

/* letter-spacing also trails the last letter; the matching indent keeps the label centred */
.clock-group small {
  padding-left: var(--tracking-label);
  color: var(--white-32);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Launch date and time under the lockup, in the signature amber. */
.date {
  margin: var(--date-gap) 0 0;
  padding-left: var(--tracking-label);
  color: var(--amber-text-soft);
  font-size: var(--date-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  animation: var(--reveal-date);
}

/* The STAGECOCKPIT lockup under the clock, logo variant 24: icon and the wordmark in
 * Inter Tight Black, 0.01em, no divider. Measured on the logo set (icon 247 px):
 * text ink starts 77 px after the icon, 159 px caps, 1674 px wide. */
.brand {
  display: inline-flex;
  align-items: center;
  margin: var(--block-gap) 0 0;
  color: var(--wordmark-on-dark);
  font-family: var(--brand-display);
  font-size: var(--brand-size);
  font-weight: 900;
  letter-spacing: var(--tracking-wordmark);
  line-height: var(--leading-wordmark);
  animation: var(--reveal-brand);
}

.brand-icon {
  width: 1.164em;
  height: 1.164em;
  margin-right: 0.345em;
  opacity: var(--brand-mark-opacity);
  filter: drop-shadow(0 0 14px var(--amber-glow-soft));
}

/* Team and Legal, bottom right and quiet. */
.corner {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 2;
  display: flex;
  gap: var(--space-6);
}

.corner-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--white-32);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label-sm);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--fade-quick);
}

.corner-link:hover,
.corner-link:focus-visible {
  color: var(--text-muted-strong);
}

/* Team access: a small dark panel over the dimmed countdown. */
.team {
  width: min(320px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-6);
  border: 1px solid var(--white-16);
  border-radius: 14px;
  background: var(--black-88);
  color: var(--text);
  font-family: var(--display);
  font-weight: 700;
}

.team::backdrop {
  background: var(--black-72);
  backdrop-filter: blur(6px);
}

.team-form {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.team-title {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.team-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--white-24);
  border-radius: 10px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
}

.team-input::placeholder {
  color: var(--white-32);
}

.team-input:focus {
  border-color: var(--amber-text-soft);
  outline: none;
}

.team-error {
  margin: 0;
  color: var(--amber-text);
  font-size: var(--text-xs);
}

.team-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.team-button {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--white-24);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--fade-quick);
}

.team-button:hover,
.team-button:focus-visible {
  color: var(--text-strong);
}

.team-button-primary {
  border-color: transparent;
  background: rgb(var(--amber-rgb));
  color: var(--black);
}

.team-button-primary:hover,
.team-button-primary:focus-visible {
  color: var(--black);
  filter: brightness(1.08);
}

@keyframes reveal {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes rig-in {
  from { opacity: 0; }
}

@keyframes clock-sweep {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

@keyframes beam-center {
  from { transform: rotate(38deg); }
  to { transform: rotate(-38deg); }
}

@keyframes beam-left {
  from { transform: rotate(-8deg); }
  to { transform: rotate(-52deg); }
}

@keyframes beam-right {
  from { transform: rotate(8deg); }
  to { transform: rotate(52deg); }
}

@media (max-width: 560px) {
  .corner {
    right: var(--space-4);
    bottom: var(--space-4);
  }


  .clock-group small {
    padding-left: var(--tracking-label-sm);
    font-size: var(--text-3xs);
    letter-spacing: var(--tracking-label-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clock-reveal,
  .clock,
  .brand,
  .date {
    animation: none;
    opacity: 1;
  }

  /* no moving heads */
  .rig {
    display: none;
  }

  /* without the sweep the numbers would stay almost black */
  .clock-group [data-countdown] {
    color: var(--amber-text-soft);
  }
}