/* ==========================================================================
   Cool Pro — scroll-reveal entrance animations

   Extends the pattern the static build already used (html.js-anim + .anim-in)
   with a vocabulary of distinct effects assigned by element role, so a page
   does not read as one repeated fade.

   The hidden state is structural (not JS-added) so it applies on first paint
   and nothing flashes. An inline head script adds html.cp-anim only when
   IntersectionObserver is available and the visitor has not asked to reduce
   motion, and removes it again if the classifier never runs — so content can
   never get stuck invisible.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Base hidden state ----------
     Covers both levels the classifier may choose between: whole cards, and
     individual widgets. Whichever level is not animated gets .cp-static back.
     :where() keeps the structural part at zero specificity, so the reveal rule
     below reliably outranks it. Without that the hide selector (6 classes deep)
     would beat .cp-in and elements would stay invisible after revealing. */
  html.cp-anim :where(.elementor .e-con.e-parent:not(.cp-hero)) .elementor-widget,
  html.cp-anim :where(.elementor .e-con.e-child:not(:only-child) > .e-con.e-child:only-child) {
    opacity: 0;
  }

  html.cp-anim .cp-static {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* ---------- Shared transition ---------- */
  html.cp-anim [class*="cp-a-"] {
    will-change: opacity, transform;
    transition:
      opacity .78s cubic-bezier(.16, 1, .3, 1),
      transform .78s cubic-bezier(.16, 1, .3, 1),
      filter .78s cubic-bezier(.16, 1, .3, 1);
  }
  html.cp-anim .elementor [class*="cp-a-"].cp-in {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }

  /* ---------- 1. Rise — the workhorse ----------
     Copy, buttons, lists: a short travel so it never feels sluggish. */
  html.cp-anim .cp-a-rise { transform: translate3d(0, 26px, 0); }

  /* ---------- 2. Blur-in — section headlines ----------
     Slightly longer and softer; gives each section a clear "opening beat". */
  html.cp-anim .cp-a-blur {
    transform: translate3d(0, 20px, 0);
    filter: blur(7px);
    transition-duration: .95s;
  }

  /* ---------- 3. Lift — cards in a grid ----------
     Travel plus a touch of scale so a row of cards reads as physical objects
     settling into place rather than text fading in. */
  html.cp-anim .cp-a-lift { transform: translate3d(0, 38px, 0) scale(.965); }

  /* The card's photo eases out of a slow push-in as the card lands. Scoped to
     :not(.cp-in) so it releases the transform entirely once revealed and the
     existing hover zoom is left alone. */
  html.cp-anim .cp-a-lift:not(.cp-in) .elementor-widget-image img {
    transform: scale(1.09);
    transition: transform 1.15s cubic-bezier(.16, 1, .3, 1);
  }

  /* ---------- 4/5. Directional — two-column split sections ----------
     Each half travels in from its own side, which reads as editorial. */
  html.cp-anim .cp-a-left  { transform: translate3d(-46px, 0, 0); }
  html.cp-anim .cp-a-right { transform: translate3d(46px, 0, 0); }

  /* ---------- 6. Pop — icon boxes / trust bar ----------
     Small, quick and slightly springy; suits compact repeated items. */
  html.cp-anim .cp-a-pop {
    transform: translate3d(0, 14px, 0) scale(.88);
    transition-duration: .62s;
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  }

  /* ---------- Hero entrance ----------
     The hero is above the fold, so it plays once on load rather than on
     scroll. Hidden structurally like everything else so there is no flash;
     the generic .cp-in rule above outranks this and reveals it. */
  html.cp-anim :where(.cp-hero) .elementor-widget { opacity: 0; }

  /* The dial "powers on": the transform sits on the widget wrapper, never on
     .cp-thermo itself, whose transform is driven per-frame by the thermostat
     script for the mouse tilt. */
  html.cp-anim .cp-a-dial {
    transform: scale(.9);
    transition:
      opacity 1s cubic-bezier(.16, 1, .3, 1),
      transform 1.15s cubic-bezier(.16, 1, .3, 1);
  }

  /* ---------- 7. Sweep — accent rules and divider bars ----------
     The blue/red bars draw themselves in from the left. */
  html.cp-anim .cp-a-sweep {
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 1;
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  }

  /* Narrower screens: shorten travel so nothing pans across the viewport. */
  @media (max-width: 767px) {
    html.cp-anim .cp-a-left,
    html.cp-anim .cp-a-right { transform: translate3d(0, 24px, 0); }
    html.cp-anim .cp-a-lift  { transform: translate3d(0, 26px, 0) scale(.98); }
  }
}