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

.hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100svh;

    overflow: hidden;

    isolation: isolate;

    background: var(--color-surface-dark);

    color: var(--color-text-inverse);
}


/* ==========================================================
   BACKGROUND
   ========================================================== */

.hero__media {
    position: absolute;

    inset: -8% 0;

    z-index: -3;

    overflow: hidden;
}


.hero__media picture {
    width: 100%;
    height: 100%;
}


.hero__image {
    width: 100%;
    height: 116%;

    object-fit: cover;

    object-position: center center;

    will-change: transform;

    transform:
        translate3d(0, 0, 0)
        scale(1.04);
}


/* ==========================================================
   OVERLAY
   ========================================================== */

.hero__overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(8, 15, 21, 0.95) 0%,
            rgba(8, 15, 21, 0.88) 36%,
            rgba(8, 15, 21, 0.58) 62%,
            rgba(8, 15, 21, 0.30) 100%
        );
}


.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(8, 15, 21, 0.18) 0%,
            rgba(8, 15, 21, 0) 34%,
            rgba(8, 15, 21, 0.38) 100%
        );
}


/* ==========================================================
   CONTAINER
   ========================================================== */

.hero__container {
    position: relative;

    z-index: var(--z-content);

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    align-items: center;

    gap:
        clamp(
            var(--space-6),
            6vw,
            var(--space-12)
        );

    padding-top: 112px;
    padding-bottom: 96px;
}


/* ==========================================================
   CONTEÚDO
   ========================================================== */

.hero__content {
    max-width: 760px;
}


.hero__eyebrow {
    margin-bottom: var(--space-3);

    color: var(--color-accent-soft);
}


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

.hero__title {
    max-width: 760px;

    color: var(--color-text-inverse);

    font-size:
        clamp(
            3.9rem,
            5.6vw,
            6.8rem
        );

    font-weight: var(--font-weight-medium);

    letter-spacing: -0.045em;

    line-height: 0.93;
}


.hero__title span {
    display: block;

    color: var(--color-accent-soft);
}


/* ==========================================================
   DESCRIÇÃO
   ========================================================== */

.hero__description {
    max-width: 660px;

    margin-top: var(--space-4);

    color:
        rgba(248, 247, 243, 0.78);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.16rem
        );

    line-height: 1.75;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.hero__actions {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-2);

    margin-top: var(--space-5);
}


/* ==========================================================
   BOTÃO PRINCIPAL DO HERO
   ========================================================== */

.button--hero-primary {
    min-height: 56px;

    padding-inline: 1.75rem;

    background:
        var(--color-accent);

    border-color:
        var(--color-accent);

    color:
        var(--color-surface-dark);
}


.button--hero-primary:hover {
    background:
        var(--color-accent-soft);

    border-color:
        var(--color-accent-soft);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 34px
        rgba(181, 154, 104, 0.20);
}


.button--hero-primary:hover .button__icon {
    transform:
        translateX(3px);
}


/* ==========================================================
   BOTÃO SECUNDÁRIO DO HERO
   ========================================================== */

.button--hero-secondary {
    min-height: 56px;

    padding-inline: 1.65rem;

    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(255, 255, 255, 0.30);

    color:
        var(--color-text-inverse);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.button--hero-secondary:hover {
    background:
        rgba(255, 255, 255, 0.12);

    border-color:
        rgba(255, 255, 255, 0.55);

    transform:
        translateY(-2px);
}


.button--hero-secondary:hover .button__icon {
    transform:
        translate(2px, -2px);
}


/* ==========================================================
   META / MICROCOPY
   ========================================================== */

.hero__meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        var(--space-2)
        var(--space-3);

    margin-top: var(--space-4);
}


.hero__meta li {
    display: inline-flex;
    align-items: center;

    gap: 0.5rem;

    color:
        rgba(248, 247, 243, 0.68);

    font-size: var(--font-size-sm);

    line-height: 1.4;
}


.hero__meta svg {
    width: 15px;
    height: 15px;

    flex: 0 0 auto;

    color: var(--color-accent-soft);

    fill: none;
}


/* ==========================================================
   SHOWCASE
   ========================================================== */

.hero__showcase {
    position: relative;

    display: flex;
    justify-content: flex-end;

    width: 100%;
}


/* ==========================================================
   PREVIEW
   ========================================================== */

.hero-preview {
    position: relative;

    width: min(
        100%,
        590px
    );

    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(1.5deg);
}


/* ==========================================================
   BROWSER
   ========================================================== */

.hero-preview__browser {
    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        clamp(
            1rem,
            2vw,
            1.5rem
        );

    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 45px 110px
        rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* ==========================================================
   BROWSER BAR
   ========================================================== */

.hero-preview__bar {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    min-height: 48px;

    padding-inline:
        var(--space-2);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        rgba(9, 16, 22, 0.84);
}


.hero-preview__dots {
    display: flex;

    gap: 6px;
}


.hero-preview__dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.34);
}


.hero-preview__address {
    justify-self: center;

    max-width: 240px;

    overflow: hidden;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.68rem;

    letter-spacing: 0.02em;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================
   SCREEN
   ========================================================== */

.hero-preview__screen {
    position: relative;

    aspect-ratio: 1200 / 760;

    overflow: hidden;

    background: var(--color-bg);
}


.hero-preview__screen img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: top center;

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


.hero-preview:hover
.hero-preview__screen img {
    transform:
        scale(1.025);
}


/* ==========================================================
   BADGE
   ========================================================== */

.hero-preview__badge {
    position: absolute;

    right: -22px;
    bottom: -22px;

    display: inline-flex;
    align-items: center;

    gap: 0.6rem;

    min-height: 44px;

    padding:
        0.75rem
        1rem;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius:
        var(--radius-pill);

    background:
        rgba(16, 24, 32, 0.82);

    color:
        rgba(248, 247, 243, 0.82);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-medium);

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.24);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


.hero-preview__badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-accent);

    box-shadow:
        0 0 0 5px
        rgba(181, 154, 104, 0.12);
}


/* ==========================================================
   SCROLL INDICATOR
   ========================================================== */

.hero__scroll {
    position: absolute;

    left:
        max(
            var(--container-padding),
            calc(
                (100vw - var(--container-max)) / 2
            )
        );

    bottom: 28px;

    z-index: var(--z-content);

    display: inline-flex;
    align-items: center;

    gap: 0.7rem;

    color:
        rgba(248, 247, 243, 0.55);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        color var(--transition-base);
}


.hero__scroll svg {
    width: 17px;
    height: 17px;

    fill: none;

    transition:
        transform var(--transition-base);
}


.hero__scroll:hover {
    color:
        var(--color-accent-soft);
}


.hero__scroll:hover svg {
    transform:
        translateY(4px);
}


/* ==========================================================
   REVEAL — HERO
   ========================================================== */

.hero [data-reveal] {
    transition-duration:
        850ms;
}


.hero__content
[data-reveal]:nth-child(2) {
    transition-delay:
        90ms;
}


.hero__content
[data-reveal]:nth-child(3) {
    transition-delay:
        160ms;
}


.hero__content
[data-reveal]:nth-child(4) {
    transition-delay:
        230ms;
}


.hero__content
[data-reveal]:nth-child(5) {
    transition-delay:
        300ms;
}


.hero__showcase[data-reveal] {
    transition-delay:
        200ms;
}


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

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

    .hero__image {
        transform: none !important;
    }


    .hero-preview {
        transform: none;
    }


    .hero-preview__screen img {
        transition: none;
    }

}