/* ————————————————————————————————————————————————————————————
   A casa inteira. Uma folha só, porque a direção de arte é uma decisão
   contínua: separar em sete arquivos faria a mudança de temperatura da
   página virar sete lugares para esquecer.

   A regra que governa tudo: a página COMEÇA fria e escura e TERMINA quente e
   clara. Isso não é metáfora escrita no texto, é a variável --calor, que vai
   de 0 a 1 com a rolagem e mexe no fundo, no véu e na cor do texto.
   ———————————————————————————————————————————————————————————— */

@font-face { font-family: 'Serifada'; src: url('../fontes/serif.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Serifada'; src: url('../fontes/serif-italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Limpa'; src: url('../fontes/sans-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Limpa'; src: url('../fontes/sans-500.ttf') format('truetype'); font-weight: 500; font-display: swap; }

:root {
  --noite: #070609;
  --tinta: #0B0910;
  --vinho: #3A0F1C;
  --bordo: #591524;
  --brasa: #8E2130;
  --roxo: #201230;
  --violeta: #3B2450;
  --ouro: #C8964A;
  --luz: #F3D9A6;
  --osso: #ECE3D6;

  --calor: 0;              /* 0 no começo da história, 1 no fim */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --margem: clamp(20px, 5vw, 92px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }

body {
  background: var(--noite);
  color: var(--osso);
  font-family: 'Limpa', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* O fundo que esquenta. Duas camadas fixas: a brasa que sobe do rodapé e a
   luz dourada que nasce à direita. Ambas presas ao --calor, então a mudança
   acontece pela rolagem e não por uma classe que troca de uma vez. */
.ambiente {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(243, 217, 166, calc(var(--calor) * 0.16)), transparent 62%),
    radial-gradient(150% 100% at 50% 118%, rgba(142, 33, 48, calc(0.10 + var(--calor) * 0.34)), transparent 68%),
    linear-gradient(180deg, var(--noite), var(--tinta) 45%, #0F0A12 100%);
  transition: background 400ms linear;
}

/* Grão. É o que impede a página de parecer um render — superfície digital
   perfeita é a assinatura da imagem gerada, e 4% de ruído desmancha isso. */
.grao {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tremeGrao 900ms steps(2) infinite;
}
@keyframes tremeGrao {
  0% { transform: translate(0, 0); } 50% { transform: translate(-2%, 1%); } 100% { transform: translate(1%, -2%); }
}

/* Vinheta de lente, sempre presente, afrouxando conforme a página ilumina. */
.vinheta {
  position: fixed; inset: 0; z-index: 89; pointer-events: none;
  box-shadow: inset 0 0 clamp(120px, 22vw, 300px) rgba(0, 0, 0, calc(0.82 - var(--calor) * 0.36));
}

/* ————————————————————— tipografia ————————————————————— */

.serif {
  font-family: 'Serifada', Georgia, serif; font-weight: 400;
  line-height: 0.98; letter-spacing: -0.015em;
}
.miudo {
  font-size: clamp(10px, 0.78vw, 12px); letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(236, 227, 214, 0.42); font-weight: 500;
}
.corrido { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.72; color: rgba(236, 227, 214, 0.72); }

/* ————————————————————— o portão ————————————————————— */

.portao {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: repeat(12, 1fr); align-content: center;
  padding: 0 var(--margem);
  background: #050408;
  overflow: hidden;
}
.portao.saindo { pointer-events: none; }

/* o céu do portão: poucas estrelas, desenhadas uma a uma pelo JS, e duas
   lanternas distantes. Nada de campo de partículas. */
.ceu { position: absolute; inset: 0; z-index: 0; }
.estrela { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--luz); }

.mata {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(3, 2, 6, 0.55) 42%, #030206 88%);
}

/* Os galhos precisam ser MAIS claros que o céu para existirem. Na primeira
   tentativa eram #05040A sobre um fundo #050408 — desenho perfeito, invisível
   na tela. Aqui eles são a sombra que o céu projeta, não um objeto preto. */
.galho {
  position: absolute; top: -3vh; z-index: 2; width: clamp(200px, 26vw, 420px);
  opacity: 0.5; filter: blur(3px);
}
.galho g { fill: #14101F; }
.galho.esquerdo { left: -3vw; }
.galho.direito { right: -3vw; }

.torre {
  position: absolute; right: 11vw; bottom: 16vh; z-index: 1;
  width: clamp(26px, 2.4vw, 38px); height: clamp(150px, 20vh, 250px);
  background: linear-gradient(180deg, rgba(12, 10, 19, 0.55), rgba(3, 2, 6, 0) 78%);
  clip-path: polygon(36% 0, 64% 0, 80% 100%, 20% 100%);
}
.janela { /* a única promessa de que há alguém lá em cima */
  position: absolute; left: 50%; top: 13%; translate: -50% 0;
  width: 5px; height: 8px; background: var(--luz); border-radius: 1px;
  box-shadow: 0 0 16px 4px rgba(243, 217, 166, 0.4), 0 0 54px 20px rgba(200, 150, 74, 0.12);
}

.portao .dizeres { grid-column: 2 / span 7; position: relative; z-index: 3; }
.portao h1 {
  font-size: clamp(38px, 5.6vw, 84px); max-width: 15ch;
  color: var(--osso); text-wrap: balance;
}
.portao h1 em { font-style: italic; color: var(--luz); }
.portao .abaixo {
  margin-top: clamp(18px, 2vw, 28px);
  font-family: 'Serifada', Georgia, serif; font-style: italic;
  font-size: clamp(20px, 2vw, 30px); color: rgba(236, 227, 214, 0.6);
}

.entrada { grid-column: 2 / span 5; position: relative; z-index: 3; margin-top: clamp(44px, 6vh, 84px); }
.campo { position: relative; margin-bottom: 26px; }
.campo input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(236, 227, 214, 0.2);
  padding: 12px 34px 12px 0; color: var(--osso); font-family: inherit;
  font-size: clamp(15px, 1.2vw, 18px); letter-spacing: 0.02em; outline: none;
  transition: border-color 500ms var(--curva);
}
.campo input::placeholder { color: rgba(236, 227, 214, 0.3); }
.campo input:focus { border-bottom-color: rgba(243, 217, 166, 0.75); }
.campo .risco {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--luz); transition: width 700ms var(--curva);
}
.campo input:focus ~ .risco { width: 100%; }

.olho {
  position: absolute; right: 0; top: 50%; translate: 0 -50%;
  background: none; border: 0; cursor: pointer; padding: 8px;
  color: rgba(236, 227, 214, 0.38); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  font-family: inherit; transition: color 400ms;
}
.olho:hover { color: var(--luz); }

.passagem {
  margin-top: 14px; background: none; border: 0; padding: 10px 0; cursor: pointer;
  color: var(--osso); font-family: 'Serifada', Georgia, serif; font-size: clamp(19px, 1.7vw, 26px);
  display: inline-flex; align-items: center; gap: 14px; position: relative;
  transition: color 500ms var(--curva), gap 500ms var(--curva);
}
.passagem::after {
  content: ''; position: absolute; left: 0; bottom: 4px; height: 1px; width: 0;
  background: var(--luz); transition: width 800ms var(--curva);
}
.passagem:hover { color: var(--luz); gap: 22px; }
.passagem:hover::after { width: 100%; }
.passagem .seta { transition: translate 600ms var(--curva); }
.passagem:hover .seta { translate: 6px 0; }

.recado {
  margin-top: 22px; min-height: 20px;
  font-family: 'Serifada', Georgia, serif; font-style: italic;
  font-size: clamp(15px, 1.2vw, 19px); color: rgba(200, 150, 74, 0.9);
  opacity: 0; translate: 0 6px; transition: opacity 700ms var(--curva), translate 700ms var(--curva);
}
.recado.aparece { opacity: 1; translate: 0 0; }

/* a passagem: uma luz quente atravessa a tela e leva o portão junto */
.clarao {
  position: fixed; inset: 0; z-index: 101; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 55%, rgba(243, 217, 166, 0.95), rgba(142, 33, 48, 0.35) 45%, transparent 72%);
}

/* ————————————————————— as cenas ————————————————————— */

.historia { position: relative; z-index: 2; }
.historia[hidden] { display: none; }

.cena {
  position: relative; min-height: 100vh;
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: center;
  gap: 0 clamp(16px, 2vw, 40px); padding: clamp(90px, 14vh, 180px) var(--margem);
}

/* a moldura da foto NÃO é uma moldura: é a foto e mais nada. O que separa a
   imagem do fundo é a própria luz dela. */
.retrato { position: relative; overflow: hidden; }
.retrato img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.retrato::after { /* casa a foto com a noite: sem isto o retângulo brilha e vira card */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 6, 9, calc(0.34 - var(--calor) * 0.24)), rgba(7, 6, 9, calc(0.5 - var(--calor) * 0.3)));
  mix-blend-mode: multiply;
}
.retrato.clicavel { cursor: pointer; }
.retrato.clicavel img { transition: transform 1400ms var(--curva), filter 900ms var(--curva); }
.retrato.clicavel:hover img { filter: brightness(1.1); }

