/* RCB v3.8 — cinematic polish.
 * Additive motion/brand layer: opacity + transform only for reveals,
 * no external assets or animation library, and no changes to core layout metrics.
 */
:root{
  --cinematic-ease:cubic-bezier(.18,.78,.22,1);
  --cinematic-gold:rgba(213,179,119,.82);
}

/* Architectural chapter signature and ghost numbering. */
.cinematic-section{isolation:isolate}
.cinematic-section::before{
  content:attr(data-cinematic-index);
  position:absolute;
  z-index:-1;
  top:54px;
  right:var(--pad);
  font:700 clamp(150px,19vw,330px)/.72 var(--display);
  letter-spacing:-.075em;
  color:transparent;
  -webkit-text-stroke:1px rgba(226,191,133,.055);
  opacity:.9;
  pointer-events:none;
  user-select:none;
}
.cinematic-signature{
  position:absolute;
  z-index:1;
  top:58px;
  left:var(--pad);
  right:var(--pad);
  display:flex;
  align-items:center;
  gap:13px;
  height:21px;
  margin:0;
  color:rgba(218,184,127,.62);
  font:700 7px/1 var(--body);
  letter-spacing:2.1px;
  text-transform:uppercase;
  pointer-events:none;
}
.cinematic-signature::before{content:'';width:clamp(36px,6vw,92px);height:1px;background:linear-gradient(90deg,rgba(211,177,119,.05),rgba(211,177,119,.5))}
.cinematic-signature::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(211,177,119,.22),transparent 72%)}
.cinematic-signature i{display:block;width:5px;height:5px;flex:none;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 14px rgba(215,180,116,.18)}
.cinematic-signature b{font:inherit;white-space:nowrap}

/* Section reveal choreography. JS only activates this after observers exist. */
.cinematic-ready:not(.motion-off) .cinematic-section .cinematic-step{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition-property:opacity,transform;
  transition-duration:520ms;
  transition-timing-function:var(--cinematic-ease);
  transition-delay:var(--cinematic-delay,0ms);
  will-change:opacity,transform;
}
.cinematic-ready:not(.motion-off) .cinematic-section .cinematic-step.cinematic-line{
  transform:translate3d(-16px,0,0) scaleX(.92);
  transform-origin:left center;
}
.cinematic-ready:not(.motion-off) .cinematic-section.is-revealed .cinematic-step{
  opacity:1;
  transform:none;
  will-change:auto;
}
.cinematic-ready:not(.motion-off) .cinematic-section.is-revealed .cinematic-step.cinematic-line{transform:none}
.cinematic-ready:not(.motion-off) .cinematic-section .player-card.cinematic-item{
  opacity:0;
  transform:translate3d(0,18px,0) scale(.988);
  transition:opacity 430ms var(--cinematic-ease),transform 430ms var(--cinematic-ease),border-color .3s,background .3s,box-shadow .3s;
  transition-delay:var(--cinematic-card-delay,0ms);
}
.cinematic-ready:not(.motion-off) .cinematic-section.is-revealed .player-card.cinematic-item{opacity:1;transform:none}

/* Player cards: a restrained interaction cue, no layout shift. */
.player-card{--profile-cue-x:8px}
.player-card::before{
  content:'';
  position:absolute;
  z-index:5;
  top:0;
  right:0;
  width:34px;
  height:34px;
  border-top:1px solid rgba(222,185,120,.2);
  border-right:1px solid rgba(222,185,120,.2);
  opacity:.5;
  transition:border-color .28s,opacity .28s,transform .28s;
  pointer-events:none;
}
.player-profile-cue{
  position:absolute;
  z-index:6;
  top:15px;
  right:15px;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:calc(100% - 56px);
  color:var(--gold-bright);
  font:800 7px/1 var(--body);
  letter-spacing:1.4px;
  text-transform:uppercase;
  opacity:0;
  transform:translate3d(var(--profile-cue-x),0,0);
  transition:opacity .24s,transform .28s var(--cinematic-ease);
  pointer-events:none;
  white-space:nowrap;
}
.player-profile-cue b{font:400 15px/1 var(--body);color:var(--gold)}

