/* ============================================================================
   WhiteGold Media — immersive media FX layer
   Video backgrounds · hover-to-play tiles · WebGL transitions · scroll cinema
   Loaded AFTER site.css. Everything degrades gracefully + respects reduced-motion.
   ============================================================================ */

/* ---------- Page transition curtain ---------- */
.fx-curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;background:#0A0A0A;
  transform:translateY(0);transition:transform .6s cubic-bezier(.76,0,.24,1)}
.fx-curtain .fx-curtain-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);color:var(--gold);font-size:22px;letter-spacing:.04em;opacity:0;transition:opacity .3s}
/* reveal on load: slide curtain up and away */
body.fx-ready .fx-curtain{transform:translateY(-100%)}
/* leaving: drop curtain down */
body.fx-leaving .fx-curtain{transform:translateY(0);transition:transform .45s cubic-bezier(.76,0,.24,1)}
body.fx-leaving .fx-curtain .fx-curtain-mark{opacity:1}

/* ---------- Video hero background ---------- */
.hero .fx-video-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero .fx-video-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease}
.hero .fx-video-bg video.fx-on{opacity:.55}
.hero .fx-video-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.35) 40%,rgba(10,10,10,.85));}
/* when a video bg is present, soften the particle canvas so they layer nicely */
.hero.has-video #hero-canvas{opacity:.5}

/* ---------- Hover-to-play video tiles ---------- */
.work .fx-hover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;z-index:1;pointer-events:none}
.work.fx-playing .fx-hover-video{opacity:1}
.work.fx-playing .ph{transform:scale(1.06)}
.work .grad,.work .meta,.work .play{z-index:2}
.work .fx-live{position:absolute;top:22px;left:22px;z-index:3;display:none;align-items:center;gap:7px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.work .fx-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 8px #ff3b3b;animation:fxpulse 1.4s infinite}
.work.fx-playing .fx-live{display:flex}
@keyframes fxpulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- WebGL photo transition slider ---------- */
.fx-slider{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;background:#000;isolation:isolate}
.fx-slider canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-slider .fx-fallback{position:absolute;inset:0;background-size:cover;background-position:center}
.fx-slider.fx-ready .fx-fallback{opacity:0;transition:opacity .4s}
.fx-slider .fx-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:9px}
.fx-slider .fx-dots button{width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.4);transition:.3s;padding:0}
.fx-slider .fx-dots button.on{background:var(--gold);width:22px;border-radius:5px}
.fx-slider .fx-cap{position:absolute;left:24px;bottom:22px;z-index:3;max-width:70%}
.fx-slider .fx-cap .t{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.fx-slider .fx-cap h3{font-size:22px;color:#fff;margin-top:6px}

/* ---------- Cinematic scroll: parallax + clip reveals ---------- */
[data-parallax]{will-change:transform}
.fx-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1),transform 1.1s cubic-bezier(.76,0,.24,1);transform:scale(1.04)}
.fx-clip.in{clip-path:inset(0 0 0 0);transform:scale(1)}
.fx-line-rise{overflow:hidden;display:inline-block}
.fx-line-rise > span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.fx-line-rise.in > span{transform:translateY(0)}

/* Media band — full-bleed image/video strip between sections */
.fx-band{position:relative;height:62vh;min-height:420px;overflow:hidden;display:grid;place-items:center;border-block:1px solid var(--line-soft)}
.fx-band .fx-band-media{position:absolute;inset:-10% 0;background-size:cover;background-position:center;will-change:transform}
.fx-band video.fx-band-media{width:100%;height:120%;object-fit:cover}
.fx-band::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 50%,rgba(10,10,10,.2),rgba(10,10,10,.75))}
.fx-band .fx-band-copy{position:relative;z-index:2;text-align:center;max-width:760px;padding:0 24px}
.fx-band .fx-band-copy h2{font-size:clamp(28px,5vw,56px)}
.fx-band .fx-band-copy p{color:rgba(255,255,255,.8);margin-top:14px;font-size:clamp(16px,2vw,19px)}

/* ---------- Per-section backgrounds (block builder) ---------- */
.has-bg{position:relative;isolation:isolate}
.block-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.block-media .block-media-img{position:absolute;inset:-4%;background-size:cover;background-position:center}
.block-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.block-media.overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.8),rgba(10,10,10,.84))}

@media (prefers-reduced-motion:reduce){
  .fx-curtain{display:none}
  .fx-clip{clip-path:none;transform:none;transition:none}
  .fx-line-rise > span{transform:none}
  .hero .fx-video-bg video{opacity:.4}
  [data-parallax]{transform:none!important}
}