/* =========================================
 The Influencer World — Additional Animations
 AOS-like scroll-reveal classes
 ========================================= */

/* Base reveal state */
[data-aos] {
 opacity: 0;
 transition: opacity 0.7s ease, transform 0.7s ease;
 will-change: opacity, transform;
}

[data-aos="fade-up"] { transform: translateY(40px); }
[data-aos="fade-down"] { transform: translateY(-40px); }
[data-aos="fade-left"] { transform: translateX(40px); }
[data-aos="fade-right"] { transform: translateX(-40px); }

[data-aos].aos-animate {
 opacity: 1;
 transform: translate(0, 0);
}

/* Stagger delays for children */
[data-aos-delay="100"] { transition-delay: 0.1s; }
[data-aos-delay="200"] { transition-delay: 0.2s; }
[data-aos-delay="300"] { transition-delay: 0.3s; }
[data-aos-delay="400"] { transition-delay: 0.4s; }
[data-aos-delay="500"] { transition-delay: 0.5s; }

/* Count-up numbers */
.count-up {
 display: inline-block;
}

/* Creator card tilt */
.creator-card {
 perspective: 1000px;
 transform-style: preserve-3d;
}

/* Cursor follower (hero only) */
.cursor-glow {
 position: fixed;
 width: 300px;
 height: 300px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
 pointer-events: none;
 z-index: 0;
 transform: translate(-50%, -50%);
 will-change: left, top;
 display: none;
}

@media (hover: hover) and (pointer: fine) {
 .cursor-glow { display: block; }
}

/* Mockup entrance */
@keyframes mockupSlideIn {
 from { opacity: 0; transform: translateY(30px) scale(0.95); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}

.mockup-frame {
 animation: mockupSlideIn 0.8s ease forwards;
}

/* Nav link underline animation */
.nav-link-animated {
 position: relative;
}

.nav-link-animated::after {
 content: '';
 position: absolute;
 bottom: -4px;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--gradient-primary);
 border-radius: 2px;
 transition: width 0.3s ease;
}

.nav-link-animated:hover::after,
.nav-link-animated.active::after {
 width: 100%;
}

/* Section fade-in on scroll */
.section-reveal {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-reveal.revealed {
 opacity: 1;
 transform: translateY(0);
}

/* Number counter.
 This used to pulse text-shadow on a loop. text-shadow can't be animated on
 the compositor, so it forced a paint every frame on an above-the-fold
 element while the page was still loading (Lighthouse: "avoid non-composited
 animations"). The glow is kept as a static shadow — visually near-identical,
 since the loop only crossfaded between two low-opacity colours — and costs
 nothing to render. */
.hero-stat-number.counting {
 text-shadow: 0 0 30px rgba(124,58,237,0.3);
}

/* Button sweep */
.btn-sweep {
 position: relative;
 overflow: hidden;
 z-index: 1;
}

.btn-sweep::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent);
 transform: translateX(-100%) skewX(-15deg);
 transition: transform 0.5s;
 z-index: -1;
}

.btn-sweep:hover::before {
 transform: translateX(100%) skewX(-15deg);
}

/* Testimonial card animation */
.testimonial-slide {
 transition: transform 0.3s, box-shadow 0.3s;
}

/* Contact form field focus animation */
.form-group {
 transition: transform 0.2s;
}

.form-control:focus {
 transform: scale(1.01);
}