/* ============================================
   SCALEFORGE DIGITAL — ANIMATIONS STYLESHEET
   Scroll-triggered animations & transitions
   ============================================ */

/* ==========================================
   1. SCROLL ANIMATION BASE
   ========================================== */

/* Elements waiting to be animated */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Animated state */
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ==========================================
   2. ANIMATION VARIANTS
   ========================================== */

/* Fade Up (Default) */
.animate-on-scroll[data-animation="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
}

.animate-on-scroll[data-animation="fade-up"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Down */
.animate-on-scroll[data-animation="fade-down"] {
    opacity: 0;
    transform: translateY(-40px);
}

.animate-on-scroll[data-animation="fade-down"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Left */
.animate-on-scroll[data-animation="fade-left"] {
    opacity: 0;
    transform: translateX(60px);
}

.animate-on-scroll[data-animation="fade-left"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Right */
.animate-on-scroll[data-animation="fade-right"] {
    opacity: 0;
    transform: translateX(-60px);
}

.animate-on-scroll[data-animation="fade-right"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* Scale Up */
.animate-on-scroll[data-animation="scale-up"] {
    opacity: 0;
    transform: scale(0.85);
}

.animate-on-scroll[data-animation="scale-up"].animated {
    opacity: 1;
    transform: scale(1);
}

/* Scale Down */
.animate-on-scroll[data-animation="scale-down"] {
    opacity: 0;
    transform: scale(1.15);
}

.animate-on-scroll[data-animation="scale-down"].animated {
    opacity: 1;
    transform: scale(1);
}

/* Fade In (No movement) */
.animate-on-scroll[data-animation="fade-in"] {
    opacity: 0;
    transform: none;
}

.animate-on-scroll[data-animation="fade-in"].animated {
    opacity: 1;
}

/* Flip Up */
.animate-on-scroll[data-animation="flip-up"] {
    opacity: 0;
    transform: perspective(800px) rotateX(15deg) translateY(30px);
}

.animate-on-scroll[data-animation="flip-up"].animated {
    opacity: 1;
    transform: perspective(800px) rotateX(0) translateY(0);
}

/* Zoom In */
.animate-on-scroll[data-animation="zoom-in"] {
    opacity: 0;
    transform: scale(0.5);
}

.animate-on-scroll[data-animation="zoom-in"].animated {
    opacity: 1;
    transform: scale(1);
}

/* Slide Up */
.animate-on-scroll[data-animation="slide-up"] {
    opacity: 0;
    transform: translateY(80px);
}

.animate-on-scroll[data-animation="slide-up"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   3. STAGGER DELAYS
   ========================================== */
.animate-on-scroll[data-delay="50"] {
    transition-delay: 50ms;
}

.animate-on-scroll[data-delay="100"] {
    transition-delay: 100ms;
}

.animate-on-scroll[data-delay="150"] {
    transition-delay: 150ms;
}

.animate-on-scroll[data-delay="200"] {
    transition-delay: 200ms;
}

.animate-on-scroll[data-delay="250"] {
    transition-delay: 250ms;
}

.animate-on-scroll[data-delay="300"] {
    transition-delay: 300ms;
}

.animate-on-scroll[data-delay="350"] {
    transition-delay: 350ms;
}

.animate-on-scroll[data-delay="400"] {
    transition-delay: 400ms;
}

.animate-on-scroll[data-delay="500"] {
    transition-delay: 500ms;
}

.animate-on-scroll[data-delay="600"] {
    transition-delay: 600ms;
}

/* ==========================================
   4. KEYFRAME ANIMATIONS
   ========================================== */

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

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

/* Bounce */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translateY(0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translateY(-20px);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translateY(-10px);
    }
    90% {
        transform: translateY(-4px);
    }
}

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

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

.animate-shake {
    animation: shake 0.5s ease;
}

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

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

/* Ping */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Gradient Shift */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

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

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
    }
}

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

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

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

/* Text Reveal */
@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0% 0 0);
    }
}

