/* =========================================================
   A MONTANHA ESQUECIDA
   ESTRATOS VIVOS V1
   ========================================================= */

.ame-estratos {
    position: relative;
    width: min(760px, calc(100% - 32px));
    margin: clamp(58px, 7vw, 96px) auto clamp(72px, 9vw, 120px);
    isolation: isolate;
    color: #eee9df;
}

.ame-estratos-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.ame-estratos-eyebrow {
    margin: 0 0 7px;
    color: rgba(183, 193, 157, .73);
    font-family: var(--ame-sans, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .23em;
    text-transform: uppercase;
}

.ame-estratos-title {
    margin: 0;
    color: #eee9df;
    font-family: var(--ame-serif, Georgia, serif);
    font-size: clamp(3rem, 5vw, 4.8rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.04em;
}

.ame-estratos-total {
    padding-bottom: 5px;
    color: rgba(224, 220, 209, .43);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- palco imóvel ---------- */

.ame-estratos-stage {
    position: relative;
    height: clamp(430px, 67vw, 560px);
    perspective: 1200px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- camadas geológicas atrás ---------- */

.ame-estrato-depth {
    position: absolute;
    left: 50%;
    width: calc(100% - 34px);
    height: calc(100% - 24px);
    border: 1px solid rgba(202, 205, 181, .075);
    border-radius: 25px;
    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(105, 117, 91, .055),
            transparent 54%
        ),
        linear-gradient(
            145deg,
            rgba(22, 25, 23, .94),
            rgba(5, 7, 7, .98)
        );
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
    pointer-events: none;
    transform-origin: center top;
}

.ame-estrato-depth.depth-1 {
    z-index: 3;
    top: 16px;
    transform: translateX(-50%) scale(.976);
    opacity: .64;
}

.ame-estrato-depth.depth-2 {
    z-index: 2;
    top: 31px;
    transform: translateX(-50%) scale(.947);
    opacity: .37;
}

.ame-estrato-depth.depth-3 {
    z-index: 1;
    top: 44px;
    transform: translateX(-50%) scale(.918);
    opacity: .18;
}

/* ---------- estrato ativo ---------- */

.ame-estrato-card {
    position: absolute;
    z-index: 10;
    inset: 0 17px 27px;
    overflow: hidden;
    border: 1px solid rgba(222, 216, 194, .15);
    border-radius: 25px;
    background: #050706;
    box-shadow:
        0 28px 78px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.012);
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
    transition:
        transform 760ms cubic-bezier(.18,.75,.18,1),
        opacity 620ms ease,
        filter 760ms ease;
}

.ame-estrato-card.ame-sinking-next {
    transform: translate3d(0,-19px,-30px) scale(.972);
    opacity: .18;
    filter: brightness(.68);
}

.ame-estrato-card.ame-sinking-prev {
    transform: translate3d(0,19px,-30px) scale(.972);
    opacity: .18;
    filter: brightness(.68);
}

/* ---------- imagens A/B ---------- */

.ame-estrato-visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #040606;
}

.ame-estrato-image {
    position: absolute;
    inset: -2%;
    opacity: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    filter:
        brightness(.69)
        saturate(.84)
        contrast(1.05);
    transform: scale(1.025);
    transition:
        opacity 900ms ease,
        transform 1600ms cubic-bezier(.18,.75,.18,1);
    will-change: opacity, transform;
}

.ame-estrato-image.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ---------- sombra narrativa ---------- */

.ame-estrato-shade {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(3,4,4,.03) 0%,
            rgba(3,4,4,.07) 36%,
            rgba(3,4,4,.64) 68%,
            rgba(3,4,4,.96) 100%
        );
}

.ame-estrato-shade::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at 50% 46%,
            transparent 25%,
            rgba(0,0,0,.20) 100%
        );
}

/* ---------- conteúdo ---------- */

.ame-estrato-info {
    position: absolute;
    z-index: 4;
    left: clamp(23px, 5vw, 43px);
    right: clamp(23px, 5vw, 43px);
    bottom: clamp(25px, 5vw, 43px);
    pointer-events: none;
}

