/* ═══════════════════════════════════════════════════════════════
   Uma surpresa de aniversário — folha de estilo
   Mobile-first. Pensada para 360–430px de largura.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fontes ───
   Servidas da própria pasta do site: nada de CDN, então a página
   não depende de outro serviço para continuar bonita daqui a anos.

   Playfair Display  → títulos e frases de destaque (o ar cinematográfico)
   EB Garamond       → textos corridos e a carta (calorosa de ler)

   Obs.: Cormorant Garamond foi descartada de propósito — naquela família
   os acentos do português (você, música) saem desalinhados. */
@font-face {
  font-family: 'Playfair';
  src: url('assets/fonts/playfair-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garamond EB';
  src: url('assets/fonts/garamond-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garamond EB';
  src: url('assets/fonts/garamond-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}


/* ═══════════════ TOKENS ═══════════════ */
:root {
  /* Paleta */
  --ink:        #08060a;   /* preto profundo  */
  --ink-2:      #100a11;   /* preto arroxeado */
  --wine:       #4a0d20;   /* vinho           */
  --wine-deep:  #2b0713;   /* vinho escuro    */
  --red:        #7a1028;   /* vermelho escuro */
  --rose:       #e0a4b2;   /* rosa discreto   */
  --rose-dim:   rgba(224, 164, 178, .55);
  --gold:       #c9a227;   /* dourado         */
  --gold-soft:  #e3c66b;
  --white:      #f7f2ef;
  --white-dim:  rgba(247, 242, 239, .62);
  --white-faint:rgba(247, 242, 239, .34);

  /* Tipografia */
  --display: 'Playfair', Georgia, 'Times New Roman', serif;
  --serif: 'Garamond EB', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Ritmo */
  --gutter: 22px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* Altura real da viewport (o JS mantém isto em dia no Safari/Chrome mobile) */
  --app-h: 100vh;

  /* Placeholders de blur — a foto nunca aparece como retângulo vazio */
  --lqip-1: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABcQERQRDhcUEhQaGBcbIjklIh8fIkYyNSk5UkhXVVFIUE5bZoNvW2F8Yk5QcptzfIeLkpSSWG2grJ+OqoOPko3/2wBDARgaGiIeIkMlJUONXlBejY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY3/wAARCAAXABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAMEBQL/xAAgEAACAgIDAAMBAAAAAAAAAAABAgADBBEFEiEiMUFR/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgMB/8QAGREBAQADAQAAAAAAAAAAAAAAAAECETEh/9oADAMBAAIRAxEAPwDGcdE2PudriWLhLlNYG22in8EiyH+SgfkvcjYKsDHx+g7MOxOtEGE5OqhWJAb3BI0vnkTdC2E4uvIalu5UhAzrrYaX8mjGNlDWKSVbS+xEneryTTH52lByJKjW1BOoiI5xLKev/9k=");
  --lqip-2: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABcQERQRDhcUEhQaGBcbIjklIh8fIkYyNSk5UkhXVVFIUE5bZoNvW2F8Yk5QcptzfIeLkpSSWG2grJ+OqoOPko3/2wBDARgaGiIeIkMlJUONXlBejY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY3/wAARCAAjABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAIDBQQB/8QAJhAAAgEEAQMDBQAAAAAAAAAAAQIAAwQFESESE0ExMoEGI0JRYf/EABcBAAMBAAAAAAAAAAAAAAAAAAIDBAH/xAAdEQACAgEFAAAAAAAAAAAAAAAAAQIRAyExMkFR/9oADAMBAAIRAxEAPwDao5m1qUyzOKZA2Q0xr3N3t3U7ePHapk6DfkfnxMe7plLhKQdtMR8jzO68ytvTC06VPTogAAHtMFy8GKFK2ej6iyFmTQuGV3U+rKDEsxmKtsjam6v647tRiddQGh4iaLZwP91+4424HH8mdTpPUd2Ye3l5oPU6QWbxIUXD2Vyx11M6+n6mbFmdLRIoLsDoHQiSI5iFRGLskIo36mTUaxfHG35iIL6KMvNlSk6iIjCU/9k=");
  --lqip-3: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABcQERQRDhcUEhQaGBcbIjklIh8fIkYyNSk5UkhXVVFIUE5bZoNvW2F8Yk5QcptzfIeLkpSSWG2grJ+OqoOPko3/2wBDARgaGiIeIkMlJUONXlBejY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY3/wAARCAAhABQDASIAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAUCBAMG/8QALBAAAgEDAgMFCQAAAAAAAAAAAQIAAwQRBSESMUETFFGRoRUiIzJCcYKxwf/EABYBAQEBAAAAAAAAAAAAAAAAAAIBAP/EABoRAQACAwEAAAAAAAAAAAAAAAABESExQmH/2gAMAwEAAhEDEQA/AIyXNWgVNGqytjx2P38ZVtddThAuk4TnBZOXlJg7vUpqrVOzffOeQnPVp/BSqGBVjiSzp9qpBUEYIO4MSRo7X6WIp07VXCMRkvgjrj1iYWtU09Lmlx0kAq5zt9U5tIsqoov2tHKsfdBXeVWb0M5/aK2gVKtQLTZiAT0k8KMRbFy9/ZVilsqlXAc56Hl/Inq95bOeI3tHzESi10kHWfnpfl+4iSNlymxERA//2Q==");
  --lqip-4: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABcQERQRDhcUEhQaGBcbIjklIh8fIkYyNSk5UkhXVVFIUE5bZoNvW2F8Yk5QcptzfIeLkpSSWG2grJ+OqoOPko3/2wBDARgaGiIeIkMlJUONXlBejY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY3/wAARCAAkABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIDBAUB/8QAJBAAAgEDAgMFCQAAAAAAAAAAAQIAAwQREiExEyJBUWEFFSP/xAAYAQADAQEAAAAAAAAAAAAAAAAAAQMCBP/EABsRAQEBAAIDAAAAAAAAAAAAAAABExEhAiJB/9oADAMBAAIRAxEAPwBx+Zr686Mp6Eufs0a31IHNVtgsqVLZbej2tt5zI7bDYbPeDv8ARHr0Mu0r3V2WyzsD6EIxqPndQvyEWlPOMtrmqUZGcsG8HeNQfokEt/Pk+xKxbfaMG7SDwRiPiCeValO7t6q6untwN4THpUyqYdyp+QmOIr6fY5w8RuM+cwhKOdOg1KCSYQhJ1t//2Q==");
  --lqip-5: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABcQERQRDhcUEhQaGBcbIjklIh8fIkYyNSk5UkhXVVFIUE5bZoNvW2F8Yk5QcptzfIeLkpSSWG2grJ+OqoOPko3/2wBDARgaGiIeIkMlJUONXlBejY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY3/wAARCAAkABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMFAgT/xAAlEAACAQMDBAIDAAAAAAAAAAABAgMABBEFEiEiMVFhExRScbH/xAAXAQEBAQEAAAAAAAAAAAAAAAACAQME/8QAGhEAAgMBAQAAAAAAAAAAAAAAAAECESESE//aAAwDAQACEQMRAD8A0vmmgUNcqqg/ic4/fFSfW7NO8jE+hXl1WVJtNaSNyxJzz49VxaaZbm2VnRZCVyWJ/goqWaNw00odTtZk3LLgeCcUrEutN3Sj68aKoABG/HNKvSDyy8dx9fME0KvsTYCPPODUtPaUuEjVWRF5YnAQe6okB1CFrlHwB04UcmubCLbaXUMi9T8q2e4ouje41h1capCsxVTv24BYDgmlYyoAuOaVr5I5/Rl4p5otP+FJGEb9TAVOCeSJ1KMecggmlKUkqInpBZ3A79+aUpTQD//Z");
}


/* ═══════════════ O CORAÇÃO ═══════════════
   O emoji ❤️ do sistema vem num vermelho vivo que briga com
   a paleta (e muda de desenho entre iPhone e Android). Então
   desenhamos o nosso: um SVG em máscara, que herda a cor do
   texto e sai idêntico em qualquer celular.
   No JS, qualquer ❤️ digitado nas mensagens vira este coração. */
.hrt {
  display: inline-block;
  width: .78em;
  height: .78em;
  vertical-align: -.03em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg-heart);
          mask-image: var(--svg-heart);
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-size: contain;       mask-size: contain;
}
:root {
  --svg-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2C11.2 20.6 3.4 15.1 3.4 9.4 3.4 6.3 5.8 4 8.7 4c1.4 0 2.6.6 3.3 1.6C12.7 4.6 13.9 4 15.3 4c2.9 0 5.3 2.3 5.3 5.4 0 5.7-7.8 11.2-8.6 11.8z' fill='%23000'/%3E%3C/svg%3E");
}
/* Em navegadores antigos, sem máscara, o coração some em silêncio —
   melhor um espaço vazio que um quadrado colorido. */
@supports not ((-webkit-mask-image: url('#h')) or (mask-image: url('#h'))) {
  .hrt { background-color: transparent; }
}

/* Onde o coração aparece, e em que cor */
.btn__heart, .photo__cap .hrt, .opening__line .hrt {
  color: var(--rose);
}
.finale__line--big .hrt { color: #a3152f; }


/* ═══════════════ BASE ═══════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sem realce azul ao tocar, e sem seleção acidental de texto ao arrastar */
  -webkit-tap-highlight-color: transparent;
}

/* Trava o scroll enquanto as cenas de abertura estão no ar */
body.is-locked {
  overflow: hidden;
  height: var(--app-h);
  touch-action: none;
}

img, picture, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* O atributo hidden tem de vencer qualquer display definido aqui.
   Sem isto, esconder um botão pelo JS simplesmente não funciona. */
[hidden] { display: none !important; }


/* ═══════════════ CAMADAS DECORATIVAS ═══════════════ */

/* Grão de filme muito leve — dá a textura "premium" sem custar imagem */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grainShift 7s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate3d(0,0,0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-2%, -2%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* Vinheta: escurece as bordas, foca o centro da tela */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background:
    radial-gradient(130% 92% at 50% 42%,
      transparent 42%,
      rgba(8, 6, 10, .38) 78%,
      rgba(8, 6, 10, .72) 100%);
}

/* Canvas das partículas */
#particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s var(--ease-soft);
}
#particles.is-on { opacity: 1; }

/* Corações do toque */
#hearts {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}
.heart {
  position: absolute;
  width: 15px;
  height: 15px;
  color: var(--rose);
  opacity: 0;
  will-change: transform, opacity;
  animation: heartRise 1700ms var(--ease-soft) forwards;
  filter: drop-shadow(0 0 8px rgba(224, 164, 178, .5));
}
@keyframes heartRise {
  0%   { opacity: 0;  transform: translate3d(-50%, 0, 0) scale(.4) rotate(var(--r, 0deg)); }
  18%  { opacity: .85; transform: translate3d(-50%, -14px, 0) scale(1.05) rotate(var(--r, 0deg)); }
  100% { opacity: 0;  transform: translate3d(calc(-50% + var(--dx, 0px)), -96px, 0) scale(.62) rotate(var(--r, 0deg)); }
}


/* ═══════════════ CENAS DE TELA CHEIA ═══════════════ */
.stage {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--app-h);
  padding: max(34px, env(safe-area-inset-top)) var(--gutter) max(34px, env(safe-area-inset-bottom));
  text-align: center;
  /* Sem fundo próprio de propósito: o preto vem do body e as
     partículas (que ficam numa camada abaixo) continuam visíveis. */
  background: transparent;
}
.stage[hidden] { display: none; }

.stage__inner {
  width: 100%;
  max-width: 34ch;
  margin: auto;
}

/* Saída das cenas */
.stage.is-leaving {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .9s var(--ease-soft), transform 1.4s var(--ease-soft);
  pointer-events: none;
}


/* ─── Cena 1: porta de entrada ─── */
#gate {
  /* Um respiro de vinho no fundo, quase imperceptível */
  background:
    radial-gradient(112% 74% at 50% 108%, rgba(74, 13, 32, .5) 0%, transparent 62%);
}

