/* ===================================
   Animation System - Ensemble, Inc.
   =================================== */

/* ── Loader / Opening ── */
.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    background: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease-out-expo), visibility 0.8s;
}

.loader-overlay.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    font-family: var(--font-en);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: var(--fw-light);
    letter-spacing: var(--ls-wider);
    color: var(--color-text-primary);
    text-transform: lowercase;
    opacity: 0;
}

.loader-logo span {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
}

.loader-logo span.reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition: all 0.6s var(--ease-out-expo);
}

.loader-line {
    position: absolute;
    bottom: 45%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    transition: width 1s var(--ease-out-expo) 0.8s;
}

.loader-overlay.animating .loader-line {
    width: 200px;
}

/* ── Scroll Reveal Base ── */
.reveal-element {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
        transform var(--duration-slow) var(--ease-out-expo);
}

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

/* Stagger children */
.reveal-stagger>* {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
        transform var(--duration-slow) var(--ease-out-expo);
}

.reveal-stagger.is-visible>*:nth-child(1) {
    transition-delay: 0ms;
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible>*:nth-child(2) {
    transition-delay: 80ms;
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible>*:nth-child(3) {
    transition-delay: 160ms;
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible>*:nth-child(4) {
    transition-delay: 240ms;
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible>*:nth-child(5) {
    transition-delay: 320ms;
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible>*:nth-child(6) {
    transition-delay: 400ms;
    opacity: 1;
    transform: translateY(0);
}

/* ── Text Reveal (character by character) ── */
.text-reveal {
    overflow: hidden;
}

.text-reveal .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s var(--ease-out-expo),
        transform 0.5s var(--ease-out-expo);
}

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

/* ── Fade from different directions ── */
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
        transform var(--duration-slow) var(--ease-out-expo);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
        transform var(--duration-slow) var(--ease-out-expo);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
        transform var(--duration-slow) var(--ease-out-expo);
}

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

/* ── Card hover glow ── */
@keyframes cardGlow {

    0%,
    100% {
        box-shadow: 0 0 0 transparent;
    }

    50% {
        box-shadow: 0 0 30px var(--color-accent-glow);
    }
}

/* ── Floating animation ── */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* ── Pulse glow ── */
@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* ── Scroll indicator ── */
@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(10px);
        opacity: 1;
    }
}

/* ── Line drawing animation ── */
@keyframes drawLine {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* ── Phase connector line ── */
@keyframes growDown {
    from {
        height: 0;
    }

    to {
        height: 100%;
    }
}

/* ── Particle canvas ── */
#particle-canvas {
    position: fixed;
    inset: 0;
    z-index: var(--z-particles);
    pointer-events: none;
}

/* ── Morphing border ── */
@keyframes morphBorder {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }

    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {

    .reveal-element,
    .reveal-stagger>*,
    .text-reveal .char,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        transition: none;
        opacity: 1;
        transform: none;
    }

    #particle-canvas {
        display: none;
    }
}