/* BlackRoad OS — Animations Library
 * Extracted from motion system for reuse across all pages
 * v1.0.0 - December 21, 2025
 */

/* ========== CSS VARIABLES ========== */
:root {
    /* Colors */
    --black: #000000;
    --white: #FFFFFF;
    --amber: #F5A623;
    --orange: #F26522;
    --hot-pink: #FF1D6C;
    --magenta: #E91E63;
    --electric-blue: #2979FF;
    --sky-blue: #448AFF;
    --violet: #9C27B0;
    --deep-purple: #5E35B1;
    
    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--amber) 0%, var(--hot-pink) 38.2%, var(--violet) 61.8%, var(--electric-blue) 100%);
    --gradient-sunset: linear-gradient(135deg, var(--amber) 0%, var(--hot-pink) 50%, var(--violet) 100%);
    --gradient-ocean: linear-gradient(135deg, var(--violet) 0%, var(--electric-blue) 50%, var(--amber) 100%);
    
    /* Golden Ratio Spacing */
    --phi: 1.618;
    --space-xs: 8px;
    --space-sm: 13px;
    --space-md: 21px;
    --space-lg: 34px;
    --space-xl: 55px;
    --space-2xl: 89px;
    --space-3xl: 144px;
    
    /* Easing Functions */
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ========== HOVER EFFECTS ========== */
.hover-lift:hover {
    transform: translateY(-15px) translateZ(40px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    transition: all 0.5s var(--ease);
}

.hover-glow:hover {
    box-shadow: 0 0 0 1px var(--hot-pink), 0 0 40px rgba(255, 29, 108, 0.4), 0 0 80px rgba(255, 29, 108, 0.2);
    transition: all 0.5s var(--ease);
}

.hover-scale:hover {
    transform: scale(1.08) translateZ(20px);
    transition: all 0.5s var(--ease);
}

/* ========== FADE ANIMATIONS ========== */
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }
@keyframes fade-down { to { opacity: 1; transform: translateY(0); } }

.fade-in { animation: fade-in 1s var(--ease) forwards; opacity: 0; }
.fade-up { animation: fade-up 1s var(--ease-out) forwards; opacity: 0; transform: translateY(20px); }
.fade-down { animation: fade-down 1s var(--ease-out) forwards; opacity: 0; transform: translateY(-20px); }

/* ========== PULSE & BOUNCE ========== */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

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

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

/* ========== SPIN & ROTATE ========== */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

.spin { animation: spin 2s linear infinite; }
.spin-slow { animation: spin 8s linear infinite; }
.spin-reverse { animation: spin-reverse 2s linear infinite; }

/* ========== TEXT EFFECTS ========== */
.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes gradient-flow {
    from { background-position: 0% center; }
    to { background-position: 300% center; }
}

.gradient-flow {
    background: linear-gradient(90deg, var(--amber), var(--hot-pink), var(--violet), var(--electric-blue), var(--amber));
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-flow 4s linear infinite;
}

/* ========== UTILITY CLASSES ========== */
.transition-all { transition: all 0.3s var(--ease); }
.transition-fast { transition: all 0.15s var(--ease); }
.transition-slow { transition: all 0.6s var(--ease); }