.ame-estrato-number {
    margin: 0 0 9px;
    color: rgba(205, 196, 160, .77);
    font-family: var(--ame-sans, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.ame-estrato-name {
    margin: 0;
    max-width: 16ch;
    color: #f1ede4;
    font-family: var(--ame-serif, Georgia, serif);
    font-size: clamp(2.8rem, 6vw, 4.9rem);
    font-weight: 500;
    line-height: 1.01;
    letter-spacing: -.038em;
    text-wrap: balance;
    text-shadow: 0 10px 32px rgba(0,0,0,.55);
}

.ame-estrato-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 15px;
    margin-top: 18px;
    color: rgba(224, 220, 209, .66);
    font-size: 1.12rem;
}

.ame-estrato-meta > span + span::before {
    content: "·";
    margin-right: 15px;
    color: rgba(202, 194, 158, .34);
}

/* card inteiro clicável */

.ame-estrato-link {
    position: absolute;
    z-index: 5;
    inset: 0;
    border-radius: inherit;
}

/* ---------- navegação discreta ---------- */

.ame-estratos-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}

.ame-estratos-button {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(218, 213, 194, .13);
    border-radius: 999px;
    color: rgba(234, 230, 219, .73);
    background: rgba(7,9,9,.72);
    font-size: 2.3rem;
    font-family: Georgia, serif;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 160ms ease,
        color 160ms ease,
        border-color 160ms ease;
}

.ame-estratos-button:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: rgba(218,213,194,.29);
}

.ame-estratos-button:disabled {
    opacity: .22;
    cursor: default;
    transform: none;
}

.ame-estratos-position {
    min-width: 90px;
    text-align: center;
    color: rgba(224,220,209,.43);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* dica que some após interação */

.ame-estratos-hint {
    margin: 12px 0 0;
    text-align: center;
    color: rgba(224,220,209,.28);
    font-size: .98rem;
    transition: opacity 500ms ease;
}

.ame-estratos.has-interacted .ame-estratos-hint {
    opacity: 0;
}

/*
 * Só escondemos o feed original depois que
 * Estratos terminou de montar com sucesso.
 */
body.home-template.ame-estratos-ready .post-feed,
body.home-template.ame-estratos-ready .pagination,
body.home-template.ame-estratos-ready .ame-feed-heading,
body.home-template.ame-estratos-ready .ame-trilha {
    display: none !important;
}

@media (max-width: 640px) {
    .ame-estratos {
        width: min(calc(100% - 18px), 560px);
        margin-top: 46px;
    }

    .ame-estratos-head {
        padding-inline: 8px;
    }

    .ame-estratos-stage {
        height: min(128vw, 520px);
    }

    .ame-estrato-card {
        inset-inline: 8px;
    }

    .ame-estrato-depth {
        width: calc(100% - 18px);
    }

    .ame-estrato-name {
        max-width: 13ch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ame-estrato-card,
    .ame-estrato-image {
        transition-duration: 1ms !important;
    }
}

/* =========================================================
   ESTRATOS V1.1 — MEMORIA GEOLOGICA
   ========================================================= */

/* pequena névoa viva entre memória e superfície */
.ame-estratos-stage::before,
.ame-estratos-stage::after {
    content: "";
    position: absolute;
    z-index: 8;
    left: 7%;
    right: 7%;
    height: 72px;
    pointer-events: none;
    opacity: .32;
    filter: blur(16px);
    background:
        radial-gradient(
            ellipse at center,
            rgba(159, 169, 143, .12),
            rgba(91, 101, 91, .045) 50%,
            transparent 76%
        );
    transition:
        transform 1100ms ease,
        opacity 1100ms ease;
}

.ame-estratos-stage::before {
    top: -22px;
}

.ame-estratos-stage::after {
    bottom: -18px;
    opacity: .18;
}

/* as camadas deixam de parecer simples cartões duplicados */
.ame-estrato-depth {
    background:
        repeating-linear-gradient(
            176deg,
            rgba(196, 191, 168, .025) 0,
            rgba(196, 191, 168, .025) 1px,
            transparent 1px,
            transparent 7px
        ),
        radial-gradient(
            ellipse at 50% 16%,
            rgba(112, 126, 95, .075),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(24, 28, 25, .96),
            rgba(5, 7, 7, .99)
        );
}

.ame-estrato-depth::after {
    content: "";
    position: absolute;
    inset: auto 9% 5px;
    height: 1px;
    opacity: .38;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(177, 182, 157, .22),
            transparent
        );
}

/* profundidade mais marcada */
.ame-estrato-depth.depth-1 {
    top: 18px;
    transform: translateX(-50%) scale(.976) rotate(.10deg);
}

.ame-estrato-depth.depth-2 {
    top: 35px;
    transform: translateX(-50%) scale(.946) rotate(-.13deg);
}

.ame-estrato-depth.depth-3 {
    top: 50px;
    transform: translateX(-50%) scale(.916) rotate(.16deg);
}

/* movimento do estrato atual */
.ame-estrato-card {
    transition:
        transform 940ms cubic-bezier(.16,.78,.18,1),
        opacity 760ms ease,
        filter 940ms ease,
        box-shadow 940ms ease;
}

.ame-estrato-card.ame-sinking-next {
    transform:
        translate3d(0,-18px,-48px)
        scale(.958)
        rotateX(1.2deg);
    opacity: .08;
    filter: brightness(.56) saturate(.75);
    box-shadow:
        0 10px 30px rgba(0,0,0,.24);
}

.ame-estrato-card.ame-sinking-prev {
    transform:
        translate3d(0,18px,-48px)
        scale(.958)
        rotateX(-1.2deg);
    opacity: .08;
    filter: brightness(.56) saturate(.75);
    box-shadow:
        0 10px 30px rgba(0,0,0,.24);
}

/*
 * Crossfade:
 * uma memória morre enquanto outra emerge.
 */
.ame-estrato-image {
    transition:
        opacity 1050ms cubic-bezier(.22,.61,.36,1),
        transform 1800ms cubic-bezier(.16,.78,.18,1),
        filter 1050ms ease;
}

.ame-estrato-image:not(.is-visible) {
    filter:
        brightness(.48)
        saturate(.68)
        contrast(1.02);
}

.ame-estrato-image.is-visible {
    filter:
        brightness(.69)
        saturate(.84)
        contrast(1.05);
}

/* número como marca do estrato */
.ame-estrato-number {
    position: relative;
    padding-left: 23px;
}

.ame-estrato-number::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 1px;
    background: rgba(190, 196, 164, .55);
}

