.hero-home {
    position: relative;
    height: 100vh;
    margin-top: -96px;
    background: var(--bg-default);
    overflow-x: clip;
}

    .hero-home .hh-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-color: var(--bg-default);
        background-image: url(/assets/hero/hero_bg.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 1440px auto;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 90%, transparent 100%);
    }

    .hero-home .hh-ellipse {
        position: absolute;
        z-index: 0;
        top: -6%;
        right: -8%;
        width: min(1120px, 78%);
        height: auto;
        pointer-events: none;
        transform: rotate(174.12deg);
    }

    .hero-home .hh-inner {
        position: relative;
        z-index: 1; /* acima do bg/ellipse (a logo dentro fica em z:0 local) */
        height: 100%;
        width: 100%;
        max-width: var(--site-max); /* 1920 → title/card ancoram nas bordas do frame */
        margin-inline: auto;
    }

    /* ---------- Logo TP = vídeo mascarado, centralizado, expande do centro ---------- */
    .hero-home .hh-logo {
        position: absolute;
        top: 64%; /* mais baixa (center-right) p/ encaixar com o título maior */
        left: 50%;
        /* tamanho explícito (abs-positioned + aspect-ratio não computa width sozinho): cabe no
     viewport e capa no tamanho de design; width = height * 1115/1186 (proporção do frame) */
        height: min(1050px, 58vh);
        width: min(986px, 54.5vh);
        aspect-ratio: 1115 / 1186;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        background: #010101; /* "P" preto até o vídeo revelar */
        -webkit-mask: url(/assets/hero/tp-logo-mask.svg) no-repeat center / contain;
        mask: url(/assets/hero/tp-logo-mask.svg) no-repeat center / contain;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        animation: hhLogoIn 2333ms cubic-bezier(0.76, 0, 0.24, 1) both;
    }

    .hero-home .hh-logo-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.35) translate(9%, -6%); /* enquadra o vórtice no bojo do "P" */
        transform-origin: center;
        opacity: 0;
        animation: hhLogoReveal 2333ms linear both; /* o vídeo aparece na 2ª metade da entrada */
    }

@keyframes hhLogoReveal {
    0%, 56% {
        opacity: 0;
    }

    84%, 100% {
        opacity: 1;
    }
}

@keyframes hhLogoIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.02);
    }

    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.06);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ---------- Título (Lottie + fallback estático com gradiente) ---------- */
.hero-home .hh-title {
    position: absolute;
    /* desktop: alinhado à direita com a borda direita no CENTRO da tela (50%). ≤1024 o bloco
     tablet restaura left:gutter (upper-left). */
    right: 50%;
    left: auto;
    top: 9vw;
    margin: 0;
    z-index: 2;
    width: min(700px, 61vw); /* largura máxima do título = 700px */
    pointer-events: none; /* heading decorativo: não intercepta o scroll/card atrás */
    /* Entrada: só FADE (spec), início 0ms, 1333ms — animação CSS (dispara ao aplicar o CSS,
     sem depender de timing do JS/corrida entre <link> e <script> do include) */
    animation: hhTitleIn 1333ms cubic-bezier(0.167, 0.167, 0.42, 1) both;
}

@keyframes hhTitleIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* translateY: o canvas do Lottie tem folga vertical acima do texto → sobe o texto p/ perto do topo.
   translateX: desloca o texto p/ a direita até terminar ~no centro da tela (o canvas tem folga à
   direita das palavras curtas; a borda do bloco fica no 50% via right:50%). ≤1024 o tablet zera o X. */
.hero-home .hh-title-lottie {
    display: block;
    width: 100%;
    transform: translateY(-56%);
}

    .hero-home .hh-title-lottie svg {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

.hero-home .hh-title-fallback {
    display: block;
    font-weight: var(--fw-extralight);
    font-size: 112px;
    line-height: 112px;
    letter-spacing: -0.01em;
    background: linear-gradient(104deg, #2c1c5c 0%, #5a41b8 26%, #9a7bf7 46%, #6a4fd0 62%, #241a49 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

    .hero-home .hh-title-fallback span {
        display: block;
    }
/* estados Lottie (troca fallback↔animação; anti-flash com .js) */
.hero-home .hh-title.lottie-ready .hh-title-fallback {
    display: none;
}

.hero-home .hh-title:not(.lottie-ready) .hh-title-lottie {
    display: none;
}

.hero-home .js .hh-title-fallback {
    display: none;
}

.hero-home .hh-title.lottie-failed .hh-title-lottie {
    display: none;
}

.hero-home .hh-title.lottie-failed .hh-title-fallback {
    display: block;
}

/* ---------- Scroll to explore (Lottie + fallback), só desktop ---------- */
.hero-home .hh-scroll {
    position: absolute;
    left: 44px;
    top: auto;
    bottom: 40px; /* canto inf-esquerdo (como o anexo), abaixo do título */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 46px;
    color: var(--title-primary-strong);
    text-decoration: none;
    /* Entrada: só FADE (spec), linear, início 0ms, 1333ms */
    animation: hhScrollIn 1333ms linear both;
}

@keyframes hhScrollIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hero-home .hh-scroll-lottie {
    display: block;
    width: 46px;
    height: 232px;
    color: var(--title-primary-strong);
}

    .hero-home .hh-scroll-lottie svg {
        display: block;
        width: 100% !important;
        height: 100% !important;
    }

.hero-home .hh-scroll-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.hero-home .hh-scroll-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--fs-24);
    line-height: 32px;
    font-weight: var(--fw-light);
    white-space: nowrap;
}

.hero-home .hh-scroll-icon {
    width: 46px;
    height: 46px;
    animation: hhScrollBob 2.4s var(--ease) infinite;
}

    .hero-home .hh-scroll-icon svg {
        width: 100%;
        height: 100%;
    }

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

    50% {
        transform: translateY(6px);
    }
}

