/* ============================================================
   Fiz uma carta para voce
   ============================================================ */

:root {
  --papel:        #f4ece0;
  --papel-claro:  #fbf6ec;
  --papel-escuro: #e6d9c4;
  --tinta:        #2b2521;
  --tinta-fraca:  #6b5f54;
  --vinho:        #8e2f2a;
  --vinho-escuro: #6d211d;
  --ouro:         #b08d57;
  --noite:        #171310;
  --noite-2:      #241c17;

  --sombra-papel: 0 30px 60px -20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.25);
  --serif: "Cormorant Garamond", Georgia, serif;
  --mao:   "Caveat", cursive;
  --script:"Parisienne", cursive;

  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(130% 90% at 50% -10%, #3a2c22 0%, var(--noite-2) 42%, var(--noite) 100%);
  color: var(--tinta);
  font-family: var(--serif);
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--ruido);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 60;
}

body.fase-capa  { overflow: hidden; }
body.fase-carta { overflow-y: auto; }

/* ============================================================
   Poeira dourada
   ============================================================ */

.poeira { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

.poeira span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,196,138,.95), rgba(226,196,138,0) 70%);
  opacity: 0;
  animation: flutua linear infinite;
}

@keyframes flutua {
  0%   { transform: translate3d(0, 20px, 0) scale(.6); opacity: 0; }
  12%  { opacity: .75; }
  70%  { opacity: .5; }
  100% { transform: translate3d(14px, -120px, 0) scale(1.15); opacity: 0; }
}

.poeira span:nth-child(1)  { left:  6%; top: 72%; animation-duration: 15s; animation-delay: 0s; }
.poeira span:nth-child(2)  { left: 14%; top: 88%; animation-duration: 19s; animation-delay: 2s; }
.poeira span:nth-child(3)  { left: 23%; top: 64%; animation-duration: 13s; animation-delay: 5s; }
.poeira span:nth-child(4)  { left: 31%; top: 92%; animation-duration: 21s; animation-delay: 1s; }
.poeira span:nth-child(5)  { left: 39%; top: 70%; animation-duration: 17s; animation-delay: 7s; }
.poeira span:nth-child(6)  { left: 46%; top: 84%; animation-duration: 14s; animation-delay: 3s; }
.poeira span:nth-child(7)  { left: 54%; top: 60%; animation-duration: 20s; animation-delay: 6s; }
.poeira span:nth-child(8)  { left: 61%; top: 90%; animation-duration: 16s; animation-delay: 9s; }
.poeira span:nth-child(9)  { left: 68%; top: 75%; animation-duration: 18s; animation-delay: 4s; }
.poeira span:nth-child(10) { left: 75%; top: 86%; animation-duration: 12s; animation-delay: 8s; }
.poeira span:nth-child(11) { left: 82%; top: 66%; animation-duration: 22s; animation-delay: 2.5s; }
.poeira span:nth-child(12) { left: 89%; top: 94%; animation-duration: 15s; animation-delay: 11s; }
.poeira span:nth-child(13) { left: 95%; top: 78%; animation-duration: 19s; animation-delay: 5.5s; }
.poeira span:nth-child(14) { left: 10%; top: 55%; animation-duration: 24s; animation-delay: 10s; }
.poeira span:nth-child(15) { left: 35%; top: 50%; animation-duration: 23s; animation-delay: 13s; }
.poeira span:nth-child(16) { left: 58%; top: 46%; animation-duration: 26s; animation-delay: 7.5s; }
.poeira span:nth-child(17) { left: 72%; top: 52%; animation-duration: 21s; animation-delay: 15s; }
.poeira span:nth-child(18) { left: 88%; top: 44%; animation-duration: 25s; animation-delay: 12s; }

/* ============================================================
   CAPA
   ============================================================ */

.capa {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.33,1,.68,1), filter .9s ease;
}

.capa__interno {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: entraCapa 1.4s cubic-bezier(.22,1,.36,1) both;
}

