/* Hipótese A · "Tia Yasmim" — retrato grande, malha morna amostrada da foto, giz de cera de criança */

:root {
  /* cor (amostrada do retrato: vestido #e3d0a7, pele #c28869, batom #b86566; lilás do logo #9d86bf) */
  --creme: #fbf4e9;
  --papel: #fffaf2;
  --manteiga: #f5e4a8;
  --manteiga-viva: #ecd07a;
  --pessego: #f5cdb4;
  --rosa-nevoa: #f5d6dc;
  --lilas-nevoa: #e2d7f1;
  --lilas: #8a70b9;
  --framboesa: #bd2f5c;
  --framboesa-escura: #a3244e;
  --tinta: #34222a;
  --tinta-2: #66505a;
  --estrela: #e2a531;

  /* tipo */
  --f-titulo: "Shantell Sans", "Comic Neue", system-ui, sans-serif;
  --f-texto: "Readex Pro", system-ui, sans-serif;
  --t-titulo: clamp(2.9rem, 1.2rem + 5.4vw, 6.4rem);
  --t-apoio: clamp(1rem, .92rem + .32vw, 1.2rem);

  /* espaço */
  --margem: clamp(20px, 4.4vw, 72px);
  --topo-h: clamp(64px, 8vh, 88px);
  --hh: clamp(640px, 100svh, 1080px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-weight: 350;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* granulado fino fixo */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 50;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .13  0 0 0 0 .16  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: var(--hh);
  display: grid;
  grid-template-rows: var(--topo-h) 1fr;
  overflow: clip;
  isolation: isolate;
}

/* malha: manchas radiais grandes, sem blur, respirando */
.malha { position: absolute; inset: -24px; z-index: -2; overflow: hidden; background: var(--creme); }
.m {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
.m1 { /* manteiga do vestido, atrás dela */
  width: 82vmax; height: 82vmax; left: 38%; top: -18%;
  background: radial-gradient(circle closest-side in oklab, oklch(91% .085 95), oklch(93% .06 92 / .55) 45%, oklch(95% .03 85 / 0));
  animation: deriva1 34s ease-in-out infinite alternate;
}
.m2 { /* pêssego da pele, embaixo à direita */
  width: 70vmax; height: 70vmax; left: 58%; top: 42%;
  background: radial-gradient(circle closest-side in oklab, oklch(87% .065 50), oklch(90% .045 45 / .5) 50%, oklch(94% .02 40 / 0));
  animation: deriva2 28s ease-in-out infinite alternate;
}
.m3 { /* névoa lilás do logo, alto à esquerda */
  width: 74vmax; height: 74vmax; left: -30%; top: -40%;
  background: radial-gradient(circle closest-side in oklab, oklch(89% .045 300), oklch(92% .03 300 / .5) 50%, oklch(95% .015 300 / 0));
  animation: deriva3 38s ease-in-out infinite alternate;
}
.m4 { /* rosado, embaixo à esquerda */
  width: 64vmax; height: 64vmax; left: -18%; top: 52%;
  background: radial-gradient(circle closest-side in oklab, oklch(90% .045 10), oklch(93% .03 15 / .45) 50%, oklch(96% .01 20 / 0));
  animation: deriva2 31s ease-in-out -9s infinite alternate-reverse;
}
.m5 { /* lilás frio no canto de cima à direita */
  width: 46vmax; height: 46vmax; left: 78%; top: -26%;
  background: radial-gradient(circle closest-side in oklab, oklch(88% .04 305 / .9), oklch(94% .015 300 / 0));
  animation: deriva1 26s ease-in-out -6s infinite alternate-reverse;
}
@keyframes deriva1 { to { transform: translate3d(-5vmax, 4vmax, 0) scale(1.08); } }
@keyframes deriva2 { to { transform: translate3d(4vmax, -5vmax, 0) scale(.94); } }
@keyframes deriva3 { to { transform: translate3d(6vmax, 5vmax, 0) scale(1.06); } }

/* topo */
.topo {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--margem);
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.marca-simbolo { width: 50px; height: auto; flex: none; fill: none; stroke: var(--lilas); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.marca-simbolo .coracao { fill: var(--lilas); stroke: none; }
.marca-texto { display: grid; line-height: 1.15; min-width: 0; }
.marca-texto strong {
  font-family: var(--f-titulo); font-weight: 620; font-size: 1.08rem; letter-spacing: -.005em;
  font-variation-settings: "INFM" 30, "BNCE" 0;
}
.marca-texto small { font-size: .78rem; color: var(--tinta-2); font-weight: 400; letter-spacing: .01em; }
.topo-zap {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 450; font-size: .95rem;
  padding: 9px 14px; border-radius: 999px;
  background: color-mix(in oklab, var(--papel) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--tinta) 12%, transparent);
  backdrop-filter: blur(6px);
  transition: background .25s, transform .25s;
}
.topo-zap:hover { background: var(--papel); transform: translateY(-1px); }
.topo-zap svg { width: 18px; height: 18px; fill: #1f9c5a; }

/* palco */
.palco {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(8px, 2vw, 40px);
  padding: 0 var(--margem);
  width: 100%; max-width: 1560px; margin: 0 auto;
}
.texto {
  position: relative; z-index: 4;
  align-self: center;
  padding: clamp(8px, 3vh, 40px) 0 clamp(48px, 9vh, 110px);
  max-width: 660px;
}
.sobre {
  margin: 0 0 clamp(14px, 2.2vh, 26px);
  font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2);
  display: flex; align-items: center; gap: 10px;
}
.sobre::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--lilas); }

.titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-titulo);
  line-height: .98;
  letter-spacing: -.025em;
  font-variation-settings: "INFM" 0, "BNCE" 0, "SPAC" 0;
  color: var(--tinta);
}
.linha { display: block; }
.l2 { margin-top: .84em; white-space: nowrap; }
.nome { position: relative; display: inline-block; color: var(--framboesa-escura); }

/* giz de cera */
.giz { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: url(#giz); }
.giz path { stroke: var(--framboesa); stroke-width: 6; }
.insercao { width: 1.5em; left: -1.06em; top: -1.02em; transform: rotate(-9deg); }
.insercao path { stroke-width: 8; }
.circunflexo { width: .28em; left: -.33em; top: .7em; }
.circunflexo path { stroke-width: 3.4; }
.sublinhado { width: 104%; left: -2%; bottom: -.24em; }
.sublinhado path { stroke-width: 5.5; }
.sublinhado path + path { opacity: .9; }

.apoio {
  margin: clamp(26px, 4.4vh, 46px) 0 0;
  font-size: var(--t-apoio); line-height: 1.6; color: var(--tinta-2);
  max-width: 34em; text-wrap: pretty;
}
.marcado { position: relative; color: var(--tinta); font-weight: 500; white-space: nowrap; }
.onda { left: 0; width: 100%; height: .5em; bottom: -.42em; }
.onda path { stroke: var(--lilas); stroke-width: 2.6; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(26px, 4.2vh, 42px); }
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 28px 17px 24px;
  border-radius: 999px;
  background: var(--framboesa-escura);
  color: #fff; text-decoration: none;
  font-weight: 500; font-size: 1.05rem; letter-spacing: .005em;
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 12px 26px -12px oklch(45% .16 5 / .7);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .25s;
}
.botao:hover { transform: translateY(-2px); background: var(--framboesa); }
.botao:focus-visible, .secundaria:focus-visible, .topo-zap:focus-visible, .marca:focus-visible { outline: 3px solid var(--lilas); outline-offset: 3px; }
.botao svg { width: 22px; height: 22px; fill: currentColor; }
.secundaria { font-weight: 450; text-decoration: none; color: var(--tinta); border-bottom: 1.5px solid color-mix(in oklab, var(--lilas) 60%, transparent); padding-bottom: 2px; }
.secundaria span { display: inline-block; transition: transform .25s; }
.secundaria:hover span { transform: translateX(4px); }

.local { display: flex; align-items: flex-start; gap: 8px; margin: clamp(22px, 3.4vh, 34px) 0 0; font-size: .86rem; line-height: 1.45; color: var(--tinta-2); max-width: 46em; }
.local svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: var(--lilas); }

/* figura */
.figura { position: relative; z-index: 2; min-height: 0; }
.quadro {
  --qh: calc(var(--hh) * 1.08);
  position: absolute;
  height: var(--qh); aspect-ratio: 3 / 4;
  top: calc(var(--topo-h) * -.35);
  left: 50%; transform: translateX(-47%);
}
.retrato { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; user-select: none; }
.brilho {
  position: absolute; z-index: 0; left: 6%; top: 4%; width: 88%; aspect-ratio: 1;
  background: radial-gradient(circle closest-side in oklab, oklch(96% .07 95 / .95), oklch(94% .06 90 / .4) 55%, oklch(96% .03 90 / 0));
}
.rabisco { z-index: 1; left: -3%; top: -2%; width: 106%; }
.rabisco path { stroke: var(--lilas); stroke-width: 5; opacity: .72; }
.ondas { z-index: 3; left: 70.5%; top: 20.5%; width: 9%; }
.ondas path { stroke: var(--lilas); stroke-width: 5.5; }
.coracaozinho { z-index: 3; left: -2%; top: 41%; width: 11%; }
.coracaozinho path { stroke-width: 4.5; }
.coracaozinho .hachura { stroke-width: 3; opacity: .55; }

.selo { display: none; }

