/* ============================================
   MISBuddy — Animation Styles
   Pre-animation states for GSAP
   ============================================ */

/* Initial hidden states for GSAP animations */
[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
}
[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="fade-down"] { transform: translateY(-40px); }
[data-animate="fade-left"] { transform: translateX(60px); }
[data-animate="fade-right"] { transform: translateX(-60px); }
[data-animate="scale-up"] { transform: scale(0.9); }
[data-animate="fade-in"] { transform: none; }

/* Parallax sections */
.parallax-section {
    will-change: transform;
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
}

/* Floating animation for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

/* Glow pulse for CTA */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
    50% { box-shadow: 0 0 40px var(--accent-glow-strong), 0 0 80px var(--accent-glow); }
}

/* Dashboard tilt on scroll */
.hero-dashboard {
    will-change: transform;
}

/* Text reveal line */
.text-reveal {
    overflow: hidden;
}
.text-reveal span {
    display: inline-block;
    will-change: transform;
}

/* Magnetic button effect */
.btn-magnetic {
    will-change: transform;
    transition: transform 0.2s ease-out;
}

/* Smooth counter animation */
.stat-number {
    font-variant-numeric: tabular-nums;
}

/* Nav scroll indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    z-index: 10001;
    transform-origin: left;
    will-change: transform;
}

/* Section divider line animation */
.section-line {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    will-change: width;
}
.section-line.animate { width: 100%; transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); }