.gate__line {
  font-family: var(--display);
  margin: 0;
  font-size: clamp(25px, 7.6vw, 31px);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: .015em;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(6px);
}
.gate__line.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 1.5s var(--ease-soft), transform 1.5s var(--ease), filter 1.5s var(--ease-soft);
}
.gate__line--sub {
  font-family: var(--serif);
  margin-top: 20px;
  font-size: clamp(17px, 4.9vw, 20px);
  line-height: 1.62;
  color: var(--white-dim);
}

.gate__actions {
  margin-top: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}
.gate__actions.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s var(--ease-soft) .1s, transform 1.2s var(--ease) .1s;
}


/* ─── Cena 2: abertura ─── */
#opening { background: transparent; }

/* Brilho que cresce por baixo do texto */
.glowfield {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118vw;
  height: 118vw;
  transform: translate(-50%, -50%) scale(.55);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(122, 16, 40, .34) 0%,
      rgba(74, 13, 32, .20) 34%,
      transparent 68%);
  transition: opacity 3.4s var(--ease-soft), transform 7s var(--ease-soft);
}
.glowfield.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.opening__line {
  font-family: var(--display);
  margin: 0;
  font-size: clamp(22px, 6.6vw, 28px);
  font-weight: 400;
  line-height: 1.44;
  letter-spacing: .012em;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(8px);
  transition: opacity 1.5s var(--ease-soft), transform 1.9s var(--ease), filter 1.5s var(--ease-soft);
}
.opening__line.is-in { opacity: 1; transform: none; filter: blur(0); }
.opening__line.is-out {
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  filter: blur(7px);
  transition-duration: 1.1s;
}
/* A frase de destaque da abertura */
.opening__line.is-hero {
  font-size: clamp(27px, 8.2vw, 35px);
  line-height: 1.28;
  text-shadow: 0 0 46px rgba(122, 16, 40, .55);
}

