/*
 * animations.css - 애니메이션 스타일시트
 * 행집사 타일나라 - Luxury Gold Animations
 */

/* ========== SLIDE UP ANIMATION ========== */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* ========== FADE IN ========== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* ========== SCALE ANIMATION ========== */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========== GOLD SHIMMER ========== */
@keyframes goldShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.gold-shimmer {
    background: linear-gradient(90deg,
        var(--gold-primary) 0%,
        var(--gold-light) 25%,
        var(--gold-accent) 50%,
        var(--gold-light) 75%,
        var(--gold-primary) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 3s linear infinite;
}

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

.float-anim {
    animation: float 4s ease-in-out infinite;
}

/* ========== PULSE GLOW ========== */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(197, 165, 114, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(197, 165, 114, 0.6);
    }
}

/* ========== ROTATE ========== */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== SCROLL REVEAL - IntersectionObserver controlled ========== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

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

/* ========== HOVER EFFECTS ========== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* ========== LINE DRAWING ANIMATION ========== */
@keyframes drawLine {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* ========== COUNTER ANIMATION ========== */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== PARALLAX DEPTH LAYERS ========== */
.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.parallax-layer-1 {
    transform: translateZ(-2px) scale(3);
}

.parallax-layer-2 {
    transform: translateZ(-1px) scale(2);
}

.parallax-layer-3 {
    transform: translateZ(0);
}

/* ========== LOADING SKELETON ========== */
@keyframes skeleton {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--light-bg) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* ========== PARTICLE GLOW EFFECT ========== */
@keyframes particleGlow {
    0% {
        opacity: 0;
        transform: scale(0) translateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1) translateY(-100px);
    }
}

/* ========== INK DROP EFFECT ========== */
@keyframes inkSpread {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ========== ENERGY CORE PULSE ========== */
@keyframes energyPulse {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(197, 165, 114, 0.4),
            0 0 20px rgba(197, 165, 114, 0.2),
            0 0 40px rgba(197, 165, 114, 0.1);
    }
    50% {
        box-shadow:
            0 0 20px rgba(197, 165, 114, 0.6),
            0 0 40px rgba(197, 165, 114, 0.4),
            0 0 80px rgba(197, 165, 114, 0.2);
    }
}