/* ═══════════════════════════════════════════════════════════════════
   Master Print — Home Animations
   Scroll-reveal + hero + hovers. GPU-only (transform + opacity).
   JS adds .rv to elements; IntersectionObserver adds .is-in.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base reveal ───────────────────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rv-d, 0ms);
  will-change: opacity, transform;
}
.rv.rv--left   { transform: translateX(-36px); }
.rv.rv--right  { transform: translateX(36px); }
.rv.rv--scale  { transform: translateY(20px) scale(0.94); }

.rv.is-in {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ── Hero — floating shapes ────────────────────────────────────────── */
@keyframes mp-float-a {
  0%, 100% { transform: translateY(0)    rotate(0deg);  }
  50%       { transform: translateY(-22px) rotate(6deg); }
}
@keyframes mp-float-b {
  0%, 100% { transform: translateY(0)   rotate(0deg);   }
  50%       { transform: translateY(16px) rotate(-4deg); }
}
.hero__shape--1 { animation: mp-float-a 8s ease-in-out infinite; }
.hero__shape--2 { animation: mp-float-b 11s ease-in-out infinite; }

/* ── Hero — content entrance on active slide ──────────────────────── */
@keyframes mp-hero-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mp-hero-scale {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.hero__slide.active .hero__badge   { animation: mp-hero-up    0.55s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__slide.active h2             { animation: mp-hero-up    0.65s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__slide.active .hero__lead    { animation: mp-hero-up    0.65s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__slide.active .hero__actions { animation: mp-hero-up    0.65s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__slide.active .hero__mockup  { animation: mp-hero-scale 0.75s 0.30s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── Section header — eyebrow letter-spacing expand ──────────────── */
.section__header .eyebrow {
  display: inline-block;
  transition: letter-spacing 0.6s ease, opacity 0.6s ease;
}
.rv .eyebrow    { letter-spacing: 0.01em; }
.rv.is-in .eyebrow { letter-spacing: 0.12em; }

/* ── Pillar — number pop ──────────────────────────────────────────── */
@keyframes mp-num-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
.pillar.is-in .pillar__num {
  animation: mp-num-pop 0.45s calc(var(--rv-d, 0ms) + 180ms)
             cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Process — number pop ─────────────────────────────────────────── */
.process__step.is-in .process__num {
  animation: mp-num-pop 0.45s calc(var(--rv-d, 0ms) + 200ms)
             cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Product cards — hover lift ───────────────────────────────────── */
.product-card {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease;
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -8px rgba(0,0,0,0.18);
}

/* ── Product card icon ────────────────────────────────────────────── */
.product-card__img i {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.product-card:hover .product-card__img i {
  transform: scale(1.2) rotate(-6deg);
}

/* ── Audience cards — icon bounce on hover ────────────────────────── */
.audience__icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.audience__card:hover .audience__icon {
  transform: scale(1.15) rotate(8deg);
}

/* ── Advantage — icon pulse ───────────────────────────────────────── */
.advantage i {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.advantage:hover i {
  transform: scale(1.2);
}

/* ── CTA buttons — subtle shimmer on hover ────────────────────────── */
@keyframes mp-shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.25);
}
.btn-primary:hover::after {
  opacity: 1;
  animation: mp-shimmer 0.6s ease forwards;
}

/* ── Pillar CTA card — glow ring ──────────────────────────────────── */
.pillar--cta {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease;
}
.pillar--cta:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.35), 0 20px 40px -8px rgba(0,0,0,0.25);
}

/* ── Pillar cards — hover lift ────────────────────────────────────── */
.pillar:not(.pillar--cta) {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease;
}
.pillar:not(.pillar--cta):hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px -8px rgba(0,0,0,0.14);
}

/* ── Navbar link underline slide ─────────────────────────────────── */
.navbar__list > li > a {
  position: relative;
}
.navbar__list > li > a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar__list > li > a:hover::after { transform: scaleX(1); }

/* ── Reduced motion override ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv,
  .rv.rv--left,
  .rv.rv--right,
  .rv.rv--scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__shape--1,
  .hero__shape--2 { animation: none !important; }

  .hero__slide.active .hero__badge,
  .hero__slide.active h2,
  .hero__slide.active .hero__lead,
  .hero__slide.active .hero__actions,
  .hero__slide.active .hero__mockup { animation: none !important; opacity: 1 !important; }

  .pillar.is-in .pillar__num,
  .process__step.is-in .process__num { animation: none !important; opacity: 1 !important; }

  .product-card,
  .pillar,
  .pillar--cta,
  .btn-primary { transition: none !important; }
}