/* ============================================================
   pdsphotos by ana luiza — site
   uma carta antiga · vintage · bridgerton wine
   ============================================================ */
@import url("design-system/colors_and_type.css");
@import url("https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Pinyon+Script&display=swap");

:root {
  --font-script: "Petit Formal Script", "Pinyon Script", cursive;
  --rose-soft:   #e6c4c4;
  --rose-mist:   #f0d6d6;
  --paper-aged:  #f3ead9;
  --gold-faint:  #b58a4a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--paper-aged);
  background-image:
    radial-gradient(at 0% 0%, rgba(116, 8, 8, 0.05) 0%, transparent 55%),
    radial-gradient(at 100% 100%, rgba(72, 7, 7, 0.06) 0%, transparent 55%),
    radial-gradient(at 50% 50%, var(--cream-100) 0%, var(--paper-aged) 100%);
  color: var(--ink);
  overflow-x: hidden;
  position: relative;
}
body.locked { overflow: hidden; }

/* sutil grão de papel sobre tudo (não cobre fotos pq usa multiply baixo) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.18;
}

img { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: 0; cursor: pointer; color: inherit; }

/* ----- ornamentos compartilhados ----- */
.section-no {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--wine-100);
}
.section-no.light { color: var(--cream-100); opacity: 0.7; }

.kicker-script {
  font-family: var(--font-script);
  font-size: 26px; line-height: 1; color: var(--wine-100);
  letter-spacing: 0;
}
.kicker-script.light { color: var(--rose-soft); }

.signature {
  font-family: var(--font-script);
  color: var(--wine-100);
  letter-spacing: 0;
  font-size: 44px; line-height: 1;
}
.signature.small { font-size: 22px; }
.signature.big { font-size: 64px; }
.signature.huge { font-size: clamp(72px, 9vw, 120px); }

.section-divider {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 64px;
  max-width: 720px; margin: 0 auto;
}
.section-divider .line { flex: 1; height: 1px; background: var(--wine-deep); opacity: 0.25; }
.section-divider .orn { color: var(--wine-100); font-size: 18px; }

.section-head {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 56px;
}

/* ============================================================
   CORTINA DE ABERTURA
   ============================================================ */
.curtain {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper-aged);
  background-image:
    radial-gradient(at 50% 30%, var(--cream-100) 0%, var(--paper-aged) 70%);
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
  transition: opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
}
.curtain.out { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.curtain::before {
  /* moldura interna do papel */
  content: ""; position: absolute; inset: 32px;
  border: 1px solid rgba(116, 8, 8, 0.18);
  pointer-events: none;
}
.curtain::after {
  /* grão extra na cortina */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.45'/></svg>");
  mix-blend-mode: multiply; opacity: 0.25;
}
.curtain-corner {
  position: absolute; top: 56px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--wine-deep); opacity: 0.6; z-index: 2;
}
.curtain-corner.left { left: 64px; }
.curtain-corner.right { right: 64px; }
.curtain-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; width: 100%;
}
.curtain-stack {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}

/* selo de cera com retrato */
.seal {
  width: 148px; height: 148px; border-radius: 50%;
  background: var(--wine-deep);
  position: relative; overflow: hidden;
  box-shadow:
    0 18px 40px -12px rgba(72, 7, 7, 0.5),
    inset 0 0 24px rgba(26, 4, 4, 0.35);
}
.seal img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 22%;
  filter: brightness(0.95) saturate(0.92) sepia(0.06);
}
.seal::before {
  content: ""; position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(116, 8, 8, 0.45);
  z-index: 2;
}
.seal::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(245, 239, 230, 0.55);
  box-shadow: inset 0 0 16px rgba(26, 4, 4, 0.35);
  z-index: 2;
}

.curtain-from {
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; color: var(--wine-deep); margin-top: 8px;
}
.curtain-from .curtain-name {
  font-family: var(--font-script); font-style: normal;
  font-size: 36px; color: var(--wine-100);
  margin-left: 6px;
}
.curtain-to {
  font-family: var(--font-serif); font-style: italic;
  font-size: 22px; color: var(--wine-deep); opacity: 0.85;
}
.curtain-rule {
  display: flex; align-items: center; gap: 14px;
  width: 240px;
}
.curtain-rule .line { flex: 1; height: 1px; background: var(--wine-deep); opacity: 0.3; }
.curtain-rule .orn { color: var(--wine-100); font-size: 14px; }