/* ——— abertura ———
   grid-row: 1 nos dois. Sem isso, o item que pede uma coluna ANTERIOR à do
   vizinho é jogado para a linha de baixo pelo posicionamento automático — e a
   frase de abertura ia parar 800px abaixo da foto, fora da tela. */
.abertura .retrato { grid-column: 6 / span 6; grid-row: 1; height: min(86vh, 780px); }
.abertura .fala { grid-column: 2 / span 4; grid-row: 1; position: relative; z-index: 3; }
.abertura h2 { font-size: clamp(30px, 3.6vw, 58px); max-width: 13ch; }
.abertura .fio {
  margin-top: clamp(30px, 5vh, 60px); width: 1px; height: clamp(50px, 9vh, 90px);
  background: linear-gradient(180deg, rgba(243, 217, 166, 0.7), transparent);
}

/* ——— história: cada acontecimento é uma cena, alternando o lado ——— */
.passo .retrato { height: min(74vh, 680px); grid-row: 1; }
.passo .fala { grid-row: 1; }
.passo:nth-child(odd) .retrato { grid-column: 2 / span 5; }
.passo:nth-child(odd) .fala { grid-column: 8 / span 4; }
.passo:nth-child(even) .retrato { grid-column: 7 / span 5; }
.passo:nth-child(even) .fala { grid-column: 2 / span 4; }
.passo h3 { font-size: clamp(26px, 3vw, 46px); margin-bottom: 16px; }
.passo .data { margin-bottom: 22px; }
.passo .corrido { max-width: 34ch; }

