/* =============================================================
   Mariana · XV — A Janela de Van Gogh
   Paleta extraída do quadro. Sem variantes inventadas.
   ============================================================= */

:root {
  --noite-profunda:  #0a1530;
  --cobalto:         #1e3a8a;
  --ultramar:        #2c4f9e;
  --cipreste:        #1c2515;
  --vila:            #2a3658;
  --estrela:         #e8d77a;
  --lua:             #f0c14b;
  --branco-tinta:    #e8dab2;
  --papel:           #e8dcc4;
  --papel-sombra:    #c4b598;
  --tinta:           #2a1810;
  --cera:            #8b1a1a;
  --cera-highlight:  #c8302e;

  --bg-deep: #050810;

  --f-script: "Pinyon Script", cursive;
  --f-serif:  "Cormorant Garamond", "Cormorant", serif;
  --f-caps:   "Cormorant SC", "Cormorant Garamond", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-deep); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg-deep);
  color: var(--branco-tinta);
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* esconde captions até JS confirmar fontes (evita FOUT em branco com display:block) */
.window-caption { opacity: 0; }

main {
  position: relative;
  width: 100vw;
  min-height: 100dvh;
  overflow: hidden;
}

.screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.screen[hidden] { display: none; }

/* sobreposição grão (todas as telas) */
.grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0 0.70  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: 0.55;
  z-index: 9;
}

/* =============================================================
   TELA 1 — A JANELA
   ============================================================= */

.screen-window {
  background:
    radial-gradient(ellipse at 50% 35%, #0a1224 0%, #050810 70%),
    var(--bg-deep);
}

.window-stage {
  position: relative;
  width: min(72vmin, 560px);
  aspect-ratio: 600 / 800;
  margin-top: -2vh;
}

.window-view {
  position: absolute;
  inset: 36px 36px 36px 36px;
  overflow: hidden;
  background: #06091a;
}
.window-sky {
  position: absolute;
  inset: 0;
  background: url("assets/starry-night.jpg") center/cover no-repeat;
  filter: blur(20px) brightness(0.42) saturate(1.15);
  transform: scale(1.15);
}
.window-moon {
  position: absolute;
  top: 14%;
  right: 14%;
  width: 18%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 35%, #f3d28a 0%, #b88838 55%, transparent 70%);
  filter: blur(10px);
  opacity: 0.5;
}

.window-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.7));
}

/* cortinas */
.curtain {
  position: absolute;
  top: 36px;
  bottom: 38px;
  width: calc(50% - 18px);
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  transform-origin: top center;
  will-change: transform;
}
.curtain-left  { left:  36px;  animation: sway-left  8s ease-in-out infinite alternate; }
.curtain-right { right: 36px;  animation: sway-right 8.4s ease-in-out infinite alternate; }

@keyframes sway-left {
  from { transform: skewX(-1.3deg) translateX(2px); }
  to   { transform: skewX( 1.3deg) translateX(-2px); }
}
@keyframes sway-right {
  from { transform: skewX( 1.3deg) translateX(-2px); }
  to   { transform: skewX(-1.3deg) translateX(2px); }
}

/* legenda da Tela 1 */
.window-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2vh, 5vh, 7vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 1rem;
  text-align: center;
  z-index: 5;
}
.signature-name {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(3.4rem, 9vw, 5.4rem);
  line-height: 0.95;
  margin: 0;
  color: var(--estrela);
  letter-spacing: 0.005em;
  text-shadow:
    0 0 1px rgba(232, 215, 122, 0.5),
    0 0 18px rgba(240, 193, 75, 0.18);
  filter: url(#ink-bleed);
}
.signature-date {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.42em;
  margin: 0;
  color: var(--branco-tinta);
  opacity: 0.78;
  padding-left: 0.42em; /* compensar tracking */
}

.cta-cursive {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.4rem;
  background: transparent;
  border: 0;
  padding: 0.4rem 0.6rem;
  color: var(--lua);
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 1.55rem;
  cursor: pointer;
  text-shadow: 0 0 14px rgba(240, 193, 75, 0.0);
  transition: text-shadow 600ms ease, color 600ms ease, transform 600ms ease;
  filter: url(#ink-bleed);
}
.cta-cursive svg {
  transition: transform 600ms cubic-bezier(.5,0,.2,1);
}
.cta-cursive:hover, .cta-cursive:focus-visible {
  outline: none;
  color: #fff7d2;
  text-shadow: 0 0 18px rgba(240, 193, 75, 0.55);
}
.cta-cursive:hover svg { transform: translateX(4px); }

/* =============================================================
   TELA 2 — A REVELAÇÃO
   ============================================================= */

.screen-reveal {
  background: #000;
  display: block;
}
.painting-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.painting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(15px) brightness(0.85);
  transform: scale(1.05);
  transform-origin: 50% 55%;
  will-change: filter, transform;
}

.shooting-star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.star-group { opacity: 0; }
.star-trail { stroke-dasharray: 700 1000; stroke-dashoffset: 700; }

.signature-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}
.signature-svg {
  width: min(78vw, 720px);
  height: auto;
  overflow: visible;
}
.signature-svg .signature-halo { mix-blend-mode: screen; }

.reveal-subtitle {
  position: absolute;
  bottom: 18%;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.6em;
  color: var(--estrela);
  opacity: 0;
  margin: 0;
  padding-left: 0.6em;
}