.curtain-open {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
  padding: 16px 36px; margin-top: 8px;
  background: transparent; color: var(--wine-deep);
  border: 1px solid var(--wine-deep);
  cursor: pointer;
  transition: all .42s var(--ease-soft);
  display: inline-flex; align-items: center; gap: 12px;
}
.curtain-open:hover { background: var(--wine-deep); color: var(--cream-100); transform: translateY(-2px); }
.curtain-open .arrow { transition: transform .32s var(--ease-soft); }
.curtain-open:hover .arrow { transform: translateX(4px); }

.curtain-hint {
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px; color: var(--ash);
  max-width: 380px; line-height: 1.5;
}
.curtain-hint strong { font-style: italic; color: var(--wine-deep); font-weight: 400; }

/* ============================================================
   PLAYER FLUTUANTE DE MÚSICA
   ============================================================ */
.music {
  position: fixed; bottom: 24px; left: 24px; z-index: 80;
  background: var(--cream-100);
  border: 1px solid rgba(116, 8, 8, 0.25);
  padding: 14px 16px 12px;
  width: 280px;
  box-shadow: 0 18px 40px -12px rgba(72,7,7,0.30);
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: all .8s var(--ease-soft);
}
.music.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.music.mini { padding: 6px 10px; width: 64px; }
.music.mini .music-cap, .music.mini .music-body, .music.mini .music-controls { display: none; }
.music::before {
  /* moldura interna fininha estilo carta */
  content: ""; position: absolute; inset: 4px;
  border: 1px solid rgba(116, 8, 8, 0.10);
  pointer-events: none;
}
.music-toggle {
  position: absolute; top: 4px; right: 6px;
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1; padding: 4px 8px;
  color: var(--wine-deep);
  z-index: 2;
}
.music-toggle:hover { color: var(--wine-100); }
.music-cap {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 9px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--wine-deep); margin-bottom: 10px;
}
.music-cap .orn { color: var(--wine-100); font-size: 10px; letter-spacing: 0; }

.music-body {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.music-vinyl {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--wine-100) 0%, var(--wine-100) 22%, var(--wine-deep) 24%, var(--ink) 100%);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.4), 0 2px 4px rgba(72,7,7,0.3);
}
.music-vinyl::before {
  /* sulcos do disco */
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 2px, rgba(245,239,230,0.04) 2px 3px);
}
.vinyl-label {
  position: relative; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream-100); color: var(--wine-100);
  font-family: var(--font-display); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}
