/* The hero: the screen the camera lands in, and the top of the home page.
   Three directions share the words and buttons and change only the picture around them, picked with ?hero=:
   - window (default): the words on black beside a framed close-up of one vending coil, turning and dropping one
     room's photo card after another (js/hero.js); the venue photos below are its fallback without WebGL;
   - bleed: the venue photo fills the screen and drifts slowly toward its machine, the words on a scrim panel;
   - peek: the headline alone, very large, with the figure from the intro peeking up from the bottom edge.
   Buttons are the guide's glass (css/sections.css); labels are its corner-framed Tags. No LEDs. */

.hero {
  /* The screen is brand-black artwork in both themes, so it borrows the dark theme's values, glass included. */
  --ink: #f3f1ed; --ink-muted: #aba59d; --on-ink: #121110; --ink-shade: #aba59d;
  --paper-raised: #1c1b19; --concrete: #262421; --line: #3a3733; --line-strong: #77726b;
  --glass: #ffffff14; --glass-strong: #ffffff29; --glass-edge: #ffffff5c; --glass-signal: #db2f18e6;
  --top: calc(var(--logo-y) + var(--logo-h) + 28px);
  position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--brand-black); color: var(--ink);
}
.js .hero { position: absolute; left: 0; top: 0; }
/* The hero takes clicks as soon as its screen is lit, so its buttons work part-way through the zoom, not only once
   it lands. The menu waits until it has faded in (js/main.js). */
.js .hero:not(.is-on) { pointer-events: none; }

/* The menu sits level with the logo, mirrored into the top-right corner. */
.hero-header {
  position: absolute; z-index: 5; right: var(--logo-x); top: var(--logo-y); height: var(--logo-h);
  display: flex; align-items: center; gap: var(--space-5);
}
.js .hero-header { opacity: 0; }
.hero-nav { display: flex; gap: var(--space-1); }
.hero-nav a {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink);
  font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), border-radius var(--dur-fast) var(--ease-snap);
}
.hero-nav a:hover { background: #ffffff1f; border-top-left-radius: 0; }

/* The words. */
/* Centred in the space under the logo, but never pushed above it: when the words are taller than that space
   (a short laptop window, a phone on its side), "safe" pins them to the top and any overflow goes off the bottom. */
.hero-body {
  position: absolute; z-index: 2; left: var(--gutter); right: 47%; top: var(--top); bottom: 40px;
  display: flex; flex-direction: column; justify-content: center; justify-content: safe center;
}
.hero-copy { display: grid; justify-items: start; gap: var(--space-5); }
/* The headline scales with the window's height as well as its width, so short windows don't run out of room. */
.hero-title {
  font-family: var(--font-display); font-stretch: 104%; font-weight: 900;
  font-size: clamp(40px, min(7.2vw, 12vh), 112px); line-height: .9; letter-spacing: -.035em; text-wrap: balance;
}
.hero-lead { max-width: 38ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-muted); }
.hero-keys { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); margin-top: var(--space-2); padding-left: var(--space-2); }

