/* =====================================================================
   STADIA GLOBAL — component styles
   All values come from css/variables.css (the FigureAI token set).
   Edit tokens there; edit layout/components here.
   ===================================================================== */

/* ---------- Font stacks: licensed face first, substitute second ---------- */
:root {
  --font-display: 'pp-neue-machina-plain', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'neue-haas-grot-text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --header-height: 98px;
  --gutter: var(--spacing-32);
  --max-width: 1440px;

  /* Fluid versions of the fixed scale for small screens */
  --display-fluid: clamp(56px, 9.2vw, var(--text-display));
  --stat-fluid: clamp(32px, 3.8vw, var(--text-technical-stat));
  --media-fluid: clamp(22px, 2.2vw, var(--text-media-heading));
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-lab-white);
  color: var(--color-figure-black);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "ss12";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--color-figure-black); color: var(--color-lab-white); }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--color-figure-black); color: var(--color-lab-white);
  padding: var(--spacing-8) var(--spacing-16); border-radius: var(--radius-links);
  font-size: var(--text-button-label); text-decoration: none;
}
.skip-link:focus { top: var(--spacing-16); }

/* ---------- Type roles (DESIGN.md type scale) ---------- */
.display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--display-fluid);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.display__line { display: block; }
.display--section { font-size: clamp(48px, 7vw, 96px); }

.media-heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--media-fluid);
  line-height: var(--leading-media-heading);
  letter-spacing: var(--tracking-media-heading);
  text-transform: uppercase;
}
.editorial-heading {
  font-family: var(--font-text);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-editorial-heading);
  line-height: var(--leading-editorial-heading);
  letter-spacing: var(--tracking-editorial-heading);
}
.body-large {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  letter-spacing: var(--tracking-body-large);
  max-width: 34em;
}
.body { max-width: 36em; }
.nav-label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-24) var(--spacing-32); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text);
  font-size: var(--text-button-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-button-label);
  letter-spacing: var(--tracking-button-label);
  text-decoration: none;
  cursor: pointer;
  background: none; border: 0; color: inherit;
}
/* Black Pill Button — 24px radius, 0 32px padding */
.btn--pill {
  min-height: 48px;
  padding: 0 var(--spacing-32);
  border-radius: var(--radius-buttons);
  background: var(--color-figure-black);
  color: var(--color-lab-white);
  border: 1px solid var(--color-figure-black);
  transition: background-color .2s ease, color .2s ease;
}
.btn--pill:hover { background: var(--color-absolute-black); }
.btn--pill.btn--inverse { background: var(--color-lab-white); color: var(--color-absolute-black); border-color: var(--color-lab-white); }
.btn--pill.btn--inverse:hover { background: transparent; color: var(--color-lab-white); }

/* Underlined Contact Control — no fill, no padding, 1px rule */
.btn--underline {
  padding: 0 0 2px;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
}
.btn--underline:hover { border-bottom-color: transparent; }

.text-link { text-decoration: none; border-bottom: 1px solid var(--color-calibration-gray); }
.text-link:hover { border-bottom-color: currentColor; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-height);
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-32);
  color: var(--color-figure-black);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: color .4s ease, background-color .4s ease, border-color .4s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--color-calibration-gray); }
.site-header.is-over-dark {
  color: var(--color-lab-white);
  background: rgba(0, 0, 0, 0.35);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.brand-mark {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-nav);
  line-height: 1;
}
.brand-mark__glyph { width: 20px; height: 20px; }

.site-nav ul { display: flex; align-items: center; }
.site-nav li + li { border-left: 1px solid var(--color-calibration-gray); }
.site-header.is-over-dark .site-nav li + li { border-left-color: rgba(255, 255, 255, 0.25); }
.site-nav a {
  display: block;
  padding: var(--spacing-8) var(--spacing-20);
  font-family: var(--font-display);
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: .62;
  transition: opacity .2s ease;
}
.site-nav a:hover, .site-nav a[aria-current="true"] { opacity: 1; }

.nav-toggle {
  display: none;
  font-family: var(--font-display); font-size: var(--text-nav); letter-spacing: var(--tracking-nav);
  text-transform: uppercase; color: inherit; background: none; cursor: pointer;
  border: 1px solid currentColor; border-radius: var(--radius-utility-controls);
  padding: var(--spacing-8) var(--spacing-16);
}

