/*!
 * Fragment Hero  ·  styles for the drifting fragment effect
 * Themed via CSS variables. Set these on the target or :root to rebrand:
 *   --fdh-bg, --fdh-accent, --fdh-ink, --fdh-soft
 *   --fdh-fd (display font), --fdh-fh (heading font), --fdh-fb (body font)
 * Falls back to sensible dark-cinematic defaults (the OTT look).
 */
.fdh{
  --fdh-bg:#060606; --fdh-accent:#ff4d00; --fdh-ink:#f5f5f5; --fdh-soft:#cfcfcf;
  --fdh-fd:'Bebas Neue',sans-serif; --fdh-fh:'Space Grotesk',sans-serif; --fdh-fb:'Inter',sans-serif;
  --fdh-h:100vh;
  position:relative;width:100%;height:var(--fdh-h);overflow:hidden;background:var(--fdh-bg);
}

/* drifting mosaic */
.fdh-mosaic{position:absolute;inset:-6% -2%;display:flex;flex-direction:column;justify-content:center;gap:1.4vh;will-change:transform}
.fdh-row{display:flex;gap:1.1vw;flex:0 0 auto;min-height:0}
.fdh-track{display:flex;gap:1.1vw;flex:0 0 auto;will-change:transform}
.fdh-paused .fdh-track{animation-play-state:paused !important}
@keyframes fdhDriftL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fdhDriftR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.fdh-frag{position:relative;height:100%;flex:0 0 auto;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.07);background:#111}
.fdh-square .fdh-frag{border-radius:0}
.fdh-w1{width:20vw} .fdh-w2{width:28vw} .fdh-w3{width:15vw} .fdh-w4{width:34vw}
.fdh-frag img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:filter 1.2s ease,transform 8s ease}
.fdh-grade .fdh-frag img{filter:grayscale(.28) contrast(1.06) brightness(.62) saturate(1.05)}
.fdh-frag::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,.12),rgba(6,6,6,.5));mix-blend-mode:multiply}
.fdh-hoverpause .fdh-frag:hover{}
.fdh-hoverpause:hover .fdh-track{animation-play-state:paused}
.fdh-frag:hover img{filter:grayscale(0) contrast(1.05) brightness(.92) saturate(1.1);transform:scale(1.12)}

/* cinema overlays */
.fdh-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 44%,rgba(6,6,6,.12) 0%,rgba(6,6,6,.6) 55%,rgba(6,6,6,.9) 100%)}
.fdh-vign{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 26vh 6vh rgba(0,0,0,.72)}
.fdh-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:fdhGrain 1.2s steps(3) infinite}
@keyframes fdhGrain{0%{transform:translate(0,0)}33%{transform:translate(-4%,2%)}66%{transform:translate(3%,-3%)}100%{transform:translate(0,0)}}

/* optional overlay content */
.fdh-content{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px}
.fdh-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--fdh-fh);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fdh-soft);margin-bottom:16px}
.fdh-dot{width:8px;height:8px;border-radius:50%;background:var(--fdh-accent);box-shadow:0 0 0 0 rgba(255,77,0,.6);animation:fdhPulse 2.4s infinite}
@keyframes fdhPulse{0%{box-shadow:0 0 0 0 rgba(255,77,0,.5)}70%{box-shadow:0 0 0 13px rgba(255,77,0,0)}100%{box-shadow:0 0 0 0 rgba(255,77,0,0)}}
.fdh-title{font-family:var(--fdh-fd);font-size:clamp(3rem,11vw,9rem);line-height:.84;letter-spacing:.01em;color:var(--fdh-ink);text-shadow:0 8px 60px rgba(0,0,0,.6)}
.fdh-titledot{color:var(--fdh-accent)}
.fdh-sub{max-width:540px;margin:20px auto 0;color:var(--fdh-soft);font-family:var(--fdh-fb);font-weight:300;line-height:1.7;font-size:1.02rem}
.fdh-cta{margin-top:26px;display:inline-flex;gap:.6rem;align-items:center;padding:1rem 2.3rem;background:var(--fdh-accent);color:#0a0a0a;
  font-family:var(--fdh-fh);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:transform .3s,filter .3s}
.fdh-cta:hover{filter:brightness(1.08);transform:scale(1.04)}

@media (prefers-reduced-motion: reduce){ .fdh-track,.fdh-grain,.fdh-dot{animation:none !important} }
@media (max-width:720px){
  .fdh-w1{width:44vw} .fdh-w2{width:60vw} .fdh-w3{width:36vw} .fdh-w4{width:70vw}
}