/*
  motion.css — WellVigour redesign
  Animations, transitions, scroll reveals, entrance sequences
  ============================================================
*/

/* ── Keyframe Definitions ─────────────────────────────────── */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes clip-reveal-right {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes line-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

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

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Hero Entrance Sequence ───────────────────────────────── */
/* Staggered animation — each element arrives after the previous */

.hero-kicker {
  animation: slide-in-left 0.6s var(--ease-out-expo) 0.1s both;
}

.hero-headline {
  animation: clip-reveal-right 0.9s var(--ease-out-expo) 0.25s both;
}

.hero-sub {
  animation: fade-up 0.6s var(--ease-out-expo) 0.55s both;
}

.hero-actions {
  animation: fade-up 0.6s var(--ease-out-expo) 0.7s both;
}

.hero-badge-strip {
  animation: fade-in 0.6s ease 0.9s both;
}

.hero-visual {
  animation: fade-in 1.0s ease 0.0s both;
}

/* ── Scroll Reveal System ─────────────────────────────────── */
/* IntersectionObserver adds .is-visible class via JS */

[data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity var(--t-reveal) var(--ease-out-expo),
    transform var(--t-reveal) var(--ease-out-expo);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for sibling elements */
[data-reveal][data-delay="1"] { transition-delay: 0.0s; }
[data-reveal][data-delay="2"] { transition-delay: 0.1s; }
[data-reveal][data-delay="3"] { transition-delay: 0.2s; }
[data-reveal][data-delay="4"] { transition-delay: 0.3s; }
[data-reveal][data-delay="5"] { transition-delay: 0.4s; }

/* Reveal variant: clip wipe for headings */
[data-reveal="wipe"] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  opacity: 1;
  transform: none;
  transition: clip-path var(--t-reveal) var(--ease-out-expo);
}

[data-reveal="wipe"].is-visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ── Hover Effects ────────────────────────────────────────── */

/* Buttons already handle their own hover in components.css */
/* Reason cards — image scale handled in components.css */

/* Nav links hover underline draw-on */
.footer-nav-list a::before {
  transition: width var(--t-base) var(--ease-out-expo),
              background var(--t-base) ease;
}

/* ── Magnetic Button (JS-enhanced) ───────────────────────── */
/* The .mag-btn class has will-change: transform.
   Actual movement is applied via JS inline style.
   On mouseleave, JS removes inline style → CSS transition snaps back. */
.mag-btn {
  will-change: transform;
}

/* ── Nav Morphing Transition ─────────────────────────────── */
.site-nav {
  transition:
    background 0.35s var(--ease-in-out),
    border-color 0.35s var(--ease-in-out),
    box-shadow 0.35s var(--ease-in-out),
    height 0.35s var(--ease-in-out);
}

/* ── Backdrop number subtle pulse on load ─────────────────── */
.hero-backdrop {
  animation: fade-in 1.5s ease 0.8s both;
}

/* ── Section entry — cobalt line draw ───────────────────────── */
.section-intro {
  position: relative;
}

/* ── Accessibility: Reduced Motion ───────────────────────── */
@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;
  }

  /* Override reveal — show everything immediately */
  [data-reveal],
  [data-reveal="wipe"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}