/* ---------- Image frames (square-edged, with placeholder state) ---------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-images);
  background: #f3f3f3;
}
.frame img, .frame video {
  width: 100%; height: 100%; object-fit: cover;
}
.is-empty > img, .is-empty > video { display: none; }
.is-empty::after {
  content: attr(data-placeholder);
  position: absolute; left: var(--spacing-20); bottom: var(--spacing-20); right: var(--spacing-20);
  font-family: var(--font-display); font-size: 12px; letter-spacing: var(--tracking-nav);
  text-transform: uppercase; color: var(--color-machine-gray);
}
.is-empty {
  background-image:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--color-calibration-gray) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), var(--color-calibration-gray) 50%, transparent calc(50% + .5px));
}
/* Technical Specification Rail */
.spec-rail { border-top: 1px solid var(--color-calibration-gray); }
.spec-rail__row {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-4);
  padding: var(--spacing-24) 0;
  border-bottom: 1px solid var(--color-calibration-gray);
  text-align: right;
  color: var(--color-machine-gray);
}
.spec-rail__row dt { font-size: var(--text-body); line-height: var(--leading-body); order: 2; }
.spec-rail__row dd {
  font-family: var(--font-display);
  font-size: var(--stat-fluid);
  line-height: var(--leading-technical-stat);
  letter-spacing: var(--tracking-technical-stat);
  order: 1;
}

/* =====================================================================
   HOME PAGE SECTIONS (white Figure look)
   ===================================================================== */
.chapter { padding: var(--spacing-96) var(--gutter); }
.wrap { max-width: var(--max-width); margin: 0 auto; }