@keyframes entraCapa {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.capa__sobre {
  margin: 0 0 18px;
  font-family: var(--mao);
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: rgba(226,196,138,.72);
}

.capa__titulo {
  margin: 0 0 clamp(26px, 7vw, 40px);
  font-weight: 300;
  line-height: 1;
  color: var(--papel-claro);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.capa__linha1 {
  font-size: clamp(2rem, 11vw, 2.9rem);
  letter-spacing: -.01em;
}

.capa__linha2 {
  font-family: var(--script);
  font-size: clamp(2.9rem, 16vw, 4.2rem);
  color: #e9c98f;
  line-height: 1.15;
  text-shadow: 0 2px 24px rgba(233,201,143,.28);
}

.capa__nota {
  margin: 20px 0 0;
  font-family: var(--mao);
  font-size: .95rem;
  color: rgba(246,241,231,.4);
}

/* ============================================================
   ENVELOPE
   ============================================================ */

.envelope {
  width: min(320px, 82vw);
  perspective: 1400px;
  perspective-origin: 50% 0%;
}

.envelope__cena {
  position: relative;
  width: 100%;
  aspect-ratio: 1.52 / 1;
  transform-style: preserve-3d;
  animation: respira 6s ease-in-out infinite;
}

@keyframes respira {
  0%, 100% { transform: translateY(0) rotateX(2deg); }
  50%      { transform: translateY(-9px) rotateX(2deg); }
}

.envelope__sombra {
  position: absolute;
  left: 8%; right: 8%;
  bottom: -11%;
  height: 16%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
  filter: blur(5px);
  animation: sombraPulsa 6s ease-in-out infinite;
}

@keyframes sombraPulsa {
  0%, 100% { opacity: .85; transform: scaleX(1); }
  50%      { opacity: .55; transform: scaleX(.9); }
}

.envelope__tras {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(160deg, #e3d4ba 0%, #d2bf9f 100%);
  box-shadow: inset 0 0 40px rgba(109,78,43,.25);
}

/* papel que sai de dentro */
.envelope__papel {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 7%;
  height: 86%;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(175deg, var(--papel-claro), #efe4d2);
  box-shadow: 0 -6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
  padding: 13% 11% 0;
  display: flex;
  flex-direction: column;
  gap: 9%;
  transform: translateY(0);
  transition: transform 1.15s cubic-bezier(.3,.9,.3,1);
  z-index: 2;
}

.envelope__papel i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(43,37,33,.26), rgba(43,37,33,.1));
}
.envelope__papel i:nth-child(2) { width: 88%; }
.envelope__papel i:nth-child(3) { width: 95%; }
.envelope__papel i:nth-child(4) { width: 72%; }
.envelope__papel i:nth-child(5) { width: 40%; }

.envelope__frente {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  z-index: 3;
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(0,0,0,0) 45%),
    linear-gradient(170deg, #ead9bf 0%, #dcc9a7 55%, #d0bb97 100%);
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.envelope__frente::before,
.envelope__frente::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(109,78,43,.08);
}
.envelope__frente::before { clip-path: polygon(0 0, 50% 46%, 50% 100%, 0 100%); }
.envelope__frente::after  { clip-path: polygon(100% 0, 50% 46%, 50% 100%, 100% 100%); background: rgba(109,78,43,.14); }

.envelope__aba {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 48%;
  z-index: 5;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 1.1s cubic-bezier(.5,.05,.3,1);
  transform-style: preserve-3d;
}

.envelope__aba-face {
  position: absolute;
  inset: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(185deg, #f0e0c7 0%, #e0cdab 60%, #d4bf9b 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18));
}

/* selo de cera */
.selo {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 21%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #c0453c 0%, var(--vinho) 45%, var(--vinho-escuro) 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.3),
    inset 0 -3px 7px rgba(0,0,0,.35),
    0 4px 12px rgba(0,0,0,.4);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
}

.selo::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed rgba(255,230,220,.35);
}

.selo__letra {
  font-family: var(--script);
  font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  color: #fbe6d9;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  line-height: 1;
  padding-bottom: .12em;
}

/* ============================================================
   BOTAO
   ============================================================ */

.botao {
  position: relative;
  margin-top: clamp(34px, 9vw, 48px);
  padding: 15px 34px;
  border: 1px solid rgba(233,201,143,.4);
  border-radius: 999px;
  background: rgba(233,201,143,.07);
  color: #f3e7d3;
  font-family: var(--serif);
  font-size: 1.08rem;
  letter-spacing: .06em;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
  box-shadow: 0 10px 30px -12px rgba(233,201,143,.35);
}

.botao:hover,
.botao:focus-visible {
  background: rgba(233,201,143,.14);
  border-color: rgba(233,201,143,.75);
  transform: translateY(-2px);
  outline: none;
}

.botao:active { transform: translateY(0) scale(.985); }

.botao__texto { position: relative; z-index: 2; }

.botao__brilho {
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  animation: varre 4.2s ease-in-out infinite;
}

@keyframes varre {
  0%, 55%  { left: -60%; }
  85%,100% { left: 120%; }
}

/* ============================================================
   ABRINDO
   ============================================================ */

body.abrindo .selo {
  transform: translate(-50%, -50%) scale(1.22) rotate(-9deg);
  opacity: 0;
}

body.abrindo .envelope__cena { animation-play-state: paused; }

body.abrindo .envelope__aba {
  transform: rotateX(-172deg);
  z-index: 1;
}

body.abrindo .envelope__papel {
  transform: translateY(-62%);
  transition-delay: .55s;
}

body.abrindo .botao,
body.abrindo .capa__nota,
body.abrindo .capa__sobre {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}

body.fase-carta .capa {
  opacity: 0;
  transform: translateY(-26px) scale(1.04);
  filter: blur(6px);
  pointer-events: none;
}

/* ============================================================
   CARTA
   ============================================================ */

.carta {
  position: relative;
  z-index: 20;
  display: none;
  padding: clamp(18px, 5vw, 56px) 16px calc(40px + env(safe-area-inset-bottom));
}

body.fase-carta .carta { display: block; }

.folha {
  position: relative;
  margin: 0 auto;
  max-width: 640px;
  padding: clamp(30px, 8vw, 68px) clamp(22px, 7vw, 62px) clamp(28px, 7vw, 54px);
  background: linear-gradient(180deg, var(--papel-claro) 0%, var(--papel) 48%, #efe5d5 100%);
  border-radius: 2px;
  box-shadow: var(--sombra-papel);
  animation: sobePapel 1.3s cubic-bezier(.22,1,.36,1) both;
}

@keyframes sobePapel {
  from { opacity: 0; transform: translateY(42px) rotateX(5deg); }
  to   { opacity: 1; transform: none; }
}

.folha::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ruido);
  opacity: .3;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}

.folha::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 70px rgba(146,110,62,.14),
    inset 0 0 0 1px rgba(146,110,62,.1);
}

