/* Local, scoped typefaces verified against the SoCal reference. */
@font-face{font-family:WZA-Unbounded;src:url('../assets/fonts/unbounded-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:WZA-Unbounded;src:url('../assets/fonts/unbounded-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:WZA-Inter;src:url('../assets/fonts/inter-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:WZA-Inter;src:url('../assets/fonts/inter-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}

/* These controls occupy the empty space around the existing SVG, not document flow. */
#b0 .s01-event-date{position:absolute;z-index:10;top:calc(50% + 36px - min(13.8vw,(100svh - 120px)*.27));left:50%;transform:translate(-50%,-100%);margin:0;padding-bottom:6px;border-bottom:1px solid #6CC180;white-space:nowrap;color:#fff;font:600 clamp(11px,1.1vw,17px)/1.5 WZA-Inter,Arial,sans-serif;letter-spacing:.015em}
#b0 .s01-event-date span{padding-inline:5px}
#b0 .s01-ticket-action{position:absolute;z-index:10;top:calc(50% + 36px + min(13.8vw,(100svh - 120px)*.27));left:50%;transform:translateX(-50%);width:min(380px,80%);text-align:center}
/* Now an <a>, not a <button>. display:grid + place-items keeps the label optically centred the
   way a button's intrinsic centring did, box-sizing keeps the 1px border inside the 100% width
   instead of overflowing it, and text-decoration:none removes the underline an anchor brings.
   Identical to look at — only the element changed. */
#b0 .s01-ticket-button{display:grid;place-items:center;box-sizing:border-box;width:100%;min-height:66px;padding:18px 24px;border:1px solid #6CC180;border-radius:0;background:transparent;color:#6CC180;font:700 15px/1.4 WZA-Unbounded,Arial,sans-serif;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
#b0 .s01-ticket-button:hover{background:#6CC180;color:#050505}
#b0 .s01-ticket-button:focus-visible{outline:2px solid #fff;outline-offset:5px}

/* Preserve the full-height media geometry and crop only its displayed bottom edge.
   The white band is inside the existing stage: no added scroll distance or media edits. */
#v3-mosaic{--sponsor-height:clamp(160px,22svh,230px)}
body.s02-band-visible .hud,body.s02-band-visible #b11 .stage::after{clip-path:inset(0 0 var(--s02-hud-crop,0px) 0)}
/* A legacy later-section transparent stage must not intercept the opening CTA. */
body.s01-controls-visible #b11 .stage,body.s01-controls-visible #b11 .stage *{pointer-events:none!important}
#v3-mosaic .plate{clip-path:inset(0 0 var(--sponsor-height) 0)}
#v3-mosaic .s02-copy{position:absolute;z-index:2;right:6%;top:calc((100svh - var(--sponsor-height) + 90px)/2);transform:translateY(-50%);width:min(64%,1000px);text-align:right;color:#fff}
#v3-mosaic .s02-copy h2{margin:0;font:500 clamp(30px,3.5vw,64px)/1.22 WZA-Unbounded,Arial,sans-serif;letter-spacing:-.025em;text-transform:uppercase;text-shadow:0 2px 12px #0008;opacity:var(--s02-heading-opacity,1);transform:translateY(var(--s02-heading-y,0px))}
/* Body copy up one step at direct request — it read small against the heading above it.
   Ceiling 18px -> 22px, floor 14 -> 15, fluid middle widened to match, so the ratio to the h2
   tightens rather than the line simply growing on the widest screens. Leading eased 1.6 -> 1.55
   because a larger size does not need as much of it, and max-width up so it still sets on three
   lines instead of spilling to four. Heading, position and reveal animation untouched. */
#v3-mosaic .s02-copy p{max-width:900px;margin:26px 0 0 auto;font:500 clamp(16px,1.6vw,28px)/1.5 WZA-Inter,Arial,sans-serif;letter-spacing:0;text-shadow:0 1px 5px #000;opacity:var(--s02-body-opacity,1);transform:translateY(var(--s02-body-y,0px))}
/* SPONSOR BAND — GEOMETRY TAKEN FROM socal.wodapalooza.com, NOT ESTIMATED.
   Measured on the live SoCal site at a 1440x900 viewport: each logo occupies a 155x66 slot,
   the gap between slots is 72px (so the pitch is 227px), the band section is 195px tall and
   the ground is plain white. Our --sponsor-height already resolves to ~198px at that size, so
   the video crop above it is untouched. The one thing SoCal does that a static grid cannot is
   run continuously, which is what the marquee below adds. */
#v3-mosaic .s02-sponsors{position:absolute;z-index:3;inset:auto 0 0;height:var(--sponsor-height);background:#fff;color:#111;display:flex;flex-direction:column;justify-content:center;padding:18px 0 16px;overflow:hidden}
/* 92s, and that is NOT a slowdown — it is the same 43px/s the speed was tuned to.
   Speed is half the track over the duration. Going from six marks to eight, in a slot that also
   grew to 176px, took the half-track from 2724px to 3968px; holding 64s would have accelerated
   the strip to 62px/s, undoing two rounds of tuning. 92s keeps it at 43px/s exactly.
   The tuning history, since the number alone hides it: 40s/68px/s -> 54s/50 -> 64s/43 at six
   marks -> 92s/43 at eight. Mobile is 62s in the query below for the same 43px/s over its
   shorter 2672px half-track. Recalculate BOTH whenever a partner is added or the slot changes. */
#v3-mosaic .s02-sponsor-track{display:flex;width:max-content;animation:s02sponsors 92s linear infinite;will-change:transform}
#v3-mosaic .s02-sponsors ul{display:flex;align-items:center;gap:72px;list-style:none;margin:0;padding:0 36px}
#v3-mosaic .s02-sponsors li{flex:none;display:grid;place-items:center;width:176px;height:84px}
#v3-mosaic .s02-sponsors img{display:block;width:auto;height:auto;max-width:176px;max-height:84px;object-fit:contain}

/* OPTICAL BALANCE — "all the partners logo in the same proportion", per Asdeporte.
   Fitting every mark to one box does NOT make them look the same size, because a box measures
   the bounding rectangle and an eye measures ink. Measured across the eight, rendered ink area
   inside the old 155x66 slot ranged from 861px^2 (Sports World) to 3806 (Centrum) — a 4.4x
   spread, and Sports World the smallest of all, which is exactly the one Asdeporte said was
   unreadable.
   Each cap below is the mark's own size scaled by (mean_ink / its_ink) ^ 0.325 — a DAMPED
   correction, not a full one. Equalising ink outright would have pushed Sports World to 143x109
   and made the thinnest-inked mark the physically largest thing in the band; damping brings the
   spread to 1.68x while nothing exceeds 84px tall. The slot grew 155x66 -> 176x84 to hold it.
   Recalculate if a partner is added: the numbers are per-mark, not a formula the CSS applies.

   SPORTS WORLD, SECOND PASS. Asdeporte said it was still hard to read, and the cap was not the
   real cause. Its PNG was a 742x563 canvas holding a mark only 446x276 — 29.5% coverage, where
   every other file measures 95-100%. So the box was being fitted to the transparent padding and
   the visible mark rendered at roughly 67x41 inside an 84px slot. The file is now trimmed to its
   ink bounds (450x280, 2px margin, alpha intact), which alone took rendered ink 861 -> 3750px^2.
   The trim changed the aspect ratio 1.32 -> 1.61, leaving the mark width-bound at 111px and 15px
   of slot height unused, so the cap goes 111 -> 118px: renders 118x73, ink ~4240px^2,
   1.36x the mean. 132px was tried first and read as too big -- not on ink but on HEIGHT: at 82px
   it stood 18px above the next-tallest mark (Mini at 64) and became the tallest object on a band
   of wide, short wordmarks. 118px halves that to 9px. Mobile 78 -> 83px on the same ratio.
   CHECK COVERAGE BEFORE TUNING A CAP: a padded canvas cannot be fixed with CSS. */
#v3-mosaic .s-openbank    img{max-width:176px;max-height:44px}
#v3-mosaic .s-powerade    img{max-width:159px;max-height:21px}
#v3-mosaic .s-mini        img{max-width:145px;max-height:64px}
#v3-mosaic .s-centrum     img{max-width:132px;max-height:41px}
#v3-mosaic .s-sportsworld img{max-width:176px;max-height:84px}
#v3-mosaic .s-innova      img{max-width:123px;max-height:59px}
#v3-mosaic .s-ruster      img{max-width:176px;max-height:84px}
#v3-mosaic .s-asdeporte   img{max-width:176px;max-height:33px}
/* -50% is exactly two of the four sets, so it lands on a frame identical to the start and the
   wrap cannot be seen. Four sets, not two: one set of six marks is 1362px, and at two sets the
   half-track would be 1362px — narrower than a 1440 viewport, which would expose a bare strip
   at the right edge before the loop point. At four it is 2724px. */
@keyframes s02sponsors{to{transform:translateX(-50%)}}
#v3-mosaic .s02-sponsors p{margin:16px 0 0;text-align:center;font:500 9px/1.4 WZA-Inter,Arial,sans-serif;letter-spacing:.14em;color:#666}
@media(max-width:700px){
  #b0 .s01-ticket-button{min-height:56px;font-size:13px}
  #v3-mosaic{--sponsor-height:180px}
  #v3-mosaic .s02-copy{right:6%;width:88%}
  #v3-mosaic .s02-copy h2{font-size:clamp(24px,6.2vw,42px)}
  #v3-mosaic .s02-copy p{font-size:16.5px;margin-top:18px}
  /* Scale the slot, do not squash it. The old rules here were for the 3-column grid this
     replaced: grid-template-columns is now inert, but height:48px against an unchanged
     155px width would have flattened every mark. Keep the SoCal ratio, just smaller.
     The shorter duration below is NOT a faster strip — the track is shorter here too, so
     43s matches the desktop's 43px/s rather than undercutting it. */
  /* Slot and every per-mark cap scale by 0.70 together, so the optical balance worked out
     above survives the breakpoint instead of collapsing back to bounding-box fitting. */
  #v3-mosaic .s02-sponsors ul{gap:44px;padding:0 22px}
  #v3-mosaic .s02-sponsors li{width:123px;height:59px}
  #v3-mosaic .s02-sponsors img{max-width:123px;max-height:59px}
  #v3-mosaic .s-openbank    img{max-width:123px;max-height:31px}
  #v3-mosaic .s-powerade    img{max-width:111px;max-height:15px}
  #v3-mosaic .s-mini        img{max-width:102px;max-height:45px}
  #v3-mosaic .s-centrum     img{max-width: 92px;max-height:29px}
  #v3-mosaic .s-sportsworld img{max-width:123px;max-height:59px}
  #v3-mosaic .s-innova      img{max-width: 86px;max-height:41px}
  #v3-mosaic .s-ruster      img{max-width:123px;max-height:59px}
  #v3-mosaic .s-asdeporte   img{max-width:123px;max-height:23px}
  #v3-mosaic .s02-sponsor-track{animation-duration:62s}
  #v3-mosaic .s02-sponsors p{font-size:8px;letter-spacing:.07em;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  #v3-mosaic .s02-copy h2,#v3-mosaic .s02-copy p{opacity:1;transform:none}
  #b0 .s01-ticket-button{transition:none}
  /* Stop the strip rather than hide it — a reader who has asked for less motion should still
     see every partner. Centred so the first set sits in frame instead of hard against the
     left edge, and the duplicate sets are simply cropped away by the band's overflow. */
  #v3-mosaic .s02-sponsor-track{animation:none;width:100%;justify-content:center}
  #v3-mosaic .s02-sponsor-track ul[aria-hidden="true"]{display:none}
}