/* ============================================================
   Viva Vânia — tema "Festa vibrante quente"
   Neobrutalismo festivo: creme quente, cores saturadas, bordas
   grossas e sombras duras deslocadas.
   Contraste AA: tinta #3D0F33 ~13,9:1 no creme; branco sobre
   pink-forte 6,7:1 e sobre violeta 5,7:1; tinta sobre âmbar ~10:1.
   Pink #E91E76 e tangerina #FF6B35 são DECORATIVOS (não viram
   texto normal).
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-italic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --creme: #FFF4E6;
  --papel: #FFFFFF;
  --tinta: #3D0F33;
  --pink: #E91E76;
  --pink-forte: #B3125C;
  --tangerina: #FF6B35;
  --violeta: #7C3AED;
  --ambar: #FFC53D;
  --titulos: 'Fraunces', Georgia, 'Times New Roman', serif;
  --corpo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --borda: 3px solid var(--tinta);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--creme);
  background-image: radial-gradient(rgba(255, 107, 53, 0.13) 2.2px, transparent 2.4px);
  background-size: 30px 30px;
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}

/* Troca instantânea portão→festa quando a sessão já está aberta */
html.vv-in #gate { display: none; }
html.vv-in #site[hidden] { display: block; }

::selection { background: var(--ambar); color: var(--tinta); }

.defs-ocultas { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Foco visível (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 3px;
  border-radius: 4px;
}

a { color: var(--pink-forte); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--violeta); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--violeta);
  color: #fff;
  padding: 12px 20px;
  border: var(--borda);
  border-radius: 0 0 14px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Blobs gigantes de fundo (decorativos, nos cantos) ---------- */
#fundo-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
}
.blob {
  position: absolute;
  display: block;
  opacity: 0.9;
  animation: vv-deriva 22s ease-in-out infinite alternate;
}
.blob-violeta {
  width: 36vw; height: 36vw;
  top: -16vw; right: -15vw;
  background: var(--violeta);
  border-radius: 58% 42% 55% 45% / 52% 56% 44% 48%;
}
.blob-pink {
  width: 44vw; height: 44vw;
  bottom: -22vw; left: -20vw;
  background: var(--pink);
  border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
  animation-delay: -8s;
}
.blob-ambar {
  width: 18vw; height: 18vw;
  top: 42%; right: -10vw;
  background: var(--ambar);
  border-radius: 52% 48% 60% 40% / 48% 58% 42% 52%;
  animation-delay: -14s;
}
@keyframes vv-deriva {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(2.5vw, -2vw) rotate(10deg) scale(1.06); }
}

/* Conteúdo sempre acima dos blobs */
#gate, #site { position: relative; z-index: 1; }

/* ---------- Bandeirinhas ---------- */
.bunting {
  display: block;
  width: 100%;
  height: auto;
  max-height: 64px;
  transform-origin: 50% 0;
  animation: vv-balanca 5s ease-in-out infinite alternate;
}
@keyframes vv-balanca {
  from { transform: rotate(-0.7deg); }
  to   { transform: rotate(0.7deg); }
}
#gate .bunting {
  position: absolute;
  top: 0;
  left: 0;
}

/* ---------- Botão "Pausar animações" ---------- */
#btn-anim {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: var(--borda);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  font: 700 0.9rem var(--corpo);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--violeta);
}
#btn-anim:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--violeta); }
#btn-anim:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--violeta); }
.btn-anim-icone { font-size: 1rem; line-height: 1; }

/* ---------- Botão "Voltar ao topo" ---------- */
#btn-topo {
  position: fixed;
  bottom: 18px;
  right: 16px;
  z-index: 90;
  width: 54px;
  height: 54px;
  border: var(--borda);
  border-radius: 50%;
  background: var(--ambar);
  color: var(--tinta);
  font: 900 1.5rem/1 var(--corpo);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--pink);
  animation: vv-pop-topo 0.25s ease-out;
}
#btn-topo:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pink); }
#btn-topo:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pink); }
@keyframes vv-pop-topo {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Balões e brilhos ---------- */
.decor {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
}

.balao {
  position: absolute;
  bottom: -24vh;
  left: var(--x);
  width: var(--w);
  aspect-ratio: 0.84;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 70% 90%, rgba(61, 15, 51, 0.25), rgba(61, 15, 51, 0) 45%),
    var(--c);
  border: 2px solid rgba(61, 15, 51, 0.55);
  border-radius: 48% 52% 50% 50% / 56% 56% 44% 44%;
  animation: vv-flutua var(--t) linear infinite;
  animation-delay: var(--d);
  will-change: transform;
}
.balao::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--c);
}
.balao::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -48px;
  width: 2px;
  height: 40px;
  background: var(--tinta);
  opacity: 0.5;
  border-radius: 2px;
  transform: translateX(-50%) rotate(4deg);
}

