/* 03 · Pick your slot (js/formats.js, js/machines.js). A dark section: the words and a button, a stage where every
   machine stands round one turntable (an ellipse on the floor), the one in front under a warm spotlight with its ad
   places lit red and its name and venues on the floor under it, then the venue chips and tiles to jump to any
   machine. Scrolled (.is-scrubbed), the stage pins and fills the screen and the words sit over it; with reduced motion
   they simply stack. The machines' sizes, the spotlight (--fx, --fy, --fw, --focus), the floor's glow (--gx, --gy,
   --glow) and how far the words have come up (--ui) come from the script. */

.yah {
  /* The stage is a dark room in both themes, so the section borrows the dark theme's values. */
  --ink: #f3f1ed; --ink-muted: #aba59d; --line: #3a3733; --line-strong: #77726b;
  --paper-raised: #1c1b19; --concrete: #262421; --glass: #ffffff14; --glass-strong: #ffffff29; --glass-edge: #ffffff5c;
  position: relative; padding: var(--space-9) 0 var(--space-7); background: #121110; color: var(--ink);
}
.yah-head .label { margin-bottom: var(--space-4); color: var(--ink-muted); }
.yah-lead { margin-top: var(--space-4); color: var(--ink-muted); }
.yah-cta { margin-top: var(--space-5); }

/* ---------- The venues: corner-framed chips, like the hero's (js/formats.js) ---------- */

.yah-venues-label { margin-top: var(--space-6); font: 600 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.yah-venues { display: flex; flex-wrap: wrap; gap: var(--space-2) 2px; margin: var(--space-3) 0 0 -8px; }
.yah-venues .yah-chip { padding: 0 8px; letter-spacing: .12em; }
.yah-chip {
  --c: var(--ink); --cr: var(--signal);
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 30px; margin: 0; padding: 0 10px;
  border: 0; background: none; color: var(--ink-muted); cursor: pointer; font-style: normal;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-snap);
}
/* Picked, a chip is framed by the brand's four corners, the top-left one red, and its square turns red. */
.yah-chip::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);
}
.yah-chip-sq { width: 7px; height: 7px; border-radius: 1.5px; background: var(--line-strong); flex: none; transition: background var(--dur-fast) var(--ease-standard); }
button.yah-chip:hover, .yah-chip[aria-pressed="true"], .yah-chip.is-on { color: var(--ink); }
.yah-chip[aria-pressed="true"]::before, .yah-chip.is-on::before { inset: 0; opacity: 1; }
.yah-chip[aria-pressed="true"] .yah-chip-sq, .yah-chip.is-on .yah-chip-sq { background: var(--signal); }
.yah-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
/* Pressed, a chip sinks a little, quickly, and springs back. */
button.yah-chip:active { transform: translateY(1px) scale(.95); transition-duration: 60ms; }
.yah-dot.is-dim::before { opacity: .35; }

/* ---------- The stage ---------- */

