/* ============================================================
   THE GATE INVESTMENTS — anim.css (V223-A)
   Premium animation engine styles. Inert until [data-anim] is
   present AND the engine is "on" AND the user has not requested
   reduced motion. Three layered safeguards keep content visible
   in every degraded state (no JS, reduced motion, or no
   IntersectionObserver).

   Tokens are namespaced --gate-* and may be reused by future
   recipes (V224 sections / V225 CTAs etc.) without bloat.

   V223-A ships only the "card" recipe.
   ============================================================ */
:root{
  --gate-ease:cubic-bezier(.22,.61,.36,1);
  --gate-ease-in:cubic-bezier(.65,0,.35,1);
  --gate-dur-fast:220ms;
  --gate-dur-base:380ms;
  --gate-dur-slow:680ms;
  --gate-stagger:50ms;
}

/* === Engine-OFF safeguard ===
   When the html element does NOT have data-anim-engine, the JS
   has not run (slow network, JS disabled, or script blocked).
   Force [data-anim] content visible so the page never appears blank. */
html:not([data-anim-engine]) [data-anim]{
  opacity:1 !important;
  transform:none !important;
}

/* === Reduced-motion fallback ===
   Two paths: (a) the OS media query directly, (b) the engine sets
   data-anim-engine="reduce" when reduceMQ matches. Both branches
   pin everything to the final visible state. */
@media (prefers-reduced-motion: reduce){
  [data-anim]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
}
html[data-anim-engine="reduce"] [data-anim]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
}

/* ============================================================
   CARD RECIPE (V223-B)
   Premium restrained fade-up. NO scale. NO rotate. NO glow.

   Desktop: 14 px translate, 380 ms duration.
   Mobile : 8  px translate, 280 ms duration (faster + subtler).

   Stagger is applied per-element by anim.js via inline
   transition-delay (50 ms desktop / 40 ms mobile / 0 ms low-end).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html[data-anim-engine="on"] [data-anim="card"]{
    opacity:0;
    transform:translate3d(0, 14px, 0);
    transition:opacity var(--gate-dur-base) var(--gate-ease),
               transform var(--gate-dur-base) var(--gate-ease);
  }
  html[data-anim-engine="on"] [data-anim="card"].is-in{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }

  @media (max-width:768px){
    html[data-anim-engine="on"] [data-anim="card"]{
      transform:translate3d(0, 8px, 0);
      transition-duration:280ms;
    }
  }
}