/* =====================================================================
   CAMADA DE PROFUNDIDADE — Pousada Toledo
   =====================================================================

   Camada ADITIVA. Não altera o tema pai nem o style.css do filho.
   Para reverter tudo: remover o enqueue de 'pousada-depth' no functions.php.

   Técnica: CSS 3D nativo + scroll-driven animations (animation-timeline).
   Nenhum listener de scroll, nenhuma biblioteca. Anima só transform e
   opacity — as duas propriedades que a GPU compõe sem repaint.

   Regra de segurança que guia o arquivo inteiro: nada aqui esconde
   conteúdo permanentemente. Onde há fade-in, ele é dirigido pela posição
   de rolagem (resolve sozinho) ou vem depois de uma checagem @supports.
   Se o navegador não suportar, o conteúdo simplesmente aparece estático.
   ===================================================================== */

:root {
    /* Sombras tintadas de verde. Preto puro sobre fundo claro cinza-suja
       a cor e achata; a sombra tem que ser da família do fundo. */
    --nai-elev-1: 0 1px 2px rgba(30,61,41,.05),  0 1px 3px rgba(30,61,41,.05);
    --nai-elev-2: 0 2px 4px rgba(30,61,41,.05),  0 4px 10px rgba(30,61,41,.06);
    --nai-elev-3: 0 4px 8px rgba(30,61,41,.06),  0 12px 24px rgba(30,61,41,.08);
    --nai-elev-4: 0 8px 16px rgba(30,61,41,.07), 0 24px 48px rgba(30,61,41,.10);
    --nai-elev-5: 0 16px 32px rgba(30,61,41,.09),0 40px 80px rgba(30,61,41,.13);

    /* Curvas. A primeira é a desaceleração longa que dá a sensação de
       "peso" — sai rápido, assenta devagar. */
    --nai-ease:        cubic-bezier(.16, 1, .3, 1);
    --nai-ease-suave:  cubic-bezier(.4, 0, .2, 1);
    --nai-dur:         .55s;
}

/* ---------------------------------------------------------------------
   overflow-x: clip no lugar de hidden

   O style.css do filho usa `body { overflow-x: hidden }`. Isso transforma
   o body em contêiner de rolagem e QUEBRA position:sticky nos descendentes
   — o sticky-stack dos diferenciais não funcionaria. `clip` corta igual
   sem criar contexto de rolagem.
   --------------------------------------------------------------------- */
body { overflow-x: clip; }

/* =====================================================================
   1. REVEAL AO ROLAR
   Reaproveita o [data-animate] que já existe em todos os template parts.
   ===================================================================== */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        [data-animate] {
            animation: nai-rise linear both;
            animation-timeline: view();
            /* termina quando o elemento acabou de entrar: qualquer coisa
               totalmente visível está em 100%, então nada fica preso
               semitransparente no fim da página */
            animation-range: entry 0% entry 100%;
            /* O main.css do pai deixa `transform: translateY(30px)` como
               declaração normal, esperando o JS trocar por translateY(0).
               Como agora quem move é `translate`, aquele transform residual
               empurraria tudo 30px para baixo até o JS rodar. Zera aqui —
               regras mais específicas (o tilt) continuam ganhando. */
            transform: none;
        }

        /* Usa a propriedade independente `translate`, não `transform`.
           Motivo: uma animação vence declaração normal na cascata, então um
           keyframe com `transform` sequestra o transform do elemento para
           sempre (animação com fill both). Os cards de acomodação também
           têm [data-animate] e precisam do transform livre para a
           inclinação 3D — com `transform` aqui, o tilt saía como matriz
           identidade. `translate` compõe com `transform` em vez de brigar. */
        @keyframes nai-rise {
            from { opacity: 0; translate: 0 28px; }
            to   { opacity: 1; translate: none; }
        }

        /* Cascata: o data-delay já vem do PHP, mas em scroll-driven
           animation não existe delay temporal — o efeito de cascata vem
           de deslocar o range de cada item. */
        .nai-diferenciais__item:nth-child(2),
        .nai-acomodacoes__item:nth-child(2) { animation-range: entry 6% entry 100%; }
        .nai-diferenciais__item:nth-child(3),
        .nai-acomodacoes__item:nth-child(3) { animation-range: entry 12% entry 100%; }
        .nai-diferenciais__item:nth-child(4),
        .nai-acomodacoes__item:nth-child(4) { animation-range: entry 18% entry 100%; }

        /* Exceção: no desktop os diferenciais viram pilha sticky. Animar
           opacidade num elemento preso faz ele desbotar enquanto ainda
           está na tela, e dois cartões translúcidos se sobrepõem com os
           textos colidindo. A pilha entra pronta. */
        @media (min-width: 900px) {
            .nai-diferenciais__item { animation: none; opacity: 1; transform: none; }
        }
    }
}

