/* =========================================
   ANIMATIONS — Scroll reveal & hover effects
   ========================================= */

/* ── Reveal on scroll ──────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

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

/* Staggered children */
.steps .step,
.models-grid .model-card,
.projects-grid .project-card,
.benefits-grid .benefit,
.posts-grid .post-card,
.pricing-grid .pricing-card,
.faq-grid .faq-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.is-visible .steps .step,
.is-visible .models-grid .model-card,
.is-visible .projects-grid .project-card,
.is-visible .benefits-grid .benefit,
.is-visible .posts-grid .post-card,
.is-visible .pricing-grid .pricing-card,
.is-visible .faq-grid .faq-item {
    opacity: 1;
    transform: translateY(0);
}

/* Delay each child */
.steps .step:nth-child(1), .models-grid .model-card:nth-child(1),
.projects-grid .project-card:nth-child(1), .benefits-grid .benefit:nth-child(1),
.posts-grid .post-card:nth-child(1), .pricing-grid .pricing-card:nth-child(1),
.faq-grid .faq-item:nth-child(1) { transition-delay: 0.05s; }

.steps .step:nth-child(2), .models-grid .model-card:nth-child(2),
.projects-grid .project-card:nth-child(2), .benefits-grid .benefit:nth-child(2),
.posts-grid .post-card:nth-child(2), .pricing-grid .pricing-card:nth-child(2),
.faq-grid .faq-item:nth-child(2) { transition-delay: 0.1s; }

.steps .step:nth-child(3), .models-grid .model-card:nth-child(3),
.projects-grid .project-card:nth-child(3), .benefits-grid .benefit:nth-child(3),
.posts-grid .post-card:nth-child(3), .pricing-grid .pricing-card:nth-child(3),
.faq-grid .faq-item:nth-child(3) { transition-delay: 0.15s; }

.steps .step:nth-child(4), .models-grid .model-card:nth-child(4),
.projects-grid .project-card:nth-child(4), .benefits-grid .benefit:nth-child(4),
.posts-grid .post-card:nth-child(4), .pricing-grid .pricing-card:nth-child(4),
.faq-grid .faq-item:nth-child(4) { transition-delay: 0.2s; }

.steps .step:nth-child(5), .models-grid .model-card:nth-child(5),
.projects-grid .project-card:nth-child(5), .benefits-grid .benefit:nth-child(5),
.faq-grid .faq-item:nth-child(5) { transition-delay: 0.25s; }

.steps .step:nth-child(6), .models-grid .model-card:nth-child(6),
.projects-grid .project-card:nth-child(6), .benefits-grid .benefit:nth-child(6),
.faq-grid .faq-item:nth-child(6) { transition-delay: 0.3s; }

/* ── Pulse badge ───────────────────────── */
@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(249,115,22,0); }
}

.model-badge, .pricing-popular {
    animation: pulse-badge 2.5s infinite;
}

/* ── Floating hero ─────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-badge {
    animation: float 4s ease-in-out infinite;
}

/* ── Nav scroll shadow ─────────────────── */
.site-nav.scrolled {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* ── Button ripple effect ──────────────── */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 1;
}

.btn:active::after {
    width: 200px;
    height: 200px;
    opacity: 0;
}

/* ── Shimmer loading skeleton ──────────── */
@keyframes shimmer {
    from { background-position: -400px 0; }
    to { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ── Smooth page transitions ───────────── */
main {
    animation: fadeIn 0.4s ease;
}

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

/* ── Step number glow ──────────────────── */
.step:hover .step-number {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
    transform: scale(1.08);
    transition: all 0.3s ease;
}

/* ── Keyword badge hover ───────────────── */
.keyword-badge:hover {
    background: var(--primary-light);
    color: var(--primary);
    transition: all 0.2s ease;
}