/* Ana Terra Tattoo | O Ritual mobile v3 | cards fotográficos imersivos */
.att-ritual-mobile-v3 { display: none; }

@media (max-width: 767px) {
    .att-ritual-horizontal {
        --ritual-mobile-bg: #160b08;
        --ritual-mobile-fg: #fff9ef;
        --ritual-mobile-accent: #e0aa47;
        position: relative;
        height: var(--ritual-mobile-height, 5200px);
        min-height: 100svh;
        margin: 0;
        padding: 0;
        overflow: visible;
        background: var(--ritual-mobile-bg);
        color: var(--ritual-mobile-fg);
        isolation: isolate;
    }

    .att-ritual-desktop-shell { display: none !important; }

    .att-ritual-mobile-v3 {
        display: block;
        position: absolute;
        inset: 0;
    }

    .att-ritual-mobile-v3-frame {
        position: absolute;
        z-index: 30;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100svh - 72px);
        min-height: 0;
        overflow: hidden;
        background: var(--ritual-mobile-bg);
        color: var(--ritual-mobile-fg);
        transition: background-color .42s ease, color .42s ease;
        transform: translateZ(0);
        touch-action: pan-y pinch-zoom;
        -webkit-tap-highlight-color: transparent;
    }

    .att-ritual-mobile-v3-frame.is-fixed {
        position: fixed;
        top: var(--ritual-mobile-header-height, 72px);
        left: 0;
        right: 0;
        bottom: auto;
    }

    .att-ritual-mobile-v3-frame.is-after {
        position: absolute;
        top: auto;
        bottom: 0;
    }

    .att-ritual-mobile-v3-backdrop {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(circle at 82% 7%, color-mix(in srgb, var(--ritual-mobile-accent) 9%, transparent), transparent 27%),
            linear-gradient(180deg, rgba(0,0,0,.025), transparent 34%, rgba(0,0,0,.07));
    }

    .att-ritual-mobile-v3-header {
        position: absolute;
        z-index: 7;
        top: clamp(45px, 6svh, 58px);
        left: 24px;
        right: 24px;
        text-align: center;
        pointer-events: none;
    }

    .att-ritual-mobile-v3-kicker {
        display: block;
        margin: 0 0 11px;
        color: var(--ritual-mobile-accent);
        font-family: var(--att-font-body);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .28em;
        text-transform: uppercase;
        transition: color .42s ease;
    }

    .att-ritual-mobile-v3-header h2 {
        width: min(100%, 390px);
        margin: 0 auto;
        padding: 0;
        font-family: var(--att-font-display);
        font-size: clamp(39px, 10.8vw, 50px);
        font-weight: 400;
        line-height: .91;
        letter-spacing: -.035em;
    }

    .att-ritual-mobile-v3-header h2 span { display: block; }

    .att-ritual-mobile-v3-header h2 em {
        color: var(--ritual-mobile-accent);
        font-weight: 400;
        transition: color .42s ease;
    }

    .att-ritual-mobile-v3-header p {
        width: min(100%, 340px);
        margin: 13px auto 0;
        font-size: 11px;
        line-height: 1.42;
        opacity: .72;
    }

    .att-ritual-mobile-v3-stage {
        position: absolute;
        z-index: 3;
        top: clamp(210px, 27svh, 232px);
        bottom: 82px;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        touch-action: pan-y pinch-zoom;
    }

    .att-ritual-mobile-v3-track {
        display: flex;
        align-items: center;
        width: max-content;
        height: 100%;
        gap: 14px;
        padding-inline: 6vw;
        transform: translate3d(0,0,0);
        will-change: transform;
    }

    /* Todos os cards têm exatamente o mesmo tamanho. */
    .att-ritual-mobile-v3-card {
        position: relative;
        flex: 0 0 88vw;
        height: min(100%, 570px);
        min-height: 0;
        overflow: hidden;
        border: 1px solid rgba(255,249,239,.16);
        border-radius: 24px;
        background: #21120e;
        color: #fff9ef;
        box-shadow: 0 22px 60px rgba(0,0,0,.22);
        opacity: .52;
        transform: scale(.958);
        transition: opacity .26s ease, transform .26s ease, border-color .26s ease, box-shadow .26s ease;
        isolation: isolate;
    }

    .att-ritual-mobile-v3-card.is-active {
        opacity: 1;
        transform: scale(1);
        border-color: rgba(255,249,239,.30);
        box-shadow: 0 24px 68px rgba(0,0,0,.28);
    }

    /* A fotografia ocupa todo o card. */
    .att-ritual-mobile-v3-media,
    .att-ritual-mobile-v3-media.is-round,
    .att-ritual-mobile-v3-media.is-square {
        position: absolute;
        z-index: 1;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        border-radius: inherit;
        background: #21120e;
    }

    .att-ritual-mobile-v3-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.002);
    }

    /* Enquadramento individual para preservar o assunto principal de cada fotografia. */
    .att-ritual-mobile-v3-card:nth-child(1) .att-ritual-mobile-v3-media img { object-position: center 31%; }
    .att-ritual-mobile-v3-card:nth-child(2) .att-ritual-mobile-v3-media img { object-position: center 42%; }
    .att-ritual-mobile-v3-card:nth-child(3) .att-ritual-mobile-v3-media img { object-position: center 38%; }
    .att-ritual-mobile-v3-card:nth-child(4) .att-ritual-mobile-v3-media img { object-position: 46% center; }
    .att-ritual-mobile-v3-card:nth-child(5) .att-ritual-mobile-v3-media img { object-position: center 50%; }
    .att-ritual-mobile-v3-card:nth-child(6) .att-ritual-mobile-v3-media img { object-position: 58% 46%; }

    /* Gradientes ajustados por fotografia. */
    .att-ritual-mobile-v3-card::after {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        pointer-events: none;
    }

    .att-ritual-mobile-v3-card:nth-child(1)::after {
        background: linear-gradient(180deg, rgba(12,7,5,.02) 25%, rgba(16,8,6,.15) 48%, rgba(16,8,6,.78) 72%, rgba(16,8,6,.97) 100%);
    }
    .att-ritual-mobile-v3-card:nth-child(2)::after {
        background: linear-gradient(180deg, rgba(12,7,5,.03) 22%, rgba(15,7,5,.17) 47%, rgba(15,7,5,.82) 72%, rgba(15,7,5,.98) 100%);
    }
    .att-ritual-mobile-v3-card:nth-child(3)::after {
        background: linear-gradient(180deg, rgba(22,5,3,.03) 25%, rgba(24,7,4,.13) 50%, rgba(24,7,4,.80) 73%, rgba(24,7,4,.98) 100%);
    }
    .att-ritual-mobile-v3-card:nth-child(4)::after {
        background: linear-gradient(180deg, rgba(12,10,8,.05) 18%, rgba(12,10,8,.22) 45%, rgba(12,10,8,.85) 70%, rgba(12,10,8,.98) 100%);
    }
    .att-ritual-mobile-v3-card:nth-child(5)::after {
        background: linear-gradient(180deg, rgba(20,10,7,.02) 20%, rgba(20,10,7,.15) 48%, rgba(20,10,7,.82) 72%, rgba(20,10,7,.98) 100%);
    }
    .att-ritual-mobile-v3-card:nth-child(6)::after {
        background: linear-gradient(180deg, rgba(14,7,5,.03) 24%, rgba(14,7,5,.20) 48%, rgba(14,7,5,.83) 70%, rgba(14,7,5,.98) 100%);
    }

    /* Texto sempre sobre a parte inferior da imagem. */
    .att-ritual-mobile-v3-copy {
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 0;
        display: block;
        padding: 26px 22px 23px;
        color: #fff9ef;
        text-align: left;
        text-shadow: 0 2px 20px rgba(0,0,0,.22);
    }

    .att-ritual-mobile-v3-copy .num {
        display: block;
        margin: 0 0 5px;
        color: #f2c46b;
        font-family: var(--att-font-display);
        font-size: 36px;
        line-height: .9;
        opacity: 1;
    }

    .att-ritual-mobile-v3-copy .eyebrow {
        display: block;
        margin: 0 0 8px;
        color: rgba(255,249,239,.84);
        font-size: 7.5px;
        font-weight: 800;
        letter-spacing: .19em;
        text-transform: uppercase;
    }

    .att-ritual-mobile-v3-copy h3 {
        max-width: 310px;
        margin: 0;
        color: #fff9ef;
        font-family: var(--att-font-display);
        font-size: clamp(29px, 7.8vw, 36px);
        font-weight: 400;
        line-height: .93;
        letter-spacing: -.03em;
    }

    .att-ritual-mobile-v3-copy h3 em {
        color: #f2c46b;
        font-weight: 400;
    }

    .att-ritual-mobile-v3-copy p {
        max-width: 315px;
        margin: 10px 0 0;
        color: rgba(255,249,239,.86);
        font-size: 11.5px;
        line-height: 1.42;
    }

    /* Pequenas variações de composição mantendo a leitura sempre no rodapé da imagem. */
    .att-ritual-mobile-v3-card:nth-child(2) .att-ritual-mobile-v3-copy { padding-bottom: 27px; }
    .att-ritual-mobile-v3-card:nth-child(3) .att-ritual-mobile-v3-copy { padding-bottom: 24px; }
    .att-ritual-mobile-v3-card:nth-child(4) .att-ritual-mobile-v3-copy { padding-bottom: 28px; }
    .att-ritual-mobile-v3-card:nth-child(5) .att-ritual-mobile-v3-copy { padding-bottom: 24px; }
    .att-ritual-mobile-v3-card:nth-child(6) .att-ritual-mobile-v3-copy { padding-bottom: 27px; }

    /* Barra e som mais abaixo, com respiro real em relação ao card. */
    .att-ritual-mobile-v3-footer {
        position: absolute;
        z-index: 9;
        left: 18px;
        right: 18px;
        bottom: 7px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .att-ritual-mobile-v3-progress {
        width: min(60vw, 255px);
        display: grid;
        grid-template-columns: 25px 1fr 25px;
        gap: 9px;
        align-items: center;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .12em;
    }

    .att-ritual-mobile-v3-progress span,
    .att-ritual-mobile-v3-progress small { opacity: .80; }

    .att-ritual-mobile-v3-progress i {
        position: relative;
        height: 1px;
        overflow: hidden;
        background: color-mix(in srgb, currentColor 28%, transparent);
    }

    .att-ritual-mobile-v3-progress b {
        position: absolute;
        inset: 0;
        background: var(--ritual-mobile-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: background-color .42s ease;
    }

    .att-ritual-mobile-v3-audio {
        appearance: none;
        -webkit-appearance: none;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
        border-radius: 50%;
        display: inline-grid;
        place-items: center;
        background: color-mix(in srgb, var(--ritual-mobile-bg) 86%, transparent) !important;
        color: var(--ritual-mobile-fg) !important;
        box-shadow: none;
        outline: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .42s ease, border-color .2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .att-ritual-mobile-v3-audio:hover,
    .att-ritual-mobile-v3-audio:active,
    .att-ritual-mobile-v3-audio[aria-pressed="true"] {
        background: color-mix(in srgb, var(--ritual-mobile-accent) 12%, var(--ritual-mobile-bg)) !important;
        color: var(--ritual-mobile-fg) !important;
        border-color: color-mix(in srgb, var(--ritual-mobile-accent) 62%, currentColor) !important;
        box-shadow: none !important;
    }

    .att-ritual-mobile-v3-audio:focus-visible {
        outline: 2px solid var(--ritual-mobile-accent) !important;
        outline-offset: 3px;
        background: color-mix(in srgb, var(--ritual-mobile-bg) 86%, transparent) !important;
    }

    .att-ritual-mobile-v3.is-audio-visible .att-ritual-mobile-v3-audio {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .att-ritual-mobile-v3-audio-icon {
        width: 19px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .att-ritual-mobile-v3-audio-icon i {
        width: 2px;
        height: 5px;
        border-radius: 999px;
        background: currentColor;
    }

    .att-ritual-mobile-v3.is-playing .att-ritual-mobile-v3-audio-icon i:nth-child(1) { animation: attRitualMobileV3Sound 1.1s ease-in-out infinite; }
    .att-ritual-mobile-v3.is-playing .att-ritual-mobile-v3-audio-icon i:nth-child(2) { animation: attRitualMobileV3Sound .85s ease-in-out -.2s infinite; }
    .att-ritual-mobile-v3.is-playing .att-ritual-mobile-v3-audio-icon i:nth-child(3) { animation: attRitualMobileV3Sound 1.2s ease-in-out -.45s infinite; }
    .att-ritual-mobile-v3.is-playing .att-ritual-mobile-v3-audio-icon i:nth-child(4) { animation: attRitualMobileV3Sound .95s ease-in-out -.1s infinite; }
    .att-ritual-mobile-v3.is-muted .att-ritual-mobile-v3-audio-icon i { animation: none !important; height: 3px; opacity: .45; }
    .att-ritual-mobile-v3.needs-audio-gesture .att-ritual-mobile-v3-audio { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ritual-mobile-accent) 20%, transparent) !important; }

    @keyframes attRitualMobileV3Sound {
        0%, 100% { transform: scaleY(.7); }
        50% { transform: scaleY(2.4); }
    }
}

@media (max-width: 767px) and (max-height: 720px) {
    .att-ritual-mobile-v3-header { top: 29px; }
    .att-ritual-mobile-v3-header h2 { font-size: clamp(34px, 9.4vw, 42px); }
    .att-ritual-mobile-v3-header p { margin-top: 8px; font-size: 10.2px; }
    .att-ritual-mobile-v3-stage { top: 178px; bottom: 72px; }
    .att-ritual-mobile-v3-copy { padding: 20px 18px 18px; }
    .att-ritual-mobile-v3-copy .num { font-size: 31px; }
    .att-ritual-mobile-v3-copy h3 { font-size: clamp(25px, 7vw, 31px); }
    .att-ritual-mobile-v3-copy p { margin-top: 7px; font-size: 10.4px; }
}

@media (prefers-reduced-motion: reduce) {
    .att-ritual-mobile-v3-card,
    .att-ritual-mobile-v3-frame,
    .att-ritual-mobile-v3-audio { transition: none !important; }
    .att-ritual-mobile-v3-audio-icon i { animation: none !important; }
}