@keyframes vv-flutua {
  0%   { transform: translateY(0) translateX(0) rotate(-2deg); }
  25%  { transform: translateY(-32vh) translateX(16px) rotate(2deg); }
  50%  { transform: translateY(-64vh) translateX(-14px) rotate(-2deg); }
  75%  { transform: translateY(-96vh) translateX(12px) rotate(2deg); }
  100% { transform: translateY(-130vh) translateX(0) rotate(-1deg); }
}

.brilho {
  position: absolute;
  color: var(--ambar);
  font-size: 1.7rem;
  text-shadow: 1px 1px 0 var(--tinta);
  animation: vv-brilha 2.6s ease-in-out infinite;
}
.brilho-pink { color: var(--pink); }
@keyframes vv-brilha {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.2) rotate(20deg); }
}

.serpentina {
  position: absolute;
  width: 70px;
  height: auto;
  animation: vv-serpenteia 5s ease-in-out infinite alternate;
}
.serp-esq { left: 4%; bottom: 8%; transform: rotate(-12deg); }
.serp-dir { right: 4%; top: 6%; transform: rotate(16deg); animation-delay: -2.4s; }
@keyframes vv-serpenteia {
  from { translate: 0 0; }
  to   { translate: 0 -10px; }
}

/* Pausa global: congela só as animações CONTÍNUAS */
body.anim-pausada .balao,
body.anim-pausada .brilho,
body.anim-pausada .blob,
body.anim-pausada .bunting,
body.anim-pausada .serpentina {
  animation-play-state: paused;
}
/* Com animações pausadas, o título aparece direto no estado final */
body.anim-pausada .palavra { animation: none; }
body.anim-pausada .nome::before { animation: none; transform: skewX(-8deg) scaleX(1); }

/* ---------- Confete (gerado no login) ---------- */
#camada-confete {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  overflow: clip;
}
.confete {
  position: absolute;
  top: -5vh;
  left: var(--x);
  width: var(--s);
  height: var(--h);
  background: var(--c);
  border-radius: var(--raio, 2px);
  opacity: 0.96;
  animation: vv-cai var(--t) ease-in var(--d) forwards;
}
@keyframes vv-cai {
  to { transform: translateY(114vh) rotate(var(--r)); opacity: 0.9; }
}

/* ============================================================
   PORTÃO (pseudo-login)
   ============================================================ */
#gate {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 84px 16px 48px;
}

.gate-card {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  background: var(--papel);
  border: var(--borda);
  border-radius: 26px;
  box-shadow: 10px 10px 0 var(--pink);
  padding: clamp(28px, 6vw, 44px);
  text-align: center;
  transform: rotate(-0.6deg);
}

.gate-card h1 { margin: 0 0 8px; }

.logo-svg { display: inline-block; }
.logo-gate { width: min(320px, 78vw); height: auto; aspect-ratio: 4; }
.logo-header { width: 220px; height: 55px; }

.gate-convite {
  margin: 0 0 24px;
  font-weight: 600;
}

#form-login { text-align: left; }

.campo { margin-bottom: 18px; }

.campo label {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  font: 1rem var(--corpo);
  color: var(--tinta);
  background: var(--creme);
  border: var(--borda);
  border-radius: 14px;
}
.campo input:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 2px;
}
.campo input[aria-invalid="true"] {
  border-color: var(--pink-forte);
  box-shadow: 3px 3px 0 var(--pink);
}

.campo-senha-wrap { display: flex; gap: 10px; }
.campo-senha-wrap input { flex: 1; min-width: 0; }

#btn-mostrar-senha {
  min-height: 50px;
  padding: 0 14px;
  border: var(--borda);
  border-radius: 14px;
  background: var(--papel);
  color: var(--tinta);
  font: 700 0.85rem var(--corpo);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ambar);
}
#btn-mostrar-senha:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ambar); }
#btn-mostrar-senha:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ambar); }