/* ——— galeria editorial: seis posições fixas, escolhidas à mão ——— */
.galeria { display: block; padding-top: 0; padding-bottom: clamp(60px, 10vh, 140px); }
.mosaico { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(30px, 6vh, 90px) clamp(16px, 2vw, 40px); }
.mosaico .retrato:nth-child(6n+1) { grid-column: 2 / span 4; height: 62vh; }
.mosaico .retrato:nth-child(6n+2) { grid-column: 7 / span 3; height: 40vh; align-self: end; margin-bottom: -14vh; }
.mosaico .retrato:nth-child(6n+3) { grid-column: 9 / span 4; height: 70vh; margin-top: 12vh; }
.mosaico .retrato:nth-child(6n+4) { grid-column: 3 / span 3; height: 46vh; margin-top: -6vh; }
.mosaico .retrato:nth-child(6n+5) { grid-column: 6 / span 5; height: 78vh; }
.mosaico .retrato:nth-child(6n+6) { grid-column: 2 / span 3; height: 38vh; margin-top: -18vh; }

/* ——— contador ——— */
.tempo { text-align: left; }
.tempo .desde { grid-column: 2 / span 4; }
.tempo .conta { grid-column: 2 / span 10; }
.tempo .dias {
  font-family: 'Serifada', Georgia, serif; font-size: clamp(80px, 19vw, 300px);
  line-height: 0.82; color: var(--osso); letter-spacing: -0.04em;
}
.tempo .dias span { color: var(--ouro); }
.tempo .quebrado { margin-top: clamp(18px, 3vh, 34px); font-size: clamp(16px, 1.5vw, 22px); color: rgba(236, 227, 214, 0.6); font-family: 'Serifada', Georgia, serif; font-style: italic; }