/* contador vira elemento clicável */
.ame-estratos-position {
    padding: 7px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition:
        color 180ms ease,
        background 180ms ease;
}

.ame-estratos-position:hover {
    color: rgba(240,236,226,.82);
    background: rgba(255,255,255,.035);
}

/* índice de salto */
.ame-estratos-jump {
    position: absolute;
    z-index: 50;
    left: 50%;
    bottom: 68px;
    width: min(92%, 460px);
    max-height: min(55vh, 420px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(214,209,188,.14);
    border-radius: 18px;
    background: rgba(5,7,7,.96);
    box-shadow: 0 24px 70px rgba(0,0,0,.58);
    backdrop-filter: blur(18px);
    transform:
        translate(-50%, 10px)
        scale(.98);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        visibility 220ms;
}

.ame-estratos-jump.is-open {
    opacity: 1;
    visibility: visible;
    transform:
        translate(-50%, 0)
        scale(1);
}

.ame-estratos-jump-button {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 11px;
    color: rgba(230,226,216,.72);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.ame-estratos-jump-button:hover,
.ame-estratos-jump-button.is-current {
    color: #f1ede4;
    background: rgba(164,174,143,.075);
}

.ame-estratos-jump-number {
    color: rgba(190,197,164,.62);
    font-variant-numeric: tabular-nums;
}

.ame-estratos-jump-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .ame-estratos-stage::before {
        opacity: .24;
    }

    .ame-estratos-jump {
        bottom: 62px;
        width: calc(100% - 24px);
    }
}

/* =========================================================
   ESTRATOS — ENQUADRAMENTO MOBILE
   preserva a imagem completa nas memórias
   ========================================================= */

@media (max-width: 767px) {

    .ame-estrato-image {
        inset: 0;
        background-size: contain;
        background-position: center center;
        transform: scale(1);
    }

    .ame-estrato-image.is-visible {
        transform: scale(1);
    }

    .ame-estrato-visual {
        background:
            radial-gradient(
                ellipse at center,
                rgba(18, 20, 18, .95),
                #040606 72%
            );
    }
}