.dica { margin: 0 0 14px; }
.dica summary {
  cursor: pointer;
  color: var(--pink-forte);
  font-weight: 800;
  padding: 8px 2px;
  border-radius: 6px;
}
.dica summary:hover { color: var(--violeta); }
.dica p {
  margin: 8px 0 0;
  padding: 12px 16px;
  background: var(--ambar);
  border: 2px solid var(--tinta);
  border-radius: 12px;
  font-style: italic;
  font-weight: 600;
  transform: rotate(-0.8deg);
}

.erro {
  min-height: 1.4em;
  margin: 0 0 14px;
  font-weight: 800;
  color: var(--pink-forte);
}

.btn-entrar {
  width: 100%;
  min-height: 54px;
  border: var(--borda);
  border-radius: 16px;
  background: var(--violeta);
  color: #fff;
  font: 800 1.15rem var(--corpo);
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ambar);
}
.btn-entrar:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ambar); }
.btn-entrar:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ambar); }

.gate-assinatura {
  margin: 22px 0 0;
  font: italic 600 0.95rem var(--titulos);
}

/* ============================================================
   A FESTA
   ============================================================ */
.cabecalho {
  display: flex;
  justify-content: center;
  padding: 8px 76px 0;
}
@media (max-width: 760px) {
  .cabecalho { padding: 64px 20px 0; }
}

/* ---------- Hero (compacto) ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: clamp(20px, 4vh, 44px) 20px clamp(20px, 3vh, 36px);
  overflow: clip;
}
.hero > :not(.decor) { position: relative; z-index: 1; }

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 16px;
  background: var(--ambar);
  border: 2px solid var(--tinta);
  border-radius: 999px;
  font: 800 0.8rem var(--corpo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--tinta);
}

.hero h1 {
  margin: 0 auto 16px;
  max-width: 14ch;
  font: 900 clamp(2.5rem, 7.5vw, 4.6rem) / 1.06 var(--titulos);
  color: var(--tinta);
  text-shadow: 4px 4px 0 var(--ambar), 8px 8px 0 var(--pink);
}

.palavra {
  display: inline-block;
  animation: vv-pop 0.7s cubic-bezier(0.2, 0.7, 0.3, 1.25) both;
  animation-delay: var(--d);
}
@keyframes vv-pop {
  from { opacity: 0; transform: translateY(30px) rotate(-5deg) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

.palavra.nome {
  position: relative;
  color: var(--pink-forte);
  padding: 0 0.12em;
}
.palavra.nome::before {
  content: '';
  position: absolute;
  inset: 0.08em -0.1em -0.06em;
  background: var(--ambar);
  z-index: -1;
  transform: skewX(-8deg) scaleX(0);
  transform-origin: left center;
  animation: vv-marca 0.5s ease-out 0.9s forwards;
}
@keyframes vv-marca {
  to { transform: skewX(-8deg) scaleX(1); }
}

.hero-lead {
  max-width: 44ch;
  margin: 0 auto;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 600;
}

/* ---------- Abas / pills ---------- */
.abas {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 20px 56px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.pill {
  min-height: 48px;
  padding: 10px 20px;
  border: var(--borda);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  font: 800 1rem var(--corpo);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--tinta);
}
.pill:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.pill[aria-selected="true"] {
  background: var(--violeta);
  color: #fff;
  box-shadow: 4px 4px 0 var(--ambar);
  animation: vv-wiggle 0.35s ease;
}
@keyframes vv-wiggle {
  0%, 100% { rotate: 0deg; }
  30%      { rotate: -2.5deg; }
  65%      { rotate: 2deg; }
}