.btn--continue {
  position: absolute;
  left: 50%;
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 30px));
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeUp 1.3s var(--ease-soft) forwards;
}
.btn--continue[hidden] { display: none; }
@keyframes fadeUp {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}


/* ═══════════════ BOTÕES ═══════════════ */
/* Alvos de toque generosos: mínimo 52px de altura */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .06em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .4s var(--ease), box-shadow .5s var(--ease-soft),
              background-color .5s var(--ease-soft), border-color .5s var(--ease-soft);
  touch-action: manipulation;
}
.btn:active { transform: scale(.965); }

/* Botão principal — vinho com brilho e um fio dourado */
.btn--primary {
  color: var(--white);
  border-color: rgba(227, 198, 107, .3);
  background:
    linear-gradient(145deg, rgba(122, 16, 40, .92) 0%, rgba(43, 7, 19, .95) 100%);
  box-shadow:
    0 0 0 1px rgba(227, 198, 107, .07),
    0 14px 40px -12px rgba(122, 16, 40, .8),
    inset 0 1px 0 rgba(255, 255, 255, .09);
  animation: breathe 4.6s var(--ease-soft) infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(227,198,107,.07), 0 14px 40px -12px rgba(122,16,40,.8), inset 0 1px 0 rgba(255,255,255,.09); }
  50%      { box-shadow: 0 0 0 1px rgba(227,198,107,.16), 0 18px 54px -12px rgba(122,16,40,.95), inset 0 1px 0 rgba(255,255,255,.12); }
}
.btn__heart {
  width: 15px;
  height: 15px;
  color: var(--rose);
  filter: drop-shadow(0 0 7px rgba(224, 164, 178, .7));
}

