/* ============================================================
   ANIMATIONS — Anti-Gravity, Scroll Reveal, Micro-interactions
   ============================================================ */

/* Float — anti-gravity bobbing */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(1deg); }
    50% { transform: translateY(-8px) rotate(-0.5deg); }
    75% { transform: translateY(-20px) rotate(0.5deg); }
}

/* Pulse glow */
@keyframes pulse-glow {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(140, 180, 130, 0.2); }
    50% { opacity: 0.7; box-shadow: 0 0 20px rgba(140, 180, 130, 0.4); }
}

/* Pulse ring */
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.23, 0.86, 0.39, 0.96),
                transform 0.8s cubic-bezier(0.23, 0.86, 0.39, 0.96);
}

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

.reveal[data-delay="100"] { transition-delay: 0.1s; }
.reveal[data-delay="150"] { transition-delay: 0.15s; }
.reveal[data-delay="200"] { transition-delay: 0.2s; }
.reveal[data-delay="300"] { transition-delay: 0.3s; }
.reveal[data-delay="400"] { transition-delay: 0.4s; }

/* Stagger */
.stat.reveal { transition-delay: calc(var(--stagger, 0) * 0.12s); }

/* Bar fill animation */
.bar-fill {
    width: 0 !important;
    transition: width 1.8s cubic-bezier(0.23, 0.86, 0.39, 0.96) 0.3s;
}
.visible .bar-fill,
.emotion-overlay.animated .bar-fill {
    width: var(--target-width) !important;
}

/* Chart bars stagger */
.chart-bar {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.visible .chart-bar:nth-child(1) { transition-delay: 0.1s; }
.visible .chart-bar:nth-child(2) { transition-delay: 0.2s; }
.visible .chart-bar:nth-child(3) { transition-delay: 0.3s; }
.visible .chart-bar:nth-child(4) { transition-delay: 0.4s; }
.visible .chart-bar:nth-child(5) { transition-delay: 0.5s; }
.visible .chart-bar:nth-child(6) { transition-delay: 0.6s; }
.visible .chart-bar:nth-child(7) { transition-delay: 0.7s; }
.visible .chart-bar { transform: scaleY(1); }

/* Hero entrance */
.hero-headlines .hero-line-1 {
    animation: slideReveal 1s cubic-bezier(0.23, 0.86, 0.39, 0.96) 0.2s both;
}
.hero-headlines .hero-line-2 {
    animation: slideReveal 1s cubic-bezier(0.23, 0.86, 0.39, 0.96) 0.4s both;
}
.hero-headlines .hero-line-3 {
    animation: slideReveal 1s cubic-bezier(0.23, 0.86, 0.39, 0.96) 0.6s both;
}

@keyframes slideReveal {
    from {
        opacity: 0;
        transform: translateY(50px) translateX(-20px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
        filter: blur(0);
    }
}

/* Journal card entrance */
.hero-journal {
    animation: journalFloat 1.2s cubic-bezier(0.23, 0.86, 0.39, 0.96) 0.5s both;
}

@keyframes journalFloat {
    from {
        opacity: 0;
        transform: translateY(60px) rotate(2deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

/* Constellation fade */
@keyframes constellationPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Gradient shift on orbs */
.orb {
    animation: orbDrift 30s ease-in-out infinite alternate;
}

@keyframes orbDrift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
    100% { transform: translate(10px, -10px) scale(1.02); }
}

/* Giant quote mark drift */
.hero-quote-mark {
    animation: quoteDrift 20s ease-in-out infinite;
}

@keyframes quoteDrift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-2deg); }
}

/* Section number parallax */
.section-number {
    transition: transform 0.5s ease-out;
}

/* Smooth hover on cards */
.glass-card {
    will-change: transform, background;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .floating-shapes { display: none; }
    #particles-canvas { display: none; }
}