/* ============================================================
   LAVENDER COUNSELING CENTER
   ANIMATIONS
============================================================ */


/* ============================================================
   REVEAL BASE
============================================================ */

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-soft {
    opacity: 0;

    transition:
        opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 900ms cubic-bezier(0.22, 1, 0.36, 1);

    will-change:
        opacity,
        transform,
        filter;
}


/* ============================================================
   REVEAL DIRECTIONS
============================================================ */

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

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

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

.reveal-scale {
    transform: scale(0.97);
}

.reveal-soft {
    transform: translateY(18px);
    filter: blur(8px);
}


/* ============================================================
   REVEAL ACTIVE STATE
============================================================ */

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-soft.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}


/* ============================================================
   STAGGER DELAYS
============================================================ */

.delay-1 {
    transition-delay: 80ms;
}

.delay-2 {
    transition-delay: 160ms;
}

.delay-3 {
    transition-delay: 240ms;
}

.delay-4 {
    transition-delay: 320ms;
}

.delay-5 {
    transition-delay: 400ms;
}

.delay-6 {
    transition-delay: 480ms;
}


/* ============================================================
   HERO ENTRANCE
============================================================ */

.hero-reveal {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(7px);

    animation:
        lavenderHeroReveal
        1000ms
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}

.hero-delay-1 {
    animation-delay: 120ms;
}

.hero-delay-2 {
    animation-delay: 240ms;
}

.hero-delay-3 {
    animation-delay: 360ms;
}

.hero-delay-4 {
    animation-delay: 480ms;
}

@keyframes lavenderHeroReveal {

    from {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(7px);
    }

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

}


/* ============================================================
   SOFT FLOAT
============================================================ */

.float-soft {
    animation:
        lavenderFloat
        7s
        ease-in-out
        infinite;
}

@keyframes lavenderFloat {

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

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

}


/* ============================================================
   BREATHING GLOW
============================================================ */

.breathe-soft {
    animation:
        lavenderBreathe
        8s
        ease-in-out
        infinite;
}

@keyframes lavenderBreathe {

    0%,
    100% {
        opacity: 0.58;
        transform: scale(1);
    }

    50% {
        opacity: 0.82;
        transform: scale(1.04);
    }

}


/* ============================================================
   IMAGE ENTRANCE
============================================================ */

.image-reveal {
    position: relative;
    overflow: hidden;
}

.image-reveal img {
    transform: scale(1.06);

    transition:
        transform
        1400ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

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


/* ============================================================
   LINE DRAW
============================================================ */

.draw-line {
    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform
        1000ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.draw-line.is-visible {
    transform: scaleX(1);
}


/* ============================================================
   GENTLE HOVER
============================================================ */

.gentle-hover {
    transition:
        transform var(--lavender-transition),
        box-shadow var(--lavender-transition);
}

.gentle-hover:hover {
    transform: translateY(-4px);
}


/* ============================================================
   LINK ARROW
============================================================ */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.link-arrow::after {
    content: "→";

    transition:
        transform
        350ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.link-arrow:hover::after {
    transform: translateX(4px);
}


/* ============================================================
   SUBTLE IMAGE PARALLAX
============================================================ */

.parallax-soft {
    transform:
        translate3d(
            var(--parallax-x, 0),
            var(--parallax-y, 0),
            0
        );

    transition:
        transform
        500ms
        cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* ============================================================
   PAGE LOAD
============================================================ */

body {
    opacity: 0;

    animation:
        lavenderPageLoad
        500ms
        ease
        forwards;
}

@keyframes lavenderPageLoad {

    to {
        opacity: 1;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-soft,
    .hero-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
        transition: none;
    }

    .float-soft,
    .breathe-soft {
        animation: none;
    }

    .image-reveal img,
    .draw-line,
    .gentle-hover,
    .link-arrow::after,
    .parallax-soft {
        transform: none;
        transition: none;
    }

    body {
        opacity: 1;
        animation: none;
    }

}