/* Botão discreto — vidro fosco */
.btn--ghost {
  min-height: 50px;
  padding: 0 24px;
  font-size: 16px;
  color: var(--white-dim);
  border-color: rgba(247, 242, 239, .14);
  background: rgba(247, 242, 239, .035);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.btn--ghost[aria-pressed="true"] {
  color: var(--gold-soft);
  border-color: rgba(227, 198, 107, .34);
  background: rgba(227, 198, 107, .07);
}
.btn__note { font-size: 14px; }

.btn--replay {
  margin: 54px auto 0;
  display: flex;
  font-size: 15px;
  opacity: .5;
}


/* ═══════════════ A HISTÓRIA ═══════════════ */
#story[hidden] { display: none; }
#story {
  position: relative;
  z-index: 10;
}

.wrap {
  width: 100%;
  max-width: 36ch;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.chapter {
  position: relative;
  padding: clamp(84px, 22vh, 140px) 0;
  text-align: center;
}
.chapter--intro { padding-top: clamp(96px, 26vh, 170px); }

/* Fundo em vinho que aquece as passagens de virada */
.chapter--turn::before,
.chapter--letter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(86% 58% at 50% 50%, rgba(74, 13, 32, .32) 0%, transparent 72%);
  pointer-events: none;
}

.kicker {
  display: block;
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .78;
}

.h-display {
  font-family: var(--display);
  margin: 0 0 26px;
  font-size: clamp(40px, 12.6vw, 54px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .005em;
}
/* Fio dourado sob os títulos de capítulo */
.h-display::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .6;
}

