/* ==========================================================================
   SALASAR — motion system (pairs with assets/js/salasar-motion.js)
   - Only animates transform / opacity / clip-path / scale (compositor-friendly).
   - Everything is gated behind html.m-on, which the script sets only when motion is
     allowed (no prefers-reduced-motion) — without JS or with reduced motion the page
     is fully visible and static.
   - CSS-only failsafe: any element still hidden after 7s is forced visible, so a stalled
     observer can never leave content invisible.
   ========================================================================== */

/* ---- reveal states ------------------------------------------------------- */
html.m-on [data-m]:not(.m-done){
  transition:
    opacity .9s var(--ease) var(--d, 0ms),
    transform .9s var(--ease) var(--d, 0ms),
    clip-path 1.25s var(--ease) var(--d, 0ms);
}
html.m-on [data-m="up"]:not(.m-in){ opacity:0; transform:translate3d(0, 26px, 0); }

/* images: curtain wipe top→bottom + slow zoom-settle on the picture itself */
html.m-on [data-m="img"]:not(.m-in){ clip-path: inset(0 0 100% 0); }
html.m-on [data-m="img"].m-done{ clip-path:none; }
html.m-on [data-m="img"] img{ scale:1.22; transition: scale 1.8s var(--ease) var(--d, 0ms); will-change:scale; }
html.m-on [data-m="img"].m-in img{ scale:1; }
html.m-on [data-m="img"][data-par] img,
html.m-on [data-m="img"][data-par].m-in img{ scale:1.13; }
html.m-on [data-m="img"].m-done img{ will-change:auto; }

/* page-hero background: no wipe (it is full-bleed), just a slow settle */
html.m-on [data-m="hero-img"] img{ scale:1.3; transition: scale 2.6s var(--ease); }
html.m-on [data-m="hero-img"].m-in img{ scale:1.13; }

/* headings / big paragraphs: words rise out of a mask, staggered */
html.m-on .m-w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .08em .14em 0; margin:0 -.08em -.14em 0; }
html.m-on .m-wi{ display:inline-block; }
html.m-on [data-m="words"]:not(.m-in) .m-wi{ transform:translate3d(0, 112%, 0); }
html.m-on [data-m="words"] .m-wi{
  transition: transform 1s var(--ease) calc(var(--d, 0ms) + min(var(--wi, 0) * 26ms, 760ms));
}

/* a stagger group that sat inside a .reveal wrapper: let the children do the work */
html.m-on .reveal.m-own{ opacity:1; transform:none; }

/* ---- failsafe: never leave anything hidden ------------------------------- */
html.m-on [data-m="up"]:not(.m-in){ animation: mFS .01s linear 7s forwards; }
html.m-on [data-m="img"]:not(.m-in){ animation: mFSclip .01s linear 7s forwards; }
html.m-on [data-m="img"]:not(.m-in) img,
html.m-on [data-m="hero-img"]:not(.m-in) img{ animation: mFSimg .01s linear 7s forwards; }
html.m-on [data-m="words"]:not(.m-in) .m-wi{ animation: mFS .01s linear 7s forwards; }
@keyframes mFS{ to{ opacity:1; transform:none; } }
@keyframes mFSclip{ to{ clip-path: inset(0 0 0 0); } }
@keyframes mFSimg{ to{ scale:1; } }

/* ---- scroll progress bar -------------------------------------------------- */
.m-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9998; pointer-events:none; }
.m-progress i{ display:block; height:100%; background: var(--brand-red); transform:scaleX(0); transform-origin:left; }

/* ---- micro-interactions & page transitions (motion-allowed only) ---------- */
@media (prefers-reduced-motion: no-preference){

  /* hotspots gently invite a hover */
  .hotspot{ animation: mPulse 2.6s var(--ease) infinite; }
  .hotspot:hover, .hotspot.is-open{ animation:none; }
  @keyframes mPulse{
    0%{ box-shadow: 0 0 0 0 rgba(163,30,34,.5), 0 6px 16px -6px rgba(0,0,0,.5); }
    70%{ box-shadow: 0 0 0 16px rgba(163,30,34,0), 0 6px 16px -6px rgba(0,0,0,.5); }
    100%{ box-shadow: 0 0 0 0 rgba(163,30,34,0), 0 6px 16px -6px rgba(0,0,0,.5); }
  }

  /* buttons: soft lift + arrow nudge */
  .btn{ transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
  .btn-outline-dark:hover, .btn-outline-light:hover{ transform: translateY(-2px); }
  .btn-primary:hover{ box-shadow: 0 14px 28px -14px rgba(163,30,34,.7); }
  .link-underline .arrow, .link-underline > span:last-child{ display:inline-block; transition: transform .35s var(--ease); }
  .link-underline:hover .arrow, .link-underline:hover > span:last-child{ transform: translateX(5px); }

  /* cards lift a touch */
  .product-card, .insight-row, .dealer-result-card{ transition: transform .5s var(--ease); }
  .product-card:hover, .insight-row:hover, .dealer-result-card:hover{ transform: translateY(-4px); }
  .cert-chip{ transition: transform .4s var(--ease), border-color .3s var(--ease); }

  /* smooth page-to-page cross-fade (Chrome/Edge/Safari; others just navigate normally) */
  @view-transition{ navigation:auto; }
  .site-header{ view-transition-name: site-header; }
  ::view-transition-group(site-header){ animation-duration:0s; }
  ::view-transition-old(root){ animation: mVtOut .26s ease both; }
  ::view-transition-new(root){ animation: mVtIn .55s cubic-bezier(.16,.8,.24,1) both; }
  @keyframes mVtOut{ to{ opacity:0; } }
  @keyframes mVtIn{ from{ opacity:0; transform:translateY(12px); } }
}

/* tiles: scale + rise */
html.m-on [data-m="zoom"]:not(.m-in){ opacity:0; transform:translate3d(0,18px,0) scale(.93); }
html.m-on [data-m="zoom"]:not(.m-in){ animation: mFS .01s linear 7s forwards; }