.yah-stage {
  position: relative; height: clamp(440px, 68vh, 680px); margin-top: var(--space-6); overflow: hidden; outline: none;
  background: #121110; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
/* A pool of warm light on the floor at the front of the ring, fading into the room; it comes up with the lights. */
.yah-stage::before {
  content: ""; position: absolute; inset: 0; opacity: var(--glow, 1); pointer-events: none;
  background: radial-gradient(ellipse 34% 20% at var(--gx, 50%) var(--gy, 86%), #3b332a 0%, #211d19 55%, #12111000 100%);
}
.yah-stage.is-dragging { cursor: grabbing; }
.yah-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.yah-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.yah-ring ellipse { fill: none; stroke: #ffffff21; stroke-width: 1.5; }
.yah-ring .yah-ring-in { stroke: #ffffff12; stroke-dasharray: 2 9; }
.yah-items { position: absolute; inset: 0; z-index: 1; }
/* The spotlight's beam, falling from above onto the machine in front and lighting it a little. It comes up as the
   opening closes in on that machine (--focus, js/formats.js). */
.yah-beam {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: var(--focus, 1);
  background: linear-gradient(to bottom, #fff1dc00 0%, #fff1dc14 60%, #fff1dc24 100%);
  clip-path: polygon(calc(var(--fx) - 24px) 0, calc(var(--fx) + 24px) 0, calc(var(--fx) + var(--fw) * 0.62) calc(var(--fy) + 18px), calc(var(--fx) - var(--fw) * 0.62) calc(var(--fy) + 18px));
}

.yah-item { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; cursor: pointer; }
.yah-item .mx-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Only the machine in front shows its places: the screens we add go up, then each picture wipes on and its number drops in. */
.mx-place { opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.yah-item.is-front .mx-place { opacity: 1; }
.yah-item.is-front .mx-hw { animation: yah-fade var(--dur-base) var(--ease-standard) both; }
.yah-item.is-front .mx-ad { animation: yah-wipe 460ms var(--ease-snap) both; animation-delay: calc(120ms + var(--i) * 170ms); }
.yah-item.is-front .mx-num { transform-box: fill-box; transform-origin: 50% 50%; animation: yah-drop var(--dur-slow) var(--ease-drop) both; animation-delay: calc(320ms + var(--i) * 170ms); }
@keyframes yah-fade { from { opacity: 0; } }
@keyframes yah-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes yah-drop { from { opacity: 0; transform: scale(.4); } }
.mx-ad-t { fill: #ffffff; font-family: var(--font-display); font-stretch: 104%; font-weight: 900; letter-spacing: -.03em; text-anchor: middle; }
.mx-num text { fill: #121110; font-family: var(--font-mono); font-size: 6.4px; font-weight: 600; text-anchor: middle; }

/* The machine in front's name on the floor under it, and the venues it stands in, quieter, underneath. */
.yah-tag {
  position: absolute; left: 50%; z-index: 4; display: grid; justify-items: center; gap: 2px; max-width: min(84%, 620px); margin: 0;
  transform: translateX(-50%); pointer-events: none; text-align: center; white-space: nowrap;
  font: 600 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  transition: opacity var(--dur-base) var(--ease-standard);
}
/* The name is on the floor only while the table holds on a machine. */
.yah-stage:not(.is-holding) .yah-tag { opacity: 0; }
.yah-tag b { padding: 4px 10px; border-radius: var(--radius-sm); background: #ffffff14; color: var(--ink); font-weight: 600; }
/* Its venues: the same chips as the row over the stage, smaller, and not buttons. */
.yah-tag-venues { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; margin-top: 2px; }
.yah-tag .yah-chip { height: 24px; padding: 0 8px; font-size: 10px; letter-spacing: .1em; cursor: default; }
.yah-tag-more { align-self: center; padding: 0 6px; font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--ink-muted); }
.yah-tag:empty { display: none; }

.yah-arrow {
  position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0;
  border: 1px solid var(--glass-edge); border-radius: var(--radius-tile); background: var(--glass); color: var(--ink); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition: border-radius var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-snap);
}
.yah-prev { left: var(--gutter); }
.yah-next { right: var(--gutter); }
.yah-arrow svg { width: 22px; height: 22px; }
/* Hovered and focused, a tile squares its top-left corner. */
.yah-arrow:is(:hover, :focus-visible) { background: var(--glass-strong); border-top-left-radius: 0; }
.yah-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.yah-arrow:active { background: var(--glass-strong); transform: scale(.88); transition-duration: 60ms; }

/* The photo credit sits on the stage with the picture, where the licence wants it. */
.yah-credit {
  position: absolute; right: var(--gutter); bottom: var(--space-3); z-index: 5; max-width: min(90%, 460px); margin: 0;
  text-align: right; font-size: 11px; line-height: 15px; color: var(--ink-muted);
}
.yah-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- The tiles: one per machine, the one in front red ---------- */

.yah-foot { margin-top: var(--space-4); }
.yah-foot .yah-venues-label { margin-top: 0; }
.yah-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: var(--space-4); }
.yah-dot { position: relative; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.yah-dot::before {
  content: ""; position: absolute; inset: 7px; border-radius: 3px; background: var(--line);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-snap);
}
.yah-dot:hover::before { background: var(--line-strong); }
.yah-dot[aria-current="true"]::before { background: var(--signal); transform: scale(1.2); }
.yah-dot:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 6px; }
.yah-dot:active::before { transform: scale(.7); transition-duration: 60ms; }

/* ---------- Phones: a shorter stage and the arrows at its foot ---------- */

@media (max-width: 900px) {
  .yah { padding: var(--space-8) 0 var(--space-7); }
  .yah-stage { height: clamp(360px, 60vh, 520px); margin-top: var(--space-5); }
  .yah-arrow { top: auto; bottom: var(--space-3); width: 44px; height: 44px; margin-top: 0; }
  .yah-prev { left: var(--space-4); }
  .yah-next { right: var(--space-4); }
  .yah-credit { top: var(--space-3); bottom: auto; left: var(--space-4); right: var(--space-4); max-width: none; font-size: 10px; line-height: 13px; }
  .yah-tag { max-width: calc(100% - 120px); }
  .yah-tag .yah-chip { height: 22px; padding: 0 6px; letter-spacing: .04em; }
  .yah-tag-more { letter-spacing: .04em; }
  /* The venue row scrolls sideways in one line, edge to edge, fading out at both ends. */
  .yah-venues {
    flex-wrap: nowrap; overflow-x: auto; margin: var(--space-3) calc(var(--space-5) * -1) 0; padding: 6px var(--space-5);
    scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 28px), transparent);
  }
  .yah-venues::-webkit-scrollbar { display: none; }
  .yah-venues .yah-chip { flex: none; }
  /* Twelve tiles in one row on the narrowest phones: edge to edge, each still a 24px target. */
  .yah-dots { gap: 1px; margin-inline: calc(var(--space-5) * -1); }
  .yah-dot { width: 24px; }
}

/* ---------- Scrolled: the stage pinned to the screen, the words over it (js/formats.js) ---------- */

.yah.is-scrubbed { padding: 0; }
.yah.is-scrubbed .yah-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; }
.yah.is-scrubbed .yah-stage { position: absolute; inset: 0; height: auto; margin: 0; }
.yah.is-scrubbed .yah-head { position: absolute; z-index: 6; top: clamp(40px, 9vh, 96px); left: 0; right: 0; pointer-events: none; }
.yah.is-scrubbed .yah-head > * { pointer-events: auto; }
.yah.is-scrubbed .yah-lead { max-width: 25rem; }
.yah.is-scrubbed .yah-foot { position: absolute; z-index: 6; left: 0; right: 0; bottom: var(--space-4); margin: 0; }
/* The title: big over the ring while the lights come up, then it settles into its corner (the script moves it). */
.yah.is-scrubbed #yah-title { width: fit-content; transform-origin: 0 0; will-change: transform; }
/* Everything else comes up once the camera is down (--ui), and can't be reached until it has. */
.yah.is-scrubbed :is(.yah-head > :not(h2), .yah-foot, .yah-arrow, .yah-credit) { opacity: var(--ui, 1); }
.yah.is-scrubbed .yah-head > :not(h2) { transform: translateY(calc((1 - var(--ui, 1)) * 14px)); }
.yah-pin.is-quiet :is(.yah-head > :not(h2), .yah-foot, .yah-arrow, .yah-credit) { visibility: hidden; }
/* The edges of the frame fall away into the dark, and on a wide screen the left side darkens under the words. */
.yah.is-scrubbed .yah-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at var(--gx, 50%) 60%, #12111000 55%, #0b0a09d9 100%);
}
.yah.is-scrubbed .yah-credit { top: var(--space-5); bottom: auto; left: auto; max-width: min(40%, 420px); }
.yah.is-scrubbed .yah-arrow { top: 50%; bottom: auto; margin-top: -26px; }
@media (min-width: 701px) {
  .yah.is-scrubbed .yah-stage::after {
    background: linear-gradient(to right, #121110f0 0%, #12111000 42%), radial-gradient(ellipse 80% 75% at var(--gx, 50%) 60%, #12111000 55%, #0b0a09d9 100%);
  }
}
/* A phone: the words above the ring without the lead, the arrows at its sides, the credit under the words. */
@media (max-width: 700px) {
  .yah.is-scrubbed .yah-head { top: var(--space-6); }
  .yah.is-scrubbed .yah-head .label { margin-bottom: var(--space-2); }
  .yah.is-scrubbed .yah-lead { display: none; }
  .yah.is-scrubbed .yah-cta { margin-top: var(--space-3); }
  .yah.is-scrubbed .yah-arrow { top: 50%; bottom: auto; margin-top: -22px; }
  .yah.is-scrubbed .yah-credit { bottom: auto; left: var(--space-4); right: var(--space-4); max-width: none; }
  .yah.is-scrubbed .yah-foot .yah-venues { margin-top: var(--space-1); }
  .yah.is-scrubbed .yah-dots { margin-top: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .yah-item.is-front :is(.mx-hw, .mx-ad, .mx-num) { animation: none; }
  .mx-place, .yah-arrow, .yah-dot::before, .yah-chip, .yah-chip::before, .yah-chip-sq { transition: none; }
}