.prose {
  margin: 0;
  font-size: clamp(17.5px, 4.8vw, 20px);
  line-height: 1.78;
  color: var(--white-dim);
}
.prose + .prose { margin-top: 1.15em; }
.prose--lead {
  font-family: var(--display);
  font-size: clamp(20px, 5.8vw, 24px);
  line-height: 1.66;
  color: var(--white);
}
.prose--center { text-align: center; }
.prose--over {
  font-family: var(--display);
  font-size: clamp(21px, 6.2vw, 26px);
  line-height: 1.52;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(8, 6, 10, .95), 0 0 70px rgba(8, 6, 10, .7);
}

/* Ênfase em itálico dentro dos textos */
.prose em, .letter__body em {
  font-style: italic;
  font-weight: 400;
  color: var(--rose);
  opacity: .92;
}


/* ═══════════════ FOTOS ═══════════════ */
.photo {
  position: relative;
  margin: 0;
}

.photo__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--ink-2);
  background-size: cover;
  background-position: center;
}
/* Cada moldura recebe seu blur até a foto chegar */
[data-photo="1"] .photo__frame,
[data-photo="1"].photo__frame  { background-image: var(--lqip-1); }
[data-photo="2"] .photo__frame,
[data-photo="2"].photo__frame  { background-image: var(--lqip-2); }
[data-photo="3"] .photo__frame,
[data-photo="3"].photo__frame  { background-image: var(--lqip-3); }
[data-photo="4"] .photo__frame,
[data-photo="4"].photo__frame  { background-image: var(--lqip-4); }
[data-photo="5"] .photo__frame,
[data-photo="5"].photo__frame  { background-image: var(--lqip-5); }

/* O <picture> precisa de altura própria: sem isto, o height:100%
   da imagem não tem referência e a foto não preenche a moldura. */
.photo__frame picture,
.final__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s var(--ease-soft);
}
.photo__frame img.is-loaded { opacity: 1; }

/* ─── ENQUADRAMENTO DE CADA FOTO ───
   Numa tela de celular (bem estreita e alta) a foto é sempre
   recortada para preencher. Estes valores dizem QUAL parte
   manter no quadro — o importante é o rosto não ser cortado.

   Formato: object-position: <horizontal> <vertical>
     50% 50% = centro (padrão)
     20% 40% = puxa para a esquerda e um pouco para cima

   Se você trocar alguma foto, ajuste só o valor dela aqui. */
[data-photo="1"] img { object-position: 50% 42%; }  /* retrato dela  */
[data-photo="2"] img { object-position: 50% 40%; }  /* ela, de rosa  */
[data-photo="3"] img { object-position: 20% 38%; }  /* rosto à esquerda */
[data-photo="4"] img { object-position: 50% 38%; }  /* nós dois      */
[data-photo="5"] img { object-position: 50% 34%; }  /* nós dois      */


/* ─── Foto tela cheia, com zoom lento (Ken Burns) ─── */
.photo--full .photo__frame {
  height: var(--app-h);
  height: 100svh;
}
.photo--full .photo__frame::after {
  /* Escurece o rodapé para a legenda respirar */
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(8, 6, 10, .96) 0%, rgba(8, 6, 10, .55) 42%, transparent 100%);
  pointer-events: none;
}
/* Tom quente/vinho por cima das fotos "nossas" */
.photo--warm .photo__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(170deg, rgba(74, 13, 32, .28) 0%, transparent 46%, rgba(43, 7, 19, .34) 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.kenburns img {
  animation: kenburns 22s var(--ease-soft) infinite alternate;
  will-change: transform;
}
.kenburns--slow img { animation-duration: 30s; }
@keyframes kenburns {
  from { transform: scale(1.005) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.4%, -1.8%, 0); }
}

.photo__cap {
  font-family: var(--display);
  position: absolute;
  left: 0; right: 0;
  bottom: max(50px, calc(env(safe-area-inset-bottom) + 42px));
  z-index: 3;
  margin: 0;
  padding: 0 28px;
  font-size: clamp(19px, 5.4vw, 23px);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 2px 26px rgba(8, 6, 10, .9);
}

/* ─── Foto em cartão, revelada por cortina ─── */
.photo--card {
  padding: clamp(24px, 7vh, 54px) var(--gutter) clamp(44px, 10vh, 76px);
}
.photo--card .photo__frame {
  aspect-ratio: 79 / 116;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(227, 198, 107, .1),
    0 34px 70px -30px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(247, 242, 239, .055);
}

