/* DigiWeek 2026 · digiweek.xyz
   Plain CSS, no build step. Theme: original alien-tech HUD (Omnitrix-inspired dial, hourglass motif). */

@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/chakra-petch-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/chakra-petch-latin-700-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #050706;
  --surface: #0b0e0c;
  --surface-2: #111513;
  --card: #080c0ad9;
  --text: #f1f4f1;
  --muted: #b4c0b8;
  --faint: #8d9a91;
  --line: #f1f4f11a;
  --line-strong: #f1f4f133;
  --accent: #00ee7f;
  --accent-hi: #3dffa0;
  --accent-lo: #00c96b;
  --accent-ink: #03140b;
  --accent-soft: #00ee7f1a;
  --accent-line: #00ee7f52;
  --lav: #c4b5f5;
  --lav-bg: #1d1534;
  --warn: #f5b84a;

  --font-hud: "Chakra Petch", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-meta: .8125rem;
  --fs-small: .9375rem;
  --fs-body: 1rem;
  --fs-lede: 1.125rem;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-pop: cubic-bezier(.2, 1.4, .3, 1);
  --gutter: 16px;
  --maxw: 1200px;
  --r-card: 6px;
  --r-sm: 4px;
  --cut: 12px;
  --header-h: 60px;
  --glow-text: 0 0 40px #00ee7f40;
}
@media (min-width: 600px) { :root { --gutter: 28px; --fs-body: 1.0625rem; --fs-lede: 1.1875rem; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 72px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hi); }
h1, h2, h3 { margin: 0; font-family: var(--font-hud); font-weight: 700; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 479px) {
  .sr-only-sm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.accent { color: var(--accent); }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: .75rem 1rem; background: var(--accent); color: var(--accent-ink);
  font: 700 var(--fs-small)/1 var(--font-hud); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; color: var(--accent-ink); outline-color: var(--text); }

/* ---------- Fixed scenery (hex grid, glow, vignette) ---------- */
.scenery { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.scenery__dolly {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 85%);
  mask-image: radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 85%);
}
.scenery__grid {
  position: absolute; inset: -100px 0 0;
  background: url("/assets/img/hex.svg") 50% 0 / 56px 100px repeat;
  opacity: .55;
}
.scenery__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 55% at 50% 0%, #00ee7f1f, transparent 70%),
    radial-gradient(70% 40% at 50% 100%, #0078401a, transparent 70%);
}
.scenery__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #0000 55%, #000000b3); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.4rem;
  font: 700 var(--fs-small)/1.1 var(--font-hud); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  color: var(--text); background: none; border: 0; cursor: pointer;
  transition: transform .25s var(--ease), color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn::before, .btn::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.btn::before { inset: 0; background: var(--btn-bg); }
.btn__icon { width: 1.15em; height: 1.15em; flex: none; }
.btn--sm { min-height: 42px; padding: 0 1rem; font-size: var(--fs-meta); --cut: 9px; }
.btn--lg { min-height: 54px; padding: 0 1.6rem; }

