/* ============================================
   BENTOUYA - Animations CSS
   Keyframes & Transitions
============================================ */

/* ============================================
   LOADER ANIMATIONS
============================================ */
@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 30px var(--gold-glow));
    }
    50% {
        transform: translateY(-15px) scale(1.05);
        filter: drop-shadow(0 0 50px var(--gold-glow)) drop-shadow(0 0 80px var(--lantern-strong));
    }
}

@keyframes loadProgress {
    from { width: 0; }
    to { width: 100%; }
}

/* ============================================
   HERO ANIMATIONS
============================================ */
@keyframes particleFloat {
    0% { 
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { 
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

@keyframes norenDrop {
    to { 
        opacity: 1; 
        transform: translateY(0) rotateX(0deg); 
    }
}

@keyframes norenSway {
    0%, 100% { transform: rotate(-2.5deg) translateY(0); }
    50% { transform: rotate(2.5deg) translateY(4px); }
}

@keyframes fadeUp {
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

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

@keyframes scrollDrop {
    0% { top: -30%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ============================================
   ABOUT SECTION ANIMATIONS
============================================ */
@keyframes hankoSway {
    0%, 100% { transform: rotate(-4deg) scale(1); }
    50% { transform: rotate(4deg) scale(1.02); }
}

@keyframes hankoOrbit {
    to { transform: rotate(360deg); }
}

@keyframes badgeFloat1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-22px) rotate(5deg); }
}

@keyframes badgeFloat2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-28px) rotate(-4deg); }
}

@keyframes badgeFloat3 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(4deg); }
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
============================================ */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

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

/* ============================================
   FLOATING ANIMATIONS
============================================ */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes floatRotate {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
}

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

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 20px var(--vermillion-glow);
    }
    50% { 
        box-shadow: 0 0 40px var(--vermillion-glow), 0 0 60px var(--lantern);
    }
}

/* ============================================
   TEXT ANIMATIONS
============================================ */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

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

@keyframes textReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* ============================================
   HOVER EFFECTS
============================================ */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

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

/* ============================================
   LOADING STATES
============================================ */
@keyframes skeleton {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

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

/* ============================================
   UTILITY ANIMATION CLASSES
============================================ */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

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

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

/* Delay utilities */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* Duration utilities */
.duration-fast { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.5s; }
.duration-slow { animation-duration: 1s; }
.duration-slower { animation-duration: 2s; }

/* Easing utilities */
.ease-smooth { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.ease-bounce { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.ease-elastic { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }