/* Cinematic scroll reel — big scenes that reveal + parallax as you scroll. */
#fx-showcase.reel{ display:flex; flex-direction:column; gap:clamp(1.2rem,4vw,3rem); }

.reel-panel{
  position:relative; width:100%;
  height:clamp(320px, 72vh, 780px);
  border-radius:22px; overflow:hidden;
  background:var(--bg2,#0d0d12);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
/* the media wrapper is what we clip/scale on reveal */
.reel-media{
  position:absolute; inset:0; border-radius:22px; overflow:hidden; will-change:transform,clip-path;
}
/* image is oversized so it can parallax within the frame without showing edges */
.reel-media img{
  position:absolute; left:0; top:-12%; width:100%; height:124%;
  object-fit:cover; display:block; will-change:transform;
}
/* legibility gradient for the text */
.reel-grad{
  position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 62%),
             linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0) 45%);
}
.reel-text{
  position:absolute; left:clamp(1.2rem,4vw,3.4rem); bottom:clamp(1.4rem,4vw,3rem);
  right:1.2rem; z-index:2; color:#fff; max-width:640px;
}
.reel-cap{
  font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; opacity:.85; margin-bottom:.5rem;
}
.reel-cap::first-letter{ color:var(--yellow,#a855f7); }
.reel-title{
  font-size:clamp(1.5rem,4.4vw,3.1rem); line-height:1.08; font-weight:800; margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}

/* static fallback (reduced-motion / fx-off / no GSAP) — force everything visible */
#fx-showcase.reel .reel-panel.shown .reel-media{ clip-path:none !important; transform:none !important; opacity:1 !important; }
#fx-showcase.reel .reel-panel.shown .reel-cap,
#fx-showcase.reel .reel-panel.shown .reel-title{ opacity:1 !important; transform:none !important; }
body.fx-off #fx-showcase.reel .reel-media img{ top:0; height:100%; }

@media (max-width:640px){
  .reel-panel{ height:clamp(300px, 62vh, 560px); border-radius:18px; }
  .reel-media, .reel-grad{ border-radius:18px; }
}