/* =====================================================================
   1891 motion — sitewide animation utilities.
   "Maximum life" register per 2026-05-19 spec:
     - scroll reveal (fade + rise) with staggered children
     - card hover lift + cursor-follow spotlight
     - ambient hero gradient that follows pointer
     - floating accent dots for ambient life
     - button glow + sheen sweep on hover
     - shimmering eyebrow + animated link underline
     - number ticker (data-count) on view-reveal
     - breathing accents on key marks
   Honors prefers-reduced-motion: reduce — all animation is suppressed
   to 0.01ms, and the JS short-circuits the ambient handlers.
   ===================================================================== */

/* ─── 1. Scroll-reveal ─────────────────────────────────────────────── */
.reveal,
.reveal-up,
.reveal-fade,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1),
              transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal-up    { transform: translate3d(0, 28px, 0); }
.reveal-left  { transform: translate3d(-28px, 0, 0); }
.reveal-right { transform: translate3d(28px, 0, 0); }
.reveal.is-revealed,
.reveal-up.is-revealed,
.reveal-fade.is-revealed,
.reveal-left.is-revealed,
.reveal-right.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal-stagger > *  { transition-delay: 0s; }
.reveal-stagger > *:nth-child(1)  { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2)  { transition-delay: .07s; }
.reveal-stagger > *:nth-child(3)  { transition-delay: .14s; }
.reveal-stagger > *:nth-child(4)  { transition-delay: .21s; }
.reveal-stagger > *:nth-child(5)  { transition-delay: .28s; }
.reveal-stagger > *:nth-child(6)  { transition-delay: .35s; }
.reveal-stagger > *:nth-child(7)  { transition-delay: .42s; }
.reveal-stagger > *:nth-child(8)  { transition-delay: .49s; }
.reveal-stagger > *:nth-child(9)  { transition-delay: .56s; }
.reveal-stagger > *:nth-child(10) { transition-delay: .63s; }

/* ─── 2. Card hover lift + spotlight ──────────────────────────────── */
.product-card,
.hp-portal,
.case-card,
.plan,
.pricing__tier,
.door,
.kpi-card,
.demo-tile,
[data-card-lift] {
  position: relative;
  isolation: isolate;
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    box-shadow .45s cubic-bezier(.2,.7,.2,1),
    border-color .45s ease,
    background .45s ease;
  will-change: transform;
}
.product-card::after,
.hp-portal::after,
.case-card::after,
.plan::after,
.pricing__tier::after,
.door::after,
[data-card-lift]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.07),
    transparent 45%
  );
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
}
.product-card > *,
.hp-portal > *,
.case-card > *,
.plan > *,
.pricing__tier > *,
.door > *,
[data-card-lift] > * { position: relative; z-index: 1; }
.product-card:hover,
.hp-portal:hover,
.case-card:hover,
.plan:hover,
.pricing__tier:hover,
.door:hover,
[data-card-lift]:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow:
    0 24px 48px -18px rgba(0,0,0,.45),
    0 8px 16px -8px rgba(0,0,0,.25);
}
.product-card:hover::after,
.hp-portal:hover::after,
.case-card:hover::after,
.plan:hover::after,
.pricing__tier:hover::after,
.door:hover::after,
[data-card-lift]:hover::after {
  opacity: 1;
}

/* ─── 3. Ambient hero gradient (pointer-follow) ───────────────────── */
.hp-hero,
.p-hero,
.product-hero,
section.hero,
[data-hero-glow] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hp-hero::before,
.p-hero::before,
.product-hero::before,
section.hero::before,
[data-hero-glow]::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      720px circle at var(--hero-mx, 30%) var(--hero-my, 25%),
      rgba(244, 169, 61, 0.16),
      transparent 55%
    ),
    radial-gradient(
      520px circle at var(--hero-mx-2, 75%) var(--hero-my-2, 80%),
      rgba(143, 220, 239, 0.10),
      transparent 60%
    );
  transition: background .6s ease;
  /* Settle after load: the hero glow holds still (cursor-follow still repositions
     it). Perpetual drift removed so the page doesn't move on its own. */
}
.hp-hero > *,
.p-hero > *,
.product-hero > *,
section.hero > *,
[data-hero-glow] > * { position: relative; z-index: 1; }
@keyframes hero-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}

