/* [MOTION LAYER] Core Precision - house motion set per MOTION-PLAYBOOK.md
   (Shared Systems / Elementor + WordPress Editor). 18 Aug 2026.
   REVERT: comment out the cp-motion style+script enqueues in cp-widgets.php -
   the static site returns exactly. Everything here is gated on html.cp-motion
   (set by cp-motion.js only when IntersectionObserver exists AND the visitor
   has not asked for reduced motion) so no-JS/reduced-motion users always get
   the finished static page. transform/opacity ONLY. */

:root{
  --cpm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cpm-reveal: 0.55s;
  --cpm-micro: 0.18s;
}

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

  /* Section reveal: below-the-fold blocks fade-up once. JS pre-marks targets
     with .cp-reveal (never above the fold / never the hero) and flips .cp-in. */
  html.cp-motion .cp-reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity var(--cpm-reveal) var(--cpm-ease),
               transform var(--cpm-reveal) var(--cpm-ease);
    transition-delay:var(--cpm-delay,0s);
  }
  html.cp-motion .cp-reveal.cp-in{opacity:1;transform:none;}
  html.cp-motion .cp-reveal.cp-instant{transition:none;}

  /* Node pulse: diagnostic dots breathe. Staggered by nth-child, capped. */
  html.cp-motion .cp-diag-dot{position:relative;}
  html.cp-motion .cp-diag-dot::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 0 2px rgba(255,255,255,0.55);
    opacity:0;transform:scale(1);
    animation:cpm-pulse 2.8s var(--cpm-ease) infinite;
  }
  html.cp-motion .cp-diag-node:nth-child(2) .cp-diag-dot::after{animation-delay:.35s;}
  html.cp-motion .cp-diag-node:nth-child(3) .cp-diag-dot::after{animation-delay:.7s;}
  html.cp-motion .cp-diag-node:nth-child(4) .cp-diag-dot::after{animation-delay:1.05s;}
  html.cp-motion .cp-diag-node:nth-child(5) .cp-diag-dot::after{animation-delay:1.4s;}
  @keyframes cpm-pulse{
    0%{opacity:.7;transform:scale(1);}
    70%{opacity:0;transform:scale(1.9);}
    100%{opacity:0;transform:scale(1.9);}
  }

  /* Connector draw: process-strip line draws left-to-right when the strip
     reveals (strip gets .cp-in from the same observer). */
  html.cp-motion .cp-process .cp-process-step + .cp-process-step::before{
    transform:scaleX(0);transform-origin:left center;
    transition:transform .7s var(--cpm-ease) .25s;
  }
  html.cp-motion .cp-process.cp-in .cp-process-step + .cp-process-step::before{
    transform:scaleX(1);
  }

  /* Band light sweep: ONE soft diagonal light per page (cp-motion.js injects
     .cpm-sweep into the first teal band). Pure transform, barely-there. */
  .cpm-sweep{
    position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  }
  .cpm-sweep::after{
    content:"";position:absolute;top:-20%;bottom:-20%;width:34%;left:-40%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,0.05),transparent);
    transform:translateX(0) skewX(-12deg);
    animation:cpm-sweep 9s linear infinite;
  }
  @keyframes cpm-sweep{
    0%{transform:translateX(0) skewX(-12deg);}
    60%,100%{transform:translateX(520%) skewX(-12deg);}
  }

  /* Micro-interactions: hover lift + press, uniform timing. */
  html.cp-motion .cp-diag-node,
  html.cp-motion .cp-menu .cp-menu__cta,
  html.cp-motion .elementor-button{
    transition:transform var(--cpm-micro) ease-out,
               background-color var(--cpm-micro) ease-out,
               color var(--cpm-micro) ease-out;
  }
  html.cp-motion .cp-diag-node:hover{transform:translateY(-3px);}
  html.cp-motion .elementor-button:active{transform:scale(0.985);}
}