/* ============================================================
   CQ CTA micro-animations — fleet shared module (v1)
   MEGAMENU-PROGRAM.md §3 "Rich media": lightweight, PRM-gated
   CTA effects. Applied by cq-cta.js auto-detection (no markup
   edits). transform / opacity / box-shadow / filter only —
   ZERO layout shift. Everything animated lives inside
   @media (prefers-reduced-motion: no-preference); static
   equivalents otherwise. Never touches cqbar / cq3 / footers.
   ============================================================ */

/* base hook — added to every detected CTA. No visual change at rest. */
.cq-cta{ }

/* positioning shim — added by JS only when the element was
   position:static (pseudo ring/sheen need a positioned box).
   relative-with-no-offsets = no layout shift. */
.cq-cta-fx{position:relative}

/* focus enhancement — dual ring (2px white inner + 2px dark outer)
   stays visible on any background, light-first pages included.
   Applies with AND without reduced motion. */
.cq-cta:focus-visible{
  outline:2px solid #fff;
  outline-offset:0;
  box-shadow:0 0 0 4px #0A1430;
}

/* static hover feedback (PRM-safe: state change, no motion).
   drop-shadow is ADDITIVE to the button's own box-shadow. */
.cq-cta-lift:hover{filter:drop-shadow(0 10px 14px rgba(16,24,40,.14))}

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

  /* ---- soft pulse ring — radiates every ~4s -------------------
     Drawn on ::before (JS only assigns the class when ::before is
     unstyled AND overflow is visible so the ring is never clipped
     and never collides with a site's own pseudo-element).
     --cq-cta-ring is set inline by JS from the button's solid
     background colour; ink fallback for gradient pills. */
  @keyframes cqCtaPulse{
    0%  {box-shadow:0 0 0 0    var(--cq-cta-ring, rgba(16,24,40,.30));opacity:.85}
    55% {box-shadow:0 0 0 13px var(--cq-cta-ring, rgba(16,24,40,.30));opacity:0}
    100%{box-shadow:0 0 0 0    var(--cq-cta-ring, rgba(16,24,40,.30));opacity:0}
  }
  .cq-cta-pulse::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    pointer-events:none;
    animation:cqCtaPulse 4s cubic-bezier(.4,0,.2,1) infinite;
  }

  /* ---- sheen sweep on hover -----------------------------------
     A soft white band crosses the pill once per hover. Lives on
     ::after (JS assigns only when ::after is unstyled); the band
     moves via background-position INSIDE the pseudo box, so no
     overflow:hidden is needed and nothing can leak or clip. */
  .cq-cta-sheen::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(105deg,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,.30) 50%,
      rgba(255,255,255,0) 58%) no-repeat;
    background-size:240% 100%;
    background-position:170% 0;
  }
  .cq-cta-sheen:hover::after,
  .cq-cta-sheen:focus-visible::after{
    opacity:1;
    background-position:-70% 0;
    transition:background-position .65s ease,opacity .12s linear;
  }

  /* ---- magnetic hover lift -------------------------------------
     JS skips elements that already declare their own :hover
     transform (stylesheet scan), so native lifts (.btn-green,
     .lx-btn-em, .cqm-cta, ...) are never doubled. */
  .cq-cta-lift{transition:transform .22s ease,filter .22s ease}
  .cq-cta-lift:hover{transform:translateY(-2px)}
  .cq-cta-lift:active{transform:translateY(0)}

  /* ---- arrow nudge on hover ------------------------------------
     .cq-cta-arr is the trailing arrow glyph (span wrapped at
     runtime) or the CTA's trailing svg (class added directly).
     position:relative + left (not inline-block + transform): it
     works on plain inline boxes, so the wrap never changes the
     button's rest width (inline-block dropped letter-spacing at
     the boundary and widened CTAs ~4px). */
  .cq-cta-arrow .cq-cta-arr{position:relative;left:0;transition:left .22s ease}
  .cq-cta-arrow:hover .cq-cta-arr,
  .cq-cta-arrow:focus-visible .cq-cta-arr{left:3px}
}

@media print{
  .cq-cta-pulse::before,
  .cq-cta-sheen::after{display:none}
}