/* =====================================================================
   2. HERO — paralaxe em camadas

   Três planos com velocidades diferentes: foto (mais lenta), overlay,
   e conteúdo (mais rápido, subindo e sumindo). É o que cria a leitura de
   profundidade sem nenhum objeto 3D.
   ===================================================================== */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
        .nai-hero__bg {
            animation: nai-hero-bg linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
            will-change: transform;
        }
        /* `translate`/`scale` em vez de `transform`: o transform do hero
           fica reservado para a rotação 3D que segue o mouse. */
        @keyframes nai-hero-bg {
            to { translate: 0 14%; scale: 1.06; }
        }

        .nai-hero__content {
            animation: nai-hero-content linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 70%;
            will-change: transform, opacity;
        }
        @keyframes nai-hero-content {
            to { opacity: 0; translate: 0 -60px; }
        }
    }
}

/* Entrada do hero no carregamento: escalonada, de baixo para cima.
   Usa `translate`, não `transform` — o transform fica reservado para a
   profundidade em Z e para a rotação que segue o mouse. */
@media (prefers-reduced-motion: no-preference) {
    .nai-hero__badge,
    .nai-hero__title,
    .nai-hero__subtitle,
    .nai-hero__ctas,
    .nai-hero__features {
        animation: nai-hero-in .9s var(--nai-ease) both;
    }
    .nai-hero__badge    { animation-delay: .10s; }
    .nai-hero__title    { animation-delay: .18s; }
    .nai-hero__subtitle { animation-delay: .28s; }
    .nai-hero__ctas     { animation-delay: .38s; }
    .nai-hero__features { animation-delay: .48s; }

    @keyframes nai-hero-in {
        from { opacity: 0; translate: 0 24px; }
        to   { opacity: 1; translate: none; }
    }
}

/* ---------------------------------------------------------------------
   Paralaxe de mouse no hero: REMOVIDA a pedido.

   Ficam registradas as duas tentativas e por que nenhuma prestou, para
   não serem refeitas:

   1) translateZ + rotateX/rotateY no bloco de conteúdo. Sob perspectiva,
      translateZ positivo renderiza o elemento MAIOR e o desloca para
      longe do ponto de fuga — o CTA cresceu e encostou na borda. A
      rotação ainda enviesava a tipografia.

   2) Translação com fator diferente por elemento (badge, título,
      subtítulo, CTA). Eles são um bloco de texto único com as margens
      esquerdas alinhadas; deslizando quantidades diferentes o alinhamento
      se desfaz e o bloco parece se desmontar.

   O hero mantém a animação de entrada escalonada e a paralaxe de
   ROLAGEM (foto desce mais devagar que o conteúdo). Isso não depende do
   mouse e não estava em questão.
   --------------------------------------------------------------------- */

/* O título ganha uma sombra de texto sutil para descolar da foto —
   legibilidade sobre imagem clara, não decoração. */
.nai-hero__title { text-shadow: 0 2px 24px rgba(15,30,20,.35); }
.nai-hero__subtitle { text-shadow: 0 1px 12px rgba(15,30,20,.30); }

/* =====================================================================
   3. CARDS DE ACOMODAÇÃO — inclinação 3D seguindo o cursor

   As variáveis --nai-rx / --nai-ry são escritas pelo depth.js.
   Sem JS elas caem no 0 do fallback e o card fica reto.
   ===================================================================== */

/* 1100px. Testei 850px e ficou distorcido demais: com perspectiva curta a
   inclinação envisa o texto do card e a leitura vira "renderização
   quebrada" em vez de profundidade. */
.nai-acomodacoes__grid { perspective: 1100px; }

