/* ===== INNOVATIVE PLACEMENTS - ANIMATIONS ===== */
/* Elegant, Subtle, Professional */

/* ========================================
   1. FADE ANIMATIONS
   ======================================== */

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

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* ========================================
   2. SCALE ANIMATIONS
   ======================================== */

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleUp {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

/* ========================================
   3. FLOATING & PULSE
   ======================================== */

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

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(1deg);
    }
    50% {
        transform: translateY(-10px) rotate(0deg);
    }
    75% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(196, 77, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(196, 77, 255, 0.5);
    }
}

/* ========================================
   4. SHIMMER EFFECT
   ======================================== */

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

.shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ========================================
   5. GRADIENT SHIFT
   ======================================== */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* ========================================
   6. SPIN
   ======================================== */

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

/* ========================================
   7. BOUNCE
   ======================================== */

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

/* ========================================
   8. ANIMATION UTILITIES
   ======================================== */

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

.animate-float-slow {
    animation: floatSlow 6s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

.animate-bounce {
    animation: bounce 2s ease-in-out infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   9. SCROLL-TRIGGERED ANIMATIONS
   ======================================== */

/* Initial state - hidden until scrolled into view */
[data-animate] {
    opacity: 0;
}


[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="fade-down"] {
    transform: translateY(-40px);
}

[data-animate="fade-left"] {
    transform: translateX(-40px);
}

[data-animate="fade-right"] {
    transform: translateX(40px);
}

[data-animate="scale"],
[data-animate="scale-in"] {
    transform: scale(0.9);
}

[data-animate="fade"] {
    /* Just opacity, no transform */
}

/* Animated state - use CSS animations to avoid transition conflicts */
[data-animate="fade-up"].is-visible {
    animation: fadeInUp 0.6s ease forwards;
}

[data-animate="fade-down"].is-visible {
    animation: fadeInDown 0.6s ease forwards;
}

[data-animate="fade-left"].is-visible {
    animation: fadeInLeft 0.6s ease forwards;
}

[data-animate="fade-right"].is-visible {
    animation: fadeInRight 0.6s ease forwards;
}

[data-animate="scale"].is-visible,
[data-animate="scale-in"].is-visible {
    animation: scaleIn 0.6s ease forwards;
}

[data-animate="fade"].is-visible {
    animation: fadeIn 0.6s ease forwards;
}

/* Stagger animation for grid items */
/* Start hidden, animate in when is-visible is added */
[data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
}

/* Fallback: if JS doesn't trigger within 2s, show content anyway */
@supports (animation-timeline: auto) {
    /* Future CSS - not needed for fallback */
}

[data-animate-stagger].is-visible > * {
    animation: fadeInUp 0.5s ease forwards;
}

[data-animate-stagger].is-visible > *:nth-child(1) { animation-delay: 0.05s; }
[data-animate-stagger].is-visible > *:nth-child(2) { animation-delay: 0.1s; }
[data-animate-stagger].is-visible > *:nth-child(3) { animation-delay: 0.15s; }
[data-animate-stagger].is-visible > *:nth-child(4) { animation-delay: 0.2s; }
[data-animate-stagger].is-visible > *:nth-child(5) { animation-delay: 0.25s; }
[data-animate-stagger].is-visible > *:nth-child(6) { animation-delay: 0.3s; }
[data-animate-stagger].is-visible > *:nth-child(7) { animation-delay: 0.35s; }
[data-animate-stagger].is-visible > *:nth-child(8) { animation-delay: 0.4s; }
[data-animate-stagger].is-visible > *:nth-child(9) { animation-delay: 0.45s; }
[data-animate-stagger].is-visible > *:nth-child(10) { animation-delay: 0.5s; }
[data-animate-stagger].is-visible > *:nth-child(11) { animation-delay: 0.55s; }
[data-animate-stagger].is-visible > *:nth-child(12) { animation-delay: 0.6s; }
/* Extended for larger grids */
[data-animate-stagger].is-visible > *:nth-child(n+13) { animation-delay: 0.65s; }

/* Hero content - animate immediately on load */
/* Only animate individual elements, NOT the container */
.hero-badge,
.hero-title,
.hero-subtitle,
.hero-cta,
.hero-stats {
    animation: fadeInUp 0.8s ease forwards;
}

.hero-badge { animation-delay: 0.1s; }
.hero-title { animation-delay: 0.2s; }
.hero-subtitle { animation-delay: 0.3s; }
.hero-cta { animation-delay: 0.4s; }
.hero-stats { animation-delay: 0.5s; }

/* Custom delays */
[data-animate-delay="100"] { transition-delay: 100ms !important; }
[data-animate-delay="200"] { transition-delay: 200ms !important; }
[data-animate-delay="300"] { transition-delay: 300ms !important; }
[data-animate-delay="400"] { transition-delay: 400ms !important; }
[data-animate-delay="500"] { transition-delay: 500ms !important; }
[data-animate-delay="600"] { transition-delay: 600ms !important; }

/* ========================================
   10. HOVER TRANSITIONS
   ======================================== */

.hover-lift {
    transition: transform var(--ip-transition-base), box-shadow var(--ip-transition-base);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--ip-shadow-lg);
}

.hover-glow:hover {
    box-shadow: var(--ip-glow-purple);
}

.hover-scale {
    transition: transform var(--ip-transition-base);
}

.hover-scale:hover {
    transform: scale(1.03);
}

/* ========================================
   11. PAGE TRANSITIONS
   ======================================== */

.page-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.page-transition-exit {
    opacity: 1;
}

.page-transition-exit-active {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ========================================
   12. REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
    }
}