/* ==========================================================================
   HERO FX: five dynamic banners for the principal design. One stylesheet, one
   script (hero-fx.js). Each section carries data-fx="clock|daynight|results|
   depth|video". Everything here is prefixed .fx. Rules:
   - the headline stays readable over any photo (navy wash behind the copy)
   - nothing autoplays under prefers-reduced-motion
   - anything that moves can be paused
   ========================================================================== */
.fx{--fx-navy:9,26,58;--pos:50% 40%}
.fx-bg{position:absolute;inset:0;isolation:isolate;background:#0A1C3C}
.fx-bg img,.fx-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos);opacity:0;transition:opacity 1.4s ease;z-index:0}
.fx-bg img.on,.fx-bg video.on{opacity:1}
.fx-bg img.on{animation:prHeroZoom 28s ease-in-out infinite alternate;transform-origin:var(--pos)}
@media (prefers-reduced-motion:reduce){.fx-bg img.on{animation:none}.fx-bg img,.fx-bg video{transition:none}}
/* blue night tint (the courts photo is purple); a colour-blend layer re-hues it */
.fx--tint .fx-bg::before,.fx[data-band="night"] .fx-bg::before{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;background:#2B63B5;mix-blend-mode:color;opacity:.6}
.fx-wash{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(var(--fx-navy),.86) 0%,rgba(var(--fx-navy),.62) 34%,
  rgba(var(--fx-navy),.2) 62%,rgba(var(--fx-navy),0) 82%),
  linear-gradient(0deg,rgba(var(--fx-navy),.4) 0%,rgba(var(--fx-navy),0) 35%)}
.fx .pr-hero__wrap{position:relative;z-index:3}
.fx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:64px;align-items:center}
.fx-cta{display:inline-block;margin:0 16px 28px 0;text-decoration:none}
.fx-cta[hidden]{display:none}
.fx--daynight .pr-hero__copy{max-width:50ch}
.fx--daynight h1{font-size:clamp(2.5rem,5.2vw,4.3rem)}
.fx-eyebrow{margin:0 0 10px;font-family:var(--font-ui);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-invert-mute)}
.fx-eyebrow::before{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 1. custody clock -------------------------------------------------- */
.fx-panel{background:rgba(var(--fx-navy),.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);padding:26px 26px 22px;color:var(--text-invert);
  border-radius:2px;text-align:left;font-family:var(--font-ui)}
.fx-panel__h{font-family:var(--font-display);font-weight:400;font-size:1.55rem;line-height:1.15;
  margin:0 0 14px;color:#fff}
.fx-clock{position:relative;width:148px;height:148px;margin:6px auto 12px}
.fx-ring{width:100%;height:100%;transform:rotate(-90deg)}
.fx-ring__track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:7}
.fx-ring__bar{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:314.16;stroke-dashoffset:314.16;transition:stroke-dashoffset .35s ease}
.fx-ring__tick{stroke:#fff;stroke-width:2;opacity:.75}
.fx-clock__read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center}
.fx-clock__read b{font-family:var(--font-display);font-weight:400;font-size:2.4rem;line-height:1;color:#fff}
.fx-clock__read small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-invert-mute);margin-top:4px}
.fx-range{width:100%;margin:6px 0 10px;accent-color:var(--gold)}
.fx-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fx-presets button{font:inherit;font-size:12.5px;color:#fff;background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 12px;transition:background .2s,border-color .2s}
.fx-presets button:hover,.fx-presets button[aria-pressed="true"]{background:rgba(255,255,255,.16);border-color:#fff}
.fx-stage{min-height:136px}
.fx-stage h3{font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin:0 0 6px;font-weight:700}
.fx-stage p{margin:0;font-size:15px;line-height:1.55;color:var(--text-invert)}
.fx-panel .fx-cta{display:block;text-align:center;margin:14px 0 8px}
.fx-note{margin:0;font-size:12px;color:var(--text-invert-mute)}

/* ---- 2. day to night --------------------------------------------------- */
.fx-chip{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 14px;
  background:rgba(var(--fx-navy),.55);border:1px solid rgba(255,255,255,.2);border-radius:999px;
  font-family:var(--font-ui);font-size:13px;color:#fff}
.fx-dot{width:8px;height:8px;border-radius:50%;background:#58D68D;box-shadow:0 0 0 0 rgba(88,214,141,.6);
  animation:fxPulse 2s infinite}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(88,214,141,.55)}70%{box-shadow:0 0 0 9px rgba(88,214,141,0)}100%{box-shadow:0 0 0 0 rgba(88,214,141,0)}}
@media (prefers-reduced-motion:reduce){.fx-dot{animation:none}}
.fx [data-fx-h1],.fx [data-fx-sub]{transition:opacity .35s ease}
.fx .is-swapping{opacity:0}
.fx-toggle{position:absolute;right:24px;bottom:24px;z-index:4;display:flex;gap:4px;padding:4px;
  background:rgba(var(--fx-navy),.6);border:1px solid rgba(255,255,255,.2);border-radius:999px;
  font-family:var(--font-ui)}
.fx-toggle button{font:inherit;font-size:12.5px;color:#fff;background:transparent;border:0;cursor:pointer;
  padding:6px 12px;border-radius:999px}
.fx-toggle button[aria-pressed="true"]{background:#fff;color:#0A1C3C}

/* ---- 3. results carousel ----------------------------------------------- */
.fx-slides{display:grid;max-width:560px;padding-bottom:70px}
.fx-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .7s ease,transform .7s ease,visibility 0s linear .7s}
.fx-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform .7s ease}
.fx-stat{font-family:var(--font-display);font-size:clamp(3.4rem,8vw,6.4rem);line-height:1;color:var(--gold);
  margin:0 0 14px;letter-spacing:-.02em}
