/* =========================================================
   BLOQUE 01 — HERO
   ID: adv-hero
   ========================================================= */

.adv-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    background: var(--adv-black);
}


/* =========================================================
   ESCENA 3D
   ========================================================= */

.adv-hero__scene {
    position: absolute;

    top: 5.5vh;
    left: 50%;

    width: min(34vw, 520px);
    height: min(34vw, 520px);

    transform: translateX(-50%);

    z-index: 3;
    pointer-events: none;
}

#adv-hero-canvas {
    display: block;

    width: 100%;
    height: 100%;

    opacity: 1;
}


/* =========================================================
   MARCA
   ========================================================= */

.adv-hero__brand {
    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    transform: translateY(-34%);

    z-index: 6;

    text-align: center;
    pointer-events: none;
}


/* =========================================================
   ISOTIPO
   ========================================================= */

.adv-hero__logo {
    position: absolute;

    top: -22vh;
    left: 50%;

    width: clamp(110px, 8.4vw, 158px);

    transform:
        translateX(-50%)
        translateY(24px)
        scale(1.35);

    transform-origin: center center;

    opacity: 0;

    filter:
        brightness(1.35)
        drop-shadow(
            0 0 22px
            rgba(235, 216, 157, 0.22)
        );

    z-index: 7;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   WORDMARK ADVANIZE
   ========================================================= */

.adv-hero__wordmark {
    --adv-shine-x: 150%;
    --adv-shine-opacity: 0;

    position: relative;
    display: inline-block;

    width: auto;
    max-width: 98vw;

    margin: 0;
    padding: 0;

    color: var(--adv-gold);

    font-family: "SangBleu Empire", serif;
    font-size: clamp(120px, 16.4vw, 320px);
    font-weight: 700;

    line-height: 0.76;
    letter-spacing: -0.052em;

    white-space: nowrap;
    text-align: center;

    opacity: 0;

    transform:
        translateY(26px)
        scale(0.82);

    transform-origin: center center;

    filter: blur(10px);

    z-index: 8;

    will-change:
        transform,
        opacity,
        filter;
}


/* Brillo interior de ADVANIZE */

.adv-hero__wordmark::after {
    content: "ADVANIZE";

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    text-align: inherit;
    white-space: inherit;

    color: transparent;

    background:
        linear-gradient(
            102deg,
            transparent 0%,
            transparent 38%,
            rgba(255, 247, 215, 0.08) 43%,
            rgba(255, 249, 222, 0.92) 49%,
            #fff8dc 50%,
            rgba(255, 249, 222, 0.88) 52%,
            rgba(255, 247, 215, 0.08) 57%,
            transparent 62%,
            transparent 100%
        );

    background-size: 240% 100%;

    background-position:
        var(--adv-shine-x)
        50%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    opacity: var(--adv-shine-opacity);

    pointer-events: none;
    z-index: 2;
}


/* =========================================================
   H1
   ========================================================= */

.adv-hero__title {
    position: relative;

    margin:
        clamp(30px, 3.8vh, 54px)
        0
        0;

    padding: 0 24px;

    max-width: 1000px;

    color: var(--adv-white);

    font-family: "Tenor Sans", sans-serif;
    font-size: clamp(17px, 1.65vw, 29px);
    font-weight: 400;

    line-height: 1.25;
    letter-spacing: 0.055em;

    text-align: center;

    opacity: 0;

    transform: translateY(14px);

    filter: blur(4px);

    z-index: 8;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   TRANSICIÓN INFERIOR ACTUAL
   ========================================================= */

.adv-hero__next {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: clamp(42px, 7vh, 82px);

   background: #ffffff;

    z-index: 2;
}


/* =========================================================
   ATMÓSFERA DEL HERO
   ========================================================= */

.adv-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(235, 216, 157, 0.055) 0%,
            rgba(235, 216, 157, 0.018) 22%,
            transparent 52%
        );

    opacity: 1;
    z-index: 1;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .adv-hero__brand {
        bottom: 11vh;
    }

    .adv-hero__logo {
        top: -25vh;

        width: clamp(
            68px,
            8vw,
            92px
        );
    }

    .adv-hero__wordmark {
        max-width: 97vw;

        font-size: clamp(
            92px,
            16.2vw,
            170px
        );

        line-height: 0.79;
    }

    .adv-hero__title {
        margin-top: 28px;

        font-size: clamp(
            16px,
            2.2vw,
            23px
        );
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .adv-hero__brand {
        bottom: 13vh;
    }

    .adv-hero__logo {
        top: -24vh;

        width: clamp(
            60px,
            16vw,
            82px
        );
    }

    .adv-hero__wordmark {
        max-width: 98vw;

        padding: 0 7px;

        font-size: clamp(
            61px,
            18vw,
            116px
        );

        line-height: 0.82;
        letter-spacing: -0.055em;
    }

    .adv-hero__title {
        margin-top: 25px;

        padding: 0 20px;

        max-width: 90vw;

        font-size: clamp(
            14px,
            4.2vw,
            19px
        );

        line-height: 1.3;
        letter-spacing: 0.035em;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .adv-hero__brand {
        bottom: 12vh;
    }

    .adv-hero__logo {
        top: -22vh;
        width: 62px;
    }

    .adv-hero__wordmark {
        font-size: 17.5vw;
    }

    .adv-hero__title {
        margin-top: 21px;
        font-size: 14px;
    }
}