.hero-home .hh-scroll:not(.lottie-ready) .hh-scroll-lottie {
    display: none;
}

.hero-home .hh-scroll.lottie-ready .hh-scroll-fallback {
    display: none;
}

.hero-home .js .hh-scroll-fallback {
    display: none;
}

.hero-home .hh-scroll.lottie-failed .hh-scroll-lottie {
    display: none;
}

.hero-home .hh-scroll.lottie-failed .hh-scroll-fallback {
    display: flex;
}

.hero-home .hh-card {
    position: absolute;
    right: var(--gutter);
    bottom: var(--gutter);
    width: 320px;
    height: 320px;
    z-index: 2;
    text-decoration: none;
    animation: hhCardIn 1333ms cubic-bezier(0.167, 0.167, 0, 1) 433ms both;
}

@keyframes hhCardIn {
    from {
        transform: translateX(calc(100% + var(--gutter) + 40px));
    }

    to {
        transform: translateX(0);
    }
}

.hero-home .hh-card-shadow {
    position: absolute; /* em % do card → escala junto quando o card diminui */
    left: -5.94%; /* -19/320 */
    top: -6.25%; /* -20/320 */
    width: 189.84%; /* 607.5/320 */
    height: 175.78%; /* 562.5/320 */
    max-width: none;
    pointer-events: none;
}

.hero-home .hh-card-box {
    position: relative;
    width: 320px;
    height: 320px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    background: var(--bg-primary-strong);
    color: var(--title-inverse);
    transition: background var(--t-base) var(--ease);
}

.hero-home .hh-card:hover .hh-card-box,
.hero-home .hh-card:focus-visible .hh-card-box {
    background: var(--secondary-strong);
}

.hero-home .hh-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.hero-home .hh-card-title {
    font-weight: var(--fw-bold);
    font-family: var(--font-tpSans-bold);
    font-size: var(--fs-24);
    line-height: 32px;
}

.hero-home .hh-card-desc {
    font-weight: var(--fw-extralight);
    font-family: var(--font-tpSans-exLight);
    font-size: var(--fs-24);
    line-height: 32px;
}

.hero-home .hh-card-arrow {
    width: 64px;
    height: 64px;
    color: var(--icon-inverse);
    transition: transform var(--t-base) var(--ease);
}

    .hero-home .hh-card-arrow svg {
        width: 100%;
        height: 100%;
    }

        .hero-home .hh-card-arrow svg path {
            stroke-width: 1;
        }

.hero-home .hh-card:hover .hh-card-arrow,
.hero-home .hh-card:focus-visible .hh-card-arrow {
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .hero-home .hh-title,
    .hero-home .hh-scroll, .hh-card {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-home .hh-logo {
        animation: none;
    }

    .hero-home .hh-logo-video {
        animation: none;
        opacity: 1;
    }

    .hero-home .hh-scroll-icon {
        animation: none;
    }
}

@media (max-width: 1440px) {
    .hero-home .hh-logo {
        top: 50%;
        height: min(632px, 56vh);
        width: min(594px, 50vh);
    }

    .hero-home .hh-title {
        left: auto;
        right: 50%;
        width: min(60vw, 470px);
        top: calc(96px + var(--gutter));
    }

    .hero-home .hh-title-lottie {
        transform: translateY(-56%);
    }

    .hero-home .hh-title-fallback {
        font-size: 72px;
        line-height: 72px;
    }
}

@media (max-width: 1024px) {
    .hero-home .hh-scroll {
        display: none;
    }

    .hero-home .hh-logo {
        top: 50%;
        height: min(632px, 48vh);
        width: min(594px, 45vh);
    }

    .hero-home .hh-title {
        left: var(--gutter);
        right: auto;
        width: min(60vw, 470px);
        top: calc(96px + var(--gutter));
    }

    .hero-home .hh-title-fallback {
        font-size: 72px;
        line-height: 72px;
    }

    .hero-home .hh-ellipse {
        top: 2%;
        right: -14%;
        width: min(760px, 82%);
    }

    .hero-home .hh-card,
    .hero-home .hh-card-box {
        width: 210px;
        height: 210px;
    }

    .hero-home .hh-card-box {
        padding: 23px;
    }

    .hero-home .hh-card-title,
    .hero-home .hh-card-desc {
        font-size: 20px;
        line-height: 28px;
    }

    .hero-home .hh-card-arrow {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 767px) {
    .hero-home .hh-card-box {
        padding: 14px;
    }

    .hero-home {
        height: 100dvh;
    }

        .hero-home .hh-logo {
            top: 45%;
            height: min(632px, 40vh);
            width: min(594px, 40vh);
        }

        .hero-home .hh-title {
            left: var(--gutter);
            right: auto;
            width: min(60vw, 470px);
            top: calc(96px + var(--gutter));
        }

        .hero-home .hh-title-fallback {
            font-size: 48px;
            line-height: 48px;
        }

        .hero-home .hh-card,
        .hero-home .hh-card-box {
            width: 176px;
            height: 176px;
        }

        .hero-home .hh-card {
            max-width: calc(100% - 2 * var(--gutter));
            right: var(--gutter);
            bottom: var(--gutter);
        }

        .hero-home .hh-card-title,
        .hero-home .hh-card-desc {
            font-size: 18px;
            line-height: 24px;
        }

        .hero-home .hh-card-arrow {
            width: 26px;
            height: 26px;
        }

        .hero-home .hh-ellipse {
            top: 4%;
            right: -30%;
            width: min(560px, 110%);
        }
}