/* ─── Targeted GPU-layer promotion ───────────────────────────────────────────
   Only promote elements that are CONTINUOUSLY animated (not hover-only).
   Too many will-change declarations waste GPU memory.                         */

/* 3-D card flip – rotateX/rotateY on every rAF tick while interacting */
.Popup-team-slider-translater {
  will-change: transform;
}

/* GSAP translateY animation on scroll */
.Video-text-sentence {
  will-change: transform;
}

/* Swiper: translateX on drag/slide */
.swiper-wrapper {
  will-change: transform;
}


/* ─── Smooth scroll: let GSAP own it, disable CSS smooth-scroll ──────────── */
html {
  scroll-behavior: auto;
}

/* ─── Reduce style-recalc surface for the popup ──────────────────────────── */
.Popup-team-slide--front,
.Popup-team-slider--back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── Footer smoke canvas isolation ──────────────────────────── */
.Footer {
  isolation: isolate;
}

/* ─── Team slider card photo: crop instead of stretch ───────────────────────
   .Team-img sets width/height:100% with no object-fit, so the browser
   default (object-fit: fill) distorts every non-square source photo to
   match the card's box. .Popup-team-slide--img already has object-fit:cover
   in theme.min.css; this brings the Teams-section slider card in line. */
.Team-img {
  object-fit: cover;
}

/* ─── Match section: sit above the Teams watermark bleed ─────────────────
   .Teams-wrapper is z-index:20, and its active-stage decorative watermark
   (.Teams-stages-item--bg, e.g. the big cursive "Legends" graphic) is
   position:absolute with bottom:-50%, so it visually bleeds down past the
   Teams section's own box into whatever follows in the DOM (.Match, at
   z-index:2). Real match data (longer team names, full dates) made the
   overlap obvious; short placeholder text mostly hid it before. Raising
   .Match above 20 — but well below .Header/.Popup at 100 — lets it paint
   over the bleed instead of being cut through by it. */
.Match {
  z-index: 21;
}

/* ─── Video section: shorten the pin ─────────────────────────────────────
   theme.min.css sets .Video to height:700vh so .Video-media/.Video-text
   (both position:sticky) stay pinned for 600vh of scrolling. That length
   was needed for the old scrub-driven reveal; home.js now plays the whole
   sentence reveal as an instant toggleActions animation right as the
   section is entered, so the remaining scroll distance was just dead
   space after the animation already finished. Shortened so the pin
   releases shortly after the reveal completes.

   .Video-wrapper (the sticky text's parent) is position:absolute, so its
   height is NOT constrained by .Video's height above — it's sized by its
   own content instead: .Video-text (100vh) plus six leftover
   .Video-section spacer divs (100vh each = 600vh), a relic of the old
   scroll-snap system that home.js no longer references at all. Left at
   their original size, that content still totals ~700vh regardless of
   .Video's shortened box, so .Video-wrapper (and the sticky text inside
   it) overflows ~480vh past .Video's own bottom edge and visually bleeds
   over every section that follows. Shrinking the spacers to 20vh each
   (6 × 20vh = 120vh + Video-text's 100vh = 220vh) makes Video-wrapper's
   content height match .Video's, so nothing overflows past the section
   boundary anymore. */
.Video {
  height: 220vh;
  z-index: 1;
}
.Video-section {
  height: 20vh;
}

/* Belt-and-suspenders on top of the height fix above: force .Arena to
   stack in front of .Video regardless of DOM order or any future
   sticky/absolute overflow inside .Video, so it can never be painted
   over again. Scaled alongside .Match's z-index:21 override. */
.Arena {
  z-index: 22;
}

/* ─── Teams section: let it grow instead of clipping the roster cards ────
   theme.min.css sets .Teams to a rigid height:100vh. The title, stage
   tabs, and description above the card slider are all rem-sized (fixed),
   not vh-relative, so they eat a near-constant chunk of vertical space
   regardless of viewport height. On a short viewport (a laptop with
   limited height, browser chrome, etc.) that fixed content plus the
   card slider's own height no longer both fit inside 100vh — but the
   slider is position:absolute with top:auto, so it still renders at its
   natural content-flow position *below* that fixed header content,
   pushing it past .Teams' own bottom edge into whatever section follows
   (.Match). Since .Match needs its own z-index:21 (see above) to sit
   above Teams' unrelated watermark bleed, it also opaquely paints over
   this overflow — visually chopping a big chunk off the bottom of every
   roster card.

   height:auto + min-height:100vh alone isn't enough: .Teams-slider is
   position:absolute, so it's out of normal flow and never counts toward
   its parent's auto-height, no matter what height/min-height say — the
   browser only "sees" .Teams-content (title/tabs/description) when
   auto-sizing. padding-bottom, unlike a child's height, IS part of
   .Teams' own box model regardless of children's positioning, so it
   reliably reserves the room the slider needs underneath .Teams-content,
   however tall or short the viewport is. The actual padding-bottom
   value is computed and set at runtime in home.js (adjustTeamsHeight),
   which measures the active slider's real rendered height instead of
   guessing a fixed number — card size varies with viewport width/stage,
   so a hardcoded value would either waste space or under-cover it. */
.Teams {
  height: auto;
  min-height: 100vh;
}