/* premium-motion : cinematic scene pack  (premium-motion 2.0, Phase 6)
   Pair with scene.js. Ported from field use (RZEC fire-protection site).

     Embers  — spark drift over a hero / dark banner (host must be positioned):
       <div class="hero md-embers" data-max="36" data-rate="0.35" data-hue="30"></div>
       hue 30 = warm ember, 200 = cool spark; data-spawn="full" emits over whole area.

     Ghost   — giant watermark word drifting on scroll, behind a section's content:
       <section class="stats"> <div class="md-ghost light">TRUSTED</div> ...content... </section>
       put it as the FIRST child; .light = for dark sections. data-drift = px travel.

     Cue     — CSS-only scroll-down hint (no JS): <div class="md-cue"></div>

     Float   — perpetual idle bob after entrance (JS): class="md-float" data-amp="5"

     Beat    — perpetual "big & small" scale pulse (CSS only). Stagger siblings with
               style="--d:.12s" (index*step) so the pulse RUNS across them as a wave:
                 <div class="card md-beat" style="--d:0s">...</div>
               Works on HTML blocks AND SVG <g> nodes (scales from each element's own
               centre, in place). Tune: --beat (peak scale, def 1.08), --beat-dur (def 2.6s).
   ============================================================ */

/* ---- embers canvas ---- */
.md-embers{ position:relative; }
.md-embers-cv{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.md-embers > *:not(.md-embers-cv){ position:relative; z-index:2; }

/* ---- ghost watermark ---- */
.md-ghost{
  position:absolute; top:50%; left:50%; z-index:0; pointer-events:none;
  transform:translate3d(0,0,0);
  font-family:'Montserrat',system-ui,sans-serif; font-weight:800;
  font-size:clamp(90px,20vw,300px); line-height:1; letter-spacing:-.03em;
  white-space:nowrap; margin-top:-.5em; margin-left:-50vw; width:100vw; text-align:center;
  color:rgba(31,42,55,.045);
  user-select:none;
}
.md-ghost.light{ color:rgba(255,255,255,.05); }
.md-ghost + *{ position:relative; z-index:1; }
[data-motion="off"] .md-ghost{ transform:none !important; }

/* ---- idle float ---- */
.md-float{ will-change:transform; }
[data-motion="off"] .md-float{ transform:none !important; }

/* ---- beat : perpetual scale pulse; stagger via --d for a running wave ---- */
@keyframes md-beat{ 0%,54%,100%{ transform:scale(1); } 70%{ transform:scale(var(--beat,1.08)); } }
.md-beat{ transform-box:fill-box; transform-origin:center;
  animation:md-beat var(--beat-dur,2.6s) cubic-bezier(.22,.61,.2,1) infinite; animation-delay:var(--d,0s); }
[data-motion="off"] .md-beat{ animation:none; }
@media (prefers-reduced-motion: reduce){ .md-beat{ animation:none; } }

/* ---- scroll cue (pure CSS) ---- */
.md-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:2px solid rgba(255,255,255,.55); border-radius:16px;
  pointer-events:none;
}
.md-cue::before{
  content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px;
  background:rgba(255,255,255,.85); transform:translateX(-50%);
  animation:md-cue-dot 1.6s cubic-bezier(.22,.61,.2,1) infinite;
}
@keyframes md-cue-dot{ 0%{opacity:0;transform:translate(-50%,0)} 20%{opacity:1} 80%{opacity:1} 100%{opacity:0;transform:translate(-50%,16px)} }
@media (prefers-reduced-motion: reduce){ .md-cue::before{ animation:none; opacity:.85; } }