.music.playing .music-vinyl { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.music-info { flex: 1; min-width: 0; }
.music-track {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; color: var(--wine-deep); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-by {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ash); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.music-controls {
  display: flex; gap: 8px; padding-top: 10px;
  border-top: 1px solid rgba(116, 8, 8, 0.12);
}
.music-btn {
  flex: 1; padding: 8px;
  font-family: var(--font-sans); font-size: 14px;
  color: var(--wine-deep);
  border: 1px solid rgba(116, 8, 8, 0.15);
  background: transparent;
  transition: all .32s var(--ease-soft);
}
.music-btn:hover { background: var(--wine-deep); color: var(--cream-100); border-color: var(--wine-deep); }
.music-btn:active { transform: translateY(1px); }
audio { display: none; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px;
  background: rgba(243, 234, 217, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.mark {
  font-family: var(--font-display); font-size: 26px; letter-spacing: 0.04em;
  color: var(--wine-deep); text-decoration: none; border: 0;
}
.mark .dot { color: var(--wine-100); }
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--slate); text-decoration: none; border: 0;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: all .32s var(--ease-soft);
}
.nav-links a:hover,
.nav-links a.active { color: var(--wine-deep); border-bottom-color: var(--wine-deep); }
.nav-cta {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 12px 22px; background: var(--wine-deep); color: var(--cream-100);
  text-decoration: none; border: 0;
  transition: background .32s var(--ease-soft);
}
.nav-cta:hover { background: var(--wine-100); }

/* ============================================================
   HERO — capa da carta (logo, sem foto)
   ============================================================ */
.hero-letter {
  position: relative;
  background: var(--cream-100);
  background-image:
    radial-gradient(at 50% 30%, var(--paper-warm) 0%, var(--paper-aged) 80%);
  color: var(--wine-deep);
  min-height: 78vh;
  padding: 56px 64px 36px;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
/* moldura interna estilo papel timbrado */
.hero-letter::before {
  content: ""; position: absolute; inset: 28px;
  border: 1px solid rgba(116, 8, 8, 0.16);
  pointer-events: none;
}
.hero-letter::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: multiply; opacity: 0.22;
}
.letter-corner {
  position: absolute; top: 56px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--wine-deep); opacity: 0.6; z-index: 2;
}
.letter-corner.left { left: 64px; }
.letter-corner.right { right: 64px; }

.letter-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 18px; margin: auto 0;
  max-width: 1100px;
}
.ornament-top { color: var(--wine-100); font-size: 24px; opacity: 0.7; }
.salutation {
  font-family: var(--font-script);
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--wine-deep);
  margin-bottom: -8px;
}
.wordmark h1 {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 220px);
  line-height: 0.92; letter-spacing: 0.04em;
  color: var(--wine-100); font-weight: 400;
}
.wordmark .dot { color: var(--wine-deep); }
.strapline em {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.4vw, 32px); color: var(--wine-deep);
  font-weight: 400;
}
.rule-orn { display: flex; align-items: center; gap: 18px; width: 80%; max-width: 360px; margin: 8px auto; }
.rule-orn .line { flex: 1; height: 1px; background: var(--wine-deep); opacity: 0.3; }
.rule-orn .orn { color: var(--wine-100); font-size: 14px; }

.signature-line {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: var(--wine-deep);
  display: flex; align-items: baseline; gap: 8px;
}
.signature-line .signature { font-size: 36px; }

.hero-niche {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--wine-deep); opacity: 0.55; margin-top: 4px;
}

.hero-meta.bottom {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--wine-deep); opacity: 0.65;
  width: 100%;
  margin-top: 32px;
}
.hero-meta.bottom .rule { flex: 1; height: 1px; background: currentColor; opacity: 0.5; max-width: 220px; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  position: relative;
  padding: 144px 64px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center;
  background: var(--cream-100);
}
.manifesto-line {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(22px, 2.3vw, 32px); line-height: 1.5;
  color: var(--wine-deep); max-width: 880px;
}
.manifesto-line em { color: var(--wine-100); font-style: italic; }
.manifesto-by {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: var(--ash);
  display: flex; align-items: baseline; gap: 8px;
}

/* ============================================================
   ENSAIOS
   ============================================================ */
.ensaios { padding: 96px 64px; background: var(--paper-warm); position: relative; }
.section-head h2 {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  color: var(--wine-deep);
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pill {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--wine-deep); color: var(--wine-deep);
  background: transparent; cursor: pointer;
  transition: all .32s var(--ease-soft);
}
.pill:hover { background: var(--wine-deep); color: var(--cream-100); }
.pill.active { background: var(--wine-100); color: var(--cream-100); border-color: var(--wine-100); }

.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.card {
  display: block; text-decoration: none; border: 0;
  color: inherit;
  transition: opacity .32s var(--ease-soft);
}
.card.hidden { display: none; }
.card .frame {
  aspect-ratio: 3/4; overflow: hidden; background: var(--wine-deep);
  border: 1px solid rgba(116, 8, 8, 0.12);
  position: relative;
}
.card .frame::after {
  /* leve sépia para a textura vintage da carta */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(72,7,7,0.05), rgba(116,8,8,0.06));
  mix-blend-mode: multiply;
  transition: opacity .32s var(--ease-soft);
}
.card .frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.93) saturate(0.88) sepia(0.06);
  transition: transform 1.2s var(--ease-soft), filter .6s var(--ease-soft);
}
.card:hover .frame img { transform: scale(1.04); filter: brightness(1) saturate(1) sepia(0); }
.card:hover .frame::after { opacity: 0; }

