/*
 * Hero: a história do Vindo em três tempos (convite, o Vin acompanha, a entrada do evento).
 * Montada por assets/js/hero-historia.js dentro de #hero-stage.
 * Só usa as variáveis de vindo-tokens.css. Posições em % do palco; tamanhos em cqw.
 */
.hero-stage--historia { container-type: inline-size; display: block; }
.hero-stage--historia::before, .hero-stage--historia::after { content: none; }

.hs {
  --u: 1cqw;
  --av: clamp(36px, calc(var(--u) * 10), 60px);
  position: absolute; inset: 0; opacity: 1;
  transition: opacity 600ms var(--curva);
  font-family: var(--fonte); line-height: 1.2; user-select: none;
}
.hs--some { opacity: 0; }
.hs--parado * { transition: none !important; }

/* A noite do evento: só aparece no terceiro tempo */
.hs-fundo { position: absolute; inset: 0; background: var(--noite); opacity: 0; transition: opacity 900ms var(--curva); }
.hs--evento .hs-fundo { opacity: 1; }
.hs-luz {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--u) * var(--t)); aspect-ratio: 1; border-radius: 50%;
  background: var(--sol); filter: blur(calc(var(--u) * 1.4)); translate: -50% -50%;
  opacity: 0; transition: opacity 1200ms var(--curva);
}
.hs--evento .hs-luz { opacity: var(--o); }
.hs--festa .hs-luz { animation: hs-cintila 2200ms ease-in-out infinite alternate; animation-delay: var(--a, 0ms); }
@keyframes hs-cintila { from { opacity: calc(var(--o) * 0.45); } to { opacity: var(--o); } }

/* Tudo que se move no palco */
.hs-el {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  translate: -50% -50%;
  transition: left var(--d, 800ms) var(--curva), top var(--d, 800ms) var(--curva),
    opacity 400ms var(--curva), scale 400ms var(--curva);
}

/* Linhas entre você e cada convidado (geometria calculada no JS) */
.hs-linha {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  height: 0; border-top: 2px dashed var(--borda); opacity: 0.55;
  transform-origin: 0 50%; transform: rotate(var(--ang, 0rad)); clip-path: inset(-2px 100% -2px 0);
  transition: clip-path 800ms var(--curva), border-color 500ms var(--curva), opacity 500ms var(--curva);
}
.hs-linha--on { clip-path: inset(-2px 0 -2px 0); }
.hs-linha--sim { border-top-style: solid; border-color: var(--verde); opacity: 1; }
.hs-linha--nao { opacity: 0.2; }
.hs--evento .hs-linha { opacity: 0; }

/* Pessoas: avatar, nome e situação do convite */
.hs-g {
  width: max-content; display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * 0.7); translate: -50% calc(var(--av) / -2); z-index: 2;
}
.hs-av {
  position: relative; display: block; width: var(--av); height: var(--av); border-radius: 50%;
  background: var(--linha); color: var(--borda);
  box-shadow: 0 0 0 3px var(--creme), var(--sombra);
  transition: background-color 500ms var(--curva), color 500ms var(--curva), box-shadow 500ms var(--curva);
}
.hs-av > svg { display: block; width: 100%; height: 100%; border-radius: 50%; fill: currentColor; }
.hs-nome {
  white-space: nowrap; font-size: max(11px, calc(var(--u) * 2.5)); font-weight: var(--peso-botao);
  color: var(--noite); transition: opacity 300ms var(--curva), color 600ms var(--curva);
}
.hs-g--voce { --av: clamp(48px, calc(var(--u) * 14), 88px); z-index: 3; }
.hs-g--voce .hs-av { background: var(--sol); color: var(--noite); }
.hs-g--voce .hs-nome { font-weight: var(--peso-titulo); }
.hs-g--pulsa .hs-av { animation: hs-pulsa 600ms var(--curva) 2; }
@keyframes hs-pulsa { 50% { scale: 1.08; box-shadow: 0 0 0 3px var(--creme), 0 0 0 9px var(--sol-claro); } }

.hs-g--sim .hs-av { background: var(--verde-claro); color: var(--verde-escuro); box-shadow: 0 0 0 3px var(--verde), var(--sombra); }
.hs-g--nao { opacity: 0.5; }
.hs-g--fora { opacity: 0; }

/* Selo de confirmado no canto do avatar */
.hs-selo {
  position: absolute; right: -8%; bottom: -6%; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: var(--verde); color: var(--creme); box-shadow: 0 0 0 2px var(--creme);
  display: grid; place-items: center; scale: 0; transition: scale 350ms var(--curva);
}
.hs-selo svg { width: 66%; height: 66%; }
.hs-g--sim .hs-selo { scale: 1; }

/* Acompanhante: um segundo avatar, menor, encostado */
.hs-mais {
  position: absolute; left: -34%; bottom: -8%; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-escuro); box-shadow: 0 0 0 2px var(--verde);
  scale: 0; transition: scale 400ms var(--curva);
}
.hs-mais svg { display: block; width: 100%; height: 100%; border-radius: 50%; fill: currentColor; }
.hs-g--com-mais .hs-mais { scale: 1; }

