/* Ana Terra Tattoo | Hero estática mobile + Galeria dinâmica v1.2.11 */

.att-site-header.is-dark-zone {
    color: var(--att-ivory);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.att-site-header.is-dark-zone.is-scrolled {
    color: var(--att-ivory);
    background: rgba(20, 9, 6, .16);
    border-color: rgba(255, 249, 239, .05);
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* HERO */
.att-hero-story {
    position: relative;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    background: #170906;
    color: var(--att-ivory);
    isolation: isolate;
}

.att-hero-media,
.att-hero-media picture,
.att-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.att-hero-media {
    position: absolute;
    inset: 0;
}

.att-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 19% 18%, rgba(10,7,5,.14), transparent 19%),
        radial-gradient(circle at 79% 74%, rgba(10,7,5,.18), transparent 26%),
        linear-gradient(180deg, rgba(11,7,5,.14) 0%, rgba(11,7,5,.06) 30%, rgba(11,7,5,.12) 100%);
}

.att-hero-media img {
    object-fit: cover;
    object-position: center center;
}

.att-hero-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.att-hero-copy-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    color: rgba(232,194,109,.94);
    font-family: var(--att-font-display);
    font-weight: 500;
    line-height: .86;
    letter-spacing: -.04em;
    text-shadow: 0 6px 24px rgba(13,7,5,.16);
}

.att-hero-line { display: block; }
.att-hero-line-nowrap { white-space: nowrap; }

.att-hero-copy-top {
    top: clamp(112px, 15vh, 154px);
    left: clamp(42px, 6.4vw, 120px);
    align-items: flex-start;
    text-align: left;
    font-size: clamp(76px, 7.3vw, 126px);
}

.att-hero-copy-bottom {
    right: clamp(44px, 6.6vw, 128px);
    bottom: clamp(72px, 12vh, 138px);
    align-items: flex-end;
    text-align: right;
    font-size: clamp(64px, 5.8vw, 104px);
}

.att-hero-mobile-foreground { display: none; }

@media (min-width: 2200px) {
    .att-hero-story { min-height: 760px; }
    .att-hero-copy-top {
        left: clamp(72px, 8vw, 180px);
        top: clamp(118px, 16vh, 180px);
        font-size: clamp(98px, 6.5vw, 148px);
    }
    .att-hero-copy-bottom {
        right: clamp(76px, 8vw, 180px);
        bottom: clamp(92px, 14vh, 156px);
        font-size: clamp(80px, 5vw, 122px);
    }
}

@media (min-width: 1800px) and (max-width: 2199px) {
    .att-hero-story { min-height: 700px; }
}

@media (min-width: 1440px) and (max-width: 1799px) {
    .att-hero-story { min-height: 660px; }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .att-hero-story { min-height: 620px; }
    .att-hero-copy-top {
        top: clamp(112px, 16vh, 148px);
        left: clamp(34px, 5vw, 88px);
        font-size: clamp(66px, 6.4vw, 96px);
    }
    .att-hero-copy-bottom {
        right: clamp(34px, 5vw, 88px);
        bottom: clamp(70px, 10vh, 118px);
        font-size: clamp(56px, 5vw, 82px);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .att-hero-copy-top {
        top: 126px;
        left: 28px;
        font-size: clamp(58px, 6vw, 84px);
    }
    .att-hero-copy-bottom {
        right: 28px;
        bottom: 92px;
        font-size: clamp(46px, 4.7vw, 68px);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .att-hero-story { min-height: 720px; }
    .att-hero-copy-top {
        top: 128px;
        left: 50%;
        transform: translateX(-50%);
        align-items: center;
        text-align: center;
        font-size: clamp(56px, 7.4vw, 82px);
    }
    .att-hero-copy-bottom {
        left: 50%;
        right: auto;
        bottom: 100px;
        transform: translateX(-50%);
        align-items: center;
        text-align: center;
        font-size: clamp(46px, 6.2vw, 66px);
    }
}

/* Mobile: usa a arte estática aprovada, sem motion de texto. */
@media (max-width: 767px) {
    .att-hero-story {
        height: 100dvh;
        min-height: 680px;
    }

    .att-hero-media img {
        object-fit: cover;
        object-position: center top;
    }

    /* Mascara apenas as áreas do logo/menu impressos na arte, sem apagar o texto central do banner. */
    .att-hero-media::after {
        background:
            linear-gradient(rgba(12,7,5,.90), rgba(12,7,5,.90)) left 18px top 16px / 232px 78px no-repeat,
            linear-gradient(rgba(12,7,5,.90), rgba(12,7,5,.90)) right 18px top 16px / 82px 78px no-repeat,
            linear-gradient(180deg, rgba(10,6,4,.03), rgba(10,6,4,.08));
    }

    .att-hero-copy,
    .att-hero-mobile-foreground {
        display: none !important;
    }

    .att-site-header.is-dark-zone,
    .att-site-header.is-dark-zone.is-scrolled {
        background: linear-gradient(180deg, rgba(15,9,6,.34), rgba(15,9,6,0));
        border-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}