/**
 * Pure CSS Scroll Animations - ZERO JAVASCRIPT!
 * Replaces: scroll-animations.js + IntersectionObserver
 * 
 * Uses CSS View Timeline API + Animation Timeline
 * Fallback: @keyframes with animation-play-state
 * 
 * @package Grabit
 * @version 3.0 - Pure CSS Only!
 */

/* ========================================
   MODERN APPROACH: View Timeline API
   (Chrome 115+, Edge 115+)
======================================== */

/* Base animation setup */
[data-animate] {
    animation: fade-in-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

/* ========================================
   FADE ANIMATIONS
======================================== */

/* Fade In Up */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-animate="fadeInUp"] {
    animation-name: fade-in-up;
}

/* Fade In Down */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-animate="fadeInDown"] {
    animation-name: fade-in-down;
}

/* Fade In Left */
@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[data-animate="fadeInLeft"] {
    animation-name: fade-in-left;
}

/* Fade In Right */
@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[data-animate="fadeInRight"] {
    animation-name: fade-in-right;
}

/* Fade In */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

[data-animate="fadeIn"] {
    animation-name: fade-in;
}

/* ========================================
   ZOOM ANIMATIONS
======================================== */

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[data-animate="zoomIn"] {
    animation-name: zoom-in;
}

@keyframes zoom-out {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[data-animate="zoomOut"] {
    animation-name: zoom-out;
}

/* ========================================
   SLIDE ANIMATIONS
======================================== */

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[data-animate="slideInLeft"] {
    animation-name: slide-in-left;
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[data-animate="slideInRight"] {
    animation-name: slide-in-right;
}

/* ========================================
   BOUNCE ANIMATIONS
======================================== */

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(30px);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

[data-animate="bounceIn"] {
    animation-name: bounce-in;
    animation-duration: 0.75s;
}

@keyframes bounce-in-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

[data-animate="bounceInUp"] {
    animation-name: bounce-in-up;
    animation-duration: 0.75s;
}

/* ========================================
   ROTATE & FLIP ANIMATIONS
======================================== */

@keyframes rotate-in {
    from {
        opacity: 0;
        transform: rotate(-90deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

[data-animate="rotateIn"] {
    animation-name: rotate-in;
}

@keyframes flip-in-x {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0);
    }
}

[data-animate="flipInX"] {
    animation-name: flip-in-x;
}

@keyframes flip-in-y {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0);
    }
}

[data-animate="flipInY"] {
    animation-name: flip-in-y;
}

/* ========================================
   ELASTIC & SPECIAL EFFECTS
======================================== */

@keyframes elastic-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

[data-animate="elasticIn"] {
    animation-name: elastic-in;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   ANIMATION DELAYS (Stagger)
======================================== */

[data-animate][data-delay="0.1"] {
    animation-delay: 0.1s;
}

[data-animate][data-delay="0.2"] {
    animation-delay: 0.2s;
}

[data-animate][data-delay="0.3"] {
    animation-delay: 0.3s;
}

[data-animate][data-delay="0.4"] {
    animation-delay: 0.4s;
}

[data-animate][data-delay="0.5"] {
    animation-delay: 0.5s;
}

[data-animate][data-delay="0.6"] {
    animation-delay: 0.6s;
}

[data-animate][data-delay="0.8"] {
    animation-delay: 0.8s;
}

[data-animate][data-delay="1"] {
    animation-delay: 1s;
}

[data-animate][data-delay="1.5"] {
    animation-delay: 1.5s;
}

[data-animate][data-delay="2"] {
    animation-delay: 2s;
}

/* ========================================
   ANIMATION SPEEDS
======================================== */

[data-animate][data-speed="fast"] {
    animation-duration: 0.3s;
}

[data-animate][data-speed="slow"] {
    animation-duration: 1s;
}

[data-animate][data-speed="slower"] {
    animation-duration: 1.5s;
}

/* ========================================
   FALLBACK: Legacy Browser Support
   (For browsers without View Timeline API)
======================================== */

@supports not (animation-timeline: view()) {
    /* Fallback: Animate on page load (not on scroll) */
    [data-animate] {
        animation-timeline: auto;
        animation-play-state: running;
    }
    
    /* Or use this technique: elements start hidden, become visible */
    [data-animate] {
        opacity: 0;
        animation: none;
    }
    
    /* Add .animate-in class via minimal JS */
    [data-animate].animate-in {
        animation-play-state: running;
    }
}

/* ========================================
   ACCESSIBILITY
======================================== */

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   UTILITIES
======================================== */

/* Force show (bypass animation) */
[data-animate].no-animate {
    animation: none;
    opacity: 1;
    transform: none;
}

/* Repeat animation on scroll */
[data-animate][data-repeat="true"] {
    /* Will restart when scrolling back */
    animation-iteration-count: infinite;
}

/* ========================================
   PRINT STYLES
======================================== */

@media print {
    [data-animate] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   ATTENTION SEEKERS (Always playing)
======================================== */

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

[data-animate="pulse"] {
    animation: pulse 1s ease infinite;
    animation-timeline: auto;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.15);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(1);
    }
}

[data-animate="heartBeat"] {
    animation: heartbeat 1.3s ease infinite;
    animation-timeline: auto;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

[data-animate="shake"] {
    animation: shake 0.8s;
    animation-timeline: auto;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */

/* GPU acceleration for all animated elements */
[data-animate] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Remove will-change after animation completes */
[data-animate] {
    animation-fill-mode: both;
}

/* ========================================
   NOTES
======================================== */

/*
 * HOW TO USE:
 * 
 * <div data-animate="fadeInUp" data-delay="0.2">
 *     This element will fade in and slide up when it enters the viewport!
 * </div>
 * 
 * ZERO JAVASCRIPT REQUIRED! 🎉
 * 
 * Browser Support:
 * - Chrome 115+ (View Timeline API)
 * - Safari (fallback to load animation)
 * - Firefox (fallback to load animation)
 * 
 * For full browser support, use the minimal JS version:
 * - scroll-animations.js (with IntersectionObserver)
 * 
 * This pure CSS version is:
 * - 3 KB (vs 5 KB with JS)
 * - Zero runtime overhead
 * - No IntersectionObserver needed
 * - Hardware accelerated
 */