/* ============================================================
   Commercial Benefit Services — scroll motion layer
   Adds gentle movement as the page scrolls (reveal, stagger,
   counting stats, soft parallax, condensing sticky header).

   SAFE BY DESIGN:
   - Nothing is hidden unless JavaScript has confirmed it can
     reveal it (the .anim-ready class). JS off = normal site.
   - Respects the visitor's "reduce motion" accessibility setting.
   - Hands full control back to styles.css once an element has
     landed, so existing hover effects behave exactly as before.
   - Layers on top of styles.css. Does not change any colors,
     type, spacing, or content.
   ============================================================ */

/* ---------- 1. Reveal on scroll ---------- */

/* The travel transition applies only while the element is still
   arriving. Once .is-done lands, styles.css owns the element again. */
.anim-ready [data-anim]:not(.is-done){
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--anim-delay,0ms);
}

/* The "before" state. Scoped to :not(.is-in) so that a revealed
   element carries NO transform from this file, which is what keeps
   the .cell / .tcard hover lift in styles.css working. */
.anim-ready [data-anim]:not(.is-in){
  opacity:0;
  pointer-events:none;   /* can't click something you can't see */
}
.anim-ready [data-anim="up"]:not(.is-in)    {transform:translate3d(0,26px,0)}
/* Horizontal travel is kept short (18px) because these rows are clipped,
   see .feature below — a longer slide would visibly slice the first few
   characters of a heading on its way in. */
.anim-ready [data-anim="left"]:not(.is-in)  {transform:translate3d(-18px,0,0)}
.anim-ready [data-anim="right"]:not(.is-in) {transform:translate3d(18px,0,0)}
.anim-ready [data-anim="scale"]:not(.is-in) {transform:scale(.965)}
/* "fade" deliberately has no offset — opacity only. Used for the
   hero H1, whose gradient-clipped text can artifact on iOS Safari
   if it sits inside a transformed layer. */

/* Split feature rows slide in horizontally. Clip the row so the
   offset can never push the page wide enough to create a sideways
   scrollbar on the coverage pages. */
.anim-ready .feature{overflow:hidden}

/* ---------- 2. Soft parallax on the hero glow ---------- */
/* --hero-p is set by motion.js as you scroll (about -70 .. 70).
   Only the decorative background circles move. */
.hero::after,.page-hero::after{
  transform:translate3d(0, calc(var(--hero-p,0) * 1px), 0);
}
.hero::before,.page-hero::before{
  transform:translate3d(0, calc(var(--hero-p,0) * -0.55px), 0);
}

/* ---------- 3. Header condenses once you scroll ---------- */
/* The header's own height is deliberately NOT changed: it is
   position:sticky and still occupies flow space, so resizing it
   would lurch the whole page. Only the logo and shadow change. */
header{transition:box-shadow .3s ease}
.logo img{transition:height .3s cubic-bezier(.22,.61,.36,1)}
header.scrolled{box-shadow:0 6px 26px rgba(14,42,71,.09)}
header.scrolled .logo img{height:38px}

/* ---------- 4. Anchor links land below the sticky header ---------- */
html{scroll-padding-top:92px}

/* ---------- 5. Accessibility: honor "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce){
  .anim-ready [data-anim],
  .anim-ready [data-anim]:not(.is-in){
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    pointer-events:auto !important;
  }
  .hero::before,.hero::after,
  .page-hero::before,.page-hero::after{transform:none !important}
  .logo img,header{transition:none !important}
}

/* ---------- 6. Print: never hide anything ---------- */
@media print{
  .anim-ready [data-anim],
  .anim-ready [data-anim]:not(.is-in){
    opacity:1 !important;transform:none !important;pointer-events:auto !important;
  }
}