/* =========================================
   GLOBAL EASING
========================================= */

:root {

    --ease-premium:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-smooth:
        cubic-bezier(0.4, 0, 0.2, 1);
}


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

.reveal {

    opacity: 0;

    transform: translateY(50px);

    transition:
        opacity 1.1s var(--ease-premium),
        transform 1.1s var(--ease-premium);

    will-change:
        opacity,
        transform;
        backface-visibility: hidden;
        perspective: 1000px;
}


.reveal.active {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================
   DIRECTIONAL REVEALS
========================================= */

.reveal-left {

    opacity: 0;

    transform: translateX(-28px);

    transition:
        opacity 1s var(--ease-premium),
        transform 1s var(--ease-premium);

    will-change:
        opacity,
        transform;
        backface-visibility: hidden;
        perspective: 1000px;
}


.reveal-left.active {

    opacity: 1;

    transform: translateX(0);
}


.reveal-right {

    opacity: 0;

    transform: translateX(28px);

    transition:
        opacity 1.1s var(--ease-premium),
        transform 1.1s var(--ease-premium);

    will-change:
        opacity,
        transform;
        backface-visibility: hidden;
        perspective: 1000px;
}


.reveal-right.active {

    opacity: 1;

    transform: translateX(0);
}


/* =========================================
   SCALE REVEAL
========================================= */

.reveal-scale {

    opacity: 0;

    transform: scale(0.965);

    transition:
        opacity 1s var(--ease-premium),
        transform 1s var(--ease-premium);

    will-change:
        opacity,
        transform;
        backface-visibility: hidden;
        perspective: 1000px;
}


.reveal-scale.active {

    opacity: 1;

    transform: scale(1);
}


.reveal-scale.active.closing {

    opacity: 0;

    pointer-events: none;

    transform: scale(0.965);
}


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

.delay-1 {

    transition-delay: 0.3s;
}

.delay-2 {

    transition-delay: 0.6s;
}

.delay-3 {

    transition-delay: 0.9s;
}

.delay-4 {

    transition-delay: 1.2s;
}

.delay-5 {

    transition-delay: 1.5s;
}

.delay-6 {

    transition-delay: 1.8s;
}

.delay-7 {

    transition-delay: 2.1s;
}

.delay-8 {

    transition-delay: 2.4s;
}

.delay-9 {

    transition-delay: 2.7s;
}

.delay-10 {

    transition-delay: 3.0s;
}

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

.parallax-image {

    transform: scale(1.08);

    transition:
        transform 1.8s var(--ease-premium);
}


.reveal.active .parallax-image {

    transform: scale(1);
}


/* =========================================
   PREMIUM HOVER
========================================= */

.hover-lift {

    transition:
        transform 0.7s var(--ease-premium),
        box-shadow 0.7s var(--ease-premium),
        border-color 0.7s var(--ease-premium);
}


.hover-lift:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.32);
}


/* =========================================
   HOVER IMAGE ZOOM
========================================= */

.hover-image {

    overflow: hidden;
}


.hover-image img {

    transition:
        transform 1.2s var(--ease-premium);
}


.hover-image:hover img {

    transform: scale(1.06);
}


/* =========================================
   TEXT REVEAL
========================================= */

.hero-line-wrap {
    overflow: hidden;
}

.text-reveal span,
.text-reveal .hero-line-wrap > * {

    display: inline-block;

    transform: translateY(120%);

    opacity: 0;

    will-change:
        transform,
        opacity;

    transition:
        transform 1s var(--ease-premium),
        opacity 1s var(--ease-premium);
}


.text-reveal.active span,
.text-reveal.active .hero-line-wrap > * {

    transform: translateY(0);

    opacity: 1;
}

.text-reveal .delay-1 {
    transition-delay: 0.15s;
}

.text-reveal .delay-2 {
    transition-delay: 0.3s;
}

.text-reveal .delay-3 {
    transition-delay: 0.45s;
}

.text-reveal .delay-4 {
    transition-delay: 0.6s;
}


/* =========================================
   BUTTON GLOW
========================================= */

.glow-button {

    position: relative;

    overflow: hidden;
}


.glow-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(177,18,23,0.18),
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity 0.5s ease;
}


.glow-button:hover::before {

    opacity: 1;
}