/* ====================================================
   ENERSOUL HEALING  Animations Stylesheet
   Clean, minimal  no looping or moving animations
   ==================================================== */

/* ── Keyframes ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes navbarFade {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineGrow {
  from {
    transform: scaleY(0);
    transform-origin: top;
  }

  to {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* ── Scroll Reveal Setup ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal.reveal--left {
  transform: translateX(-35px);
}

.reveal.reveal--right {
  transform: translateX(35px);
}

.reveal.reveal--scale {
  transform: scale(0.93);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Staggered children */
.stagger-children>* {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stagger-children.visible>*:nth-child(1) {
  transition-delay: 0.05s;
}

.stagger-children.visible>*:nth-child(2) {
  transition-delay: 0.15s;
}

.stagger-children.visible>*:nth-child(3) {
  transition-delay: 0.25s;
}

.stagger-children.visible>*:nth-child(4) {
  transition-delay: 0.35s;
}

.stagger-children.visible>*:nth-child(5) {
  transition-delay: 0.45s;
}

.stagger-children.visible>*:nth-child(6) {
  transition-delay: 0.55s;
}

.stagger-children.visible>* {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero Animations  one-time entrance only ── */
.hero-eyebrow {
  animation: fadeInLeft 0.8s ease 0.2s both;
}

.hero-heading {
  animation: fadeInUp 1s ease 0.4s both;
}

.hero-subheading {
  animation: fadeInUp 1s ease 0.65s both;
}

.hero-actions {
  animation: fadeInUp 1s ease 0.85s both;
}

/* ── Hero scroll indicator  static, no bounce ── */
.hero-scroll {
  animation: none;
}

/* ── Navbar ── */
#navbar {
  animation: navbarFade 0.7s ease 0.1s both;
}

/* ── Timeline Line ── */
.timeline::before {
  animation: lineGrow 1.5s ease 0.5s both;
}

/* ── Hero heading  static color, no shimmer ── */
.hero-heading em {
  color: var(--sage-deep);
  font-style: italic;
}

/* ── CTA section  static background, no gradient shift ── */
#section-cta {
  background-size: 100% 100%;
}

/* ── Hover micro-interactions ── */
.btn svg,
.btn span {
  transition: transform 0.3s ease;
}

.btn:hover svg {
  transform: translateX(4px);
}

.btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* ── Card shimmer top border on hover ── */
.glass-card::before,
.reason-card::before {
  transition: transform 0.5s ease;
}

/* ── Page load body fade ── */
@keyframes pageLoad {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body {
  animation: pageLoad 0.5s ease 0.1s both;
}

/* ── Mobile menu slide ── */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu.open {
  animation: slideDown 0.35s ease both;
}

.mobile-menu.open a {
  animation: fadeInUp 0.5s ease both;
}

.mobile-menu.open a:nth-child(1) {
  animation-delay: 0.1s;
}

.mobile-menu.open a:nth-child(2) {
  animation-delay: 0.18s;
}

.mobile-menu.open a:nth-child(3) {
  animation-delay: 0.26s;
}

.mobile-menu.open a:nth-child(4) {
  animation-delay: 0.34s;
}

/* ── Outcome number hover scale ── */
.outcome-number {
  transition: transform 0.3s ease, color 0.3s ease;
}

.outcome-card:hover .outcome-number {
  transform: scale(1.2);
  color: rgba(196, 169, 108, 0.55);
}

/* ── 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;
  }

  .reveal,
  .stagger-children>* {
    opacity: 1;
    transform: none;
  }
}