/* ---------- Hero: full-bleed grey photo stage retracts into the Figure split ---------- */
.h-hero { --ci-top: 12%; --ci-right: 52%; --ci-bottom: 12%; --ci-left: 4%; }
.h-hero .pin-stage { background: var(--color-lab-white); }
.h-hero__frame {
  position: absolute; inset: 0;
  background-color: var(--stadia-grey);
  clip-path: inset(
    calc(var(--t, 1) * var(--ci-top)) calc(var(--t, 1) * var(--ci-right))
    calc(var(--t, 1) * var(--ci-bottom)) calc(var(--t, 1) * var(--ci-left)));
}
.h-hero__frame img, .h-hero__frame video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(calc(1.12 - var(--t, 1) * 0.12)); }
/* Pause button sits inside the bottom-left corner of the frame's final (rounded) position */
.h-hero__vbtn {
  position: absolute; z-index: 2; left: calc(var(--ci-left) + 16px); bottom: calc(var(--ci-bottom) + 16px);
  height: 30px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.5); color: #fff;
  font: 500 12px/1 var(--font-text);
}
.h-hero__vbtn:hover, .h-hero__vbtn:focus-visible { background: #fff; color: #000; }
.h-hero__frame.is-empty::after { color: rgba(255,255,255,.7); left: calc(var(--ci-left) + 20px); bottom: calc(var(--ci-bottom) + 20px); }
.h-hero__frame.is-empty { background-image: none; }
.h-hero__copy {
  position: absolute; right: var(--gutter); bottom: var(--spacing-80);
  width: min(560px, 44vw);
  display: flex; flex-direction: column; gap: var(--spacing-24);
}
.h-hero__title {
  color: color-mix(in srgb, var(--color-figure-black) calc(var(--t, 1) * 100%), var(--color-lab-white));
  transform: scale(calc(1.06 - var(--t, 1) * 0.06)); transform-origin: left bottom;
}
.h-hero__more { opacity: var(--t, 1); transform: translateY(calc((1 - var(--t, 1)) * 24px)); }
.h-hero__cue {
  position: absolute; left: 50%; bottom: var(--spacing-24); transform: translateX(-50%);
  opacity: calc(1 - var(--t, 0)); color: var(--color-lab-white);
}
html:not(.motion-ok) .h-hero__cue { display: none; }

/* ---------- Statement: words light up ---------- */
.h-statement { padding: var(--spacing-96) var(--gutter) var(--spacing-60); }
.h-statement__text {
  /* Neue Haas Grotesk (no Neue Machina in this statement) */
  font-family: var(--font-text); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.1; letter-spacing: -0.02em;
  max-width: 22ch;
}

/* ---------- Product index: three color panels that open on hover ---------- */
.h-index { display: flex; min-height: 86vh; min-height: 86svh; }
.h-panel {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--spacing-32); text-decoration: none;
  /* All three start grey with white text; each fills with its own color when selected */
  background: var(--panel-grey, #3a3a3c); color: var(--color-lab-white);
  /* Slow, even open: gentle start, long glide, color fills in alongside the width */
  --panel-ease: cubic-bezier(0.45, 0, 0.2, 1);
  transition: flex-grow 8s var(--panel-ease), background-color 8s var(--panel-ease);
  overflow: hidden;
}
.h-panel--green  { --panel-color: var(--stadia-green); }
.h-panel--orange { --panel-color: var(--stadia-orange); }
.h-panel--blue   { --panel-color: var(--stadia-blue); }
.h-panel:hover, .h-panel:focus-visible, .h-panel:active { background-color: var(--panel-color); }
/* The cards also carry the scroll fade-in (data-reveal), whose transition rule is more specific and
   was replacing this one. This selector outranks it and lists all four properties together:
   the slow open + color fill, and the fade-in (which keeps its staggered delay). */
.h-index .h-panel[data-reveal],
.motion-ok .h-index .h-panel[data-reveal] {
  transition-property: flex-grow, background-color, opacity, transform;
  transition-duration: 8s, 8s, var(--dur-reveal, .8s), var(--dur-reveal, .8s);
  transition-timing-function: var(--panel-ease), var(--panel-ease), var(--ease-dossier, cubic-bezier(.16,1,.3,1)), var(--ease-dossier, cubic-bezier(.16,1,.3,1));
  transition-delay: 0s, 0s, calc(var(--i, 0) * var(--stagger-step, 90ms)), calc(var(--i, 0) * var(--stagger-step, 90ms));
}
.h-index:hover .h-panel, .h-index:focus-within .h-panel { flex-grow: 0.7; }
.h-index .h-panel:hover, .h-index .h-panel:focus-visible { flex-grow: 2.2; }
.h-panel__name { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.h-panel__line { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; letter-spacing: -0.01em; max-width: 24ch; }
.h-panel__go {
  font-size: var(--text-button-label); font-weight: var(--font-weight-medium);
  border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 2px;
}
.h-panel__mark {
  position: absolute; right: -0.06em; bottom: -0.2em; font-family: var(--font-display);
  font-size: clamp(160px, 22vw, 360px); line-height: 1; opacity: .1; pointer-events: none;
  transform: translateX(30%); transition: transform 8s cubic-bezier(0.45, 0, 0.2, 1);
}
.h-panel:hover .h-panel__mark, .h-panel:focus-visible .h-panel__mark { transform: none; }
.h-panel:focus-visible { outline: 2px solid var(--color-lab-white); outline-offset: -6px; }
.motion-ok .h-index [data-reveal] { transform: translateY(12%); }
.motion-ok .h-index [data-reveal].is-revealed { transform: none; }

/* ---------- Black chapter: numbers at a glance ---------- */
.h-glance { background: var(--color-absolute-black); color: var(--color-lab-white); }
.h-glance .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-60); }
.h-glance .body-large { color: var(--color-calibration-gray); }
.h-glance .spec-rail, .h-glance .spec-rail__row { border-color: #333; }
.h-glance .spec-rail__row { color: var(--color-calibration-gray); --rule-color: #555; }
.h-glance .spec-rail__row dd { color: var(--color-lab-white); }

/* ---------- Contact on grey ---------- */
.h-contact { background: var(--stadia-grey-light); }

/* ---------- Contact ---------- */
.chapter--contact {
  padding: var(--spacing-96) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-60);
  max-width: var(--max-width); margin: 0 auto;
}
.contact__intro { display: flex; flex-direction: column; gap: var(--spacing-24); }
.contact__direct { color: var(--color-figure-black); line-height: 2; }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-40) var(--spacing-32); align-content: start; }
.field { display: flex; flex-direction: column; gap: var(--spacing-8); }
.field--wide, .contact-form__foot { grid-column: 1 / -1; }
.field label { font-size: var(--text-button-label); color: var(--color-machine-gray); }
.optional { color: var(--color-calibration-gray); }
/* Contact Text Input — transparent, 0 radius, one black rule */
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; font-size: var(--text-body); line-height: 1.5; color: var(--color-absolute-black);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--color-absolute-black); border-radius: var(--radius-inputs);
  padding: var(--spacing-4) 0;
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.field textarea { resize: vertical; min-height: 6em; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: 3px; }
.field [aria-invalid="true"] { border-bottom-style: dashed; }
.contact-form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-24); }
.form-status { font-size: var(--text-button-label); color: var(--color-machine-gray); }

