/* 1679 (owner 11 Nov): the public Leagues page ("Find a League").
   (1) THE BACKDROP: a self-contained green / black / white motion layer that loops forever. No video, no picture, no third-party file, no pause button.
       Transforms and opacity only, so it runs on the compositor: no layout work, no animated blur. Three variants of the same Opening Night look, so the owner can pick:
         html[data-lgbg="1"]  diagonal light sweeps
         html[data-lgbg="2"]  moving field stripes and yard lines, cut on the same diagonal as the cards
         html[data-lgbg="3"]  soft drifting green glow with fine grain  (THE DEFAULT: the owner's pick, 1685, 11 Nov. He asked for the green to pulse very slowly and to
                              turn: each glow breathes on an 18 to 26 s opacity loop and circles an off-centre point once every 96 to 130 s)
       THE SWITCH lives in two places: the head script in templates/public/v3/leagues.pug (reads ?bg=1|2|3, remembers it for the tab, sets html[data-lgbg]) and the
       three "VARIANT n" blocks below. To keep one: delete the other two blocks here and the head script's ?bg part. The layers' markup is in public/v3/layout_public.pug (.pb-bg).
   (2) THE WAY IN: a 560 ms green / black / white wipe when the visitor comes from Home (a plain CSS panel; the shared page slide is skipped for that one arrival).
       Never on filter, search or paging (the head script only lets it run when the page before was Home), never takes a click; with reduced motion it is a fade.
   Loaded only by templates/public/v3/leagues.pug. */

/* ---------- the layers ---------- */
.pb-bg { background: #06080b; }
.pb-bg > i { position: absolute; display: block; pointer-events: none; backface-visibility: hidden; }
.pb-bg .pb-backdrop-grade { background: linear-gradient(180deg, rgba(6, 8, 11, .30) 0%, rgba(6, 8, 11, .18) 45%, rgba(6, 8, 11, .52) 100%); }
/* nothing draws until a variant switches it on: no variant, no motion, just the dark base */
.pb-bg > i { opacity: 0; }

/* the tab is hidden: every loop rests (leagues_motion.js sets the class) */
html.lg-bg-off .pb-bg > i { animation-play-state: paused; }
/* b7 review (the owner's motion rule, kit ruling 1410): the loops run under html[data-motion="on"] (layout_public.pug's head script sets it on every visit). Without it (no script ran)
   each layer rests on its variant's still frame. Reduced motion (the OS setting) SLOWS every loop to half speed; it never stills the page. */
html:not([data-motion="on"]) .pb-bg > i { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-motion="on"][data-lgbg="1"] .pb-bg-a, html[data-motion="on"][data-lgbg="1"] .pb-bg-b { animation-duration: 52s; }
  html[data-motion="on"][data-lgbg="2"] .pb-bg-a { animation-duration: 68s; }
  html[data-motion="on"][data-lgbg="2"] .pb-bg-b { animation-duration: 80s; }
  html[data-motion="on"][data-lgbg="3"] .pb-bg-a { animation-duration: 68s, 36s, 220s; }
  html[data-motion="on"][data-lgbg="3"] .pb-bg-b { animation-duration: 84s, 44s, 260s; }
  html[data-motion="on"][data-lgbg="3"] .pb-bg-c { animation-duration: 100s, 52s, 192s; }
  html[data-motion="on"][data-lgbg="3"] .pb-bg-grain { animation-duration: 2.4s; }
}

/* ---------- VARIANT 1: diagonal light sweeps ---------- */
html[data-lgbg="1"] .pb-bg-a,
html[data-lgbg="1"] .pb-bg-b { top: -30vh; height: 160vh; opacity: 1; will-change: transform; }
html[data-lgbg="1"] .pb-bg-a { left: -35vw; width: 56vw;
  background: linear-gradient(90deg, rgba(46, 194, 46, 0) 0%, rgba(46, 194, 46, .13) 38%, rgba(255, 255, 255, .09) 50%, rgba(46, 194, 46, .13) 62%, rgba(46, 194, 46, 0) 100%);
  transform: translate3d(70vw, 0, 0) skewX(-18deg); animation: lg1-sweep 26s linear infinite; }