/* Etiqueta: por onde o convite foi e o que a pessoa respondeu */
.hs-chip {
  display: inline-flex; align-items: center; gap: var(--e-1); white-space: nowrap;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6); border-radius: var(--raio-pilula);
  background: var(--creme); color: var(--noite); box-shadow: var(--sombra);
  font-size: max(11px, calc(var(--u) * 2.2)); font-weight: var(--peso-botao);
  scale: 0; transition: scale 350ms var(--curva), background-color 400ms var(--curva), color 400ms var(--curva), opacity 300ms var(--curva);
}
.hs-chip svg { width: 1.15em; height: 1.15em; fill: currentColor; flex-shrink: 0; }
.hs-chip .i-sim { fill: none; }
.hs-chip--whatsapp svg { color: var(--whatsapp); }
.hs-chip--sim { background: var(--verde-claro); color: var(--verde-escuro); }
.hs-chip--nao { background: var(--linha); color: var(--tinta-2); }
.hs-chip--espera { background: var(--sol-claro); color: var(--ambar); }
.hs-g--chip .hs-chip { scale: 1; }
.hs-g--chama .hs-chip { animation: hs-treme 420ms ease-in-out 2; }
@keyframes hs-treme { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }

/* Convite a caminho */
.hs-env {
  width: clamp(22px, calc(var(--u) * 5.5), 34px); aspect-ratio: 1; border-radius: 50%;
  background: var(--creme); color: var(--noite); box-shadow: var(--sombra);
  display: grid; place-items: center; opacity: 0; z-index: 4;
}
.hs-env svg { width: 58%; height: 58%; fill: currentColor; }
.hs-env--on { opacity: 1; }

/* O Vin */
.hs-vin {
  width: clamp(26px, calc(var(--u) * 6.5), 42px); aspect-ratio: 1; border-radius: 50%;
  background: var(--noite); color: var(--sol); box-shadow: 0 0 0 2px var(--creme), var(--sombra);
  display: grid; place-items: center; scale: 0; z-index: 5;
}
.hs-vin svg { width: 62%; height: 62%; fill: currentColor; animation: hs-brilha 1800ms ease-in-out infinite alternate; }
@keyframes hs-brilha { from { scale: 0.86; } to { scale: 1.08; } }
.hs-vin--on { scale: 1; }
.hs-vin-nome {
  position: absolute; left: 112%; top: 50%; translate: 0 -50%;
  font-size: max(11px, calc(var(--u) * 2.3)); font-weight: var(--peso-titulo); color: var(--noite);
  transition: color 600ms var(--curva);
}
.hs--evento .hs-vin { box-shadow: 0 0 0 2px var(--sol); }
.hs--evento .hs-vin-nome { color: var(--sobre-noite); }

/* O Vin pede ajuda */
.hs-balao {
  width: 38%; background: var(--noite); color: var(--sobre-noite);
  border-radius: var(--raio-p); padding: var(--e-2) var(--e-3); text-align: center;
  font-size: max(11px, calc(var(--u) * 2.4)); font-weight: var(--peso-forte); line-height: 1.3;
  opacity: 0; scale: 0.9; z-index: 6;
}
.hs-balao--on { opacity: 1; scale: 1; }

/* Terceiro tempo: a entrada do evento */
.hs--evento .hs-g:not(.hs-g--voce) .hs-nome { opacity: 0; }
.hs--evento .hs-g .hs-chip { scale: 0; opacity: 0; }
.hs--evento .hs-g--voce .hs-nome { color: var(--sobre-noite); }
.hs--evento .hs-av { box-shadow: 0 0 0 3px var(--noite), var(--sombra); }
.hs--evento .hs-g--sim .hs-av { box-shadow: 0 0 0 3px var(--verde), var(--sombra); }
.hs--evento .hs-selo { box-shadow: 0 0 0 2px var(--noite); }

/* A recepção: entrada larga, balcão da portaria e alguém da equipe conferindo */
.hs-entrada {
  position: absolute; left: 36%; top: 28%; width: 24%; height: 54%;
  border: 2px solid var(--sol); border-bottom: 0; border-radius: var(--raio-p) var(--raio-p) 0 0;
  opacity: 0; scale: 0.94; transform-origin: 50% 100%;
  transition: opacity 900ms var(--curva), scale 900ms var(--curva);
}
.hs-entrada::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sol); opacity: 0.08; }
.hs--evento .hs-entrada { opacity: 1; scale: 1; }
.hs-balcao {
  position: absolute; left: 60%; top: 65%; width: 21%; height: 17%; z-index: 3;
  background: var(--areia); border-top: 3px solid var(--sol); border-radius: var(--raio-p) var(--raio-p) 0 0;
  display: grid; place-items: center; padding: 0 var(--e-1);
  font-size: max(10px, calc(var(--u) * 2.1)); font-weight: var(--peso-titulo); color: var(--noite);
  opacity: 0; translate: 0 12%; transition: opacity 900ms var(--curva), translate 900ms var(--curva);
}
.hs--evento .hs-balcao { opacity: 1; translate: 0 0; }
.hs-g--equipe { opacity: 0; z-index: 2; }
.hs-g--equipe .hs-av { background: var(--creme); color: var(--noite); }
.hs--evento .hs-g--equipe { opacity: 1; }
.hs--evento .hs-g--equipe .hs-av { box-shadow: 0 0 0 3px var(--sol), var(--sombra); }
.hs-g--equipe.hs-g--confere .hs-av { animation: hs-confere 380ms var(--curva); }
@keyframes hs-confere { 50% { translate: 0 6%; } }
.hs-chao {
  position: absolute; left: 6%; right: 6%; top: 82%; height: 0; border-top: 1px solid var(--sobre-noite-apagado);
  opacity: 0; transition: opacity 900ms var(--curva);
}
.hs--evento .hs-chao { opacity: 0.3; }