.fx-slide h2{font-family:var(--font-display);font-weight:400;color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);
  margin:0 0 12px;line-height:1.15}
.fx-slide p.fx-text{margin:0 0 20px;color:var(--text-invert);font-family:var(--font-ui);font-size:16px;line-height:1.6;max-width:46ch}
.fx-slide .link-arrow{color:#fff}
.fx-controls{position:absolute;left:0;right:0;bottom:30px;z-index:4}
.fx-controls .wrap{display:flex;align-items:center;gap:14px}
.fx-steps{display:flex;gap:8px;flex:1;max-width:340px}
.fx-step{flex:1;height:22px;background:transparent;border:0;cursor:pointer;position:relative;padding:0}
.fx-step::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(255,255,255,.3)}
.fx-step::after{content:"";position:absolute;left:0;top:10px;height:2px;width:0;background:var(--gold)}
.fx-step.done::after{width:100%}
.fx-step.on::after{width:100%;animation:fxFill var(--fx-dur,7s) linear forwards}
.fx-controls.is-paused .fx-step.on::after{animation-play-state:paused}
.fx--static .fx-step.on::after{animation:none;width:100%}
@keyframes fxFill{from{width:0}to{width:100%}}
.fx-ico{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;
  color:#fff;cursor:pointer;display:grid;place-items:center;font:inherit;font-size:14px}
.fx-ico:hover{background:rgba(255,255,255,.16)}

/* ---- 4. depth + torchlight --------------------------------------------- */
.fx--depth .fx-bg img.on{animation:none;
  transform:translate3d(calc(var(--px,0)*-22px),calc(var(--py,0)*-14px),0) scale(1.09)}
.fx--depth .pr-hero__copy{transform:translate3d(calc(var(--px,0)*9px),calc(var(--py,0)*6px),0)}
.fx-spot{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle 300px at var(--mx,72%) var(--my,45%),rgba(190,215,255,.22) 0%,rgba(190,215,255,0) 100%),
  radial-gradient(circle 460px at var(--mx,72%) var(--my,45%),rgba(var(--fx-navy),0) 0%,rgba(var(--fx-navy),.68) 100%)}
.fx-motes{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
.fx--depth .fx-wash{z-index:3}
.fx--depth .pr-hero__wrap{z-index:4}

/* ---- 5. video ----------------------------------------------------------- */
.fx-video{object-fit:cover}
.fx-pause{position:absolute;right:24px;bottom:24px;z-index:4;display:flex;align-items:center;gap:8px;
  font:inherit;font-family:var(--font-ui);font-size:12.5px;color:#fff;background:rgba(var(--fx-navy),.6);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;cursor:pointer}
.fx-pause:hover{background:rgba(var(--fx-navy),.85)}

/* ---- small screens ------------------------------------------------------ */
@media (max-width:900px){
  .fx-grid{grid-template-columns:1fr;gap:28px;padding-block:36px}
  .fx-panel{max-width:460px;margin-inline:auto}
}
@media (max-width:760px){
  .fx-wash{background:linear-gradient(180deg,rgba(var(--fx-navy),.55) 0%,rgba(var(--fx-navy),.55) 45%,rgba(var(--fx-navy),.86) 100%)}
  .fx-toggle,.fx-pause{right:12px;bottom:12px}
  .fx-slides{padding-bottom:84px}
  .fx-steps{max-width:none}
  .fx-chip{font-size:12px}
  .fx--results .fx-wash{background:linear-gradient(180deg,rgba(var(--fx-navy),.7) 0%,rgba(var(--fx-navy),.68) 50%,rgba(var(--fx-navy),.9) 100%)}
}