/* A cortina: uma faixa que desliza revelando a foto */
.curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--ink);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}
.curtain.is-revealed::after {
  transform: translate3d(0, -101%, 0);
  transition: transform 1.5s cubic-bezier(.76, 0, .24, 1);
}
/* Fiozinho de luz que acompanha a cortina */
.photo__shine {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(247, 242, 239, .16) 50%, transparent 62%);
}
.curtain.is-revealed .photo__shine {
  animation: shine 1.7s var(--ease-soft) .5s;
}
@keyframes shine {
  0%   { opacity: 0; transform: translate3d(-100%, 0, 0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(100%, 0, 0); }
}

.photo__note {
  margin: 28px auto 0;
  max-width: 30ch;
  font-size: clamp(16px, 4.5vw, 18px);
  line-height: 1.68;
  text-align: center;
  color: var(--white-faint);
  font-style: italic;
}

/* ─── Foto com parallax ─── */
.photo--parallax {
  position: relative;
  height: var(--app-h);
  height: 100svh;
  overflow: hidden;
}
.photo--parallax .photo__frame {
  position: absolute;
  inset: -12% 0;
}
.photo--parallax img {
  will-change: transform;
}
.photo--parallax .photo__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  background:
    linear-gradient(to bottom, rgba(8,6,10,.82) 0%, rgba(8,6,10,.42) 30%, rgba(8,6,10,.5) 62%, rgba(8,6,10,.93) 100%);
}
.photo--parallax .photo__overlay .prose { max-width: 26ch; }


/* ═══════════════ ENVELOPE / CARTA ═══════════════ */
.envelope {
  display: block;
  width: min(258px, 74vw);
  margin: 46px auto 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition: transform .5s var(--ease), opacity .7s var(--ease-soft);
}
.envelope:active { transform: scale(.975); }
.envelope.is-open {
  opacity: 0;
  transform: translate3d(0, -22px, 0) scale(.9);
  pointer-events: none;
}
.envelope[hidden] { display: none; }

.envelope__body {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 5px;
  background: linear-gradient(158deg, #401021 0%, #2e0a17 52%, #1e050e 100%);
  box-shadow:
    0 1px 0 rgba(227, 198, 107, .16) inset,
    0 26px 52px -22px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(227, 198, 107, .14);
  animation: envFloat 5.2s var(--ease-soft) infinite;
  will-change: transform;
}
@keyframes envFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}

/* A aba superior do envelope */
.envelope__flap {
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(176deg, #4a1225 0%, #330c19 100%);
  border-radius: 5px 5px 0 0;
  transform-origin: top center;
  transition: transform 1s cubic-bezier(.62, -.22, .34, 1.28);
  box-shadow: 0 1px 0 rgba(227, 198, 107, .12) inset;
}
.envelope.is-open .envelope__flap {
  transform: rotateX(-178deg);
}

/* Uma leve dobra interna, para o envelope não ficar chapado */
.envelope__pocket {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background:
    linear-gradient(to top left,  rgba(0,0,0,.26) 0%, transparent 50%),
    linear-gradient(to top right, rgba(0,0,0,.26) 0%, transparent 50%);
  pointer-events: none;
}

/* Selo de cera dourado, com um coração */
.envelope__seal {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #2b0713;
  background: radial-gradient(circle at 38% 32%, #b0985f 0%, #8a7130 46%, #574517 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .38),
    0 3px 10px rgba(0, 0, 0, .6),
    inset 0 -2px 4px rgba(0, 0, 0, .34),
    inset 0 1px 2px rgba(255, 255, 255, .16);
  transition: opacity .45s var(--ease-soft), transform .6s var(--ease);
}
.envelope.is-open .envelope__seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
}

.envelope__hint {
  display: block;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .62;
  animation: hintPulse 2.9s var(--ease-soft) infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: .32; }
  50%      { opacity: .78; }
}

/* ─── A carta ─── */
/* Mais larga que o resto da página: uma carta se lê de ponta a ponta. */
.chapter--letter .wrap { max-width: 30rem; }

.letter { margin-top: 12px; }
.letter[hidden] { display: none; }

