/* ==========================================
   ANIMATIONS
   ========================================== */

/* === REVEAL FADE UP === */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === REVEAL FADE IN === */
.reveal-fade-in {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-fade-in.is-visible {
    opacity: 1;
}

/* === REVEAL FROM LEFT === */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* === REVEAL FROM RIGHT === */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* === REVEAL SCALE === */
.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* === BORDER DRAW ANIMATION === */
.border-draw {
    position: relative;
}

.border-draw::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-green);
    transition: width var(--transition-slow);
}

.border-draw.is-visible::after {
    width: 100%;
}

/* === SVG LINE DRAW === */
.svg-line-draw path,
.svg-line-draw line,
.svg-line-draw rect,
.svg-line-draw circle {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.svg-line-draw.is-visible path,
.svg-line-draw.is-visible line,
.svg-line-draw.is-visible rect,
.svg-line-draw.is-visible circle {
    stroke-dashoffset: 0;
}

/* === STAGGER DELAYS === */
[data-delay="50"] { transition-delay: 50ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="350"] { transition-delay: 350ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="450"] { transition-delay: 450ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="550"] { transition-delay: 550ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }
[data-delay="800"] { transition-delay: 800ms; }
[data-delay="900"] { transition-delay: 900ms; }

/* === PARTICLE ANIMATION === */
@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.6;
    }
}

/* === LOGO HOVER === */
.logo-hover {
    transition: opacity var(--transition-fast);
}

.logo-hover:hover {
    opacity: 0.8;
}

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

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

/* === BORDER GLOW === */
@keyframes borderGlow {
    0%, 100% {
        border-color: var(--color-border-subtle);
    }
    50% {
        border-color: var(--color-border-light);
    }
}

.border-glow {
    animation: borderGlow 3s ease-in-out infinite;
}

/* === SECTION TRANSITION === */
.section-transition {
    position: relative;
}

.section-transition::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-border-light),
        transparent
    );
}