.player-card.profile-cue-active::before{border-color:rgba(234,201,145,.72);opacity:1;transform:translate(-4px,4px)}
.player-card.profile-cue-active .player-profile-cue{opacity:1!important;transform:none!important;transition:none!important}
.player-card.profile-cue-active .slot-emblem{opacity:.57;transform:translate3d(-2px,-2px,8px) rotateY(-11deg) rotateX(6deg)}
@media(hover:hover) and (pointer:fine){
  .player-card:hover,.player-card:focus-visible{transform:translate3d(0,-4px,0) scale(1.008);border-color:rgba(221,183,117,.72);box-shadow:0 18px 46px rgba(0,0,0,.22)}
  .player-card:hover::before,.player-card:focus-visible::before{border-color:rgba(234,201,145,.72);opacity:1;transform:translate(-4px,4px)}
  .player-card:hover .player-profile-cue,.player-card:focus-visible .player-profile-cue{opacity:1!important;transform:none!important;transition:none!important}
  .player-card:hover .slot-emblem,.player-card:focus-visible .slot-emblem{opacity:.57;transform:translate3d(-2px,-2px,8px) rotateY(-11deg) rotateX(6deg)}
}

/* v3.8 profile hierarchy: event first, result/status second, data-like rather than emoji-like. */
.player-profile-dialog .player-profile-kicker{gap:10px;flex-wrap:wrap}
.player-profile-dialog .player-profile-kicker .profile-sequence{color:var(--gold-bright);letter-spacing:1.9px}
.player-profile-achievements ol{grid-template-columns:1fr!important;gap:7px!important}
.player-highlight{
  grid-template-columns:34px minmax(0,1fr) auto!important;
  gap:13px!important;
  min-height:64px!important;
  padding:12px 15px!important;
  background:linear-gradient(90deg,rgba(79,34,48,.27),rgba(15,27,24,.30))!important;
}
.player-highlight::before{
  content:'';
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:2px;
  background:var(--profile-accent,#a8875d);
  opacity:.72;
}
.player-highlight:after{height:1px!important;opacity:.28!important}
.player-highlight-index{align-self:center;color:#8f8580!important}
.player-highlight-event{
  min-width:0;
  font:500 16px/1.18 var(--display);
  color:#f0e4dc;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}
.player-highlight-result{
  justify-self:end;
  max-width:145px;
  padding:7px 9px 6px;
  border:1px solid color-mix(in srgb,var(--profile-accent,#c5a26d) 48%, transparent);
  color:var(--profile-accent,#c5a26d);
  background:color-mix(in srgb,var(--profile-accent,#c5a26d) 7%, transparent);
  font:800 7px/1.12 var(--body);
  letter-spacing:1.25px;
  text-transform:uppercase;
  text-align:right;
}

/* Hero depth response: desktop pointer only; text remains readable and stable. */
.hero{--hero-shift-x:0px;--hero-shift-y:0px;--hero-mark-x:0px;--hero-mark-y:0px}
@media(min-width:761px){
  .hero-content{transform:translate3d(var(--hero-shift-x),calc(-50% + var(--hero-shift-y)),0);transition:transform 220ms ease-out}
  .hero-watermark{transform:translate3d(var(--hero-mark-x),var(--hero-mark-y),0);transition:transform 320ms ease-out}
  .hero-depth-active .hero-content{transition-duration:70ms}
  .hero-depth-active .hero-watermark{transition-duration:110ms}
}

/* Conservative offscreen paint deferral. These are content blocks, not chapter wrappers,
   so scene section offsets and scroll choreography remain stable. */
@supports(content-visibility:auto){
  #tag-store{content-visibility:auto;contain-intrinsic-size:auto 820px}
  .product-grid{content-visibility:auto;contain-intrinsic-size:auto 260px}
  .site-footer{content-visibility:auto;contain-intrinsic-size:auto 260px}
}

/* Very small screens: preserve the cue, reduce decorative weight. */
@media(max-width:760px){
  .cinematic-section::before{top:55px;right:18px;font-size:42vw;-webkit-text-stroke-color:rgba(226,191,133,.045)}
  .cinematic-signature{top:31px;left:var(--pad);right:var(--pad);gap:9px;letter-spacing:1.5px}
  .cinematic-signature b{display:none}
  .cinematic-signature::before{width:32px}
  .player-profile-cue{top:12px;right:12px;opacity:.62;transform:none}
  .player-profile-cue span{display:none}
  .player-profile-cue b{font-size:17px}
  .player-highlight{grid-template-columns:27px minmax(0,1fr) auto!important;gap:10px!important;padding:11px 12px!important}
  .player-highlight-event{font-size:14px}
  .player-highlight-result{max-width:104px;padding:6px 7px 5px;font-size:6.5px;letter-spacing:.8px}
}
@media(max-width:430px){
  .player-highlight{grid-template-columns:25px minmax(0,1fr)!important}
  .player-highlight-result{grid-column:2;justify-self:start;max-width:100%;text-align:left;margin-top:-2px}
}

.motion-off .cinematic-step,.motion-off .cinematic-item{opacity:1!important;transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  .cinematic-step,.cinematic-item{opacity:1!important;transform:none!important;transition:none!important}
  .hero-content,.hero-watermark{transition:none!important}
}