.letter__paper {
  position: relative;
  padding: 38px 22px 32px;
  border-radius: 4px;
  text-align: left;
  color: #f2ece7;
  /* Vidro fosco escuro, com um fio dourado na borda */
  background:
    linear-gradient(168deg, rgba(58, 12, 28, .58) 0%, rgba(16, 10, 17, .72) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow:
    0 0 0 1px rgba(227, 198, 107, .17),
    0 40px 80px -34px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  animation: letterIn 1.25s var(--ease) .2s forwards;
}
@keyframes letterIn {
  to { opacity: 1; transform: none; }
}
/* Ornamento no topo da carta */
.letter__paper::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
}

.letter__salutation {
  font-family: var(--display);
  margin: 0 0 1.4em;
  font-size: clamp(21px, 5.6vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--white);
}

.letter__body p {
  margin: 0 0 1.35em;
  font-size: clamp(17px, 4.6vw, 18.5px);
  line-height: 1.74;
  color: rgba(242, 236, 231, .84);
}
.letter__body p:last-child { margin-bottom: 0; }

/* Cada parágrafo da carta entra em sequência */
.letter__body p {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: paraIn 1.1s var(--ease) forwards;
}
@keyframes paraIn {
  to { opacity: 1; transform: none; }
}

.letter__sign {
  margin: 2em 0 0;
  padding-top: 1.4em;
  border-top: 1px solid rgba(227, 198, 107, .16);
  font-size: clamp(18px, 5vw, 20px);
  font-style: italic;
  color: var(--rose);
  opacity: 0;
  animation: paraIn 1.2s var(--ease) forwards;
}


/* ═══════════════ FINAL ═══════════════ */
.chapter--finale {
  padding: clamp(96px, 26vh, 168px) 0 clamp(70px, 16vh, 110px);
  min-height: var(--app-h);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chapter--finale::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(96% 52% at 50% 26%, rgba(122, 16, 40, .3) 0%, transparent 70%),
    radial-gradient(70% 40% at 50% 96%, rgba(74, 13, 32, .34) 0%, transparent 74%);
  pointer-events: none;
}

.finale__line {
  font-family: var(--display);
  margin: 0 auto;
  max-width: 24ch;
  padding: 0 var(--gutter);
  font-size: clamp(20px, 5.9vw, 25px);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--white-dim);
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(7px);
  transition: opacity 1.6s var(--ease-soft), transform 1.8s var(--ease), filter 1.6s var(--ease-soft);
}
.finale__line + .finale__line { margin-top: .85em; }
.finale__line.is-in { opacity: 1; transform: none; filter: blur(0); }

.finale__line--big {
  margin-top: 1.5em !important;
  max-width: 20ch;
  font-size: clamp(27px, 8vw, 35px);
  line-height: 1.26;
  color: var(--white);
  text-shadow: 0 0 52px rgba(122, 16, 40, .62);
}

/* Foto final, em cartão */
.final__photo {
  width: min(232px, 62vw);
  margin: clamp(46px, 10vh, 66px) auto 0;
  aspect-ratio: 79 / 108;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(227, 198, 107, .12),
    0 32px 62px -26px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(247, 242, 239, .06);
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.97);
  transition: opacity 1.7s var(--ease-soft), transform 1.9s var(--ease);
}
.final__photo.is-in { opacity: 1; transform: none; }

/* Assinatura: NOME ❤ NOME */
.signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 9vh, 58px);
  padding: 0 var(--gutter);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 1.6s var(--ease-soft), transform 1.7s var(--ease);
}
.signature.is-in { opacity: 1; transform: none; }

.signature__name {
  font-family: var(--display);
  font-size: clamp(21px, 6vw, 25px);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--white);
}
.signature__heart {
  width: 17px;
  height: 17px;
  color: #a3152f;
  filter: drop-shadow(0 0 14px rgba(122, 16, 40, 1));
  animation: beat 2.4s var(--ease-soft) infinite;
}
@keyframes beat {
  0%, 100%  { transform: scale(1);    opacity: .92; }
  14%       { transform: scale(1.26); opacity: 1; }
  28%       { transform: scale(1);    opacity: .92; }
  42%       { transform: scale(1.16); opacity: 1; }
  56%       { transform: scale(1);    opacity: .92; }
}

.signature__date {
  margin: 20px auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 1.6s var(--ease-soft);
}
.signature__date.is-in { opacity: .52; }


