/* Barracudas' five cutouts, shadows and reflections scale together around
   the front soles (95.8% of the original lineup), keeping their floor contact. */
.league-teams[data-selected-team=barracudas]{
 --barracudas-background-drop:clamp(10px,1.4svh,18px);
}
.team-art.barracudas>.team-lineup{
 transform:scale(.96);transform-origin:50% 95.8%;
}

/* Keep the whole lineup inside the first League viewport. Move the floor with
   the players so the existing contact shadows and scene depth stay aligned. */
@media(min-width:1001px){
 .league-teams{
  --league-art-width:min(58vw,calc((100svh - var(--site-nav-height) - 100px)*1.333333));
  --league-art-height:calc(var(--league-art-width)*.75);
  --league-art-top:max(70px,calc(max(680px,calc(43.5vw + 170px))*.9 - 42vw));
  --league-scene-lift:max(28px,calc(var(--site-nav-height) + 26px + var(--league-art-top) + var(--league-art-height) - 100svh + 32px));
 }
 .league-teams .team-art{
  top:var(--league-art-top);width:var(--league-art-width);height:var(--league-art-height);
  translate:0 calc(-1*var(--league-scene-lift));
 }
 /* The other seven teams already position their floor from measured soles. */
 .league-teams:not(.has-layered-team) .league-backdrop{
  translate:0 calc(-1*var(--league-scene-lift) - (43.5vw - var(--league-art-height)) + var(--barracudas-background-drop,0px));
  mask-image:linear-gradient(#000 calc(100% - 120px),transparent);
 }
}

/* Blend the mobile/tablet garage into the page before its actual image edge.
   The upward framing offset, Barracudas background adjustment and phone's
   140px image-height inset all count toward that edge. The mask travels with the backdrop during parallax. */
@media(max-width:1000px){
 .league-teams[data-selected-team=barracudas]{--barracudas-background-drop:8px}
 .league-teams[data-selected-team=barracudas] .league-backdrop{
  background-position:center,50% calc(-20px + var(--barracudas-background-drop));
 }
 .league-teams:not(.has-layered-team) .league-backdrop{
  --league-floor-fade-end:calc(100% - 20px + var(--barracudas-background-drop,0px));
  --league-floor-fade:linear-gradient(to bottom,#000 calc(var(--league-floor-fade-end) - clamp(100px,18vw,160px)),transparent var(--league-floor-fade-end));
  -webkit-mask-image:var(--league-floor-fade);
  mask-image:var(--league-floor-fade);
 }
}
@media(max-width:760px){
 .league-teams:not(.has-layered-team) .league-backdrop{--league-floor-fade-end:calc(100% - 160px + var(--barracudas-background-drop,0px))}
}

/* A phone/tablet scene uses the cast's measured scale and floor, with room
   above/below to blend into the section rather than stretching the hangar. */
@media(max-width:1000px){
 #teams[data-mobile-team-scene] .league-backdrop{
  background-size:100% 100%,var(--mobile-backdrop-width) var(--mobile-backdrop-height)!important;
  background-position:center,50% var(--mobile-backdrop-y)!important;
  background-repeat:no-repeat;background-color:transparent;
  --mobile-scene-mask:linear-gradient(to bottom,transparent var(--mobile-backdrop-fade-in-start),#000 var(--mobile-backdrop-fade-in-end),#000 var(--mobile-backdrop-fade-start),transparent var(--mobile-backdrop-fade-end));
  -webkit-mask-image:var(--mobile-scene-mask);mask-image:var(--mobile-scene-mask);
  isolation:isolate;filter:blur(.6px);
 }
 /* Blur only the scenery image, never sample the character layers in Safari. */
 #teams[data-mobile-team-scene] .league-backdrop::after{display:none}
 #teams .team-art.barracudas>.team-lineup>img[data-character]{filter:none}
 #teams .individual-team-lineup .cutout-sway{filter:brightness(var(--team-depth-brightness,1))}
 #teams .team-art.barracudas .team-contact{
  display:block;position:absolute;z-index:2;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(ellipse,#01050db8 5%,#01050d55 40%,transparent 72%);pointer-events:none;
 }
}