/* PAGE BACKGROUNDS (every page except Home): broadcast studio look, like a pregame show set.
   Deep navy with red/blue/gold studio glows (::before), plus slow light streaks, a faint drifting
   grid, TV scan lines and a big dim PP logo (::after, assets/logo-watermark.png is pre-faded).
   Motion stops for people who turn on "reduce motion". Remove this file + its <link> to undo. */
body.nonhome{background:transparent!important} /* body color would paint over the backdrop layers */
body.nonhome::before{content:""!important;position:fixed!important;inset:0!important;z-index:-2!important;pointer-events:none;
  filter:none!important;transform:none!important;
  background:
    radial-gradient(ellipse 55% 45% at 50% -12%,rgba(231,189,88,.30),transparent 70%),
    radial-gradient(ellipse 60% 55% at 108% 8%,rgba(40,120,235,.48),transparent 70%),
    radial-gradient(ellipse 65% 60% at -10% 105%,rgba(215,22,30,.50),transparent 70%),
    radial-gradient(ellipse 50% 45% at 105% 105%,rgba(40,100,210,.32),transparent 70%),
    linear-gradient(180deg,#07142a 0%,#050d1c 55%,#03070f 100%)!important}
body.nonhome::after{content:""!important;position:fixed!important;inset:0!important;z-index:-1!important;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(130,170,230,.12) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,rgba(130,170,230,.10) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)!important;
  background-size:100% 56px,56px 100%,auto!important;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 45%,#000 45%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 80% at 50% 45%,#000 45%,transparent 100%);
  animation:ppGrid 30s linear infinite}
@keyframes ppGrid{from{background-position:0 0,0 0,0 0}to{background-position:0 56px,56px 0,0 0}}
/* big PP logo behind the page (dim), and a sweep that reveals the full-color logo as it passes, so the
   light brings out the gold, red and chrome instead of washing them out */
html:has(body.nonhome)::before,html:has(body.nonhome)::after{content:"";position:fixed;left:50%;top:50%;z-index:-1;pointer-events:none;
  width:min(80vw,900px);aspect-ratio:1310/1200;transform:translate(-50%,-44%)}
html:has(body.nonhome)::before{background:url(/assets/logo-watermark.png) center/contain no-repeat}
html:has(body.nonhome)::after{background:url(/assets/official-pigskin-logo.png) center/contain no-repeat;
  filter:brightness(1.18) saturate(1.25) drop-shadow(0 0 14px rgba(255,210,120,.35));
  -webkit-mask-image:linear-gradient(105deg,transparent 38%,rgba(0,0,0,.35) 44%,#000 49%,#000 51%,rgba(0,0,0,.35) 56%,transparent 62%);
  mask-image:linear-gradient(105deg,transparent 38%,rgba(0,0,0,.35) 44%,#000 49%,#000 51%,rgba(0,0,0,.35) 56%,transparent 62%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:ppShine 7s ease-in-out infinite}
@keyframes ppShine{0%{-webkit-mask-position:130% 0;mask-position:130% 0}55%,100%{-webkit-mask-position:-30% 0;mask-position:-30% 0}}
@media(prefers-reduced-motion:reduce){body.nonhome::after{animation:none}html:has(body.nonhome)::after{animation:none;opacity:0}}
/* let the backdrop show through the page area (panels keep their own backgrounds) */
body.nonhome .screen.field-page{background:transparent!important}

/* SEE-THROUGH PANELS (Brian 09-27): boxes in front of the logo are semi-transparent so the logo and
   light sweep show through. Text sits on a dark enough tint to stay readable. */
body.nonhome .page-head,
body.nonhome .card,
body.nonhome .panel,
body.nonhome .status-card,
body.nonhome .analysis-card,
body.nonhome .nfl-division,
body.nonhome .matchup-game-card,
body.nonhome .injury-matchup,
body.nonhome .pick-week-bar,
body.nonhome #pickGames{background:linear-gradient(180deg,rgba(12,26,44,.58),rgba(4,10,20,.66))!important}
body.nonhome .notice{background:rgba(10,22,38,.62)!important}
body.nonhome #pickGames .pick-row{background:rgba(6,14,26,.35)!important}
body.nonhome #pickGames .pick-row.game-of-week{background:linear-gradient(90deg,rgba(241,194,50,.10),rgba(7,15,23,.40),rgba(241,194,50,.10))!important}
body.nonhome #pickGames>.pk-group:not(.pk-gotw-head){background:rgba(8,18,32,.70)!important}
body.nonhome .mx-tape,body.nonhome #pickGames .pks-sec{background:linear-gradient(180deg,rgba(12,27,43,.70),rgba(6,13,23,.78))!important}

/* TEAM THEME (team-theme.js): signed-in player's favorite-team colors, spotlights and faint team logo.
   --tc1 / --tc2 are "r g b"; without a favorite team the default red/blue/gold studio stays. */
html.pp-team body.nonhome::before{background:
    radial-gradient(ellipse 55% 45% at 50% -12%,rgb(var(--tc2) / .30),transparent 70%),
    radial-gradient(ellipse 60% 55% at 108% 8%,rgb(var(--tc1) / .55),transparent 70%),
    radial-gradient(ellipse 65% 60% at -10% 105%,rgb(var(--tc2) / .45),transparent 70%),
    radial-gradient(ellipse 50% 45% at 105% 105%,rgb(var(--tc1) / .40),transparent 70%),
    linear-gradient(180deg,#07142a 0%,#050d1c 55%,#03070f 100%)!important}
#ppStage{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
body:not(.nonhome) #ppStage{display:none}
#ppStage .pp-beam{position:absolute;top:-20vh;width:34vw;height:150vh;transform-origin:50% 0;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(180deg,rgb(var(--tc1,90 150 255) / .55),rgb(var(--tc1,90 150 255) / .10) 55%,transparent 80%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(6px)}
#ppStage .pp-beam.l{left:-8vw;animation:ppBeamL 11s ease-in-out infinite alternate}
#ppStage .pp-beam.r{right:-8vw;background:linear-gradient(180deg,rgb(var(--tc2,230 60 60) / .55),rgb(var(--tc2,230 60 60) / .10) 55%,transparent 80%);animation:ppBeamR 13s ease-in-out infinite alternate}
@keyframes ppBeamL{from{transform:rotate(-38deg)}to{transform:rotate(-12deg)}}
@keyframes ppBeamR{from{transform:rotate(38deg)}to{transform:rotate(12deg)}}
#ppStage .pp-team-logo{position:absolute;right:-6vw;bottom:-8vh;width:min(46vw,620px);height:auto;opacity:.12;filter:saturate(1.2) drop-shadow(0 0 30px rgb(var(--tc1) / .5));transform:rotate(-8deg)}
@media(max-width:850px){#ppStage .pp-beam{width:70vw;opacity:.4}#ppStage .pp-team-logo{width:80vw;right:-20vw;bottom:-4vh;opacity:.10}}
@media(prefers-reduced-motion:reduce){#ppStage .pp-beam{animation:none}}

/* TEAM MAKEOVER (Brian 09-27): the whole backdrop turns the team's color and the team logo takes the
   center spot (with the light sweep) instead of the Pigskin logo. */
html.pp-team body.nonhome::before{background:
    radial-gradient(ellipse 60% 45% at 50% -10%,rgb(var(--tc2) / .35),transparent 70%),
    radial-gradient(ellipse 70% 60% at -10% 108%,rgb(var(--tc2) / .30),transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 45%,rgb(var(--tc1) / .55),rgb(var(--tc1) / .85) 70%,rgb(var(--tc1) / .95) 100%),
    linear-gradient(180deg,#0a0f18,#02050a)!important}
html.pp-team:has(body.nonhome)::before{background:var(--team-logo) center/contain no-repeat;opacity:.7;filter:drop-shadow(0 0 2px rgba(255,255,255,.6)) drop-shadow(0 10px 40px rgba(0,0,0,.6));width:min(62vw,720px);aspect-ratio:1/1}
html.pp-team:has(body.nonhome)::after{background:var(--team-logo) center/contain no-repeat;width:min(62vw,720px);aspect-ratio:1/1;
  filter:brightness(1.35) saturate(1.3) drop-shadow(0 0 16px rgb(var(--tc2) / .45))}
@media(max-width:850px){html.pp-team:has(body.nonhome)::before,html.pp-team:has(body.nonhome)::after{width:86vw}}

/* BROADCAST EXTRAS around the center logo (team-theme.js #ppStage): halo, sliding light bands, sparks.
   Team colors when a favorite team is set; red/blue/gold otherwise. */
#ppStage .pp-halo{position:absolute;left:50%;top:50%;width:min(95vw,1100px);aspect-ratio:1;transform:translate(-50%,-44%);border-radius:50%;
  background:radial-gradient(circle,rgb(var(--tc2,231 189 88) / .30) 0%,rgb(var(--tc1,40 110 220) / .18) 38%,transparent 68%);
  animation:ppHalo 6s ease-in-out infinite alternate}
@keyframes ppHalo{from{opacity:.65;transform:translate(-50%,-44%) scale(.96)}to{opacity:1;transform:translate(-50%,-44%) scale(1.04)}}
#ppStage .pp-bands{position:absolute;inset:-20%;opacity:.9;
  background:repeating-linear-gradient(115deg,transparent 0 120px,rgb(var(--tc1,40 110 220) / .16) 120px 190px,transparent 190px 260px,rgb(var(--tc2,215 22 30) / .12) 260px 285px,transparent 285px 420px);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 20%,#000 70%);mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 20%,#000 70%);
  animation:ppBands 40s linear infinite}
@keyframes ppBands{from{background-position:0 0}to{background-position:840px 0}}
#ppStage .pp-sparks{position:absolute;inset:0}
#ppStage .pp-sparks i{position:absolute;bottom:-10px;border-radius:50%;background:rgb(var(--tc2,231 189 88));box-shadow:0 0 8px 2px rgb(var(--tc2,231 189 88) / .7);
  opacity:0;animation:ppSpark 14s linear infinite}
@keyframes ppSpark{0%{transform:translateY(0);opacity:0}10%{opacity:.85}80%{opacity:.5}100%{transform:translateY(-105vh);opacity:0}}
@media(prefers-reduced-motion:reduce){#ppStage .pp-halo,#ppStage .pp-bands,#ppStage .pp-sparks i{animation:none}#ppStage .pp-sparks{display:none}}

/* WAVING FLAG (team-flag.js) replaces the studio look: canvas fills the screen behind the pages;
   the old center logo, glows, beams, bands, sparks and grid are turned off. */
#ppFlag{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none}
body:not(.nonhome) #ppFlag{display:none}
html:has(#ppFlag):has(body.nonhome)::before,html:has(#ppFlag):has(body.nonhome)::after{display:none!important}
html:has(#ppFlag) body.nonhome::after{display:none!important}
html:has(#ppFlag) #ppStage{display:none!important}