.btn--primary { color: var(--accent-ink); --btn-bg: linear-gradient(#3dffa0, #00ee7f 55%, #00c96b); }
.btn--primary::after {
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, #ffffffa6 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
}
.btn--primary:hover { color: var(--accent-ink); transform: translateY(-2px); }
.btn--primary:hover::before { filter: brightness(1.08) saturate(1.1); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost { --btn-bg: var(--accent-line); color: var(--text); }
.btn--ghost::after { inset: 1px; background: #07100b; clip-path: polygon(0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px)); }
.btn--ghost .btn__icon { color: var(--accent); }
.btn--ghost:hover { color: var(--text); transform: translateY(-2px); --btn-bg: var(--accent); }
.btn--ghost:hover::after { background: #0b1a12; }

.btn--soon { --btn-bg: var(--line-strong); color: var(--faint); cursor: not-allowed; }
.btn--soon::after { inset: 1px; background: #0c100e; clip-path: polygon(0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px)); }
.btn--soon::before { background: repeating-linear-gradient(135deg, var(--line-strong) 0 6px, #f1f4f10d 6px 12px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em; min-height: 42px;
  font: 700 var(--fs-meta)/1 var(--font-hud); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: #050706b3;
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.site-header.is-scrolled { background: #080b09e6; border-bottom-color: var(--line); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: #080b09c7; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
}
.site-header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: clip; }
.site-header__progress span { display: block; height: 100%; background: linear-gradient(90deg, #00c96b, #3dffa0); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px #00ee7f; opacity: 0; }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 12px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); margin-right: auto; min-height: 44px; }
.brand:hover { color: var(--text); }
.brand__mark { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 10px #00ee7f59); }
.brand__word { font: 700 1.125rem/1 var(--font-hud); letter-spacing: .06em; text-transform: uppercase; }
.brand__digi { color: var(--accent); }
.brand__year {
  font: 600 .6875rem/1 var(--font-hud); letter-spacing: .1em; color: var(--accent);
  padding: 4px 5px 3px; border: 1px solid var(--accent-line); border-radius: 3px;
}

.nav { display: none; }
.nav__list { display: flex; gap: 4px; list-style: none; }
.nav__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font: 600 var(--fs-meta)/1 var(--font-hud); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; position: relative;
}
.nav__list a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav__list a:hover { color: var(--text); }
.nav__list a:hover::after { transform: scaleX(1); }

/* margin-left:auto keeps the CTA on the right edge even on pages without a nav (404) */
.site-header__cta { flex: none; margin-left: auto; }

.menu { position: relative; }
@media (max-width: 419px) {
  .brand__year { display: none; }
  .menu__toggle { width: 44px; padding: 0; justify-content: center; }
  .menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header__cta { padding-inline: .9rem; }
}
.menu__toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: 600 var(--fs-meta)/1 var(--font-hud); letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu__bars, .menu__bars::before, .menu__bars::after { display: block; width: 14px; height: 2px; background: var(--accent); transition: transform .25s var(--ease), opacity .2s; }
.menu__bars { position: relative; }
.menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; }
.menu__bars::before { top: -5px; }
.menu__bars::after { top: 5px; }
.menu[open] .menu__bars { background: transparent; }
.menu[open] .menu__bars::before { transform: translateY(5px) rotate(45deg); }
.menu[open] .menu__bars::after { transform: translateY(-5px) rotate(-45deg); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: 8px; background: #0b0e0cf7; border: 1px solid var(--accent-line); border-radius: var(--r-card);
  box-shadow: 0 24px 60px -20px #000, 0 0 40px -20px #00ee7f59;
}
.menu__panel ul { list-style: none; }
.menu__panel a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r-sm);
  font: 600 1rem/1 var(--font-hud); letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-decoration: none;
}
.menu__panel a span { font-size: .75rem; color: var(--accent); letter-spacing: .1em; }
.menu__panel a:hover { background: var(--accent-soft); color: var(--text); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .menu { display: none; }
  .brand { margin-right: 8px; }
  .nav { margin-right: auto; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 28px 64px;
  overflow: clip;
}
.hero__sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 4px; }
.hero__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform-origin: 50% 30%; }
.hero__halo {
  position: absolute; left: 50%; top: -300px; width: min(1500px, 160vw); height: 400px; translate: -50% 0;
  border-radius: 50%;
  border: 2px solid #00ee7f99;
  box-shadow: 0 0 22px #00ee7f8c, 0 0 80px #00ee7f40, inset 0 0 22px #00ee7f66, inset 0 -40px 120px -40px #00ee7f33;
}
@media (max-width: 1439px) {
  /* Flatter and higher, so the arc reads as a horizon above the organiser row, not a line through it */
  .hero__halo { top: -386px; width: max(240vw, 900px); }
}
.hero__rays {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 35% at 72% 52%, #00ee7f24, transparent 70%),
    repeating-linear-gradient(0deg, #ffffff06 0 1px, transparent 1px 4px);
}
.hero__inner { display: grid; gap: 40px; align-items: center; }
.hero__copy { max-width: 640px; transform-origin: 0 40%; }

.hero__org { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: var(--fs-small); color: var(--muted); }
.hero__org img { width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #050706, 0 0 0 3px var(--accent-line); flex: none; }
.hero__org strong { color: var(--text); font-weight: 600; }
.hero__org-tag { font: 600 .75rem/1 var(--font-hud); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
/* The separator lives inside the tag, so it wraps with it instead of dangling at a line end */
.hero__org-tag::before { content: "/"; content: "/" / ""; margin: 0 .55em 0 .3em; letter-spacing: 0; }

.hero__title { font-size: clamp(3.25rem, 17.5vw, 7.5rem); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.hero__title-word { display: block; text-shadow: var(--glow-text); }
.hero__digi { color: var(--accent); }
.hero__year { display: block; margin-top: .06em; color: var(--text); font-size: .62em; letter-spacing: .14em; }
@supports (-webkit-text-stroke: 1px #000) {
  .hero__year { color: #f1f4f10a; -webkit-text-stroke: 1.5px var(--accent); }
}

.hero__dates {
  margin-top: 20px;
  font: 700 clamp(1.25rem, 5vw, 1.75rem)/1.2 var(--font-hud); letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; flex-wrap: wrap; gap: .1em .35em; align-items: baseline;
  padding: 8px 14px 8px 12px; border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, #00ee7f1f, transparent);
}
.hero__status { margin-top: 14px; display: flex; align-items: center; gap: 10px; font: 600 var(--fs-meta)/1 var(--font-hud); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hero__status[hidden] { display: none; }
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; }
.hero__lede { margin-top: 18px; font-size: var(--fs-lede); color: var(--muted); max-width: 34em; text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.hero__ctas { margin-top: 28px; display: grid; gap: 12px; }
.hero__ctas .btn { width: 100%; }
@media (min-width: 480px) {
  .hero__ctas { display: flex; flex-wrap: wrap; }
  .hero__ctas .btn { width: auto; }
}
.hero__facts { margin: 28px 0 0; display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.hero__facts div { display: grid; gap: 2px; }
.hero__facts dt { font: 600 .75rem/1.2 var(--font-hud); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.hero__facts dd { margin: 0; font-size: var(--fs-small); color: var(--text); }
@media (min-width: 600px) { .hero__facts { grid-template-columns: 1fr 1fr; gap: 24px; } }

.hero__dial { width: min(86vw, 380px); margin-inline: auto; transform-origin: 50% 45%; }
.hero__cue {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0;
  display: none; flex-direction: column; align-items: center; gap: 8px;
  font: 600 .6875rem/1 var(--font-hud); letter-spacing: .3em; text-transform: uppercase; color: var(--faint);
}
.hero__cue i { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); }

@media (min-width: 1024px) {
  .hero { padding-block: 40px 88px; }
  .hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px; }
  .hero__title { font-size: clamp(5rem, 8vw, 7.75rem); }
  .hero__dial { width: min(100%, 540px); }
  .hero__cue { display: flex; }
}

/* ---------- Dial ---------- */
.dial { position: relative; }
.dial__stage { position: relative; aspect-ratio: 1; }
.dial__svg { position: relative; width: 100%; height: 100%; overflow: visible; --rot: -120deg; filter: drop-shadow(0 0 30px #00ee7f33); }
.dial__ring { position: absolute; inset: 0; pointer-events: none; }
.dial__ring svg { width: 100%; height: 100%; overflow: visible; }
.dial__ticks, .dial__boot, .dial__bezel, .dial__face, .dial__ping { transform-box: view-box; transform-origin: 200px 200px; }
.dial__bezel { transform: rotate(var(--rot)); transition: transform .7s var(--ease-pop); }
.dial__slot { cursor: pointer; }
.dial__glyph { transform-box: fill-box; transform-origin: center; transform: rotate(calc(-1 * (var(--a) + var(--rot)))); transition: transform .7s var(--ease-pop); }
.gl-0 { --a: 0deg; } .gl-1 { --a: 60deg; } .gl-2 { --a: 120deg; } .gl-3 { --a: 180deg; } .gl-4 { --a: 240deg; } .gl-5 { --a: 300deg; }
.dial__glyph polygon { fill: #0f1612; stroke: #00ee7f; stroke-opacity: .35; stroke-width: 1.5; transition: fill .4s, stroke-opacity .4s; }
.dial__glyph use { color: #b4c0b8; transition: color .4s; }
.dial__slot:hover polygon { stroke-opacity: .8; }
.dial__glyph.is-active polygon { fill: #00ee7f; stroke-opacity: 1; }
.dial__glyph.is-active use { color: #03140b; }
.dial__window, .dial__ping { pointer-events: none; }
.dial__ping { opacity: 0; }

.dial__ui {
  position: relative; z-index: 1;
  margin: -6px auto 0; max-width: 340px;
  display: flex; align-items: center; gap: 10px;
}
.dial__readout {
  flex: 1; min-width: 0; text-align: center;
  padding: 10px 14px 12px;
  background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px), #080c0ae6;
  border: 1px solid var(--accent-line); border-radius: var(--r-card);
  box-shadow: inset 0 1px #00ee7f4d, 0 18px 40px -24px #000;
  display: grid; gap: 2px;
}
.dial__kicker { font: 600 .6875rem/1.2 var(--font-hud); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.dial__name { font: 700 1.25rem/1.2 var(--font-hud); letter-spacing: .04em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.dial__name:hover { color: var(--accent); }
.dial__when { font: 600 var(--fs-meta)/1.3 var(--font-hud); letter-spacing: .1em; text-transform: uppercase; color: var(--lav); }
.dial__btn {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  background: #0b0e0c; border: 1px solid var(--accent-line); border-radius: 50%;
  color: var(--accent); cursor: pointer; transition: background-color .2s, transform .2s var(--ease);
}
.dial__btn[hidden] { display: none; }
.dial__btn svg { width: 20px; height: 20px; }
.dial__btn:hover { background: var(--accent-soft); }
.dial__btn:active { transform: scale(.94); }

/* ---------- Sections ---------- */
.section { position: relative; isolation: isolate; padding-block: 88px; overflow-x: clip; }
@media (min-width: 1024px) { .section { padding-block: 112px; } }

.backdrop {
  position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.backdrop__layer { position: absolute; inset: 0; transform-origin: 50% 50%; }
.backdrop__layer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 45% at 85% 20%, #00ee7f17, transparent 70%);
}
.backdrop__num {
  position: absolute; right: -2vw; top: 24px;
  font: 700 clamp(9rem, 34vw, 26rem)/.8 var(--font-hud); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px #00ee7f24;
  user-select: none;
}
.backdrop__ring {
  position: absolute; width: min(120vw, 1100px); aspect-ratio: 1; left: -40%; top: 30%;
  border-radius: 50%; border: 1px solid #00ee7f12;
  box-shadow: inset 0 0 0 26px #00ee7f04, inset 0 0 0 27px #00ee7f0d;
}
.section--mm .backdrop__layer::before { background: radial-gradient(60% 50% at 75% 50%, #00ee7f1f, transparent 70%); }
.section--mm .backdrop__num { right: auto; left: -2vw; }
.section--schedule .backdrop__ring { left: auto; right: -45%; top: 10%; }
.section--about .backdrop__num { right: auto; left: -2vw; }
.section--faq .backdrop__ring { top: 50%; }
.section--contact .backdrop__layer::before { background: radial-gradient(60% 60% at 50% 60%, #00ee7f1f, transparent 70%); }

.sec-head { margin-bottom: 40px; max-width: 720px; }
.kicker {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font: 600 var(--fs-meta)/1 var(--font-hud); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.kicker span:first-child { color: var(--accent); }
.kicker span:first-child::after { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin-left: 10px; background: var(--accent-line); }
.sec-head__title { font-size: clamp(2.5rem, 9vw, 4.5rem); text-transform: uppercase; letter-spacing: .01em; text-shadow: var(--glow-text); }
.sec-head__lede { margin-top: 14px; font-size: var(--fs-lede); color: var(--muted); max-width: 36em; }

/* ---------- Event cards ---------- */
.cards { display: grid; gap: 16px; list-style: none; }
.cards__item { display: flex; }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.card {
  position: relative; flex: 1;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 20px 20px;
  background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px), var(--card);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: inset 0 1px #00ee7f2e, 0 20px 50px -30px #000000e6;
  transform-origin: 50% 100%;
  transition: border-color .3s, box-shadow .3s;
}
.card:hover { border-color: var(--line-strong); }
.cards__item:target .card { border-color: var(--accent); box-shadow: inset 0 1px #00ee7f4d, 0 0 0 3px #00ee7f33, 0 0 60px -20px #00ee7f80; }
.card--featured {
  border-color: var(--accent-line);
  background: radial-gradient(120% 80% at 100% 0%, #00ee7f14, transparent 60%), repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px), var(--card);
  box-shadow: inset 0 1px #00ee7f4d, 0 30px 70px -30px #000000f2, 0 0 60px -30px #00ee7f59;
}
.card--featured::before, .card--featured::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--accent);
}
.card--featured::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r-card); }
.card--featured::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r-card); }

.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__code { font: 600 .6875rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.card--featured .card__code { color: var(--accent); }
.hexbadge {
  width: 46px; height: 52px; display: grid; place-items: center; flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(#00ee7f40, #00ee7f14); color: var(--accent);
  position: relative;
}
.hexbadge::before { content: ""; position: absolute; inset: 1.5px; clip-path: inherit; background: #0b120e; z-index: 0; }
.hexbadge svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.hexbadge--on { background: var(--accent); }
.hexbadge--on::before { background: var(--accent); }
.hexbadge--on svg { color: var(--accent-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 6px 9px 5px; border-radius: var(--r-sm);
  font: 600 var(--fs-meta)/1.1 var(--font-hud); letter-spacing: .08em; text-transform: uppercase;
  color: var(--lav); background: var(--lav-bg);
}
.chip__k { color: var(--text); padding-right: .5em; border-right: 1px solid #c4b5f54d; }
.chip--tba { color: var(--warn); background: #f5b84a14; outline: 1px dashed #f5b84a80; outline-offset: -1px; }

.card__title { font-size: 1.625rem; text-transform: uppercase; letter-spacing: .02em; }
.card__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.card__meta { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-meta); color: var(--faint); line-height: 1.45; }
.card__meta svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent); }
.card--featured .card__meta { color: var(--text); }
.card__actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.cards__note { margin-top: 24px; font-size: var(--fs-small); color: var(--faint); }

/* ---------- MysteryMaze spotlight ---------- */
.mm { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .mm { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; } }
.steps { display: grid; gap: 12px; list-style: none; counter-reset: none; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: #080c0ab3;
}
.step__num {
  font: 700 1.5rem/1 var(--font-hud); color: var(--accent); text-shadow: 0 0 24px #00ee7f80;
  min-width: 2ch; padding-top: 2px;
}
.step__title { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.step p { font-size: var(--fs-small); color: var(--muted); }
.step a { overflow-wrap: anywhere; }
.mm__bring {
  margin-top: 20px; display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-left: 3px solid var(--accent); background: linear-gradient(90deg, #00ee7f17, transparent);
  font-size: var(--fs-small);
}
.mm__bring svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.mm__ctas { margin-top: 28px; display: grid; gap: 12px; }
@media (min-width: 480px) { .mm__ctas { display: flex; flex-wrap: wrap; } }
/* 1024-1199 px: the two-column hero and MysteryMaze layouts are tight, so CTA pairs become an equal-width grid */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero__ctas, .mm__ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__ctas .btn, .mm__ctas .btn { width: 100%; padding-inline: .85rem; font-size: .875rem; letter-spacing: .06em; }
}

.mm__visual { width: min(100%, 520px); margin-inline: auto; transform-origin: 50% 50%; }
.radar {
  position: relative; aspect-ratio: 1; padding: 6%;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: radial-gradient(closest-side, #00ee7f12, transparent), repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px), #070a08cc;
  overflow: clip;
}
.radar::before, .radar::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--accent); }
.radar::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.radar::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.radar__svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.radar__sweep {
  position: absolute; inset: 6%; border-radius: 50%;
  background: conic-gradient(from 0deg, #00ee7f00 0deg, #00ee7f00 300deg, #00ee7f38 356deg, #00ee7f80 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 99%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 99%, transparent 100%);
}
.radar__label { position: absolute; z-index: 2; font: 600 .6875rem/1 var(--font-hud); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.radar__label--tl { top: 16px; left: 44px; }
.radar__label--br { bottom: 16px; right: 44px; }

/* ---------- Schedule ---------- */
.days { display: grid; gap: 16px; list-style: none; position: relative; }
@media (min-width: 680px) { .days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1080px) { .days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.day {
  position: relative; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px), var(--card);
  box-shadow: inset 0 1px #00ee7f2e;
  transform-origin: 50% 100%;
}
.day--hot { border-color: var(--accent-line); box-shadow: inset 0 1px #00ee7f4d, 0 0 60px -30px #00ee7f59; }
.day__head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--line-strong); }
.day__num { font: 600 .75rem/1 var(--font-hud); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.day__date { font-size: 1.75rem; text-transform: uppercase; letter-spacing: .02em; }
.slots { display: grid; gap: 14px; list-style: none; }
.slot { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.slot > svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.slot a { font: 700 1.0625rem/1.25 var(--font-hud); letter-spacing: .03em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.slot a:hover { color: var(--accent); text-decoration: underline; }
.slot__meta { display: block; margin-top: 3px; font-size: var(--fs-meta); color: var(--faint); }
.slot--hot .slot__meta { color: var(--accent); }

.tba {
  margin-top: 20px; padding: 20px; border-radius: var(--r-card);
  border: 1px dashed #f5b84a66; background: linear-gradient(90deg, #f5b84a0f, transparent 70%), #080c0acc;
  display: grid; gap: 14px; align-items: center;
}
.tba__head { font-size: 1rem; }
@media (min-width: 680px) { .tba { grid-template-columns: auto 1fr; gap: 24px; } }

/* ---------- About ---------- */
.about { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; } }
.about__logo { position: relative; width: min(64vw, 300px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.about__logo picture { width: 66%; }
.about__logo img { width: 100%; height: auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #050706, 0 0 0 5px var(--accent-line), 0 0 60px -10px #00ee7f66; }
.about__orbit {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed #00ee7f59;
  box-shadow: inset 0 0 0 18px #00ee7f08, inset 0 0 0 19px #00ee7f2e;
}
.about__orbit::before {
  content: ""; position: absolute; width: 12px; height: 12px; top: 50%; left: -6px; margin-top: -6px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent);
}
.about__lede { font-size: clamp(1.1875rem, 2.4vw, 1.5rem); line-height: 1.45; color: var(--text); }
.about__text { margin-top: 16px; color: var(--muted); }
.stats { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; }
.stats li { padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: #080c0ab3; display: grid; gap: 4px; }
.stats strong { font: 700 clamp(1.75rem, 6vw, 2.5rem)/1 var(--font-hud); color: var(--accent); text-shadow: 0 0 24px #00ee7f66; }
.stats span { font: 600 .75rem/1 var(--font-hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq__list { display: grid; gap: 10px; max-width: 880px; }
.qa { border: 1px solid var(--line); border-radius: var(--r-card); background: #080c0ad9; transition: border-color .3s; }
.qa[open] { border-color: var(--accent-line); box-shadow: inset 0 1px #00ee7f2e; }
.qa summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; min-height: 60px; padding: 14px 56px 14px 18px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: 600 1.0625rem/1.35 var(--font-hud); letter-spacing: .02em; }
.qa summary::before, .qa summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 2px; margin-top: -1px;
  background: var(--accent); transition: transform .3s var(--ease);
}
.qa summary::after { transform: rotate(90deg); }
.qa[open] summary::after { transform: rotate(0deg); }
.qa summary:hover h3 { color: var(--accent); }
.qa__a { padding: 0 18px 18px; color: var(--muted); }
.qa__a a { overflow-wrap: anywhere; }

/* ---------- Contact ---------- */
.contact {
  position: relative; max-width: 880px; margin-inline: auto; text-align: center;
  padding: 48px 20px; border: 1px solid var(--accent-line); border-radius: var(--r-card);
  background: radial-gradient(80% 100% at 50% 0%, #00ee7f17, transparent 70%), repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px), #080c0ae6;
  box-shadow: inset 0 1px #00ee7f4d, 0 30px 70px -30px #000000f2;
}
.contact::before, .contact::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--accent); }
.contact::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.contact::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.contact .kicker { justify-content: center; }
.contact .sec-head__title { font-size: clamp(2rem, 7vw, 3.5rem); }
.contact__text { margin: 16px auto 0; max-width: 34em; color: var(--muted); }
.contact__row { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; }
.contact__mail {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px;
  font: 700 clamp(1.25rem, 5.2vw, 2rem)/1.1 var(--font-hud); letter-spacing: .02em; color: var(--accent);
  text-decoration: none; overflow-wrap: anywhere;
}
.contact__mail svg { width: 1.1em; height: 1.1em; flex: none; }
.contact__mail:hover { text-decoration: underline; }
.btn[hidden] { display: none; }
@media (min-width: 600px) { .contact { padding: 64px 40px; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #040605e6; padding-block: 40px 32px; }
.site-footer__inner { display: grid; gap: 24px; }
.site-footer__brand p { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); max-width: 46em; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--fs-meta)/1 var(--font-hud); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__nav a[href^="mailto:"] { text-transform: none; letter-spacing: .02em; font-size: var(--fs-small); }
.site-footer__legal { font-size: var(--fs-meta); color: var(--faint); padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .site-footer__nav ul { justify-content: flex-end; }
  .site-footer__legal { grid-column: 1 / -1; }
}

/* ---------- 404 ---------- */
.lost { min-height: calc(100svh - var(--header-h)); display: grid; place-items: center; padding-block: 48px; text-align: center; position: relative; isolation: isolate; overflow: clip; }
.lost__dial { width: min(70vw, 300px); margin: 0 auto 28px; filter: drop-shadow(0 0 30px #00ee7f33); }
.lost__code { font: 700 .875rem/1 var(--font-hud); letter-spacing: .3em; color: var(--accent); text-transform: uppercase; }
.lost h1 { margin-top: 14px; font-size: clamp(2.5rem, 10vw, 5rem); text-transform: uppercase; text-shadow: var(--glow-text); }
.lost p.lost__text { margin: 16px auto 0; max-width: 32em; color: var(--muted); font-size: var(--fs-lede); }
.lost__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* =====================================================================
   MOTION
   One language: ease cubic-bezier(.2,.7,.2,1), green energy, camera push-ins.
   Everything below is skipped for prefers-reduced-motion users.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Ambient */
  .scenery__grid { animation: hex-drift 40s linear infinite; will-change: transform; }
  .dial__ticks { animation: spin 120s linear infinite; }
  .dial__ring { animation: spin 120s linear infinite; will-change: transform; }
  .dial__boot { animation: bezel-boot 1.5s var(--ease) .15s both; }
  .dial__face { animation: face-press .9s var(--ease) 1.15s both; }
  .dial__ping { animation: ping 1s var(--ease) 1.3s both; }
  .dial__face.is-press { animation: face-tap .55s var(--ease) both; }
  .dial__face.is-press ~ .dial__ping { animation: ping-tap .8s var(--ease) both; }
  /* The shine plays three times, then stops so the page can go idle */
  .btn--primary::after { animation: shine 3.6s var(--ease) 1.2s 3; }
  .pulse-dot::after { animation: pulse 1.6s ease-out infinite; }
  .radar__sweep { animation: spin 6s linear infinite; }
  .radar__route { animation: route 1.2s linear infinite; }
  .about__orbit { animation: spin 24s linear infinite; }
  .hero__cue i { animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
  .hero__copy > * { animation: settle .8s var(--ease) both; animation-delay: var(--d, 0s); }
  .hero__copy > :nth-child(2) { --d: .06s; }
  .hero__copy > :nth-child(3) { --d: .12s; }
  .hero__copy > :nth-child(5) { --d: .18s; }
  .hero__copy > :nth-child(6) { --d: .24s; }
  .hero__copy > :nth-child(7) { --d: .3s; }
  /* Ambient loops pause while their section is off screen (site.js toggles .is-paused) */
  .is-paused .dial__ring, .is-paused .pulse-dot::after, .is-paused .hero__cue i,
  .is-paused .radar__sweep, .is-paused .radar__route, .is-paused .about__orbit { animation-play-state: paused; }
  .lost__dial .dial__boot { animation-delay: .1s; }

  @keyframes hex-drift { to { transform: translate3d(0, 100px, 0); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes bezel-boot {
    0% { transform: rotate(300deg); opacity: 0; }
    20% { opacity: 1; }
    80% { transform: rotate(-7deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes face-press {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(.9); filter: brightness(1.5); }
    65% { transform: scale(1.04); }
    100% { transform: scale(1); filter: brightness(1); }
  }
  @keyframes face-tap {
    0% { transform: scale(1); filter: brightness(1); }
    35% { transform: scale(.92); filter: brightness(1.45); }
    70% { transform: scale(1.03); }
    100% { transform: scale(1); filter: brightness(1); }
  }
  @keyframes ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
  @keyframes ping-tap { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
  @keyframes shine { 0% { background-position: 160% 0; } 45%, 100% { background-position: -60% 0; } }
  @keyframes pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(3.5); opacity: 0; } }
  @keyframes route { to { stroke-dashoffset: -26; } }
  @keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
  @keyframes settle { from { opacity: 0; transform: translateY(14px) scale(1.02); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

  /* ---------- Scroll camera (keyframes) ----------
     Mapped to scroll by CSS scroll-driven animations where supported,
     or by the small JS fallback (html.sd-js) everywhere else. */
  @keyframes cam-hero-scene {
    to { transform: scale(1.4); opacity: .15; }
  }
  /* Only the dial artwork (.dial__stage) flies at the camera; its readout and buttons never blur */
  @keyframes cam-hero-dial {
    from { transform: none; filter: none; opacity: 1; }
    to { transform: scale(1.7); filter: blur(4px); opacity: 0; }
  }
  /* Desktop: the copy column recedes as one block; it stays near full strength for the first half */
  @keyframes cam-hero-copy {
    0% { transform: none; opacity: 1; }
    50% { opacity: .85; }
    100% { transform: translateY(-12vh) scale(.94); opacity: 0; }
  }
  /* Below 1024 px: each line of the hero copy recedes only as it reaches the header */
  @keyframes cam-hero-line {
    0% { transform: none; opacity: 1; }
    40% { opacity: .9; }
    100% { transform: translateY(-18px) scale(.97); opacity: 0; }
  }
  @keyframes cam-back {
    0% { transform: scale(1.14); opacity: 0; }
    45% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.06); opacity: .5; }
  }
  @keyframes cam-rise {
    from { transform: translateY(56px) scale(.9); opacity: .2; }
    to { transform: none; opacity: 1; }
  }
  @keyframes cam-lift {
    from { transform: translateY(28px) scale(.97); opacity: .3; }
    to { transform: none; opacity: 1; }
  }
  @keyframes cam-focus {
    from { transform: scale(1.22); filter: blur(6px); opacity: .25; }
    to { transform: none; filter: none; opacity: 1; }
  }
  @keyframes cam-dolly { to { transform: scale(1.35); } }
  @keyframes cam-progress { from { transform: scaleX(0); opacity: 1; } to { transform: scaleX(1); opacity: 1; } }

  [data-cam="hero-scene"] { --cam: cam-hero-scene; }
  [data-cam="hero-dial"] { --cam: cam-hero-dial; }
  [data-cam="hero-copy"] { --cam: cam-hero-copy; }
  [data-cam="hero-line"] { --cam: cam-hero-line; transform-origin: 0 50%; }
  [data-cam="back"] { --cam: cam-back; }
  [data-cam="rise"] { --cam: cam-rise; }
  [data-cam="lift"] { --cam: cam-lift; }
  [data-cam="focus"] { --cam: cam-focus; }
  [data-cam="dolly"] { --cam: cam-dolly; }
  [data-cam="progress"] { --cam: cam-progress; }

  /* Native scroll-driven animations */
  @supports (animation-timeline: view()) {
    .hero { view-timeline: --hero block; }
    .section { view-timeline: --sec block; }

    html:not(.sd-js) [data-cam] {
      animation: var(--cam) linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    /* Hero. The halo and glow push in as the hero scrolls away.
       Below 1024 px the copy and dial are stacked: each line of copy recedes as it reaches the header
       (the intro "settle" plays first, then hands over), and the dial artwork flies at the camera only
       while it is itself crossing the top edge. From 1024 px the copy column and the dial artwork push
       in with the hero, starting once about a third of it has scrolled away. Insets follow
       scroll-padding-top, so "the top edge" is the bottom of the sticky header. */
    html:not(.sd-js) [data-cam="hero-scene"] { animation-timeline: --hero; animation-range: exit-crossing 0% exit-crossing 100%; }
    html:not(.sd-js) [data-cam="hero-copy"] { animation: none; }
    html:not(.sd-js) [data-cam="hero-line"] {
      animation: cam-hero-line linear both, settle .8s var(--ease) backwards;
      animation-delay: 0s, var(--d, 0s);
      animation-timeline: view(), auto;
      animation-range: exit-crossing 0% exit-crossing 100%, normal;
    }
    html:not(.sd-js) [data-cam="hero-dial"] { animation-timeline: view(); animation-range: exit-crossing 0% exit-crossing 100%; }
    @media (min-width: 1024px) {
      html:not(.sd-js) [data-cam="hero-copy"] { animation: cam-hero-copy linear both; animation-timeline: --hero; animation-range: exit-crossing 30% exit-crossing 100%; }
      html:not(.sd-js) [data-cam="hero-line"] { animation: settle .8s var(--ease) both; animation-delay: var(--d, 0s); animation-timeline: auto; animation-range: normal; }
      html:not(.sd-js) [data-cam="hero-dial"] { animation-timeline: --hero; animation-range: exit-crossing 35% exit-crossing 100%; }
    }
    html:not(.sd-js) [data-cam="back"] { animation-timeline: --sec; animation-range: cover 0% cover 100%; }
    html:not(.sd-js) [data-cam="dolly"],
    html:not(.sd-js) [data-cam="progress"] { animation-timeline: scroll(root block); animation-range: normal; }
  }

  /* JS fallback: animations are paused and scrubbed by site.js (currentTime, or --p as a last resort) */
  html.sd-js [data-cam] {
    animation: var(--cam) 1s linear both paused;
    animation-delay: calc(var(--p, 0) * -1s);
  }
  html.sd-js [data-cam="hero-line"] {
    animation: var(--cam) 1s linear both paused, settle .8s var(--ease) backwards;
    animation-delay: calc(var(--p, 0) * -1s), var(--d, 0s);
  }

  /* Only the layers that move get a compositor hint */
  [data-cam="hero-scene"], [data-cam="hero-copy"], [data-cam="hero-dial"], [data-cam="back"], [data-cam="dolly"] { will-change: transform; }
}

/* Reduced motion: no zoom, no parallax. Content simply fades in where supported. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  @supports (animation-timeline: view()) {
    @keyframes rm-fade { from { opacity: .35; } to { opacity: 1; } }
    [data-cam="rise"], [data-cam="lift"], [data-cam="focus"] {
      animation: rm-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* Windows contrast themes: button shapes are drawn with pseudo-elements, which forced colours drop */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn--soon { color: GrayText; border-color: GrayText; }
  .backdrop, .hero__scene { display: none; }
}

/* Print */
@media print {
  .scenery, .site-header, .hero__scene, .hero__dial, .backdrop, .hero__cue, .mm__visual { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .day, .qa, .contact, .step { background: none !important; border-color: #999 !important; box-shadow: none !important; }
  .card__text, .sec-head__lede, .qa__a, .hero__lede { color: #222 !important; }
}