.painel {
  text-align: center;
  border-radius: 8px;
}
.painel-in { animation: vv-painel 0.32s ease both; }
@keyframes vv-painel {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.painel h2 {
  margin: 10px 0 6px;
  font: 900 clamp(2rem, 5vw, 2.9rem) / 1.12 var(--titulos);
  color: var(--tinta);
  text-shadow: 3px 3px 0 var(--ambar);
}
/* Squiggle embaixo do h2 */
.painel h2::after {
  content: '';
  display: block;
  width: 130px;
  height: 12px;
  margin: 12px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 12'%3E%3Cpath d='M2 8 Q 12 2 22 8 T 42 8 T 62 8 T 82 8 T 102 8 T 122 8' fill='none' stroke='%23E91E76' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.secao-sub {
  margin: 14px auto 26px;
  max-width: 52ch;
  font-weight: 600;
}

/* Entrada suave dos cards */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Cartas ---------- */
.carta-grid {
  display: grid;
  gap: 30px;
  margin-top: 26px;
  align-items: start;
  text-align: left;
}
@media (min-width: 880px) {
  .carta-grid { grid-template-columns: 2fr 3fr; }
  .carta-grid-invertida { grid-template-columns: 3fr 2fr; }
}

.carta {
  background: var(--papel);
  border: var(--borda);
  border-radius: 22px;
  padding: clamp(24px, 4.5vw, 42px);
  line-height: 1.75;
  transform: rotate(0.4deg);
}
.carta p { margin: 0 0 1em; }
.carta p:last-child { margin-bottom: 0; }

.sombra-ambar   { box-shadow: 8px 8px 0 var(--ambar); }
.sombra-pink    { box-shadow: 8px 8px 0 var(--pink); }
.sombra-violeta { box-shadow: 8px 8px 0 var(--violeta); }

.assinatura {
  font: italic 700 1.4rem var(--titulos);
  color: var(--pink-forte);
  text-align: right;
  margin-top: 1.2em !important;
}

.foto-card {
  margin: 0;
  border: var(--borda);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--tangerina);
  background: var(--papel);
  transform: rotate(-1.4deg);
}
.foto-card img {
  display: block;
  width: 100%;
  height: auto;
}
.foto-louise { transform: rotate(1.2deg); }
@media (min-width: 880px) {
  .foto-louise { max-height: 540px; }
  .foto-louise img { height: 100%; object-fit: cover; }
}

/* ---------- Vídeos ---------- */
.video-destaque {
  max-width: 390px;
  margin: 6px auto 0;
}

.grade-videos {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 28px;
  text-align: left;
}

.video-card {
  background: var(--papel);
  border: var(--borda);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.grade-videos .video-card:nth-child(4n+1) { box-shadow: 7px 7px 0 var(--pink); }
.grade-videos .video-card:nth-child(4n+2) { box-shadow: 7px 7px 0 var(--ambar); }
.grade-videos .video-card:nth-child(4n+3) { box-shadow: 7px 7px 0 var(--violeta); }
.grade-videos .video-card:nth-child(4n+4) { box-shadow: 7px 7px 0 var(--tangerina); }
.grade-videos .video-card:nth-child(odd)  { transform: rotate(-0.5deg); }
.grade-videos .video-card:nth-child(even) { transform: rotate(0.5deg); }
.grade-videos .video-card:hover { transform: translate(-2px, -2px) rotate(0deg); }

.video-card h3 {
  margin: 0;
  padding: 14px 18px 10px;
  font: 800 1.2rem var(--titulos);
}

@media (min-width: 640px) {
  .grade-videos .paisagem { grid-column: span 2; }
}

.video-wrap {
  position: relative;
  width: 100%;
  background: var(--tinta);
  border-top: var(--borda);
}
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Rodapé ---------- */
.rodape {
  position: relative;
  z-index: 1;
  background: var(--tinta);
  color: #FFE9F2;
  text-align: center;
  padding: 30px 20px;
  border-top: 4px solid var(--pink);
}
.rodape p { margin: 0 0 6px; }
.rodape-link { color: var(--ambar); }
.rodape-link:hover { color: #fff; }
.rodape-link:focus-visible { outline-color: var(--ambar); }
.rodape-mini { font-size: 0.85rem; opacity: 0.85; }

/* ============================================================
   Movimento reduzido (WCAG 2.3.3) — desliga tudo
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .decor, #camada-confete { display: none; }
  .blob, .bunting, .serpentina { animation: none; }
  .palavra { animation: none; }
  .palavra.nome::before { animation: none; transform: skewX(-8deg) scaleX(1); }
  .painel-in { animation: none; }
  #btn-topo { animation: none; }
  .pill[aria-selected="true"] { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .video-card, .pill, .btn-entrar, #btn-anim, #btn-mostrar-senha { transition: none; }
}