/* ---------- Footer Navigation Matrix ---------- */
.site-footer { border-top: 1px solid var(--color-calibration-gray); padding: var(--spacing-80) var(--gutter) var(--spacing-32); }
.footer-matrix {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-40);
  max-width: var(--max-width); margin: 0 auto;
}
.footer-group { display: flex; flex-direction: column; gap: var(--spacing-20); }
.footer-group ul { display: flex; flex-direction: column; gap: var(--spacing-16); }
.footer-group a { text-decoration: none; overflow-wrap: anywhere; }
.footer-group a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-16);
  max-width: var(--max-width); margin: var(--spacing-80) auto 0; padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-calibration-gray);
  font-size: var(--text-button-label); color: var(--color-machine-gray);
}
.footer-base__links { display: flex; gap: var(--spacing-24); }
.footer-base a { text-decoration: none; }
.footer-base a:hover { color: var(--color-figure-black); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  :root { --gutter: var(--spacing-24); }
  .chapter { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
  .chapter--contact, .h-glance .wrap { grid-template-columns: 1fr; gap: var(--spacing-40); }
  .footer-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-hero { --ci-top: 12%; --ci-right: 6%; --ci-bottom: 50%; --ci-left: 6%; }
  .h-hero__copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: var(--spacing-48); }
  .h-index { flex-direction: column; }
  .h-panel { min-height: 56vh; }
  .h-index:hover .h-panel, .h-index .h-panel:hover { flex-grow: 1; }
}

@media (max-width: 767px) {
  :root { --header-height: 72px; --gutter: var(--spacing-20); }
  .nav-toggle { display: inline-block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-lab-white); color: var(--color-figure-black);
    border-bottom: 1px solid var(--color-calibration-gray);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav li + li { border-left: 0; border-top: 1px solid var(--color-calibration-gray); }
  .site-header.is-over-dark .site-nav li + li { border-top-color: var(--color-calibration-gray); }
  .site-nav a { padding: var(--spacing-20) var(--gutter); opacity: 1; }
  .contact-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-force) { scroll-behavior: auto; }
  html:not(.motion-force) *, html:not(.motion-force) *::before, html:not(.motion-force) *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Opt-in control shown only to visitors whose device asks for reduced motion */
.motion-optin {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.motion-optin:hover { color: var(--color-figure-black); }

/* ---------- Hero typography: no Neue Machina in the hero ----------
   Paragraph, buttons, "Scroll" cue and the title's base font all use Neue Haas Grotesk (--font-text).
   "STADIA" itself stays in Nasalization (.wm-stadia). */
.h-hero .display, .h-hero .h-hero__cue { font-family: var(--font-text); }
.h-hero .h-hero__more .body {
  font-family: var(--font-text);
  font-size: var(--text-body-large); line-height: var(--leading-body-large); letter-spacing: var(--tracking-body-large);
}
.h-hero .h-hero__cue { letter-spacing: 0.08em; font-weight: 500; }

/* Hero video: no extra zoom (the photo version scaled to 1.12×, which magnified the video's pixels) */
.h-hero__frame video { transform: none; }

/* At a glance: white STADIA logo under the intro; the stadium rings draw in from the centre */
.h-glance__logo { margin: 0; max-width: 460px; }
.h-glance__title { margin-top: var(--spacing-40); }
.h-glance__logo img { display: block; width: 100%; height: auto; }
.motion-ok .h-glance__logo img { clip-path: inset(0 50% 0 50%); transition: clip-path 1.4s var(--ease-dossier, cubic-bezier(.16,1,.3,1)) .2s; }
.motion-ok .h-glance__logo.is-revealed img { clip-path: inset(0 0 0 0); }
@media (max-width: 1023px) { .h-glance__logo { max-width: 340px; } .h-glance__title { margin-top: var(--spacing-32); } }