/* ============================================
   ANIMATIONS & UTILITIES — BRUTALIST
   ============================================ */

/* Icon sizes */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

@keyframes scanline {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* Animation classes */
.animate-fade-up { animation: fadeInUp 0.5s ease-out forwards; }
.animate-fade-left { animation: fadeInLeft 0.5s ease-out forwards; }
.animate-fade-right { animation: fadeInRight 0.5s ease-out forwards; }
.animate-scale { animation: scaleIn 0.4s ease-out forwards; }

/* Stagger delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Scroll animation trigger */
[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Hover utilities */
.hover-lift {
    transition: transform 0.2s, box-shadow 0.2s;
}

.hover-lift:hover {
    transform: translate(-3px, -3px);
    box-shadow: 3px 3px 0 var(--accent);
}

.hover-border {
    transition: border-color 0.2s;
}

.hover-border:hover {
    border-color: var(--accent);
}