.nai-acomodacoes__item {
    transform-style: preserve-3d;
    transition: transform .4s var(--nai-ease), box-shadow .4s var(--nai-ease);
    box-shadow: var(--nai-elev-2);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    /* Sem translateZ no card inteiro. Com Z positivo sob perspectiva o
       card é renderizado maior e invade os vizinhos — foi o que deixou o
       card do meio "inflado" e estranho. A elevação vem de translateY
       (sobe na tela) e da sombra, não de aproximar em Z. */
    .nai-acomodacoes__item.is-tilting {
        transform:
            rotateX(var(--nai-rx, 0deg))
            rotateY(var(--nai-ry, 0deg))
            translate3d(0, -8px, 0);
        box-shadow: var(--nai-elev-5);
        transition: box-shadow .4s var(--nai-ease);
        z-index: 3;
    }

    /* Separação interna discreta: o suficiente para a foto e o selo
       descolarem do plano do card. Valores altos (70-120px) achatavam o
       texto e distorciam o card. */
    .nai-acomodacoes__item.is-tilting .nai-card__image { transform: translateZ(26px) scale(1.02); }
    .nai-acomodacoes__item.is-tilting .nai-card__badge { transform: translateZ(44px); }

    .nai-acomodacoes__item .nai-card__image,
    .nai-acomodacoes__item .nai-card__badge {
        transition: transform .45s var(--nai-ease);
    }
    /* preserve-3d só onde há camada em Z; no conteúdo de texto ele
       causava serrilhado na tipografia */
    .nai-acomodacoes__item { transform-style: preserve-3d; }

    /* Brilho que acompanha o cursor. --nai-mx/--nai-my vêm do JS. */
    .nai-acomodacoes__item::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity .4s var(--nai-ease);
        background: radial-gradient(
            circle at var(--nai-mx, 50%) var(--nai-my, 50%),
            rgba(255,255,255,.30), transparent 55%
        );
    }
    .nai-acomodacoes__item.is-tilting::after { opacity: 1; }
}

.nai-acomodacoes__item { position: relative; }

/* =====================================================================
   4. DIFERENCIAIS — sticky-stack

   Os 4 cartões param no topo e o seguinte sobe por cima, encolhendo o
   anterior. Só no desktop: em telas pequenas vira empilhamento normal,
   porque prender 4 telas de rolagem no celular é hostil.
   ===================================================================== */

@media (min-width: 900px) {
    .nai-diferenciais__grid {
        display: block;
        max-width: 820px;
        margin-inline: auto;
        /* perspectiva no contêiner: os cartões da pilha ficam deitados em
           ângulos diferentes, como um baralho visto de cima */
        perspective: 1200px;
        perspective-origin: 50% 0%;
    }

    .nai-diferenciais__item {
        position: sticky;
        /* Cada cartão prende alguns pixels ABAIXO do anterior. É isso que
           deixa uma faixa do card de trás aparecendo e produz a leitura de
           pilha física, em vez de um card simplesmente substituindo o outro. */
        top: calc(16vh + var(--nai-i, 0) * 14px);
        min-height: 38vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* centraliza o ícone junto com o texto: o tema pai centraliza o
           título e a descrição, e sem isto o ícone (um bloco de largura
           fixa) ficava encostado na esquerda, brigando com o resto */
        align-items: center;
        text-align: center;
        /* sem margem entre eles: qualquer folga vira fresta pela qual o
           cartão de baixo aparece no meio da rolagem */
        margin: 0 0 2vh;
        padding: 3rem 3.25rem;
        border-radius: 1.5rem;
        /* opaco de verdade. Foi a transparência que causou a colisão de
           texto entre dois cartões na primeira versão. */
        background: #fff;
        box-shadow: var(--nai-elev-4);
    }

    /* Cada cartão da pilha fica um pouco mais fundo e mais deitado que o
       de cima. É o recuo em Z somado à rotação que faz o baralho parecer
       ter volume, em vez de folhas empilhadas num plano só. */
    /* Recuo suave. Valores maiores (-90px / 6deg) faziam os cartões de
       trás encolherem visivelmente e desalinharem do container. */
    .nai-diferenciais__item:nth-child(1) { --nai-i: 0; z-index: 1; transform: translateZ(-40px) rotateX(2.5deg); }
    .nai-diferenciais__item:nth-child(2) { --nai-i: 1; z-index: 2; transform: translateZ(-26px) rotateX(1.6deg); }
    .nai-diferenciais__item:nth-child(3) { --nai-i: 2; z-index: 3; transform: translateZ(-13px) rotateX(.8deg); }
    .nai-diferenciais__item:nth-child(4) { --nai-i: 3; z-index: 4; transform: none; }
    .nai-diferenciais__item:last-child   { margin-bottom: 0; }

    /* Só tipografia. O ícone fica com o estilo do tema pai de propósito:
       na primeira versão eu forcei color:var(--nai-primary) e o SVG, que usa
       currentColor, virou verde sobre o fundo verde do próprio ícone —
       sumiu e virou um quadrado. */
    .nai-diferenciais__title { font-size: 1.75rem; margin-bottom: .75rem; }
    .nai-diferenciais__desc  { font-size: 1.05rem; max-width: 54ch; margin-inline: auto; }

    /* Nada de animação scroll-driven aqui.
       Em elemento position:sticky o view() calcula o range a partir da
       posição presa, então o cartão desbota enquanto ainda está fixo na
       tela. O empilhamento sozinho já entrega a leitura; a profundidade
       vem do deslocamento do topo e das sombras. */
}

