/* ============================================
   Healthy Club — animations.css
   Scroll reveals, keyframes & motion accents
   ============================================ */

/* ---------- Reveal base (fade-up on scroll) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children: when grid parent enters, delay kids */
.reveal.in-view .feature-card,
.reveal.in-view .plan-card,
.reveal.in-view .step,
.reveal.in-view .gallery-item,
.reveal.in-view .stat,
.reveal.in-view .accordion-item {
    animation: zoomIn .7s var(--ease) both;
}
.features-grid .feature-card { animation-delay: 0s; }
.features-grid .feature-card:nth-child(2) { animation-delay: .08s; }
.features-grid .feature-card:nth-child(3) { animation-delay: .16s; }
.features-grid .feature-card:nth-child(4) { animation-delay: .24s; }
.features-grid .feature-card:nth-child(5) { animation-delay: .32s; }
.features-grid .feature-card:nth-child(6) { animation-delay: .40s; }

.plans-grid .plan-card { animation-delay: 0s; }
.plans-grid .plan-card:nth-child(2) { animation-delay: .1s; }
.plans-grid .plan-card:nth-child(3) { animation-delay: .2s; }
.plans-grid .plan-card:nth-child(4) { animation-delay: .3s; }
.plans-grid .plan-card:nth-child(5) { animation-delay: .4s; }

.steps-grid .step { animation-delay: 0s; }
.steps-grid .step:nth-child(2) { animation-delay: .12s; }
.steps-grid .step:nth-child(3) { animation-delay: .24s; }
.steps-grid .step:nth-child(4) { animation-delay: .36s; }

.gallery-grid .gallery-item:nth-child(1) { animation-delay: 0s; }
.gallery-grid .gallery-item:nth-child(2) { animation-delay: .06s; }
.gallery-grid .gallery-item:nth-child(3) { animation-delay: .12s; }
.gallery-grid .gallery-item:nth-child(4) { animation-delay: .18s; }
.gallery-grid .gallery-item:nth-child(5) { animation-delay: .24s; }
.gallery-grid .gallery-item:nth-child(6) { animation-delay: .30s; }

.stats-grid .stat:nth-child(2) { animation-delay: .1s; }
.stats-grid .stat:nth-child(3) { animation-delay: .2s; }
.stats-grid .stat:nth-child(4) { animation-delay: .3s; }

.accordion .accordion-item:nth-child(2) { animation-delay: .08s; }
.accordion .accordion-item:nth-child(3) { animation-delay: .16s; }
.accordion .accordion-item:nth-child(4) { animation-delay: .24s; }
.accordion .accordion-item:nth-child(5) { animation-delay: .32s; }

/* ---------- Keyframes ---------- */
@keyframes zoomIn {
    from { opacity: 0; transform: translateY(30px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.06); opacity: 0.85; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ---------- Hero entrance ---------- */
.hero-content > * {
    opacity: 0;
    animation: fadeUp .9s var(--ease) forwards;
}
.hero-content > .eyebrow { animation-delay: .15s; }
.hero-content > h1 { animation-delay: .3s; }
.hero-content > .hero-sub { animation-delay: .45s; }
.hero-content > .hero-cta { animation-delay: .6s; }
.hero-content > .trust-badges { animation-delay: .75s; }

/* ---------- Section head entrance ---------- */
.section-head.in-view .eyebrow { animation: fadeIn .6s var(--ease) .1s both; }
.section-head.in-view h2 { animation: fadeUp .7s var(--ease) .2s both; }
.section-head.in-view p { animation: fadeUp .7s var(--ease) .32s both; }

/* ---------- Mobile menu overlay backdrop ---------- */
.nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 25, 18, 0.5);
    backdrop-filter: blur(3px);
    z-index: 1050;
    opacity: 0; visibility: hidden;
    transition: opacity .4s, visibility .4s;
}
.nav-backdrop.show { opacity: 1; visibility: visible; }

/* ---------- Lightbox image transition ---------- */
.lightbox img { transition: transform .4s var(--ease), opacity .35s; }

/* ---------- Count-up glow when counting ---------- */
.stat-num.counting { text-shadow: 0 0 24px rgba(255,255,255,0.45); }

/* ---------- Accordion smooth open ---------- */
.accordion-item.open { box-shadow: var(--shadow-md); border-color: rgba(188,48,38,0.35); }

/* ---------- Utility animation classes ---------- */
.anim-float { animation: float 4s ease-in-out infinite; }
.anim-pulse { animation: pulse 2.4s ease-in-out infinite; }
.anim-spin  { animation: spin 1.2s linear infinite; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .reveal.in-view > * { animation: none !important; }
    .hero-content > * { opacity: 1 !important; animation: none !important; }
    .anim-float, .anim-pulse, .anim-spin { animation: none !important; }
}