/* ===================================================================
   Sevra Design Studio — Hero Sd mark load animation
   -------------------------------------------------------------------
   This stylesheet only controls the LOADING STATE of the hero mark.
   The mark's three-state geometry, masks, and rest state live in
   index.html and style.css. Animation behaviour is driven from
   hero-animation.js.

   The .hero-mark--loading class is added by hero-animation.js
   synchronously at script run, while the page-loader's coral sweep
   is still covering the hero region — so toggling Stage 3's mask
   fill from white (revealed) to black (hidden) doesn't produce a
   visible flicker. JS then runs the three sweeps and removes the
   class when the animation completes.

   Reduced-motion: hero-animation.js short-circuits before adding
   the class, so the static SVG (M3 = white-fill, brand-correct
   rest state) is what the user sees. No additional CSS needed.

   No-JS / JS error: same fallback — static rest state shows.
   =================================================================== */

.hero-mark--loading .hero-mark__mask-fill--3 {
  fill: black;
}

/* Belt-and-suspenders: if anything ever toggles the loading class
   under prefers-reduced-motion, neutralise it. */
@media (prefers-reduced-motion: reduce) {
  .hero-mark--loading .hero-mark__mask-fill--3 {
    fill: white;
  }
}