/* ─── 4. Floating accent dots ──────────────────────────────────────── */
[data-float-dots] { position: relative; }
.float-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.20;
  pointer-events: none;
  /* Settle after load: accent dots hold still (was float-drift loop). */
  z-index: 0;
}
@keyframes float-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.18; }
  50%      { transform: translate3d(10px, -16px, 0); opacity: 0.45; }
}

/* ─── 5. Button glow + sheen sweep ────────────────────────────────── */
.btn,
.btn-primary,
.btn-ghost,
.btn-secondary,
.btn-accent,
.hp-btn,
.btn--primary,
.btn--gold,
.btn--ghost,
.btn--outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before,
.btn-primary::before,
.hp-btn--primary::before,
.btn--primary::before,
.btn--gold::before {
  content: "";
  position: absolute;
  inset: -20% -50%;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255,255,255,.32) 50%,
    transparent 75%
  );
  transform: translateX(-110%) skewX(-12deg);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 0;
}
.btn:hover::before,
.btn-primary:hover::before,
.hp-btn--primary:hover::before,
.btn--primary:hover::before,
.btn--gold:hover::before {
  transform: translateX(110%) skewX(-12deg);
}
.btn:hover,
.btn-primary:hover,
.btn-ghost:hover,
.btn-secondary:hover,
.btn-accent:hover,
.hp-btn:hover,
.btn--primary:hover,
.btn--ghost:hover,
.btn--gold:hover {
  transform: translate3d(0, -1px, 0);
}
.btn:active,
.btn-primary:active,
.hp-btn:active,
.btn--primary:active { transform: translate3d(0, 0, 0); }

/* ─── 6. Animated link underline (opt-in) ─────────────────────────── */
a[data-u],
.u-foot__col a,
.u-strip__links a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size .4s cubic-bezier(.2,.7,.2,1), color .15s ease;
}
a[data-u]:hover,
.u-foot__col a:hover,
.u-strip__links a:hover { background-size: 100% 1px; }

/* ─── 7. Eyebrow shimmer ──────────────────────────────────────────── */
.hp-eyebrow,
.eyebrow,
.product-hero__eyebrow,
[data-shimmer] {
  position: relative;
  display: inline-block;
}
.hp-eyebrow::after,
.eyebrow::after,
.product-hero__eyebrow::after,
[data-shimmer]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  -webkit-mask: linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000);
  mix-blend-mode: overlay;
  /* Settle after load: no perpetual shimmer sweep. */
  pointer-events: none;
}
@keyframes eyebrow-shimmer {
  to { background-position: -50% 0; }
}

/* ─── 8. Breathing accent dot (next to brand) ─────────────────────── */
.breathe-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  /* Settle after load: the accent dot holds still (was breathe loop). */
  vertical-align: 1px;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);   opacity: .55; }
  50%      { transform: scale(1.4); opacity: 1;   }
}

/* ─── 9. Underline grow on hover for product card CTAs ─────────────── */
.product-card__cta,
.hp-portal__cta,
[data-cta] {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}
.product-card__cta::after,
.hp-portal__cta::after,
[data-cta]::after {
  content: "";
  position: absolute;
  left: 0; right: auto; bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-card__cta::after,
.hp-portal:hover .hp-portal__cta::after,
[data-cta]:hover::after { transform: scaleX(1); }

/* ─── 10. Hero image — subtle Ken Burns drift ─────────────────────── */
.hp-hero__img img,
.hp-hero__img svg,
[data-kenburns] img,
[data-kenburns] svg {
  /* Settle after load: hero image holds still (was the Ken Burns drift loop). */
  transform-origin: 50% 50%;
}
@keyframes kenburns {
  0%   { transform: scale(1.0) translate3d(0, 0, 0); }
  100% { transform: scale(1.04) translate3d(-1.5%, -1%, 0); }
}

/* ─── 11. SVG mark breathe (used on .brand inserts) ───────────────── */
.brand-mark .bm-leaf {
  transform-origin: 50% 60%;
  /* Settle after load: brand mark holds still (was leaf-breathe loop). */
}
@keyframes leaf-breathe {
  0%, 100% { transform: scale(1)    rotate(0); opacity: .85; }
  50%      { transform: scale(1.05) rotate(-1.5deg); opacity: 1; }
}

/* ─── 12. Counter values get a subtle glow as they tick up ─────────── */
[data-count] {
  transition: text-shadow .35s ease, color .35s ease;
}
[data-count].is-counting {
  text-shadow: 0 0 18px rgba(244,169,61,.35);
}

/* ─── Reduced-motion override ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-up,
  .reveal-fade,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
}