/* ----- ver mais (galeria colapsada) ----- */
.ver-mais-row {
  display: flex; justify-content: center;
  padding-top: 56px;
}
.ver-mais-row.hidden { display: none; }
.ver-mais {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
  padding: 16px 36px;
  background: transparent; color: var(--wine-deep);
  border: 1px solid var(--wine-deep);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 14px;
  transition: all .42s var(--ease-soft);
}
.ver-mais:hover { background: var(--wine-deep); color: var(--cream-100); transform: translateY(-2px); }
.ver-mais .arrow { transition: transform .32s var(--ease-soft); display: inline-block; }
.ver-mais:hover .arrow { transform: translateY(3px); }

/* cards colapsados (escondidos até "ver mais") */
.card.collapsed { display: none; }

.cta-row { display: flex; justify-content: center; padding-top: 80px; }
.ghost {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--wine-deep); border: 0; border-bottom: 1px solid currentColor;
  padding-bottom: 4px; cursor: pointer; background: 0; text-decoration: none;
  transition: opacity .32s var(--ease-soft);
}
.ghost:hover { opacity: 0.6; }

/* ============================================================
   SOBRE
   ============================================================ */
.sobre { padding: 144px 64px; background: var(--cream-100); position: relative; }
.sobre-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 96px;
  align-items: center; max-width: 1280px; margin: 0 auto;
}
.sobre-photos { display: flex; flex-direction: column; gap: 12px; }
.sobre-img-big { aspect-ratio: 4/5; overflow: hidden; background: var(--wine-deep); border: 1px solid rgba(116, 8, 8, 0.12); }
.sobre-img-big img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.92) saturate(0.9) sepia(0.05);
  transition: transform 1.2s var(--ease-soft);
}
.sobre-img-big:hover img { transform: scale(1.03); }
.sobre-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sobre-img-sm { aspect-ratio: 1/1; overflow: hidden; background: var(--wine-deep); border: 1px solid rgba(116, 8, 8, 0.12); }
.sobre-img-sm img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.9) saturate(0.88) sepia(0.05);
  transition: transform 1.2s var(--ease-soft);
}
.sobre-img-sm:hover img { transform: scale(1.04); }

.sobre-text { display: flex; flex-direction: column; gap: 18px; }
.sobre-text h2 {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  color: var(--wine-deep);
  margin-top: 6px;
}
.sobre-text p { font-size: 16px; line-height: 1.8; color: var(--slate); max-width: 52ch; }

/* ============================================================
   DEPOIMENTO
   ============================================================ */
.depo {
  padding: 160px 64px;
  background: var(--wine-deep); color: var(--cream-100);
  box-shadow: var(--shadow-inset);
  position: relative;
}
.depo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay; opacity: 0.18;
}
.depo-inner { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; position: relative; z-index: 1; }
.depo blockquote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(24px, 2.6vw, 36px); line-height: 1.45;
  color: var(--cream-100); position: relative; padding-left: 56px;
}
.depo .quot {
  position: absolute; left: 0; top: -28px;
  font-family: var(--font-display); font-size: 120px;
  color: var(--rose-soft); line-height: 1;
  font-style: normal;
}
.depo-by {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream-100); opacity: 0.75;
}

/* ============================================================
   CONTATO
   ============================================================ */
.contato { padding: 144px 64px; background: var(--cream-100); position: relative; }
.contato-single {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  text-align: center; align-items: center;
}
.contato-single h2 {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(40px, 5.6vw, 80px);
  color: var(--wine-deep);
  margin-top: 6px;
}
.contato-single p {
  font-size: 16px; line-height: 1.8; color: var(--slate); max-width: 52ch;
}
.contact-meta {
  display: flex; gap: 56px; margin-top: 20px; padding-top: 24px;
  border-top: 1px solid var(--rule); width: 100%; justify-content: center;
}
.contact-meta > div { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.contact-meta .cap {
  font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ash);
}
.contact-meta .val {
  font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--wine-deep);
}
.big-cta {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 22px 44px; margin-top: 28px;
  background: var(--wine-100); color: var(--cream-100);
  font-family: var(--font-sans); font-weight: 500;
  font-size: 12px; letter-spacing: 0.36em; text-transform: uppercase;
  text-decoration: none; border: 0;
  transition: background .32s var(--ease-soft), transform .32s var(--ease-soft);
}
.big-cta:hover { background: var(--wine-deep); transform: translateY(-2px); }
.big-cta .arrow {
  font-family: var(--font-sans); font-size: 16px; letter-spacing: 0;
  transition: transform .32s var(--ease-soft);
}
.big-cta:hover .arrow { transform: translateX(4px); }
.cta-foot {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; color: var(--ash); margin-top: 6px;
}