.folha__dobra {
  position: absolute;
  left: 0; right: 0;
  top: 33%;
  height: 14px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(120,92,52,.1), rgba(255,255,255,.5), rgba(120,92,52,.07));
  opacity: .7;
}

.folha__topo {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(26px, 6vw, 40px);
}

.folha__data {
  margin: 0 0 14px;
  font-family: var(--mao);
  font-size: 1rem;
  color: var(--tinta-fraca);
  text-align: right;
}

.folha__para {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 1;
  color: var(--vinho);
}

.folha__corpo { position: relative; z-index: 1; }

.estrofe {
  margin: 0 0 clamp(26px, 6vw, 34px);
  font-size: clamp(1.14rem, 4.6vw, 1.42rem);
  line-height: 1.68;
  font-weight: 400;
  color: var(--tinta);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}

.estrofe.visivel { opacity: 1; transform: none; }

.estrofe em {
  font-style: italic;
  color: var(--tinta-fraca);
}

.estrofe--abre::first-letter {
  font-family: var(--serif);
  font-size: 3.1em;
  float: left;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--vinho);
}

.estrofe--destaque {
  font-style: italic;
  font-size: clamp(1.22rem, 5vw, 1.58rem);
  color: var(--vinho-escuro);
  padding-left: 18px;
  border-left: 2px solid rgba(142,47,42,.3);
}

.estrofe--refrao {
  font-size: clamp(1.2rem, 4.9vw, 1.52rem);
  letter-spacing: .004em;
}

.estrofe--tchau {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  font-family: var(--mao);
  margin-bottom: clamp(18px, 4vw, 24px);
}

.estrofe--tchau span {
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  color: var(--tinta-fraca);
  line-height: 1.1;
}
.estrofe--tchau span:nth-child(2) { opacity: .85; }
.estrofe--tchau span:nth-child(3) { opacity: .68; }
.estrofe--tchau span:nth-child(4) { opacity: .5;  }
.estrofe--tchau span:nth-child(5) { opacity: .34; }

