/* ===========================
   GIEDEN – Animations CSS
   =========================== */

/* ── REVEAL ANIMATIONS */
.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* ── STAGGER delays via data-delay */
[data-delay="0.05"] {
    transition-delay: 0.05s;
}

[data-delay="0.1"] {
    transition-delay: 0.1s;
}

[data-delay="0.15"] {
    transition-delay: 0.15s;
}

[data-delay="0.2"] {
    transition-delay: 0.2s;
}

[data-delay="0.25"] {
    transition-delay: 0.25s;
}

[data-delay="0.3"] {
    transition-delay: 0.3s;
}

[data-delay="0.35"] {
    transition-delay: 0.35s;
}

[data-delay="0.4"] {
    transition-delay: 0.4s;
}

/* ── PAGE TRANSITION */
body {
    animation: pageIn 0.5s ease both;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── HEADER TRANSITION */
.header {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── CARD SHIMMER (hover glow) */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ── COUNTER NUMBER ANIMATION */
.stat-number {
    font-variant-numeric: tabular-nums;
}

/* ── HERO PARTICLE GLOW */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(56, 189, 248, 0.12) 1px, transparent 1px),
        radial-gradient(circle, rgba(37, 99, 235, 0.08) 1px, transparent 1px);
    background-size: 60px 60px, 90px 90px;
    background-position: 0 0, 30px 30px;
    animation: particlesDrift 20s linear infinite;
}

@keyframes particlesDrift {
    from {
        background-position: 0 0, 30px 30px;
    }

    to {
        background-position: 60px 60px, 90px 90px;
    }
}

/* ── DIAGONAL SECTION DIVIDER */
.section-diagonal {
    position: relative;
}

.section-diagonal::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    height: 80px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    z-index: 1;
}

/* ── LOADING STATE */
.loading-pulse {
    animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}