/* ——— motivos: um por tela, sem grade ——— */
.motivo { align-content: center; }
.motivo .titulo { grid-column: 2 / span 6; font-size: clamp(34px, 5vw, 76px); }
.motivo .porque { grid-column: 4 / span 5; margin-top: clamp(20px, 3vh, 38px); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.7; color: rgba(236, 227, 214, 0.66); }
.motivo .retrato { grid-column: 9 / span 3; height: 52vh; grid-row: 1 / span 2; }
.motivo.sem-foto .titulo { grid-column: 2 / span 8; }

/* ——— detalhes dela: frases soltas na composição ——— */
.detalhes { display: block; }
.nuvem { position: relative; min-height: 130vh; }
.nuvem .frase {
  position: absolute; font-family: 'Serifada', Georgia, serif; font-style: italic;
  font-size: clamp(19px, 2.1vw, 34px); color: rgba(236, 227, 214, 0.82);
  max-width: 22ch; will-change: transform, opacity;
}

/* ——— momentos: cena cheia com a foto ocupando a tela ——— */
.momento { padding: 0; min-height: 118vh; display: block; }
.momento .quadro { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.momento .quadro img { width: 100%; height: 100%; object-fit: cover; }
.momento .escuro { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,6,9,0.86) 6%, rgba(7,6,9,0.25) 58%, rgba(7,6,9,0.62)); }
.momento .dizer { position: absolute; left: var(--margem); bottom: clamp(70px, 14vh, 150px); max-width: min(38ch, 46vw); }
.momento h3 { font-size: clamp(30px, 4.4vw, 68px); margin-bottom: 18px; }
.momento .corrido { max-width: 36ch; }

