/* ===========================
   Keyframe Animations
   =========================== */

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

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

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

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

/* ===========================
   GSAP Integration Classes
   =========================== */

/* Elements waiting to be revealed by GSAP */
.reveal {
    opacity: 0;
    transform: translateY(60px);
}

.reveal--left {
    opacity: 0;
    transform: translateX(-60px);
}

.reveal--right {
    opacity: 0;
    transform: translateX(60px);
}

.reveal--scale {
    opacity: 0;
    transform: scale(0.9);
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(40px);
}

/* Hero text lines - GSAP handles entrance */
.hero__line {
    opacity: 0;
    transform: translateY(80px);
}

.hero__subtitle {
    opacity: 0;
    transform: translateY(20px);
}

/* Hero cats - start hidden, GSAP animates in */
.hero__cats {
    opacity: 0;
}

/* Service/Work items - GSAP handles entrance */
.rwork__item-thumb--tilted {
    opacity: 0;
}

.rwork__item-content {
    opacity: 0;
}

/* CTA + Footer - GSAP handles entrance */
.cta__content {
    opacity: 0;
}

.cta__actions {
    opacity: 0;
}

.footer__contact-item {
    opacity: 0;
}

/* Page transition */
.page-transition {
    animation: fadeInUp 0.6s ease forwards;
}

/* Placeholder image animation */
.placeholder-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary) 25%,
        var(--color-bg-secondary) 50%,
        var(--color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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