/* RCB v3.9.2 — scroll/render polish + modern roster controls.
 * Keeps native browser scrolling. During active scroll, nonessential ambient
 * animations pause so the compositor can prioritize scroll and WebGL movement.
 */

/* Prewarmed deferred blocks are painted before they reach the viewport. */
.rcb-prewarm{content-visibility:visible!important}

/* Give the fixed/composited UI its own stable layers without changing layout. */
.site-header,.read-progress{transform:translateZ(0);backface-visibility:hidden}

/* Ambient effects are deliberately frozen only while the page is actively moving.
   They resume from the same animation position after scroll settles. */
html.rcb-scrolling:not(.motion-off) .light-wine,
html.rcb-scrolling:not(.motion-off) .light-green,
html.rcb-scrolling:not(.motion-off) .jersey-3d-card.jersey-in-view .jersey-3d-shell,
html.rcb-scrolling:not(.motion-off) .tag-live-feed.is-replaying{
  animation-play-state:paused!important;
}
html.rcb-scrolling:not(.motion-off) .hero-content,
html.rcb-scrolling:not(.motion-off) .hero-watermark{
  transition-duration:0ms!important;
}

/* Replace OS-font arrows with a deliberate RCB navigation control. */
.slider-controls{align-items:center}
.slider-controls button{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  transition:border-color .2s,background .2s,transform .2s,opacity .2s;
}
.slider-controls button::before{
  content:'';
  position:absolute;
  inset:4px;
  z-index:-1;
  border:1px solid rgba(216,181,122,.08);
  background:linear-gradient(135deg,rgba(113,48,66,.12),rgba(18,50,40,.12));
  transition:border-color .2s,background .2s;
}
.slider-controls svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.slider-controls button:not(:disabled):hover,
.slider-controls button:not(:disabled):focus-visible{
  border-color:rgba(232,199,141,.72);
  background:rgba(63,30,42,.34);
}
.slider-controls button:not(:disabled):hover::before,
.slider-controls button:not(:disabled):focus-visible::before{
  border-color:rgba(232,199,141,.23);
  background:linear-gradient(135deg,rgba(126,52,72,.22),rgba(19,60,47,.18));
}
.slider-controls button:not(:disabled):active{transform:scale(.96)}
.slider-controls button:disabled{opacity:.28}

@media(max-width:760px){
  /* The previous bare square arrow buttons looked generic on small screens.
     This keeps the same footprint but gives them the same metallic/glass language
     as the rest of the RCB interface. */
  .slider-controls{
    gap:6px;
    padding:3px;
    border:1px solid rgba(212,176,112,.18);
    background:linear-gradient(135deg,rgba(44,22,31,.52),rgba(13,36,31,.5));
    box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 1px rgba(255,236,198,.025);
    backdrop-filter:blur(10px);
  }
  .slider-controls button{
    width:38px;
    height:38px;
    border:0;
    color:#dfbd82;
    background:transparent;
  }
  .slider-controls button::before{
    inset:0;
    border-color:rgba(215,179,117,.14);
    background:linear-gradient(145deg,rgba(100,42,59,.18),rgba(18,46,38,.2));
  }
  .slider-controls svg{width:16px;height:16px;stroke-width:1.6}
}

@media(prefers-reduced-motion:reduce){
  .slider-controls button{transition:none}
}