/* ============================================
   FILE: animations.css - Medilion scroll motion
   Purpose: Scroll-triggered reveal system for sections and elements.
   Performance: opacity + transform only, IntersectionObserver driven.
============================================ */

/* Default: content stays visible when JavaScript is unavailable. */
.reveal,
.reveal-section,
.reveal-stagger > * {
  opacity: 1;
  transform: none;
}

/* ---- Section reveal ---- */
html.motion-ready .reveal-section {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out);
  will-change: opacity, transform;
}
html.motion-ready .reveal-section.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---- Element reveal ---- */
html.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  will-change: opacity, transform;
}
html.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-ready .reveal--fade { transform: none; }

html.motion-ready .reveal--scale {
  transform: translate3d(0, 16px, 0) scale(0.975);
}
html.motion-ready .reveal--scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

html.motion-ready .reveal--left {
  transform: translate3d(-24px, 0, 0);
}
html.motion-ready .reveal--right {
  transform: translate3d(24px, 0, 0);
}
html.motion-ready .reveal--left.is-visible,
html.motion-ready .reveal--right.is-visible {
  transform: translate3d(0, 0, 0);
}

/* ---- Stagger children ---- */
html.motion-ready .reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--t-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--t-reveal) var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.motion-ready .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-ready .is-visible.has-revealed,
html.motion-ready .reveal-stagger.is-visible.has-revealed > *,
html.motion-ready .reveal-section.is-visible.has-revealed {
  will-change: auto;
}

/* ---- First viewport polish ---- */
html.motion-ready .nav {
  animation: nav-in 540ms var(--ease-out) both;
}
html.motion-ready .hero::before {
  animation: hero-bg-in 900ms var(--ease-out) both;
  transform-origin: center;
}
html.motion-ready .hero::after {
  animation: hero-overlay-in 720ms var(--ease-out) both;
}
html.motion-ready .hero__content > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: hero-copy-in 720ms var(--ease-out) both;
  animation-delay: var(--hero-reveal-delay, 160ms);
}
html.motion-ready .hero__subtitle { --hero-reveal-delay: 260ms; }
html.motion-ready .hero__ctas { --hero-reveal-delay: 360ms; }
html.motion-ready .hero__order-btn {
  animation: hero-cta-settle 760ms var(--ease-out) 560ms both;
}
html.motion-ready .hero-trust {
  animation: hero-trust-in 760ms var(--ease-out) 520ms both;
}

@keyframes nav-in {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-bg-in {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1.01); }
}

@keyframes hero-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-copy-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-cta-settle {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.985);
    box-shadow: 0 10px 26px rgba(11, 30, 69, 0.22);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 16px 38px rgba(11, 30, 69, 0.32);
  }
}

@keyframes hero-trust-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-media-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Hero image stays fully static after entry: no parallax or scroll work. */

/* Subtle hover zoom on visuals - pure CSS, no JS work on scroll. */
.benefits__visual img,
.products__visual img,
.diff__visual img,
.testi__visual img,
.final-cta__visual img {
  transform: scale(1.02);
  transition: transform 700ms var(--ease-out);
}
@media (hover: hover) {
  .benefits__visual:hover img,
  .products__visual:hover img,
  .diff__visual:hover img,
  .testi__visual:hover img,
  .final-cta__visual:hover img {
    transform: scale(1.05);
  }
}

/* ---- Process timeline progressive fill ---- */
@keyframes timelineFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (min-width: 1024px) {
  .process__steps.is-visible::before {
    transform-origin: left center;
    animation: timelineFill 1.4s var(--ease-out) forwards;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .nav,
  .hero::before,
  .hero::after,
  .hero__content,
  .hero__content > *,
  .hero__order-btn,
  .hero-trust,
  .reveal,
  .reveal-section,
  .reveal--scale,
  .reveal-stagger > *,
  .benefits__visual img,
  .products__visual img,
  .diff__visual img,
  .testi__visual img,
  .final-cta__visual img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}