/* Where the screens are: four venue kinds as corner labels. Choosing one shows that room. */
.hero-venues { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.hero-venue {
  --c: var(--ink); --cr: var(--signal);
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 28px; margin: 0; padding: 0 10px;
  border: 0; background: none; color: var(--ink-muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-snap);
}
.hero-venue::before {
  content: ""; position: absolute; inset: -6px; opacity: 0; pointer-events: none;
  background:
    linear-gradient(var(--cr), var(--cr)) top left / 5px 1.5px no-repeat, linear-gradient(var(--cr), var(--cr)) top left / 1.5px 5px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 5px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1.5px 5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 5px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1.5px 5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 5px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1.5px 5px no-repeat;
  transition: inset var(--dur-base) var(--ease-snap), opacity var(--dur-fast) var(--ease-standard);
}
.hero-venue:hover, .hero-venue.is-on { color: var(--ink); }
/* Pressed, a label sinks a little, quickly, and springs back. */
.hero-venue:active { transform: translateY(1px) scale(.95); transition-duration: 60ms; }
.hero-venue.is-on::before { inset: 0; opacity: 1; }
.hero-venue:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
:root[data-hero="peek"] .hero-venues { display: none; }

/* ---------- The venue photo (window and bleed) ---------- */

.hv { position: absolute; z-index: 1; display: none; overflow: hidden; background: #0b0a09; }
:root:is([data-hero="window"], [data-hero="bleed"]) .hv { display: block; }
/* Opacity, not visibility, so the photo stays hidden with the rest of the hero until the screen switches on. */
.hv-photo { position: absolute; inset: 0; opacity: 0; }
.hv-photo.is-front { opacity: 1; }
.hv-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  object-position: var(--fx) var(--fy); transform-origin: var(--fx) var(--fy);
}
/* The tile wipe: four red tiles cover the old room and shrink away clockwise from the top-left (js/hero.js). */
.hv-wipe { position: absolute; inset: 0; z-index: 2; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: var(--space-2); pointer-events: none; }
.hv-wipe i { border-radius: var(--radius-tile); background: var(--signal); transform: scale(0); }
.hv-label { position: absolute; z-index: 3; left: var(--space-5); bottom: var(--space-5); display: grid; justify-items: start; gap: var(--space-2); }
.hv-moment {
  padding: 6px 12px 8px; border-radius: var(--radius-md); background: var(--scrim); color: var(--brand-white);
  font-family: var(--font-display); font-stretch: 104%; font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.02em;
}
/* The coil's pause (js/hero.js): small and quiet in the window's top-right corner, the guide's glass, with a bigger
   hit area than it shows. Paused, it shows play. */
.hv-pause {
  position: absolute; z-index: 4; top: var(--space-4); right: var(--space-4); display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--glass-edge); border-radius: var(--radius-md);
  background: var(--scrim); color: var(--brand-white); cursor: pointer; opacity: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-slow) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-radius var(--dur-fast) var(--ease-snap), transform var(--dur-base) var(--ease-snap);
}
.hv-pause::before { content: ""; position: absolute; inset: -8px; }
.hv.is-ready .hv-pause { opacity: .75; }
.hv .hv-pause:is(:hover, :focus-visible), .hv .hv-pause.is-paused { opacity: 1; }
.hv-pause:is(:hover, :focus-visible) { background: var(--glass-strong); border-top-left-radius: 0; }
.hv-pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hv-pause:active { transform: scale(.86); transition-duration: 60ms; }
.hv-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hv-pause-play { display: none; fill: currentColor; stroke-width: 1.4; }
.hv-pause.is-paused .hv-pause-bars { display: none; }
.hv-pause.is-paused .hv-pause-play { display: inline; }

/* Window: a framed picture, aligned to the menu's right edge, the words on black beside it. */
:root[data-hero="window"] .hv { top: var(--top); right: var(--logo-x); bottom: 40px; left: 56%; border-radius: var(--radius-lg); }
/* The coil is drawn live into this canvas, and fades in once its cards are ready. Clicking it vends the next room. */
.hv-coil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; cursor: pointer; transition: opacity var(--dur-slow) var(--ease-standard); }
.hv.is-ready .hv-coil { opacity: 1; }
.hv.is-coil .hv-wipe { display: none; }
/* A dropped card's way out: a canvas in the zoomed scene covering the whole stage, outside the window's clip, so the
   card falls on through the bottom of the screen and down the machine (js/hero.js sizes it). Over the screen's glass
   (11) and under the figure from the intro (13, css/site.css); only shown while a card falls. */
.hv-drop { position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; visibility: hidden; }
.hv-drop.is-falling { visibility: visible; }

