/*
 * ALINA CHOPRA — CELESTIAL HERO
 * Decorative backdrop only; preserves existing hero layout.
 */

.alina-future-hero,
.alina-hero,
.future-hero {
    isolation: isolate;
}

.alina-future-hero::before,
.alina-hero::before,
.future-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        radial-gradient(circle, rgba(255,215,166,.72) 0.8px, transparent 1.5px),
        radial-gradient(circle, rgba(112,238,202,.46) 1px, transparent 1.8px),
        radial-gradient(circle, rgba(255,170,206,.38) .7px, transparent 1.5px);

    background-size:
        43px 43px,
        97px 97px,
        71px 71px;

    background-position:
        0 0,
        24px 36px,
        17px 54px;

    mask-image:
        radial-gradient(
            ellipse at 48% 50%,
            #000 5%,
            rgba(0,0,0,.82) 48%,
            transparent 95%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at 48% 50%,
            #000 5%,
            rgba(0,0,0,.82) 48%,
            transparent 95%
        );

    opacity: .75;
}

.alina-future-hero::after,
.alina-hero::after,
.future-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse 35% 48% at 12% 30%,
            rgba(226,159,103,.13),
            transparent 80%
        ),
        radial-gradient(
            ellipse 32% 46% at 82% 67%,
            rgba(81,224,175,.12),
            transparent 85%
        ),
        repeating-linear-gradient(
            125deg,
            transparent 0 115px,
            rgba(235,195,145,.035) 116px,
            transparent 117px 235px
        );

    opacity: .85;
}

@media (max-width: 767px) {
    .alina-future-hero::before,
    .alina-hero::before,
    .future-hero::before {
        background-size:
            35px 35px,
            81px 81px,
            61px 61px;
        opacity: .5;
    }

    .alina-future-hero::after,
    .alina-hero::after,
    .future-hero::after {
        opacity: .55;
    }
}

/* STEP 235 — ACTUAL HERO SELECTORS */
.afh-hero {
    position: relative;
    isolation: isolate;
}

/* The hero already includes this decorative background element. */
.afh-hero > .afh-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background-image:
        radial-gradient(circle, rgba(255,211,154,.90) 1.1px, transparent 2px),
        radial-gradient(circle, rgba(111,241,201,.75) 1.3px, transparent 2.4px),
        radial-gradient(circle, rgba(255,163,202,.62) 1px, transparent 2px),
        radial-gradient(ellipse at 20% 35%, rgba(222,155,111,.12), transparent 50%),
        radial-gradient(ellipse at 80% 65%, rgba(91,225,191,.11), transparent 55%);

    background-size:
        39px 39px,
        91px 91px,
        67px 67px,
        100% 100%,
        100% 100%;

    background-position:
        0 0,
        23px 37px,
        41px 12px,
        center,
        center;

    opacity: .82;
    transform: none;
    animation: none;
    mask-image: linear-gradient(
        90deg,
        rgba(0,0,0,.9),
        #000 35%,
        #000 70%,
        rgba(0,0,0,.65)
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        rgba(0,0,0,.9),
        #000 35%,
        #000 70%,
        rgba(0,0,0,.65)
    );
}

/* Keep every functional hero element above the particles. */
.afh-hero > .afh-container,
.afh-hero > .ac-concierge,
.afh-hero > .afh-bottom-line {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .afh-hero > .afh-grid {
        background-size:
            33px 33px,
            79px 79px,
            59px 59px,
            100% 100%,
            100% 100%;
        opacity: .65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .afh-hero > .afh-grid {
        animation: none !important;
    }
}

/* STEP 236 — FINE-GRAIN CELESTIAL TEXTURE */
.afh-hero > .afh-grid {
    background-image:
        radial-gradient(circle, rgba(238,193,145,.42) .55px, transparent .85px),
        radial-gradient(circle, rgba(104,222,185,.23) .5px, transparent .85px),
        radial-gradient(ellipse at 20% 35%, rgba(222,155,111,.10), transparent 50%),
        radial-gradient(ellipse at 80% 65%, rgba(91,225,191,.09), transparent 55%) !important;

    background-size:
        7px 7px,
        11px 11px,
        100% 100%,
        100% 100% !important;

    background-position:
        0 0,
        3px 5px,
        center,
        center !important;

    opacity: .78 !important;
}