.estrofe--final {
  font-size: clamp(1.25rem, 5.2vw, 1.6rem);
  font-style: italic;
  color: var(--vinho);
  margin-bottom: clamp(30px, 7vw, 40px);
}

.estrofe--assinatura {
  margin-bottom: 0;
  text-align: right;
}

.assinatura {
  display: inline-block;
  font-family: var(--script);
  font-size: clamp(2.6rem, 12vw, 3.6rem);
  color: var(--vinho);
  line-height: 1;
  transform: rotate(-4deg);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.ornamento {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(30px, 8vw, 46px) 0 clamp(30px, 8vw, 44px);
  color: var(--ouro);
  opacity: 0;
  transform: scale(.9);
  transition: opacity 1s ease .1s, transform 1s ease .1s;
}

.ornamento.visivel { opacity: .75; transform: none; }

.ornamento span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,141,87,.55), transparent);
}

.ornamento i { font-style: normal; font-size: 1rem; }

/* ============================================================
   PE DA CARTA
   ============================================================ */

.folha__pe {
  position: relative;
  z-index: 1;
  margin-top: clamp(44px, 11vw, 64px);
  padding-top: clamp(26px, 6vw, 34px);
  border-top: 1px solid rgba(146,110,62,.22);
  text-align: center;
}

/* player do YouTube: existe, toca, mas nao aparece.

   Nao usa display:none nem joga pra fora da viewport: o Safari pausa
   midia de iframe escondido ou fora da tela. Entao ele fica DENTRO da
   tela, num quadradinho de 1px no canto, com o iframe grande recortado
   por overflow. Tecnicamente visivel pro navegador, invisivel pro olho. */
.player-oculto {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: .01;
  pointer-events: none;
  z-index: 0;
}

.player-oculto iframe,
.player-oculto > div {
  width: 320px;
  height: 180px;
  border: 0;
}

.refazer {
  margin-top: clamp(26px, 6vw, 34px);
  padding: 11px 22px;
  border: 1px solid rgba(146,110,62,.35);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-fraca);
  font-family: var(--mao);
  font-size: 1.02rem;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  -webkit-tap-highlight-color: transparent;
}

.refazer:hover,
.refazer:focus-visible {
  background: rgba(142,47,42,.07);
  border-color: rgba(142,47,42,.45);
  color: var(--vinho);
  outline: none;
}

/* ============================================================
   DICA DE SCROLL + BOTAO DE SOM
   ============================================================ */

.dica-scroll {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(23,19,16,.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(233,201,143,.22);
  color: rgba(243,231,211,.82);
  font-family: var(--mao);
  font-size: .95rem;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .6s ease;
  animation: pulaDica 2.4s ease-in-out infinite;
}

.dica-scroll.visivel { opacity: 1; }

@keyframes pulaDica {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 5px; }
}

.som {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  z-index: 50;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(233,201,143,.3);
  background: rgba(23,19,16,.62);
  backdrop-filter: blur(8px);
  color: rgba(243,231,211,.9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s ease, background .3s ease, opacity .5s ease;
  animation: apareceSom .8s ease .4s both;
}

@keyframes apareceSom {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

.som:hover { background: rgba(43,35,28,.8); transform: scale(1.06); }
.som[hidden] { display: none; }

.som .som__off { display: none; }
.som.mudo .som__on  { display: none; }
.som.mudo .som__off { display: block; }

/* se o navegador barrar o som, o botao chama atencao
   discretamente pra ela poder ligar a musica */
.som.mudo {
  color: rgba(243,231,211,.55);
  border-color: rgba(233,201,143,.55);
  animation: chamaSom 2.2s ease-in-out infinite;
}

@keyframes chamaSom {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233,201,143,.3); }
  50%      { box-shadow: 0 0 0 9px rgba(233,201,143,0); }
}

/* ============================================================
   RESPEITO A PREFERENCIA DE MOVIMENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .18s !important;
  }
  .estrofe { opacity: 1; transform: none; }
  .ornamento { opacity: .75; transform: none; }
}

/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 760px) {
  .capa__interno { max-width: 520px; }
  .folha__dobra { top: 30%; }
}