/* ═══════════════ CONTROLE DE MÚSICA ═══════════════ */
.music-toggle {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(247, 242, 239, .13);
  background: rgba(16, 10, 17, .52);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition: transform .4s var(--ease), opacity .6s var(--ease-soft), border-color .5s var(--ease-soft);
  opacity: .55;
}
.music-toggle[hidden] { display: none; }
.music-toggle:active { transform: scale(.92); }
.music-toggle.is-playing {
  opacity: .9;
  border-color: rgba(227, 198, 107, .3);
}

/* Três barrinhas que dançam quando a música toca */
.music-toggle__icon {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 15px;
}
.music-toggle__icon i {
  display: block;
  width: 2.5px;
  height: 100%;
  border-radius: 2px;
  background: var(--white-dim);
  transform-origin: bottom;
  transform: scaleY(.3);
  transition: transform .4s var(--ease-soft), background-color .4s var(--ease-soft);
}
.music-toggle.is-playing .music-toggle__icon i {
  background: var(--gold-soft);
  animation: bars 1.15s var(--ease-soft) infinite;
}
.music-toggle.is-playing .music-toggle__icon i:nth-child(2) { animation-delay: .18s; }
.music-toggle.is-playing .music-toggle__icon i:nth-child(3) { animation-delay: .36s; }
@keyframes bars {
  0%, 100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1); }
}


/* ═══════════════ REVELAÇÃO NO SCROLL ═══════════════ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(5px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 1.4s var(--ease-soft), transform 1.5s var(--ease), filter 1.4s var(--ease-soft);
}


/* ═══════════════ MÁQUINA DE ESCREVER ═══════════════ */
.type-caret::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -.14em;
  background: var(--rose);
  animation: caret .95s steps(2) infinite;
}
@keyframes caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}


/* ═══════════════ SEM JAVASCRIPT ═══════════════
   Caso raro, mas se acontecer ela vê a mensagem
   principal e uma foto, em vez de uma tela preta. */
.noscript {
  position: relative;
  z-index: 70;
  max-width: 34ch;
  margin: 0 auto;
  padding: 16vh var(--gutter) 10vh;
  text-align: center;
}
.noscript__title {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(27px, 8vw, 35px);
  line-height: 1.3;
}
.noscript__text {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--white-dim);
}
.noscript img {
  width: min(230px, 62vw);
  height: auto;
  margin: 0 auto;
  border-radius: 3px;
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .95);
}


/* ═══════════════ EQUILÍBRIO DAS LINHAS ═══════════════
   Frases curtas ficam melhor distribuídas, sem uma
   palavra sozinha na última linha. Navegador que não
   conhece a propriedade simplesmente ignora. */
.gate__line, .opening__line, .h-display, .photo__cap,
.finale__line, .prose--lead, .prose--over, .photo__note,
.prose--center, .letter__salutation {
  text-wrap: balance;
}
/* Textos longos: só evita a órfã, sem reequilibrar tudo */
.prose, .letter__body p {
  text-wrap: pretty;
}


/* ═══════════════ TELAS MAIORES ═══════════════
   A experiência é mobile-first; no desktop ela apenas
   fica centrada numa coluna estreita, sem esticar. */
@media (min-width: 620px) {
  :root { --gutter: 28px; }
  body { font-size: 18px; }
  .photo--card .photo__frame,
  .final__photo { width: min(320px, 46vw); margin-left: auto; margin-right: auto; }
  .photo--card { padding-left: 0; padding-right: 0; }
  .letter__paper { padding: 46px 38px 38px; }
}


/* ═══════════════ MOVIMENTO REDUZIDO ═══════════════
   Se o celular dela pedir menos animação, a experiência
   continua inteira — só troca movimento por fade curto. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .22s !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none; opacity: .02; }
  .kenburns img { animation: none; transform: none; }
  .envelope__body { animation: none; }
  .glowfield { transform: translate(-50%, -50%) scale(1); }
  .reveal, .finale__line, .gate__line, .opening__line {
    filter: none !important;
    transform: none !important;
  }
  .letter__paper, .letter__body p, .letter__sign { opacity: 1 !important; transform: none !important; }
  #particles { display: none; }
  .signature__heart { animation: none; }
  .music-toggle.is-playing .music-toggle__icon i { animation: none; transform: scaleY(.75); }
  .curtain.is-revealed::after { transform: translate3d(0, -101%, 0); }
  .photo__shine { display: none; }
}