.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.reveal-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 8;
  pointer-events: none;
}

/* =============================================================
   TELA 3 — A CARTA
   ============================================================= */

.screen-letter {
  background: var(--bg-deep);
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.back-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.letter {
  position: relative;
  width: min(560px, calc(100vw - 2rem));
  margin: clamp(2rem, 6vh, 5rem) auto;
  padding: clamp(2.6rem, 5vw, 4.8rem) clamp(1.8rem, 4vw, 3.6rem);
  background-color: var(--papel);
  background-image:
    radial-gradient(ellipse at 28% 18%, rgba(255, 250, 230, 0.55), transparent 55%),
    radial-gradient(ellipse at 72% 80%, rgba(120, 90, 50, 0.18), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.04' numOctaves='3' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.46  0 0 0 0 0.32  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  background-blend-mode: multiply, multiply, multiply;
  background-size: cover, cover, 400px 400px;
  color: var(--tinta);
  text-align: center;
  transform: rotate(-0.4deg);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.5),
    0 18px 40px rgba(0,0,0,0.55),
    0 36px 90px rgba(0,0,0,0.45);
  /* bordas irregulares */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' preserveAspectRatio='none'><path fill='black' d='M14 9 L590 6 L592 18 L588 50 L595 130 L587 230 L593 350 L588 470 L595 580 L588 690 L592 770 L578 792 L420 788 L320 794 L180 790 L40 793 L8 786 L11 700 L6 580 L13 460 L8 350 L14 230 L9 130 L6 60 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' preserveAspectRatio='none'><path fill='black' d='M14 9 L590 6 L592 18 L588 50 L595 130 L587 230 L593 350 L588 470 L595 580 L588 690 L592 770 L578 792 L420 788 L320 794 L180 790 L40 793 L8 786 L11 700 L6 580 L13 460 L8 350 L14 230 L9 130 L6 60 Z'/></svg>");
          mask-size: 100% 100%;
  z-index: 2;
  opacity: 0;
}

.letter-head { margin-bottom: 1.6rem; }
.letter-name {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(4rem, 14vw, 6.6rem);
  line-height: 0.85;
  margin: 0;
  color: var(--tinta);
  transform: rotate(-1deg);
  filter: url(#ink-bleed-strong);
}
.letter-roman {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.6em;
  margin: 0.6rem 0 0;
  color: var(--cera);
  padding-left: 0.6em;
  opacity: 0.85;
}

.letter-greeting {
  font-style: italic;
  font-size: 1.1rem;
  margin: 1.4rem 0 1.6rem;
  color: var(--tinta);
  opacity: 0.85;
}

.letter-body {
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.9;
  color: var(--tinta);
  filter: url(#ink-bleed);
}
.letter-body p { margin: 0 0 1.2rem; }

.letter-where {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  margin: 2rem 0;
  line-height: 2;
  color: var(--cera);
  padding-left: 0.18em;
}

.letter-close {
  font-style: italic;
  font-size: 1.04rem;
  margin: 1.4rem 0 2rem;
  opacity: 0.92;
}

.letter-sign {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 2.6rem;
  margin: 0 0 1.6rem;
  color: var(--tinta);
  transform: rotate(-2deg) translateX(20%);
  filter: url(#ink-bleed-strong);
}

.letter-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  font-style: italic;
  font-size: 1rem;
}
.link-cursive {
  position: relative;
  color: var(--cera);
  text-decoration: none;
  padding: 0.1rem 0.2rem;
  transition: color 280ms ease;
}
.link-cursive .arr { font-style: normal; }
.link-cursive::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 320ms cubic-bezier(.5,0,.2,1);
}
.link-cursive:hover, .link-cursive:focus-visible {
  outline: none;
  color: var(--tinta);
}
.link-cursive:hover::after, .link-cursive:focus-visible::after { width: 100%; }

/* selo de cera */
.wax-seal {
  position: absolute;
  right: clamp(1.4rem, 5%, 2.4rem);
  bottom: clamp(1.4rem, 5%, 2.4rem);
  width: clamp(72px, 12%, 92px);
  height: auto;
  transform: rotate(8deg) scale(0);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5));
}
.seal-blob { stroke-opacity: 0.5; }
.seal-letter {
  font-family: var(--f-caps);
  font-weight: 500;
  font-size: 38px;
  fill: #4a0a0a;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.18),
    0 1px 1px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.04em;
}

/* toggle áudio */
.audio-toggle {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(10, 21, 48, 0.4);
  border: 1px solid rgba(232, 218, 178, 0.18);
  border-radius: 50%;
  color: var(--branco-tinta);
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  transition: opacity 700ms ease, background 280ms ease, color 280ms ease;
}
.audio-toggle.is-visible { opacity: 0.55; }
.audio-toggle:hover { opacity: 1; }

/* =============================================================
   RESPONSIVO
   ============================================================= */

@media (max-aspect-ratio: 3/4) {
  .window-stage {
    width: 88vmin;
  }
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  .signature-date { font-size: 0.7rem; letter-spacing: 0.32em; }
  .letter-where { font-size: 0.7rem; letter-spacing: 0.14em; }
  .letter { padding: 2.4rem 1.6rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .curtain-left, .curtain-right { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* utilitários de estado */
.is-hidden { opacity: 0 !important; pointer-events: none !important; }