@media (prefers-reduced-motion: no-preference) {
    /* A troca de cena nunca desloca a fotografia. */
    .dia-section[data-ato] .dia-cartao[data-ato] {
        transform: none;
        transition-property: opacity;
        transition-delay: 0s;
    }

    .dia-section.dia-animada .dia-cartao[data-ato] {
        opacity: 0;
        z-index: 0;
        transition: none;
        pointer-events: none;
    }

    /* A imagem anterior permanece opaca até a nova terminar de aparecer. */
    .dia-section.dia-animada .dia-cartao[data-ato].is-dia-base {
        opacity: 1;
        z-index: 1;
    }

    .dia-section.dia-animada .dia-cartao[data-ato].is-dia-atual {
        opacity: 1;
        z-index: 2;
        pointer-events: auto;
    }

    .dia-section.dia-animada :is(.dia-zap-audio, .zap4-bolha.is-voce) {
        transform-origin: top right;
    }

    .dia-section.dia-animada :is(.dia-zap-resp, .zap4-bolha.is-luna) {
        transform-origin: top left;
    }
}

@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
    .dia-section.dia-animada .dia-cartao :is(.dia-noti, .dia-zap-audio, .dia-zap-resp, .zap4-bolha) {
        opacity: 0;
    }
}

/* O ESTADO DE ESPERA DA PILHA DO CELULAR (09/09/2026, SEGUNDA rodada das
   entradas). Aqui mora SÓ o "antes": o desenho da entrada em si está no
   dia-animacao.js, no bloco grande que abre a parte de celular, com a linha do
   tempo e o porquê de cada duração.
   ---
   O ESCOPO É SAGRADO E NÃO PODE AFROUXAR. Tudo depende de
   .dia-section.dia-mobile-animada, e essa classe só é escrita pelo JS quando o
   regime de fato assumiu: celular, sem movimento reduzido e com
   IntersectionObserver. Sem script, com script quebrado ou com "reduzir
   movimento" ligado, a classe não existe, nenhuma destas regras casa e a seção
   nasce inteira e visível. Esconder o que ninguém garantiu que vai reaparecer
   é o único jeito errado de fazer isto.
   ---
   O QUE MUDOU NESTA RODADA, e por quê. O dono reprovou a entrada da manhã com
   estas palavras: "ela aparece com um fundo diferente, um fundo tipo de celular
   com horários". Ele estava vendo o PRATO VAZIO — o fundo chapado da .dia-foto
   com a marca d'água gigante do horário — porque a versão anterior escondia e
   acendia as camadas SEPARADAMENTE, e a arte era a última a chegar. Este bloco
   era metade da causa: ele apagava .dia-agua e .dia-arte uma a uma.
   Agora quem espera é A PLACA INTEIRA, apagada de uma vez só, com tudo já
   composto por baixo. A marca d'água e a arte não têm mais estado escondido
   próprio, porque não têm mais entrada própria: quando a .dia-foto acende, a
   fotografia já está lá.
   ---
   DUAS COISAS ESPERAM:
   1) A PLACA, apagada. Só opacity — o deslocamento de 34px e o scale 0.96 da
      subida nascem do fill:'both' da animação do JS, não daqui, para que o
      retângulo que o IntersectionObserver mede seja sempre a .dia-foto no lugar
      natural dela. O JS acende e então CANCELA a animação, e é por isso que não
      há regra de estado final aqui: com a classe .is-dia-revelada no ar este
      seletor deixa de casar e sobra o opacity:1 do dia-mobile.css.
      ESTA REGRA SÓ PINTA PORQUE O !important CAIU. Até hoje o dia-mobile.css
      trazia `opacity: 1 !important` na .dia-foto (sobra do desenho antigo, em
      que o fade de presença por cartão mexia nesta caixa), e declaração
      important do autor ganha até de animação da Web Animations API. O
      !important saiu de lá nesta rodada — a nota datada está no próprio
      dia-mobile.css, na regra .dia-cartao .dia-foto. O `opacity: 1` ficou, e
      este seletor o vence por especificidade (5 classes contra 2), não por
      ordem de folha.
   2) OS AVISOS, apagados. Eles continuam com estado próprio porque continuam
      com entrada própria e MUITO mais tarde (960ms depois do gatilho, contra os
      300ms em que a placa termina de acender). A .dia-agua e a .dia-arte saíram
      desta lista nesta rodada; as quatro classes de aviso ficaram.
   ---
   (AQUI MORAVA UMA REGRA DE LAYOUT DA .dia-cena — min-height 2.9em mais um
   flex de centralização — e ela saiu na rodada da manhã de 09/09/2026 por ser
   peso morto de duas maneiras. Primeira: reservava a mesma altura para legendas de uma e duas
   linhas enquanto as cinco cenas se sobrepunham numa célula de grade, e no
   celular não há sobreposição nenhuma desde que a pilha virou o regime único.
   Segunda, e definitiva: o dia-mobile.css dá `display: none` à
   `.dia-section .dia-cartao > .dia-cena`, com a mesma especificidade e mais
   tarde na cascata, então a regra nunca chegou a pintar. Layout também não era
   assunto desta folha.) */
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
    .dia-section.dia-mobile-animada .dia-cartao .dia-foto:not(.is-dia-revelada) {
        opacity: 0;
    }

    .dia-section.dia-mobile-animada .dia-cartao .dia-foto:not(.is-dia-revelada) :is(.dia-noti, .dia-zap-audio, .dia-zap-resp, .zap4-bolha) {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dia-section[data-ato] .dia-cartao[data-ato] {
        transform: none;
        transition: none;
    }
}