/* bilhete (prova) */
.bilhete {
  --rot: 2.6deg;
  position: absolute; z-index: 4;
  right: clamp(-28px, -1.4vw, 0px); bottom: clamp(56px, 11vh, 120px);
  width: clamp(250px, 21vw, 312px);
  margin: 0;
  padding: 22px 22px 18px;
  background:
    linear-gradient(90deg, transparent 30px, oklch(80% .07 10 / .45) 30px 31.5px, transparent 31.5px),
    repeating-linear-gradient(180deg, transparent 0 27px, oklch(82% .04 290 / .45) 27px 28px),
    var(--papel);
  background-position: 0 0, 0 10px, 0 0;
  border-radius: 3px 4px 6px 3px;
  box-shadow: 0 1px 1px rgb(60 30 40 / .06), 0 14px 30px -12px rgb(70 40 50 / .32), 0 34px 60px -30px rgb(70 40 50 / .25);
  transform: rotate(var(--rot));
  padding-left: 44px;
}
.fita {
  position: absolute; top: -13px; left: 50%; width: 92px; height: 26px;
  transform: translateX(-50%) rotate(-4deg);
  background: oklch(92% .07 92 / .78);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 99% 100%, 2% 96%, 0 70%, 4% 45%, 0 18%);
}
.nota { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
.nota-num { position: relative; font-family: var(--f-titulo); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--tinta); padding: 0 .1em; }
.roda { width: 2.2em; left: -.42em; top: -.32em; }
.roda path { stroke-width: 3.2; }
.estrelas { display: inline-flex; gap: 2px; }
.estrelas i { width: 15px; height: 15px; background: var(--estrela); clip-path: polygon(50% 0, 61.8% 35.4%, 100% 38.2%, 69.1% 61.8%, 80.9% 100%, 50% 76.4%, 19.1% 100%, 30.9% 61.8%, 0 38.2%, 38.2% 35.4%); }
.nota-txt { width: 100%; font-size: .78rem; font-weight: 500; color: var(--tinta-2); letter-spacing: .01em; }
.bilhete blockquote {
  margin: 0;
  font-family: var(--f-titulo); font-weight: 450; font-size: 1.04rem; line-height: 28px;
  font-variation-settings: "INFM" 75, "BNCE" 25, "SPAC" 0;
  color: var(--tinta);
}
.bilhete mark { background: none; color: var(--framboesa-escura); font-weight: 650; }
.bilhete figcaption { margin-top: 8px; font-size: .8rem; color: var(--tinta-2); font-weight: 450; }

/* ---------- entrada coreografada (só com JS; sem JS tudo aparece pronto) ---------- */
.js .giz .tr { stroke-dasharray: 1 1; animation: tracar var(--t, .5s) cubic-bezier(.55, .05, .3, 1) var(--d, 0s) both; }
@keyframes tracar {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.js .rabisco .tr { animation-name: tracar-suave; }
@keyframes tracar-suave {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: .72; }
  100% { stroke-dashoffset: 0; opacity: .72; }
}
.js .sublinhado .tr + .tr { animation-name: tracar-9; }
@keyframes tracar-9 { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: .9; } }
.js .coracaozinho .hachura { animation-name: tracar-55; }
@keyframes tracar-55 { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: .55; } 100% { stroke-dashoffset: 0; opacity: .55; } }

.js .retrato { animation: chegar-retrato 1.1s cubic-bezier(.2, .8, .2, 1) .05s both; }
@keyframes chegar-retrato { from { opacity: 0; transform: translateY(34px) scale(1.025); } }
.js .brilho { animation: acender 1.6s ease-out 0s both; }
@keyframes acender { from { opacity: 0; transform: scale(.85); } }

.js .sobre { animation: subir .7s cubic-bezier(.2, .8, .2, 1) .2s both; }
.js .l1 { animation: subir .8s cubic-bezier(.2, .8, .2, 1) .32s both; }
.js .l2 { animation: subir .8s cubic-bezier(.2, .8, .2, 1) .48s both; }
.js .apoio { animation: subir .8s cubic-bezier(.2, .8, .2, 1) 1.05s both; }
.js .acoes { animation: subir .8s cubic-bezier(.2, .8, .2, 1) 1.2s both; }
.js .local { animation: subir .8s cubic-bezier(.2, .8, .2, 1) 1.32s both; }
.js .topo { animation: descer .8s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes subir { from { opacity: 0; transform: translateY(22px); } }
@keyframes descer { from { opacity: 0; transform: translateY(-14px); } }

.js .bilhete { animation: pousar 1s cubic-bezier(.25, 1.35, .4, 1) 1.45s both; }
@keyframes pousar {
  from { opacity: 0; transform: translate(18px, -46px) rotate(calc(var(--rot) + 9deg)); }
  60% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--rot)); }
}

