/* ============================================================
   BROWARD IMPACT — MOTION LAYER
   Additive premium interactions. Brand: navy #0a1a2f / red #c8102e
   Everything here degrades gracefully + respects reduced motion.
   ============================================================ */

:root{
  --mo-red:#c8102e;
  --mo-navy:#0a1a2f;
  --mo-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. Scroll progress bar ---------- */
.mo-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--mo-red),#ff3d5a);
  z-index:9999; pointer-events:none;
  box-shadow:0 0 12px rgba(200,16,46,.6);
}

/* ---------- 2. Custom cursor (desktop, fine pointer only) ---------- */
.mo-cursor-dot,.mo-cursor-ring{
  position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
  border-radius:50%; mix-blend-mode:difference; will-change:transform;
}
.mo-cursor-dot{ width:7px; height:7px; background:#fff; margin:-3.5px 0 0 -3.5px; }
.mo-cursor-ring{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1.5px solid #fff; transition:width .25s var(--mo-ease),height .25s var(--mo-ease),margin .25s var(--mo-ease),opacity .25s;
}
.mo-cursor-ring.is-hover{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(255,255,255,.08); }
.mo-cursor-ring.is-down{ width:30px; height:30px; margin:-15px 0 0 -15px; }
@media (hover:hover) and (pointer:fine){
  html.mo-cursor-on,html.mo-cursor-on *{ cursor:none !important; }
}

/* ---------- 3. Scroll reveals ---------- */
.mo-reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--mo-ease),transform .9s var(--mo-ease); transition-delay:calc(var(--mo-i,0)*90ms); will-change:opacity,transform; }
.mo-reveal.is-in{ opacity:1; transform:none; }

.mo-reveal-zoom{ opacity:0; transform:scale(1.08); transition:opacity 1s var(--mo-ease),transform 1.1s var(--mo-ease); will-change:opacity,transform; }
.mo-reveal-zoom.is-in{ opacity:1; transform:none; }

/* line mask reveal for big headlines */
.mo-mask{ display:block; overflow:hidden; }
.mo-mask > *{ display:block; transform:translateY(110%); transition:transform 1s var(--mo-ease); transition-delay:calc(var(--mo-i,0)*110ms); }
.mo-mask.is-in > *{ transform:none; }

/* ---------- 4. Hero parallax ---------- */
.mo-parallax{ will-change:transform; }

/* ---------- 5. Magnetic buttons ---------- */
.mo-magnetic{ will-change:transform; transition:transform .35s var(--mo-ease); }

/* ---------- 6. Section counter (maman-style 01 / 07) ---------- */
.mo-counter{
  position:fixed; left:24px; bottom:22px; z-index:60;
  font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:.04em;
  color:#fff; mix-blend-mode:difference; pointer-events:none;
  display:flex; align-items:baseline; gap:4px; opacity:0; transform:translateY(8px);
  transition:opacity .5s,transform .5s;
}
.mo-counter.is-on{ opacity:1; transform:none; }
.mo-counter__cur{ font-size:30px; line-height:1; }
.mo-counter__sep{ font-size:18px; opacity:.6; }
.mo-counter__total{ font-size:18px; opacity:.6; }
.mo-counter__label{ margin-left:12px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.75; max-width:140px; }
@media (max-width:760px){ .mo-counter{ display:none; } }

/* ---------- 7. Scroll cue in hero ---------- */
.mo-scrollcue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7);
  z-index:5; pointer-events:none;
}
.mo-scrollcue__line{ width:1px; height:46px; background:linear-gradient(rgba(255,255,255,.7),transparent); position:relative; overflow:hidden; }
.mo-scrollcue__line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--mo-red); animation:mo-cue 1.8s var(--mo-ease) infinite; }
@keyframes mo-cue{ 0%{ transform:translateY(0) } 100%{ transform:translateY(300%) } }

/* gentle hover lift for cards (applies via JS-added class) */
.mo-lift{ transition:transform .5s var(--mo-ease),box-shadow .5s var(--mo-ease); }
.mo-lift:hover{ transform:translateY(-8px); box-shadow:0 22px 50px -18px rgba(0,0,0,.55); }

/* ---------- Reduced motion: disable everything motion-y ---------- */
@media (prefers-reduced-motion:reduce){
  .mo-reveal,.mo-reveal-zoom,.mo-mask>*{ opacity:1 !important; transform:none !important; transition:none !important; }
  .mo-progress,.mo-cursor-dot,.mo-cursor-ring,.mo-counter,.mo-scrollcue{ display:none !important; }
  html.mo-cursor-on,html.mo-cursor-on *{ cursor:auto !important; }
}