/* fechamento da carta */
.closing {
  margin-top: 64px; padding-top: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%;
}
.closing-rule { display: flex; align-items: center; gap: 18px; width: 80%; max-width: 380px; }
.closing-rule .line { flex: 1; height: 1px; background: var(--wine-deep); opacity: 0.3; }
.closing-rule .orn { color: var(--wine-100); font-size: 16px; }
.closing-text {
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; color: var(--wine-deep); margin-top: 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 56px 64px;
  background: var(--ink); color: var(--cream-100);
  display: flex; flex-direction: column; gap: 32px;
  position: relative;
}
.footer .row { display: flex; justify-content: space-between; align-items: center; }
.footer .row.small {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-100); opacity: 0.55;
  padding-top: 24px; border-top: 1px solid rgba(245,239,230,0.1);
}
.footer .mark {
  font-family: var(--font-display); font-size: 28px; letter-spacing: 0.04em;
  color: var(--cream-100);
}
.footer .mark .dot { color: var(--rose-soft); }
.footer .links { display: flex; gap: 28px; }
.footer .links a {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-100); opacity: 0.8; border: 0; cursor: pointer; text-decoration: none;
  transition: opacity .32s var(--ease-soft), color .32s var(--ease-soft);
}
.footer .links a:hover { opacity: 1; color: var(--rose-soft); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .nav { padding: 18px 24px; }
  .nav-links { display: none; }
  .hero-letter { padding: 40px 24px 24px; min-height: 70vh; }
  .hero-letter::before { inset: 16px; }
  .letter-corner.left { left: 24px; top: 36px; }
  .letter-corner.right { right: 24px; top: 36px; }
  .manifesto, .ensaios, .sobre, .depo, .contato { padding-left: 24px; padding-right: 24px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sobre-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-meta { flex-direction: column; gap: 18px; }
  .footer { padding: 40px 24px; }
  .footer .row { flex-direction: column; gap: 16px; align-items: flex-start; }
  .music { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .curtain-corner.left { left: 32px; top: 40px; }
  .curtain-corner.right { right: 32px; top: 40px; }
  .curtain { align-items: flex-start; padding-top: 110px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .manifesto { padding: 96px 24px; }
  .sobre, .depo, .contato { padding-top: 96px; padding-bottom: 96px; }
  .signature.huge { font-size: clamp(56px, 14vw, 88px); }
  .curtain { padding-top: 96px; }
  .curtain-corner { font-size: 9px; }
  .curtain-corner.left { left: 24px; top: 32px; }
  .curtain-corner.right { right: 24px; top: 32px; }
}

/* ============================================================
   ANIMAÇÕES — uma carta sendo aberta com calma
   tudo cubic-bezier(.32,.72,.30,1) · sem bounces · sem brilhos
   ============================================================ */

/* respeito ao usuário */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-up, .reveal-left, .reveal-right,
  .reveal-script, .reveal-stagger > *, .word { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ============= POEIRA & LUZ AMBIENTE ============= */

/* spotlight quentinho seguindo o cursor — só desktop */
.spotlight {
  position: fixed; top: 0; left: 0;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(116, 8, 8, 0.10) 0%,
    rgba(116, 8, 8, 0.05) 28%,
    transparent 62%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
  will-change: transform, opacity;
}
.spotlight.active { opacity: 1; }
@media (hover: none) { .spotlight { display: none; } }

/* poeira de papel velho — partículas drifting */
.dust { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.dust span {
  position: absolute; display: block;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--wine-100);
  filter: blur(1.2px);
  opacity: 0;
  animation: dustDrift var(--dust-dur, 28s) linear var(--dust-delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes dustDrift {
  0%   { transform: translate3d(0, 110vh, 0); opacity: 0; }
  10%  { opacity: 0.22; }
  50%  { transform: translate3d(var(--dust-drift, 30px), 50vh, 0); }
  90%  { opacity: 0.18; }
  100% { transform: translate3d(calc(var(--dust-drift, 30px) * -0.4), -10vh, 0); opacity: 0; }
}

/* ornamentos respiram */
.orn, .ornament-top {
  animation: ornBreathe 6s var(--ease-soft) infinite;
  will-change: opacity, transform;
}
@keyframes ornBreathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}

/* ============= CORTINA — coreografia de entrada ============= */

.curtain-stack > * {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 1.4s var(--ease-soft) forwards;
}
.curtain-stack > .seal           { animation: sealStamp 1.6s var(--ease-soft) 0.15s forwards; }
.curtain-stack > .curtain-from   { animation-delay: 0.85s; }
.curtain-stack > .curtain-to     { animation-delay: 1.20s; }
.curtain-stack > .curtain-rule   { animation: ruleDraw 1.4s var(--ease-soft) 1.50s forwards; }
.curtain-stack > .curtain-open   {
  animation:
    rise 1.4s var(--ease-soft) 1.85s forwards,
    openPulse 4s var(--ease-soft) 4s infinite;
}
.curtain-stack > .curtain-hint   { animation-delay: 2.10s; }

/* selo "carimba" e depois pulsa devagar */
.seal {
  animation:
    sealStamp 1.6s var(--ease-soft) 0.15s both,
    sealPulse 7s var(--ease-soft) 2.0s infinite !important;
}
@keyframes sealStamp {
  0%   { opacity: 0; transform: scale(2.2) rotate(-6deg); filter: blur(6px); }
  55%  { opacity: 1; transform: scale(0.96) rotate(0); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
@keyframes sealPulse {
  0%, 100% {
    box-shadow:
      0 18px 40px -12px rgba(72, 7, 7, 0.5),
      inset 0 0 24px rgba(26, 4, 4, 0.35);
  }
  50% {
    box-shadow:
      0 26px 56px -12px rgba(72, 7, 7, 0.62),
      inset 0 0 30px rgba(26, 4, 4, 0.45);
  }
}

/* botão "abrir a carta" — pulso é declarado no stagger acima junto do rise */
@keyframes openPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(116, 8, 8, 0); }
  50%      { box-shadow: 0 0 0 14px rgba(116, 8, 8, 0); border-color: var(--wine-100); }
}

/* ============= HERO — carta se desdobra ============= */

.hero-letter .letter-corner,
.hero-letter .ornament-top,
.hero-letter .salutation,
.hero-letter .wordmark,
.hero-letter .strapline,
.hero-letter .rule-orn,
.hero-letter .signature-line,
.hero-letter .hero-niche,
.hero-letter .hero-meta {
  opacity: 0;
  transform: translateY(20px);
}
.hero-letter.is-revealed .letter-corner.left  { animation: rise 1.4s var(--ease-soft) 0.20s forwards; }
.hero-letter.is-revealed .letter-corner.right { animation: rise 1.4s var(--ease-soft) 0.30s forwards; }
.hero-letter.is-revealed .ornament-top        { animation: rise 1.2s var(--ease-soft) 0.40s forwards; }
.hero-letter.is-revealed .salutation          { animation: handwrite 1.8s var(--ease-soft) 0.65s forwards; }
.hero-letter.is-revealed .wordmark            { animation: dropIn 1.6s var(--ease-soft) 1.05s forwards; }
.hero-letter.is-revealed .strapline           { animation: rise 1.2s var(--ease-soft) 1.55s forwards; }
.hero-letter.is-revealed .rule-orn            { animation: ruleDraw 1.4s var(--ease-soft) 1.80s forwards; }
.hero-letter.is-revealed .signature-line      { animation: rise 1.2s var(--ease-soft) 2.05s forwards; }
.hero-letter.is-revealed .hero-niche          { animation: rise 1.2s var(--ease-soft) 2.30s forwards; }
.hero-letter.is-revealed .hero-meta           { animation: rise 1.2s var(--ease-soft) 2.55s forwards; }

/* o pingo do wordmark "carimba" depois */
.hero-letter.is-revealed .wordmark .dot {
  display: inline-block;
  animation: dotStamp 0.7s var(--ease-soft) 2.10s both;
  transform-origin: center;
}
@keyframes dotStamp {
  0%   { opacity: 0; transform: scale(2.4) translateY(-4px); }
  60%  { opacity: 1; transform: scale(0.9) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* a setinha "↓" balança devagar — convidando o scroll */
.hero-meta.bottom > span:last-child {
  display: inline-block;
  animation: arrowBob 3.6s var(--ease-soft) infinite;
  animation-delay: 4s;
}
@keyframes arrowBob {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ============= KEYFRAMES BASE ============= */

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes riseSoft {
  from { opacity: 0; transform: translateY(28px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes handwrite {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(8px); }
  18%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@keyframes ruleDraw {
  0%   { opacity: 0; transform: scaleX(0.05); }
  100% { opacity: 1; transform: scaleX(1); }
}
.rule-orn, .curtain-rule, .closing-rule, .section-divider {
  transform-origin: center;
}
@keyframes dropIn {
  0%   { opacity: 0; transform: translateY(-36px) scale(1.04); letter-spacing: 0.18em; filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.04em; filter: blur(0); }
}

/* ============= REVEAL ON SCROLL ============= */

.reveal,
.section-head > *,
.manifesto > *:not(.section-divider),
.depo-inner > *,
.contato-single > *,
.closing > *,
.footer .row {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.2s var(--ease-soft),
    transform 1.2s var(--ease-soft),
    filter 1.2s var(--ease-soft);
  will-change: opacity, transform;
}

.in-view.reveal,
.in-view .section-head > *,
.in-view.manifesto > *:not(.section-divider),
.in-view .depo-inner > *,
.in-view .contato-single > *,
.in-view.closing > *,
.in-view.footer .row {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

/* stagger por posição filho */
.section-head > *:nth-child(1) { transition-delay: 0.05s; }
.section-head > *:nth-child(2) { transition-delay: 0.20s; }
.section-head > *:nth-child(3) { transition-delay: 0.35s; }
.section-head > *:nth-child(4) { transition-delay: 0.55s; }

.manifesto > *:nth-child(1) { transition-delay: 0.05s; }
.manifesto > *:nth-child(2) { transition-delay: 0.20s; }
.manifesto > *:nth-child(3) { transition-delay: 0.35s; }
.manifesto > *:nth-child(4) { transition-delay: 0.55s; }

.depo-inner > *:nth-child(1) { transition-delay: 0.05s; }
.depo-inner > *:nth-child(2) { transition-delay: 0.20s; }
.depo-inner > *:nth-child(3) { transition-delay: 0.40s; }
.depo-inner > *:nth-child(4) { transition-delay: 0.85s; }

.contato-single > *:nth-child(1) { transition-delay: 0.05s; }
.contato-single > *:nth-child(2) { transition-delay: 0.18s; }
.contato-single > *:nth-child(3) { transition-delay: 0.32s; }
.contato-single > *:nth-child(4) { transition-delay: 0.46s; }
.contato-single > *:nth-child(5) { transition-delay: 0.62s; }
.contato-single > *:nth-child(6) { transition-delay: 0.80s; }
.contato-single > *:nth-child(7) { transition-delay: 1.00s; }
.contato-single > *:nth-child(8) { transition-delay: 1.20s; }

.closing > *:nth-child(1) { transition-delay: 0.05s; }
.closing > *:nth-child(2) { transition-delay: 0.25s; }
.closing > *:nth-child(3) { transition-delay: 0.45s; }

/* aspas gigantes do depo entram com escala */
.depo .quot {
  transform: translateY(-24px) scale(0.5) rotate(-12deg);
  opacity: 0;
  transform-origin: center;
  transition: opacity 1.4s var(--ease-soft), transform 1.4s var(--ease-soft);
}
.in-view .depo .quot {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
  transition-delay: 0.10s;
}

/* signature: caligrafia revelando da esquerda */
.signature {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: clip-path 2.4s var(--ease-soft), opacity 0.6s var(--ease-soft);
}
.in-view .signature,
.signature.in-view {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
/* a assinatura do hero é parte da coreografia do is-revealed — sem clip-path autônomo */
.signature-line .signature,
.sobre .signature {
  clip-path: none;
  opacity: 1;
}

/* ============= MANIFESTO — palavra por palavra ============= */
.manifesto-line .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition:
    opacity 1.0s var(--ease-soft),
    transform 1.0s var(--ease-soft),
    filter 1.0s var(--ease-soft);
}
.in-view.manifesto .manifesto-line .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ============= ENSAIOS — grade tipo polaroides ============= */

.grid .card {
  opacity: 0;
  transform:
    translateY(40px)
    rotate(var(--card-tilt, 0deg))
    scale(0.96);
  transition:
    opacity 1.1s var(--ease-soft),
    transform 1.1s var(--ease-soft),
    filter 0.5s var(--ease-soft);
  transition-delay: var(--card-delay, 0s);
  will-change: opacity, transform;
}
.grid .card.in-view {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.grid .card:hover {
  transform: translateY(-4px) rotate(0) scale(1.01);
  z-index: 2;
}

/* filtro: cartões saindo */
.grid .card.fade-out {
  opacity: 0 !important;
  transform: translateY(8px) scale(0.98) !important;
  transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft);
}

/* ============= NAV — desce no fim da cortina ============= */
.nav {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 1.0s var(--ease-soft) 0.4s, transform 1.0s var(--ease-soft) 0.4s;
}
body:not(.locked) .nav { opacity: 1; transform: translateY(0); }

.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px;
  height: 1px; background: var(--wine-deep);
  transition: right 0.5s var(--ease-soft);
}
.nav-links a { position: relative; border-bottom: 0 !important; }
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }

.nav-cta {
  position: relative; overflow: hidden;
}
.nav-cta::before {
  content: ""; position: absolute; inset: 0;
  background: var(--wine-100);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-soft);
  z-index: 0;
}
.nav-cta:hover::before { transform: translateY(0); }
.nav-cta { background: var(--wine-deep); }
.nav-cta > * { position: relative; z-index: 1; }

/* ============= BIG CTA — pulso quente ============= */
.big-cta {
  position: relative; overflow: hidden; isolation: isolate;
}
.big-cta::after {
  content: ""; position: absolute; inset: -2px;
  background: radial-gradient(closest-side, rgba(245,239,230,0.18) 0%, transparent 70%);
  transform: scale(0.6);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
  pointer-events: none;
}
.big-cta:hover::after { opacity: 1; transform: scale(1); }

.in-view .big-cta {
  animation: ctaBreathe 5s var(--ease-soft) 1.6s infinite;
}
@keyframes ctaBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(116, 8, 8, 0); }
  50%      { box-shadow: 0 18px 36px -14px rgba(116, 8, 8, 0.55); }
}

/* ============= MUSIC PLAYER ============= */
.music.show { animation: musicSlide 1.2s var(--ease-soft) both; }
@keyframes musicSlide {
  from { opacity: 0; transform: translateY(40px) translateX(-12px); }
  to   { opacity: 1; transform: translateY(0) translateX(0); }
}

/* ============= FOOTER ============= */
.footer .mark { transition: letter-spacing 0.6s var(--ease-soft); }
.footer:hover .mark { letter-spacing: 0.08em; }

/* ============= SECTION DIVIDER — desenha ao entrar ============= */
.section-divider .line {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.2s var(--ease-soft);
}
.section-divider.in-view .line { transform: scaleX(1); }
.section-divider .orn {
  opacity: 0;
  transform: scale(0.4) rotate(-12deg);
  transition: opacity 0.8s var(--ease-soft) 0.4s, transform 0.8s var(--ease-soft) 0.4s;
}
.section-divider.in-view .orn { opacity: 0.95; transform: scale(1) rotate(0); }

/* ============= IMAGENS — desenvolvendo como polaroide ============= */
.frame img {
  transition:
    transform 1.4s var(--ease-soft),
    filter 1.6s var(--ease-soft),
    opacity 1.4s var(--ease-soft);
}
.card:not(.in-view) .frame img {
  filter: brightness(0.5) saturate(0) sepia(0.4) blur(2px);
  opacity: 0.7;
}

/* selo na cortina inicia escondido para o stamp funcionar */
.curtain-stack .seal { opacity: 0; }