/* ================================================================
   DIAMOND ICE — Animation System
   Keyframes, scroll-triggered animations, micro-interactions
   ================================================================ */

/* ----------------------------------------------------------------
   1. KEYFRAME DEFINITIONS
   ---------------------------------------------------------------- */

/* Float / Levitate */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes floatFast {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

/* Ice Cube Spin */
@keyframes iceSpin {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

/* Pulse / Glow */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes pinPulse {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.5); }
}

/* Gradient Slide */
@keyframes gradientSlide {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Fade Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Blur Reveal */
@keyframes blurReveal {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* Slide Up */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale Up */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate In */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Text Reveal */
@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image Reveal (clip-path) */
@keyframes imageReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

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

/* Snow Particle Fall */
@keyframes snowfall {
    0% {
        opacity: 1;
        transform: translateY(-10px) translateX(0) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: translateY(50vh) translateX(30px) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) translateX(-10px) rotate(360deg);
    }
}

/* Bubble Rise */
@keyframes bubbleRise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    20% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-200px) scale(1);
    }
}

/* Typing cursor blink */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Ripple */
@keyframes ripple {
    to {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* Counter pop */
@keyframes counterPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Icon bounce */
@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-6px); }
    75% { transform: translateY(3px); }
}


/* ----------------------------------------------------------------
   2. SCROLL-TRIGGERED ANIMATION CLASSES
   These are applied via Intersection Observer in animation.js
   ---------------------------------------------------------------- */

/* Base: elements start invisible */
[data-anim] {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* Triggered state */
[data-anim].anim-visible {
    opacity: 1;
    transform: none !important;
    filter: none !important;
}

/* Animation variants */
[data-anim="fade-up"] {
    transform: translateY(50px);
}
[data-anim="fade-down"] {
    transform: translateY(-50px);
}
[data-anim="fade-left"] {
    transform: translateX(-50px);
}
[data-anim="fade-right"] {
    transform: translateX(50px);
}
[data-anim="zoom-in"] {
    transform: scale(0.85);
}
[data-anim="blur-reveal"] {
    filter: blur(10px);
    transform: translateY(30px);
}
[data-anim="slide-up"] {
    transform: translateY(80px);
}
[data-anim="rotate-in"] {
    transform: rotate(-8deg) scale(0.9);
}
[data-anim="scale-up"] {
    transform: scale(0.5);
}


/* ----------------------------------------------------------------
   3. STAGGER DELAY UTILITIES
   ---------------------------------------------------------------- */
[data-anim-delay="1"] { transition-delay: 0.1s; }
[data-anim-delay="2"] { transition-delay: 0.2s; }
[data-anim-delay="3"] { transition-delay: 0.3s; }
[data-anim-delay="4"] { transition-delay: 0.4s; }
[data-anim-delay="5"] { transition-delay: 0.5s; }
[data-anim-delay="6"] { transition-delay: 0.6s; }
[data-anim-delay="7"] { transition-delay: 0.7s; }
[data-anim-delay="8"] { transition-delay: 0.8s; }
[data-anim-delay="9"] { transition-delay: 0.9s; }
[data-anim-delay="10"] { transition-delay: 1.0s; }


/* ----------------------------------------------------------------
   4. HERO-SPECIFIC ENTRY ANIMATIONS
   These play once on page load, not on scroll
   ---------------------------------------------------------------- */
.di-hero .anim-hero-eyebrow {
    animation: fadeDown 0.7s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.di-hero .anim-hero-title {
    animation: fadeUp 0.8s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.di-hero .anim-hero-subtitle {
    animation: fadeUp 0.8s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.di-hero .anim-hero-actions {
    animation: fadeUp 0.8s 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.di-hero .anim-hero-stats {
    animation: fadeUp 0.8s 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.di-hero .anim-hero-visual {
    animation: fadeRight 1s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


/* ----------------------------------------------------------------
   5. HOVER MICRO-INTERACTION CLASSES
   ---------------------------------------------------------------- */

/* Icon rotate on parent hover */
.hover-icon-rotate:hover i,
.hover-icon-rotate:hover .bi {
    animation: rotateIn 0.5s ease both;
}

/* Icon bounce on parent hover */
.hover-icon-bounce:hover i,
.hover-icon-bounce:hover .bi {
    animation: iconBounce 0.5s ease both;
}

/* Glow on hover */
.hover-glow {
    transition: var(--di-transition);
}
.hover-glow:hover {
    box-shadow: var(--di-shadow-glow);
}

/* Image tilt on hover (subtle) */
.hover-tilt {
    transition: transform 0.3s ease;
}
.hover-tilt:hover {
    transform: perspective(800px) rotateY(3deg) rotateX(2deg);
}


/* ----------------------------------------------------------------
   6. LOADING / PAGE TRANSITION
   ---------------------------------------------------------------- */
.di-page-loader {
    position: fixed;
    inset: 0;
    background: var(--di-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.di-page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}
.di-loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--di-gray-200);
    border-top-color: var(--di-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ----------------------------------------------------------------
   7. SVG WAVE ANIMATIONS
   ---------------------------------------------------------------- */
.di-wave-animated path {
    animation: waveMove 8s ease-in-out infinite alternate;
}
@keyframes waveMove {
    0% { d: path("M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,58.7C672,64,768,96,864,96C960,96,1056,64,1152,48C1248,32,1344,32,1392,32L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"); }
    100% { d: path("M0,32L48,42.7C96,53,192,75,288,85.3C384,96,480,96,576,80C672,64,768,32,864,26.7C960,21,1056,43,1152,53.3C1248,64,1344,64,1392,64L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"); }
}