html[data-lgbg="1"] .pb-bg-b { left: -20vw; width: 26vw;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(40vw, 0, 0) skewX(-18deg); animation: lg1-sweep 26s linear infinite; animation-delay: -13s; }
html[data-lgbg="1"] .pb-bg-c { left: 0; bottom: 0; width: 100%; height: 55vh; opacity: 1; background: radial-gradient(60% 100% at 18% 100%, rgba(46, 194, 46, .16), rgba(46, 194, 46, 0) 70%); }
/* b7 review: from and to sit fully off screen at every aspect, so the loop restarts out of sight (the -18deg skew on the 160vh panel leans 16.25vh at the screen's top and bottom edges;
   on a 390 x 844 phone the old -40vw start left the sweep's trailing fade in view at the top left) */
@keyframes lg1-sweep { from { transform: translate3d(calc(-24vw - 20vh), 0, 0) skewX(-18deg); } to { transform: translate3d(calc(140vw + 20vh), 0, 0) skewX(-18deg); } }

/* ---------- VARIANT 2: moving field stripes and yard lines ---------- */
/* the stripes are drawn on the cards' diagonal (72deg = vertical stripes turned -18deg). b7 review: each layer is the screen plus one step wide (it used to be a 2400 px square, two of
   them, about 200 MB of layer on a 3x phone). Sliding sideways by period / cos(18deg) (220 / .95106 = 231.32 px, 440 / .95106 = 462.64 px) moves the diagonal pattern by exactly one
   period, so the loop has no seam. */
html[data-lgbg="2"] .pb-bg-a,
html[data-lgbg="2"] .pb-bg-b { top: 0; height: 100%; opacity: 1; will-change: transform; }
html[data-lgbg="2"] .pb-bg-a { left: -232px; width: calc(100% + 232px);
  background: repeating-linear-gradient(72deg, rgba(46, 194, 46, .085) 0 110px, rgba(46, 194, 46, 0) 110px 220px);
  transform: translate3d(0, 0, 0); animation: lg2-stripes 34s linear infinite; }
html[data-lgbg="2"] .pb-bg-b { left: -463px; width: calc(100% + 463px);
  background: repeating-linear-gradient(72deg, rgba(255, 255, 255, .11) 0 2px, rgba(255, 255, 255, 0) 2px 440px);
  transform: translate3d(0, 0, 0); animation: lg2-lines 40s linear infinite; }
html[data-lgbg="2"] .pb-bg-c { left: 0; top: 0; width: 100%; height: 100%; opacity: 1;
  background: radial-gradient(90% 70% at 50% 0%, rgba(46, 194, 46, .10), rgba(46, 194, 46, 0) 70%), radial-gradient(80% 60% at 50% 110%, rgba(6, 8, 11, .7), rgba(6, 8, 11, 0) 70%); }
@keyframes lg2-stripes { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(231.32px, 0, 0); } }
@keyframes lg2-lines { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(462.64px, 0, 0); } }

/* ---------- VARIANT 3: soft drifting green glow with fine grain ---------- */
html[data-lgbg="3"] .pb-bg-a,
html[data-lgbg="3"] .pb-bg-b { width: 90vmax; height: 90vmax; opacity: 1; border-radius: 50%; will-change: transform; }
html[data-lgbg="3"] .pb-bg-a { left: -25vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(46, 194, 46, .34), rgba(46, 194, 46, .10) 55%, rgba(46, 194, 46, 0) 100%);
  transform: translate3d(0, 0, 0) scale(1); transform-origin: 70% 70%;
  animation: lg3-drift-a 34s ease-in-out infinite alternate, lg3-pulse 18s ease-in-out infinite alternate, lg3-turn 110s linear infinite; }