/* =====================================================================
   5. PROFUNDIDADE GERAL

   Sombras em camadas onde antes era tudo plano.
   ===================================================================== */

.nai-card {
    box-shadow: var(--nai-elev-2);
    transition: box-shadow .4s var(--nai-ease), transform .4s var(--nai-ease);
}

.nai-depoimentos__item {
    box-shadow: var(--nai-elev-2);
    transition: box-shadow .4s var(--nai-ease), transform .4s var(--nai-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .nai-depoimentos__item:hover {
        box-shadow: var(--nai-elev-4);
        transform: translate3d(0, -4px, 0);
    }
}

/* Botões com resposta física ao clique */
@media (prefers-reduced-motion: no-preference) {
    .nai-btn {
        transition: transform .18s var(--nai-ease-suave),
                    box-shadow .3s var(--nai-ease),
                    background-color .25s var(--nai-ease-suave);
    }
    .nai-btn--primary { box-shadow: var(--nai-elev-2); }
    .nai-btn--primary:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow: var(--nai-elev-3);
    }
    .nai-btn:active { transform: scale(.975); }
}

/* =====================================================================
   6. GALERIA (/nosso-espaco) — profundidade tipo coverflow

   Adaptação consciente: um coverflow literal viraria carrossel horizontal,
   o que exigiria reestruturar o .esp-grid e quebraria tanto a indexação do
   lightbox quanto o gerenciamento das fotos pelo painel. Aqui a leitura de
   coverflow é aplicada ao grid: cada foto entra girada no eixo X e se
   endireita conforme sobe na tela, com perspectiva compartilhada. O efeito
   de profundidade é o mesmo; a estrutura continua intacta.
   ===================================================================== */

.esp-grid { perspective: 1600px; perspective-origin: 50% 40%; }

.esp-item {
    box-shadow: var(--nai-elev-3);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform .5s var(--nai-ease), box-shadow .5s var(--nai-ease);
    transform-style: preserve-3d;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
        .esp-item {
            animation: nai-coverflow linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 40%;
        }
        @keyframes nai-coverflow {
            from {
                opacity: 0;
                transform: translate3d(0, 40px, -180px) rotateX(18deg);
            }
            to {
                opacity: 1;
                transform: none;
            }
        }
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .esp-item:hover {
        transform: translate3d(0, -10px, 60px);
        box-shadow: var(--nai-elev-5);
        z-index: 2;
    }
}

/* =====================================================================
   7. HEADER — vidro ao rolar
   A classe .scrolled já é aplicada pelo app.js do tema pai.
   ===================================================================== */

.nai-header {
    transition: background-color .35s var(--nai-ease),
                box-shadow .35s var(--nai-ease),
                backdrop-filter .35s var(--nai-ease);
}

.nai-header.scrolled {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: var(--nai-elev-2),
                inset 0 -1px 0 rgba(30,61,41,.08);
}

/* Sem suporte a blur, ou com transparência reduzida: fundo sólido.
   Header semitransparente sem blur fica ilegível sobre foto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nai-header.scrolled { background: rgba(255,255,255,.97); }
}
@media (prefers-reduced-transparency: reduce) {
    .nai-header.scrolled {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* =====================================================================
   7. MOVIMENTO REDUZIDO

   O tema não tinha NENHUM tratamento de prefers-reduced-motion. Como
   estamos subindo bastante o movimento, isto aqui deixou de ser detalhe:
   quem tem sensibilidade vestibular passa mal com paralaxe.
   Desliga tudo que se move, preserva todo o layout e todo o conteúdo.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* Correção de acessibilidade no tema pai.
       O main.css do pai faz `[data-animate] { opacity: 0 }` e só devolve a
       opacidade quando o JS acrescenta .visible. Ou seja: quem pede menos
       movimento continuava com o conteúdo escondido esperando JavaScript,
       e se o JS falhasse o conteúdo sumia de vez. Aqui o conteúdo é
       revelado incondicionalmente. */
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }

    .nai-hero__bg,
    .nai-hero__content,
    .nai-diferenciais__item,
    .nai-acomodacoes__item,
    .nai-espaco__item {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Rede de segurança independente de preferência de movimento: se o JS do
   tema pai não rodar (erro, bloqueio, script barrado), o conteúdo aparece
   sozinho depois de 2s em vez de ficar invisível para sempre. */
@media (prefers-reduced-motion: no-preference) {
    @supports not (animation-timeline: view()) {
        [data-animate] {
            animation: nai-failsafe 0s linear 2s forwards;
        }
        [data-animate].visible { animation: none; }
        @keyframes nai-failsafe {
            to { opacity: 1; transform: none; }
        }
    }
}