/* depois da entrada: as ondas "falam" e o coração bate, bem devagar */
.js .ondas { animation: falar 4.8s ease-in-out 3s infinite; }
@keyframes falar { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(3px); } 36% { transform: translateX(0); } }
.js .coracaozinho { animation: bater 5.6s ease-in-out 3.2s infinite; transform-origin: 50% 70%; }
@keyframes bater { 0%, 100% { transform: scale(1) rotate(-6deg); } 8% { transform: scale(1.1) rotate(-6deg); } 16% { transform: scale(1) rotate(-6deg); } 24% { transform: scale(1.07) rotate(-6deg); } 32% { transform: scale(1) rotate(-6deg); } }
.coracaozinho { transform: rotate(-6deg); }

.hero.pausado .m, .hero.pausado .ondas, .hero.pausado .coracaozinho { animation-play-state: paused; }

/* ---------- notebook baixo / tablet ---------- */
@media (max-width: 1180px) {
  .bilhete { width: clamp(236px, 25vw, 280px); right: -10px; bottom: clamp(40px, 7vh, 80px); padding: 18px 18px 14px 40px; }
  .bilhete blockquote { font-size: .96rem; line-height: 26px; }
  .bilhete { background-position: 0 0, 0 6px, 0 0; }
}
@media (max-width: 1180px) and (min-width: 821px) {
  .coracaozinho { left: 5%; top: 5%; width: 9%; }
}
@media (max-height: 760px) and (min-width: 821px) {
  .apoio { margin-top: 22px; }
  .acoes { margin-top: 22px; }
  .local { margin-top: 18px; }
}

/* ---------- celular ---------- */
@media (max-width: 820px) {
  :root { --topo-h: 64px; --t-titulo: clamp(2.55rem, 1.3rem + 6.4vw, 4.2rem); }
  .hero { min-height: auto; grid-template-rows: var(--topo-h) auto; }
  .topo-zap span { display: none; }
  .topo-zap { padding: 10px; }
  .topo-zap svg { width: 22px; height: 22px; }
  .marca-simbolo { width: 42px; }
  .marca-texto strong { font-size: 1rem; }
  .marca-texto small { font-size: .74rem; }

  .palco { grid-template-columns: minmax(0, 1fr); padding: 0 var(--margem); gap: 0; }
  .figura { display: contents; }
  .quadro {
    order: 1;
    position: relative; left: auto; top: auto; transform: none;
    width: min(114vw, 560px); height: auto;
    justify-self: center;
    margin-top: -6px;
    margin-bottom: calc(min(114vw, 560px) * -.42);
  }
  .retrato {
    -webkit-mask-image: linear-gradient(180deg, #000 0 52%, rgb(0 0 0 / .55) 63%, transparent 76%);
            mask-image: linear-gradient(180deg, #000 0 52%, rgb(0 0 0 / .55) 63%, transparent 76%);
  }
  .rabisco path { stroke-width: 6; }
  .rabisco { -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 74%); mask-image: linear-gradient(180deg, #000 0 58%, transparent 74%); }
  .ondas { width: 10%; left: 71%; }
  .selo {
    display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 8px;
    position: absolute; z-index: 4; right: 11%; top: 43%;
    margin: 0; padding: 9px 13px 8px;
    background: var(--papel); border-radius: 4px;
    box-shadow: 0 10px 22px -10px rgb(70 40 50 / .35);
    transform: rotate(4deg);
    font-family: var(--f-texto); color: var(--tinta);
  }
  .selo b { font-family: var(--f-titulo); font-weight: 700; font-size: 1.35rem; line-height: 1; }
  .selo .estrelas i { width: 12px; height: 12px; }
  .selo small { grid-column: 1 / -1; font-size: .7rem; font-weight: 500; color: var(--tinta-2); margin-top: 3px; }
  .js .selo { animation: pousar .9s cubic-bezier(.25, 1.35, .4, 1) 1.5s both; --rot: 4deg; }
  .coracaozinho { width: 12%; left: 3%; top: 38%; }

  .texto { order: 2; padding: 0 0 28px; max-width: none; }
  .sobre { display: none; }
  .titulo { padding-top: 6px; }
  .apoio { margin-top: 22px; }
  .acoes { gap: 14px 22px; margin-top: 22px; }
  .botao { width: 100%; justify-content: center; }
  .secundaria { margin-inline: auto; }

  .bilhete {
    --rot: -1.4deg;
    order: 3;
    position: relative; right: auto; bottom: auto;
    width: min(100%, 360px); justify-self: center;
    margin: 6px 0 46px;
  }
  .bilhete .nota { display: none; }
}
@media (max-width: 380px) {
  :root { --margem: 18px; }
  .marca { gap: 9px; }
  .marca-simbolo { width: 38px; }
  .marca-texto strong { font-size: .95rem; }
  .marca-texto small { font-size: .7rem; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}