html[data-lgbg="3"] .pb-bg-b { right: -30vmax; bottom: -40vmax;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .13), rgba(46, 194, 46, .10) 50%, rgba(46, 194, 46, 0) 100%);
  transform: translate3d(0, 0, 0) scale(1); transform-origin: 30% 30%;
  animation: lg3-drift-b 42s ease-in-out infinite alternate, lg3-pulse 22s ease-in-out -7s infinite alternate, lg3-turn 130s linear infinite reverse; }
html[data-lgbg="3"] .pb-bg-c { left: 25%; top: 35%; width: 60vmax; height: 60vmax; opacity: 1; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgba(46, 194, 46, .16), rgba(46, 194, 46, 0) 100%);
  transform: translate3d(0, 0, 0); transform-origin: 20% 80%;
  animation: lg3-drift-c 50s ease-in-out infinite alternate, lg3-pulse 26s ease-in-out -11s infinite alternate, lg3-turn 96s linear infinite; }
html[data-lgbg="3"] .pb-bg-grain { left: -40px; top: -40px; right: -40px; bottom: -40px; opacity: .09; will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px; animation: lg3-grain 1.2s steps(1) infinite; }
@keyframes lg3-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(32vw, 22vh, 0) scale(1.18); } }
@keyframes lg3-drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-30vw, -18vh, 0) scale(.92); } }
@keyframes lg3-drift-c { from { transform: translate3d(-8vw, 0, 0); } to { transform: translate3d(14vw, -12vh, 0); } }
/* 1685: the slow pulse (opacity) and the slow turn (the rotate property, so it adds to the drift's transform instead of replacing it; each glow circles its own off-centre transform-origin) */
@keyframes lg3-pulse { from { opacity: .5; } to { opacity: 1; } }
@keyframes lg3-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes lg3-grain { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-18px, 12px, 0); } 40% { transform: translate3d(14px, -20px, 0); } 60% { transform: translate3d(-26px, -8px, 0); } 80% { transform: translate3d(20px, 18px, 0); } 100% { transform: translate3d(0, 0, 0); } }

/* ---------- the way in: a plain CSS wipe, in every browser ----------
   html.lg-enter is set by the head script in leagues.pug ONLY on a fresh arrival from Home by a link click (the page before was Home, the navigation was not a reload or back/forward); with reduced motion
   it fades instead of sweeping. Filter, search and paging links come from this page, so they never run it. The wipe is one fixed panel (black, with a white then green leading edge) that slides off to the right in 560 ms, while
   the page rises in underneath: transforms and opacity only, pointer-events none (it never takes a click). When the shared page slide (mixins/kit_vt_guard.pug) is running, the head script skips that
   one transition for this arrival so the two never stack; no view-transition name or pseudo is used here (the 1538 rule: the guard mixin is the only place that names them). */
.pb-wipe { display: none; }
/* b7 review: the panel's resting transform is the END (off to the right), so if the animation never runs it is already gone and can never cover the page */
html.lg-enter .pb-wipe { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: calc(100vw + 160px); z-index: 90; pointer-events: none; will-change: transform;
  background: linear-gradient(90deg, #fff 0 8px, #2ec22e 8px 26px, #06080b 26px 100%);
  transform: translate3d(calc(100vw + 160px), 0, 0); animation: lg-wipe-out 560ms cubic-bezier(.65, 0, .25, 1) both; }
html.lg-enter:not([data-motion="on"]) .pb-wipe { display: none; }
@keyframes lg-wipe-out { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(100vw + 160px), 0, 0); } }
html.lg-enter .pb-main { animation: lg-rise 520ms cubic-bezier(.2, .7, .2, 1) 180ms both; }
@keyframes lg-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
/* reduced motion: the same way in as a fade (nothing sweeps across the screen), never left out */
@media (prefers-reduced-motion: reduce) { html.lg-enter .pb-wipe { transform: none; opacity: 0; animation: lg-wipe-fade 560ms ease-out both; } html.lg-enter .pb-main { animation: lg-fade-in 520ms ease-out 180ms both; } }
@keyframes lg-wipe-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes lg-fade-in { from { opacity: 0; } to { opacity: 1; } }