.animate-text-reveal {
    animation: textReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Line Draw (for SVG paths) */
@keyframes lineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Counter Glow */
@keyframes counterGlow {
    0% {
        text-shadow: 0 0 0 transparent;
    }
    50% {
        text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }
    100% {
        text-shadow: 0 0 0 transparent;
    }
}

/* ==========================================
   5. PAGE TRANSITION EFFECTS
   ========================================== */

/* Page Enter */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    animation: pageEnter 0.6s ease forwards;
}

/* ==========================================
   6. HOVER MICRO-INTERACTIONS
   ========================================== */

/* Link Underline Effect */
.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-underline:hover::after {
    width: 100%;
}

/* Card Tilt Effect (CSS only - subtle) */
.hover-tilt {
    transition: transform 0.3s ease;
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateY(-2deg) rotateX(2deg) translateY(-4px);
}

/* Icon Rotate on Hover */
.hover-rotate-icon:hover svg {
    transform: rotate(360deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scale on Hover */
.hover-scale {
    transition: transform 0.3s ease;
}

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

/* Lift on Hover */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Background Slide Effect */
.hover-bg-slide {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hover-bg-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    transition: left 0.4s ease;
    z-index: -1;
}

.hover-bg-slide:hover::before {
    left: 0;
}

.hover-bg-slide:hover {
    color: var(--text-light);
}

/* ==========================================
   7. LOADING SKELETON
   ========================================== */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-200) 25%,
        var(--gray-100) 50%,
        var(--gray-200) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.skeleton--text {
    height: 16px;
    width: 80%;
    margin-bottom: var(--space-2);
}

.skeleton--title {
    height: 28px;
    width: 60%;
    margin-bottom: var(--space-3);
}

.skeleton--image {
    height: 200px;
    width: 100%;
}

.skeleton--circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* ==========================================
   8. NOTIFICATION & TOAST ANIMATIONS
   ========================================== */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-enter {
    animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-exit {
    animation: slideOutRight 0.3s ease forwards;
}

/* ==========================================
   9. MODAL ANIMATIONS
   ========================================== */
@keyframes modalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes modalContentIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalContentOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* ==========================================
   10. COUNTER ANIMATION
   ========================================== */
.counter-animated {
    display: inline-block;
    min-width: 1ch;
}

/* ==========================================
   11. TYPEWRITER EFFECT
   ========================================== */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--primary-500); }
}

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--primary-500);
    animation: 
        typewriter 3s steps(40) 1s forwards,
        blink 0.75s step-end infinite;
}

/* ==========================================
   12. PARALLAX HELPER CLASSES
   ========================================== */
.parallax-slow {
    will-change: transform;
    transition: transform 0.1s linear;
}

.parallax-medium {
    will-change: transform;
    transition: transform 0.05s linear;
}

.parallax-fast {
    will-change: transform;
    transition: transform 0.01s linear;
}

/* ==========================================
   13. PROGRESS BAR ANIMATION
   ========================================== */
@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-width, 100%);
    }
}

.progress-bar {
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    animation: progressFill 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-play-state: paused;
}

.progress-bar__fill.animate {
    animation-play-state: running;
}

/* ==========================================
   14. RIPPLE EFFECT (For Buttons)
   ========================================== */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple__wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================
   15. MARQUEE SPEED VARIANTS
   ========================================== */
.marquee-slow .trust-bar__logo-track {
    animation-duration: 45s;
}

.marquee-normal .trust-bar__logo-track {
    animation-duration: 30s;
}

.marquee-fast .trust-bar__logo-track {
    animation-duration: 15s;
}

/* Pause on hover */
.trust-bar__logos:hover .trust-bar__logo-track {
    animation-play-state: paused;
}

/* ==========================================
   16. FOCUS STYLES (Accessibility)
   ========================================== */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.nav__link:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================
   17. SMOOTH SCROLL OFFSET
   ========================================== */
[id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* ==========================================
   18. TRANSITION UTILITY CLASSES
   ========================================== */
.transition-none {
    transition: none !important;
}

.transition-fast {
    transition-duration: 0.15s !important;
}

.transition-normal {
    transition-duration: 0.3s !important;
}

.transition-slow {
    transition-duration: 0.5s !important;
}

.transition-slower {
    transition-duration: 0.8s !important;
}

/* ==========================================
   19. VISIBILITY UTILITIES
   ========================================== */
.invisible {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-100 {
    opacity: 1;
}