/* Bleed: the photo fills the screen and drifts toward its machine; the words sit on a scrim panel. */
:root[data-hero="bleed"] .hv { inset: 0; }
:root[data-hero="bleed"] .hv::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--brand-black); opacity: .35; pointer-events: none; }
:root[data-hero="bleed"] .hv-photo.is-front img { animation: drift 6.2s linear both; }
/* Full screen, red tiles would flood the page every few seconds: here the wipe is a quick cut through black. */
:root[data-hero="bleed"] .hv-wipe i { background: var(--brand-black); }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.09); } }
:root[data-hero="bleed"] .hv-label { left: auto; right: var(--logo-x); bottom: var(--space-6); justify-items: end; }
:root[data-hero="bleed"] .hero-body { right: auto; width: min(620px, 50vw); justify-content: flex-end; bottom: var(--space-6); }
:root[data-hero="bleed"] .hero-copy { padding: var(--space-6); border-radius: var(--radius-tile); background: var(--scrim); }
:root[data-hero="bleed"] .hero-title { font-size: clamp(40px, min(6vw, 11vh), 92px); }
:root[data-hero="bleed"] .hero-lead { color: #e6e2dc; }
:root[data-hero="bleed"] .hero-nav { padding: 2px; border-radius: var(--radius-tile); background: var(--scrim); }

/* Peek: the headline alone at poster size; the figure looks up at it from below the bottom edge. */
:root[data-hero="peek"] .hero-body { right: var(--gutter); }
:root[data-hero="peek"] .hero-title { font-size: clamp(48px, min(12.6vw, 19vh), 200px); line-height: .86; letter-spacing: -.04em; }
:root[data-hero="peek"] .hero-lead { max-width: 34ch; }
.hero-peek { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; }
:root[data-hero="peek"] .hero-peek { display: block; }

/* ---------- Small screens ---------- */

@media (max-width: 1024px) {
  .hero-nav { display: none; }
}
/* Short and wide (a small laptop window, a phone on its side): tighter spacing, and below 480px tall only the
   headline and buttons, so they fit under the logo. */
@media (max-height: 640px) and (min-width: 821px) {
  .hero-copy { gap: var(--space-3); }
  .hero-lead { font-size: 16px; }
}
@media (max-height: 480px) and (min-width: 821px) {
  .hero-lead, .hero-venues { display: none; }
}
@media (max-width: 820px) {
  .hero-body { left: var(--space-4); right: var(--space-4); bottom: var(--space-5); }
  .hero-copy { gap: var(--space-4); }
  .hero-title { font-size: clamp(40px, min(12vw, 13vh), 64px); }
  .hero-keys { gap: var(--space-3); padding-left: var(--space-1); }
  .hero-keys .fc-btn-lg { height: 48px; font-size: 15px; }
  .hero-keys .fc-btn-flap.fc-btn-lg .fc-btn-pane { padding: 0 18px; }
  .hero-venues { display: none; }
  .hv-label { left: var(--space-3); bottom: var(--space-3); }
  .hv-pause { top: var(--space-3); right: var(--space-3); }
  .hv-moment { font-size: 20px; }
  .hv.is-coil .fc-tag { display: none; } /* each card already carries its code and room */
  /* Window, on a phone: the words sit along the bottom and the photo takes whatever height they leave above them,
     so the screen is full on any phone, with no dead band at the bottom. */
  :root[data-hero="window"] .hero { display: grid; grid-template-rows: var(--top) minmax(0, 1fr) auto; }
  :root[data-hero="window"] .hv { position: relative; grid-row: 2; inset: auto; margin: 0 var(--space-4); }
  :root[data-hero="window"] .hero-body { position: relative; grid-row: 3; inset: auto; padding: var(--space-5) var(--space-4) var(--space-6); }  :root[data-hero="bleed"] .hero-body { left: var(--space-3); right: var(--space-3); width: auto; bottom: var(--space-3); }
  :root[data-hero="bleed"] .hero-copy { padding: var(--space-5); }
  :root[data-hero="bleed"] .hv-label { right: var(--space-4); top: var(--top); bottom: auto; }
  :root[data-hero="peek"] .hero-title { font-size: clamp(56px, 17vw, 96px); }
  :root[data-hero="peek"] .hero-body { justify-content: flex-start; padding-top: var(--space-6); }
}
@media (max-height: 620px) and (max-width: 820px) {
  :root[data-hero="window"] .hv { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-hero="bleed"] .hv-photo.is-front img { animation: none; }
  .hero-venue, .hero-venue::before, .hv-coil, .hv-pause { transition: none; }
}