/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1),
                transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

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

/* Fade up */
.reveal--fade-up {
    transform: translateY(60px);
}

/* Fade left */
.reveal--fade-left {
    transform: translateX(-60px);
}

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

/* Fade right */
.reveal--fade-right {
    transform: translateX(60px);
}

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

/* Scale up */
.reveal--scale {
    transform: scale(0.9);
}

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

/* Staggered children */
.reveal-group .reveal {
    transition-delay: calc(var(--reveal-delay, 0) * 0.15s);
}

/* Specific delays for cards */
.card-grid .card:nth-child(1),
.card-grid .service-card:nth-child(1) { --reveal-delay: 0; }
.card-grid .card:nth-child(2),
.card-grid .service-card:nth-child(2) { --reveal-delay: 1; }
.card-grid .card:nth-child(3),
.card-grid .service-card:nth-child(3) { --reveal-delay: 2; }
.card-grid .card:nth-child(4),
.card-grid .service-card:nth-child(4) { --reveal-delay: 3; }

/* Stats stagger */
.stats-grid .stat-item:nth-child(1) { --reveal-delay: 0; }
.stats-grid .stat-item:nth-child(2) { --reveal-delay: 1; }
.stats-grid .stat-item:nth-child(3) { --reveal-delay: 2; }
.stats-grid .stat-item:nth-child(4) { --reveal-delay: 3; }

/* ==========================================================================
   Floating Geometry Animations
   ========================================================================== */

.floating-geo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floating-geo__shape {
    position: absolute;
    opacity: 0;
    animation: geoFloat 12s ease-in-out infinite, geoFade 12s ease-in-out infinite;
}

/* Hexagon shape */
.floating-geo__shape--hexagon {
    width: 40px;
    height: 46px;
    background: transparent;
    border: 1.5px solid var(--color-primary);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Circle shape */
.floating-geo__shape--circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent-glow);
}

/* Diamond shape */
.floating-geo__shape--diamond {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1.5px solid var(--color-primary);
    transform: rotate(45deg);
    box-shadow: 0 0 6px var(--color-primary-glow);
}

/* Shape positions and timing */
.floating-geo__shape--1 {
    top: 15%;
    left: 8%;
    animation-delay: 0s;
    animation-duration: 14s, 14s;
}

.floating-geo__shape--2 {
    top: 25%;
    right: 12%;
    animation-delay: 2s;
    animation-duration: 11s, 11s;
}

.floating-geo__shape--3 {
    bottom: 30%;
    left: 15%;
    animation-delay: 4s;
    animation-duration: 13s, 13s;
}

.floating-geo__shape--4 {
    bottom: 20%;
    right: 8%;
    animation-delay: 6s;
    animation-duration: 15s, 15s;
}

.floating-geo__shape--5 {
    top: 60%;
    left: 70%;
    animation-delay: 3s;
    animation-duration: 12s, 12s;
}

.floating-geo__shape--6 {
    top: 40%;
    left: 30%;
    animation-delay: 8s;
    animation-duration: 16s, 16s;
}

/* Sparse variant - fewer visible, more spread */
.floating-geo--sparse .floating-geo__shape--3,
.floating-geo--sparse .floating-geo__shape--5 {
    display: none;
}

/* Dense variant - slightly higher opacity */
.floating-geo--dense .floating-geo__shape {
    animation-name: geoFloat, geoFadeDense;
}

/* Keyframes */
@keyframes geoFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
    }
    50% {
        transform: translateY(-10px) rotate(-3deg);
    }
    75% {
        transform: translateY(-25px) rotate(4deg);
    }
}

@keyframes geoFade {
    0%, 100% {
        opacity: 0;
    }
    15%, 85% {
        opacity: 0.12;
    }
    50% {
        opacity: 0.18;
    }
}

@keyframes geoFadeDense {
    0%, 100% {
        opacity: 0;
    }
    15%, 85% {
        opacity: 0.18;
    }
    50% {
        opacity: 0.25;
    }
}

/* Diamond keeps its 45deg rotation during float */
.floating-geo__shape--diamond {
    animation-name: geoDiamondFloat, geoFade;
}

@keyframes geoDiamondFloat {
    0%, 100% {
        transform: rotate(45deg) translateY(0);
    }
    25% {
        transform: rotate(50deg) translateY(-20px);
    }
    50% {
        transform: rotate(42deg) translateY(-10px);
    }
    75% {
        transform: rotate(49deg) translateY(-25px);
    }
}

.floating-geo--dense .floating-geo__shape--diamond {
    animation-name: geoDiamondFloat, geoFadeDense;
}

/* Sections that use floating-geo need relative positioning */
.section--cta,
.section--about-intro,
.section--approach,
.section--officers,
.section--company-info,
.page-hero--service,
.service-section {
    position: relative;
}

/* Content stays above geometry */
.section--cta > .container,
.section--about-intro > .container,
.section--officers > .container,
.section--company-info > .container,
.page-hero > .container,
.service-section > .container {
    position: relative;
    z-index: 1;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .floating-geo__shape {
        animation: none;
        opacity: 0.08;
    }
}