/* ——— lanternas ——— */
.lanternas { padding: 0; height: 250vh; display: block; }
.lanternas .fixa { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.lanternas .noite { position: absolute; inset: 0; background: #030205; }
.lanternas .enxame { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lanternas .retrato {
  position: absolute; width: min(34vw, 420px); height: min(72vh, 640px);
  left: 50%; top: 50%; translate: -50% -50%;
}
.lanterna {
  position: absolute; width: var(--t); height: calc(var(--t) * 1.35);
  will-change: transform, opacity;
}
.lanterna .papel {
  position: absolute; inset: 0; border-radius: 46% 46% 40% 40% / 34% 34% 60% 60%;
  background: radial-gradient(60% 55% at 50% 62%, var(--luz), var(--ouro) 58%, #8a5a1e 100%);
  box-shadow: 0 0 calc(var(--t) * 2.2) calc(var(--t) * 0.5) rgba(226, 170, 88, 0.24);
}
.lanternas .dizeres { position: relative; z-index: 4; text-align: center; padding: 0 var(--margem); }
.lanternas h2 { font-size: clamp(30px, 4vw, 62px); max-width: 18ch; margin: 0 auto; }
.lanternas .segunda { margin-top: clamp(20px, 3vh, 36px); font-family: 'Serifada', Georgia, serif; font-style: italic; font-size: clamp(19px, 2vw, 30px); color: rgba(243, 217, 166, 0.86); }

/* ——— declaração: a carta, e mais nada na tela ——— */
.carta { display: block; padding-top: clamp(120px, 24vh, 260px); padding-bottom: clamp(120px, 24vh, 260px); }
.carta .folha { max-width: 30ch; margin: 0 auto; }
.carta p {
  font-family: 'Serifada', Georgia, serif; font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.5; color: var(--osso); margin-bottom: clamp(28px, 4vh, 52px);
}
.carta p:last-child { margin-bottom: 0; }

/* ——— surpresa ——— */
.surpresa { place-content: center; text-align: center; }
.surpresa .chamada { grid-column: 3 / span 8; font-size: clamp(24px, 2.8vw, 42px); }
.surpresa .fecho {
  grid-column: 5 / span 4; margin-top: clamp(40px, 7vh, 80px); justify-self: center;
  position: relative; width: clamp(120px, 13vw, 180px); height: clamp(120px, 13vw, 180px);
  cursor: pointer; background: none; border: 0; display: grid; place-items: center;
}
.surpresa .fecho .halo {
  position: absolute; inset: 0; border: 1px solid rgba(243, 217, 166, 0.34);
  border-radius: 50%; transition: transform 1200ms var(--curva), border-color 900ms;
  animation: respira 5s ease-in-out infinite;
}
@keyframes respira { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.06); opacity: 1; } }
.surpresa .fecho:hover .halo { border-color: var(--luz); }
.surpresa .fecho span { font-family: 'Serifada', Georgia, serif; font-size: clamp(19px, 1.8vw, 26px); color: var(--luz); }
.surpresa .revelado { grid-column: 4 / span 6; display: none; }
.surpresa .revelado.aberto { display: block; }
.surpresa .revelado .retrato { height: min(72vh, 640px); }
.surpresa .revelado .corrido { margin-top: 26px; font-family: 'Serifada', Georgia, serif; font-style: italic; font-size: clamp(18px, 1.7vw, 26px); color: var(--osso); }

/* ——— final ——— */
.final { padding: 0; height: 260vh; display: block; }
.final .fixa { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.final .retrato { position: absolute; inset: 0; }
.final .retrato::after { background: linear-gradient(180deg, rgba(7,6,9,0.5), rgba(7,6,9,0.72)); }
.final .dizeres { position: relative; z-index: 3; text-align: center; padding: 0 var(--margem); }
.final h2 { font-size: clamp(36px, 6vw, 96px); }
.final .linhas { margin-top: clamp(26px, 4vh, 48px); }
.final .linhas p { font-family: 'Serifada', Georgia, serif; font-style: italic; font-size: clamp(18px, 1.8vw, 27px); color: rgba(236, 227, 214, 0.78); margin-bottom: 10px; }
.final .amo { margin-top: clamp(40px, 7vh, 84px); font-family: 'Serifada', Georgia, serif; font-size: clamp(30px, 4.4vw, 68px); color: var(--luz); }

/* ————————————————————— a foto aberta ————————————————————— */
.lupa {
  position: fixed; inset: 0; z-index: 120; display: none;
  place-items: center; padding: clamp(24px, 5vh, 70px);
  background: rgba(4, 3, 6, 0.92);
}
.lupa.aberta { display: grid; }
.lupa img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lupa .legenda { position: absolute; left: var(--margem); bottom: clamp(24px, 4vh, 44px); }
.lupa .fechar {
  position: absolute; right: var(--margem); top: clamp(24px, 4vh, 44px);
  background: none; border: 0; color: rgba(236, 227, 214, 0.5); cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
}
.lupa .fechar:hover { color: var(--luz); }

/* ————————————————————— som ————————————————————— */
.som {
  position: fixed; right: var(--margem); bottom: clamp(20px, 3vh, 34px); z-index: 80;
  background: none; border: 0; cursor: pointer; padding: 10px;
  color: rgba(236, 227, 214, 0.36); font-family: inherit;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  transition: color 500ms;
}
.som:hover, .som.tocando { color: var(--luz); }
.som[hidden] { display: none; }

/* ————————————————————— cursor ————————————————————— */
.brilho {
  position: fixed; z-index: 95; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(243, 217, 166, 0.5); pointer-events: none; opacity: 0;
  translate: -50% -50%; transition: opacity 600ms, width 400ms, height 400ms;
  mix-blend-mode: screen; filter: blur(1px);
}

/* ————————————————————— celular —————————————————————
   Não é a mesma composição menor: as colunas fixas dariam foto de 30% de
   largura numa tela de 390px. Aqui a foto volta a ser protagonista e o texto
   passa a viver sobre ela ou embaixo dela. */
@media (max-width: 860px) {
  .cena { grid-template-columns: repeat(6, 1fr); padding: clamp(70px, 11vh, 110px) var(--margem); }
  .portao { grid-template-columns: repeat(6, 1fr); }
  .portao .dizeres, .portao .entrada { grid-column: 1 / span 6; }
  .torre { right: 6vw; bottom: 8vh; opacity: 0.7; }

  .abertura .retrato { grid-column: 1 / span 6; height: 62vh; grid-row: 1; }
  .abertura .fala { grid-column: 1 / span 6; grid-row: 2; margin-top: 34px; }

  .passo .retrato, .passo:nth-child(odd) .retrato, .passo:nth-child(even) .retrato { grid-column: 1 / span 6; height: 58vh; grid-row: 1; }
  .passo .fala, .passo:nth-child(odd) .fala, .passo:nth-child(even) .fala { grid-column: 1 / span 6; grid-row: 2; margin-top: 30px; }

  .mosaico { grid-template-columns: repeat(6, 1fr); gap: 34px 14px; }
  .mosaico .retrato:nth-child(6n+1) { grid-column: 1 / span 5; height: 52vh; margin: 0; }
  .mosaico .retrato:nth-child(6n+2) { grid-column: 4 / span 3; height: 30vh; margin: -8vh 0 0; align-self: start; }
  .mosaico .retrato:nth-child(6n+3) { grid-column: 2 / span 5; height: 54vh; margin: 0; }
  .mosaico .retrato:nth-child(6n+4) { grid-column: 1 / span 3; height: 28vh; margin: -6vh 0 0; }
  .mosaico .retrato:nth-child(6n+5) { grid-column: 1 / span 6; height: 62vh; margin: 0; }
  .mosaico .retrato:nth-child(6n+6) { grid-column: 3 / span 4; height: 34vh; margin: -4vh 0 0; }

  .tempo .desde, .tempo .conta { grid-column: 1 / span 6; }
  .motivo .titulo, .motivo .porque { grid-column: 1 / span 6; }
  .motivo .retrato { grid-column: 1 / span 6; grid-row: auto; height: 40vh; margin-top: 32px; }
  .momento .dizer { max-width: none; right: var(--margem); bottom: clamp(50px, 10vh, 90px); }
  .momento .escuro { background: linear-gradient(180deg, rgba(7,6,9,0.4) 20%, rgba(7,6,9,0.9)); }
  .lanternas .retrato { width: 62vw; height: 52vh; }
  .surpresa .chamada, .surpresa .revelado { grid-column: 1 / span 6; }
  .surpresa .fecho { grid-column: 1 / span 6; }
  .carta .folha { max-width: none; }
  .nuvem .frase { max-width: 15ch; font-size: clamp(17px, 4.6vw, 24px); }
}

/* ————————————————————— movimento reduzido —————————————————————
   O conteúdo continua inteiro: o que sai é o movimento, não a história.
   Quem liga isso no sistema costuma ter um motivo de saúde, e um presente que
   passa mal na tela não é presente. */
@media (prefers-reduced-motion: reduce) {
  .grao { animation: none; }
  .surpresa .fecho .halo { animation: none; }
  .momento .quadro, .lanternas .fixa, .final .fixa { position: relative; }
  .lanternas { height: auto; }
  .final { height: auto; }
  .momento { min-height: auto; }
  * { transition-duration: 1ms !important; }
}