/* ============================================
   MUSKAN STUDIO — Animations
   ============================================ */

/* Base reveal animation classes */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-fade {
    opacity: 0;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: opacity, transform;
}

.reveal-up {
    transform: translateY(30px);
}

.reveal-left {
    transform: translateX(-30px);
}

.reveal-right {
    transform: translateX(30px);
}

.reveal-fade {
    transform: none;
}

/* Revealed state */
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-fade.revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* Stagger delays */
[data-delay="0"] { transition-delay: 0ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }

/* Hover animations */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(17, 17, 17, 0.04);
}

/* Underline animation for links */
.underline-anim {
    position: relative;
    display: inline-block;
}

.underline-anim::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-accent);
    transition: width var(--transition-base);
}

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

/* Fade in on load */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle pulse for accent elements */
@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Counter animation handled in JS */

/* Scale reveal */
.scale-reveal {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.scale-reveal.revealed {
    opacity: 1;
    transform: scale(1);
}