/* Section color gathers around the content and returns to the page tone at each edge. */
:root{--section-fade:clamp(100px,15vw,220px)}
body main>:is(.highlights,.tcg-invitation,.studio,.toolkit-story,.studio-overview,.atlas-section,.toolkits-section,.tcg-end){
  background:linear-gradient(to bottom,
    var(--bg),
    color-mix(in srgb,var(--bg) 50%,var(--section-tone)) min(8%,calc(var(--section-fade)*.5)),
    var(--section-tone) min(18%,var(--section-fade)),
    var(--section-tone) max(82%,calc(100% - var(--section-fade))),
    color-mix(in srgb,var(--bg) 50%,var(--section-tone)) max(92%,calc(100% - var(--section-fade)*.5)),
    var(--bg));
}
.highlights,.studio{--section-tone:#222327}
.tcg-invitation{--section-tone:#1e1f23}
.toolkit-story{--section-tone:#202226}
.studio-overview,.atlas-section,.toolkits-section{--section-tone:#222329}
.tcg-end{--section-tone:#202126}

/* Fade only background paint: text, artwork, sticky scenes and controls stay untouched. */
/* Let the product shadow dissipate beyond the hero instead of clipping it at the seam. */
body.overview-page .hero{
  overflow:visible;
  background:
    linear-gradient(to top,var(--bg),transparent var(--section-fade)),
    radial-gradient(ellipse at 50% 82%,#00d0e509,transparent 55%),
    radial-gradient(ellipse at 50% 63%,#2a2b31,transparent 62%),var(--bg);
}
body.tcg-page .pack-story{
  background:
    linear-gradient(to top,var(--bg),transparent var(--section-fade)),
    radial-gradient(ellipse 60% 75% at 73% 42%,#342a3b 0%,#222127 54%,#191a1d 85%);
}
body.tcg-page .world-section{
  background:
    linear-gradient(to bottom,var(--bg),transparent var(--section-fade),transparent calc(100% - var(--section-fade)),var(--bg)),
    radial-gradient(ellipse at 50% 25%,#48728209,transparent 65%),var(--bg);
}
body.tcg-page .site-footer{background:var(--bg)}
@media(max-width:767px){
  body.studio-page .studio-hero{
    background:
      linear-gradient(to top,var(--bg),transparent var(--section-fade)),
      radial-gradient(ellipse 100% 50% at 50% 100%,#303740 0%,#262b33 44%,#191a1d 100%);
  }
}
@media(min-width:768px){
  /* Preserve the original margin containment while allowing the shadow to overflow. */
  body.overview-page .hero{display:flow-root}
}