.hs-qr {
  width: clamp(26px, calc(var(--u) * 7), 44px); aspect-ratio: 1; border-radius: var(--raio-p);
  background: var(--creme); color: var(--noite); box-shadow: var(--sombra);
  display: grid; place-items: center; scale: 0; z-index: 6;
  transition: scale 350ms var(--curva), background-color 250ms var(--curva), color 250ms var(--curva);
}
.hs-qr svg { width: 62%; height: 62%; fill: currentColor; }
.hs--evento .hs-qr { scale: 1; }
.hs--evento .hs-qr.hs-qr--leu { background: var(--verde); color: var(--creme); scale: 1.15; }

/* Dentro: a festa */
.hs-g--dentro .hs-av, .hs--festa .hs-g--voce .hs-av {
  animation: hs-danca 560ms ease-in-out infinite alternate; animation-delay: var(--a, 0ms);
}
@keyframes hs-danca { from { translate: 0 0; rotate: -4deg; } to { translate: 0 -12%; rotate: 4deg; } }

.hs-som {
  position: absolute; left: 5%; bottom: 5%; display: flex; align-items: flex-end; gap: 3px;
  height: calc(var(--u) * 5); opacity: 0; transition: opacity 600ms var(--curva); z-index: 6;
}
.hs-som span {
  width: max(3px, calc(var(--u) * 0.7)); height: 100%; border-radius: var(--raio-pilula); background: var(--sol);
  transform-origin: 50% 100%; scale: 1 0.3;
}
.hs--festa .hs-som { opacity: 1; }
.hs--festa .hs-som span { animation: hs-som 520ms ease-in-out infinite alternate; }
.hs--festa .hs-som span:nth-child(2) { animation-delay: -180ms; }
.hs--festa .hs-som span:nth-child(3) { animation-delay: -360ms; }
.hs--festa .hs-som span:nth-child(4) { animation-delay: -90ms; }
.hs--festa .hs-som span:nth-child(5) { animation-delay: -270ms; }
@keyframes hs-som { from { scale: 1 0.25; } to { scale: 1 1; } }

/* Contador, passos e legenda */
.hs-conta {
  position: absolute; left: 4%; top: 5%; z-index: 7;
  display: inline-flex; align-items: baseline; gap: var(--e-2);
  background: var(--creme); box-shadow: var(--sombra); border-radius: var(--raio-pilula);
  padding: var(--e-1) var(--e-4);
  font-size: max(12px, calc(var(--u) * 2.6)); font-weight: var(--peso-botao); color: var(--noite);
}
.hs-conta strong { font-weight: var(--peso-titulo); color: var(--verde-escuro); display: inline-block; }
.hs-conta strong.hs-pula { animation: hs-pula 350ms var(--curva); }
@keyframes hs-pula { 40% { scale: 1.35; } }

.hs-passos { position: absolute; right: 4%; top: 6.5%; display: flex; gap: var(--e-1); z-index: 7; }
.hs-passos span {
  width: var(--e-2); height: var(--e-2); border-radius: var(--raio-pilula); background: var(--borda);
  opacity: 0.5; transition: width 400ms var(--curva), opacity 400ms var(--curva), background-color 400ms var(--curva);
}
.hs-passos span.on { width: var(--e-5); background: var(--noite); opacity: 1; }
.hs--evento .hs-passos span { background: var(--sobre-noite-apagado); }
.hs--evento .hs-passos span.on { background: var(--sol); }

.hs-legenda {
  position: absolute; left: 14%; right: 14%; bottom: 4%; z-index: 7; text-align: center;
  font-size: max(14px, calc(var(--u) * 3.2)); font-weight: var(--peso-titulo); color: var(--noite);
  transition: opacity 300ms var(--curva), translate 300ms var(--curva), color 600ms var(--curva);
}
.hs-legenda--troca { opacity: 0; translate: 0 6px; }
.hs--evento .hs-legenda { color: var(--sobre-noite); }

/* Palco maior no computador; no celular ele sobe para logo depois da frase de apoio */
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (max-width: 899px) {
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  .hero-apoio { order: 2; }
  .hero-stage { order: 3; margin-bottom: var(--e-5); }
  .hero-texto { order: 4; }
  .hero-acoes { order: 5; }
}