/* ═══════════════════════════════════════════════════════════════════
   Alice no País das Maravilhas — Convite Virtual
   Estética: mágica, elegante, misteriosa, cinematográfica.
   Mobile-first. Sem frameworks. Sem dependências externas.
═══════════════════════════════════════════════════════════════════ */

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── VARIÁVEIS DE DESIGN ─────────────────────────────────────────── */
:root {
  /* Paleta de cores */
  --clr-void:       #060010;
  --clr-deep:       #0a0018;
  --clr-dark:       #130030;
  --clr-purple:     #2a0058;
  --clr-violet:     #5800c0;
  --clr-gold:       #c9a84c;
  --clr-gold-light: #f5d98a;
  --clr-gold-dim:   #8a6e2a;
  --clr-cream:      #f0e8d8;
  --clr-text:       #e0d0ff;
  --clr-muted:      #9070b8;
  --clr-eyes-green: #7fff44;
  --clr-error:      #ff6b6b;

  /* Tipografia */
  --ff-display: Georgia, 'Times New Roman', serif;
  --ff-body:    'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Bordas */
  --radius-card: 1.75rem;
  --radius-btn:  3rem;
  --radius-input: 0.875rem;

  /* Curvas de animação */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:     cubic-bezier(0.55, 0.00, 1.00, 0.45);

  /* Camadas (z-index) */
  --z-intro:    10;
  --z-keyhole:  15;
  --z-eyes:     20;
  --z-invite:   30;
  --z-audio:    35;
  --z-modal:    50;

  /* Safe areas para notch/island */
  --safe-t: env(safe-area-inset-top,    0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left,   0px);
  --safe-r: env(safe-area-inset-right,  0px);
}

/* ── BASE ────────────────────────────────────────────────────────── */
html {
  height: 100%;
  /* Overflow oculto durante as cenas animadas. Liberado no JS ao mostrar convite. */
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  background: var(--clr-void);
  color: var(--clr-text);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Evita highlight azul ao tocar em elementos no mobile */
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── UTILITÁRIOS ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ══════════════════════════════════════════════════════════════════
   CENA 1 — INTRO
══════════════════════════════════════════════════════════════════ */
#scene-intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--clr-void);
  transition:
    opacity   0.5s var(--ease-out),
    transform 0.7s var(--ease-in);
  will-change: opacity, transform;
}

#scene-intro.is-leaving {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

/* Imagem de fundo da entrada */
.intro-bg {
  position: absolute;
  inset: 0;
  background-image:    url('assets/entrada.webp');
  background-size:     cover;
  background-position: center top;
  background-repeat:   no-repeat;
  /* Gradiente como fallback e sobreposição de legibilidade */
  background-color: var(--clr-purple);
  transition: transform 0.7s var(--ease-in);
}

/* Gradiente sobre a imagem para legibilidade do texto */
.intro-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 0, 16, 0.25) 0%,
    rgba(6, 0, 16, 0.05) 35%,
    rgba(6, 0, 16, 0.65) 70%,
    rgba(6, 0, 16, 0.96) 100%
  );
}

.intro-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding:
    2rem
    calc(var(--safe-r) + 1.5rem)
    calc(var(--safe-b) + 3rem)
    calc(var(--safe-l) + 1.5rem);
}

.intro-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 0.875rem;
  opacity: 0.9;
}

.intro-title {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 14vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--clr-cream);
  text-shadow:
    0 0 60px rgba(160, 0, 255, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.9);
  margin-bottom: 1rem;
}

.intro-subtitle {
  font-size: 0.95rem;
  color: var(--clr-muted);
  letter-spacing: 0.04em;
  margin-bottom: 2.75rem;
  line-height: 1.5;
}

/* ── BOTÃO DE ENTRADA (anel pulsante) ─────────────────────────── */
.btn-enter {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-enter:focus-visible {
  outline: 3px solid var(--clr-gold);
  outline-offset: 8px;
  border-radius: 50%;
}

.btn-enter-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.6);
  animation: ring-pulse 2.2s ease-out infinite;
}

.btn-enter-ring.ring-2 {
  animation-delay: 1.1s;
}

@keyframes ring-pulse {
  0%   { transform: scale(1);   opacity: 0.65; }
  100% { transform: scale(2.1); opacity: 0; }
}

.btn-enter-inner {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--clr-gold);
  color: var(--clr-void);
  font-family: var(--ff-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 28px rgba(201, 168, 76, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    transform 0.2s var(--ease-bounce),
    background 0.2s,
    box-shadow 0.2s;
}

.btn-enter:hover .btn-enter-inner,
.btn-enter:focus-visible .btn-enter-inner {
  transform: scale(1.12);
  background: var(--clr-gold-light);
  box-shadow: 0 0 40px rgba(245, 217, 138, 0.6);
}

.btn-enter:active .btn-enter-inner {
  transform: scale(0.96);
}

/* ── PARTÍCULAS FLUTUANTES (CSS-only) ────────────────────────── */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--clr-gold);
  opacity: 0;
  animation: particle-float 8s ease-in-out infinite;
}

.particle:nth-child(1)  { left: 15%; top: 20%; animation-delay: 0s;    animation-duration: 7s;  }
.particle:nth-child(2)  { left: 30%; top: 40%; animation-delay: 1s;    animation-duration: 9s;  }
.particle:nth-child(3)  { left: 55%; top: 15%; animation-delay: 2s;    animation-duration: 6s;  }
.particle:nth-child(4)  { left: 70%; top: 35%; animation-delay: 0.5s;  animation-duration: 8s;  }
.particle:nth-child(5)  { left: 85%; top: 25%; animation-delay: 3s;    animation-duration: 7.5s;}
.particle:nth-child(6)  { left: 20%; top: 60%; animation-delay: 1.5s;  animation-duration: 9s;  }
.particle:nth-child(7)  { left: 65%; top: 55%; animation-delay: 2.5s;  animation-duration: 6.5s;}
.particle:nth-child(8)  { left: 45%; top: 70%; animation-delay: 0.8s;  animation-duration: 8.5s;}

@keyframes particle-float {
  0%  { opacity: 0;    transform: translateY(0) scale(0.5); }
  20% { opacity: 0.7; }
  80% { opacity: 0.4; }
  100%{ opacity: 0;    transform: translateY(-60px) scale(1.2); }
}


/* ══════════════════════════════════════════════════════════════════
   OVERLAY DE TRANSIÇÃO — IRIS / FECHADURA
   Expande do centro como uma câmera abrindo para o escuro.
══════════════════════════════════════════════════════════════════ */
#keyhole-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-keyhole);
  background: var(--clr-void);
  pointer-events: none;
  /* Começa como um ponto invisível no centro */
  clip-path: circle(0% at 50% 50%);
}

#keyhole-overlay.is-expanding {
  pointer-events: all;
  transition: clip-path 0.75s var(--ease-in);
  clip-path: circle(150% at 50% 50%);
}


/* ══════════════════════════════════════════════════════════════════
   CENA 2 — OLHOS DO GATO DE CHESHIRE
══════════════════════════════════════════════════════════════════ */
#scene-eyes {
  position: fixed;
  inset: 0;
  z-index: var(--z-eyes);
  background: var(--clr-void);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}

#scene-eyes.is-visible {
  opacity: 1;
  pointer-events: all;
}

#scene-eyes.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

.eyes-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem;
}

/* Imagem dos olhos */
.cat-eyes-img {
  max-width: min(420px, 88vw);
  height: auto;
  opacity: 0;
  filter:
    drop-shadow(0 0 18px var(--clr-eyes-green))
    drop-shadow(0 0 50px rgba(127, 255, 68, 0.35));
  transition: opacity 1.2s var(--ease-out);
  animation: cat-blink 5s ease-in-out 2s infinite;
}

#scene-eyes.is-visible .cat-eyes-img {
  opacity: 1;
}

@keyframes cat-blink {
  0%, 42%, 58%, 100% { opacity: 1; }
  48%, 52%           { opacity: 0.08; }
}

/* Fallback CSS — olhos desenhados em CSS caso a imagem falhe */
.cat-eyes-css {
  display: none; /* JS revela se imagem falhar */
  gap: 4rem;
  align-items: center;
}

.css-eye {
  width:  clamp(60px, 16vw, 90px);
  height: clamp(36px, 10vw, 56px);
  background: var(--clr-eyes-green);
  border-radius: 50%;
  position: relative;
  box-shadow:
    0 0 20px var(--clr-eyes-green),
    0 0 50px rgba(127, 255, 68, 0.4);
  animation: cat-blink 5s ease-in-out 2s infinite;
}

.css-pupil {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28%;
  height: 90%;
  background: #000;
  border-radius: 40%;
}

/* Citação do Gato */
.eyes-quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1rem, 4vw, 1.35rem);
  color: var(--clr-muted);
  text-align: center;
  max-width: 300px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   1s var(--ease-out)  0.9s,
    transform 1s var(--ease-out)  0.9s;
}

#scene-eyes.is-visible .eyes-quote {
  opacity: 0.65;
  transform: none;
}


/* ══════════════════════════════════════════════════════════════════
   CENA 3 — CONVITE FINAL
══════════════════════════════════════════════════════════════════ */
#scene-invite {
  position: fixed;
  inset: 0;
  z-index: var(--z-invite);
  background: var(--clr-deep);
  opacity: 0;
  pointer-events: none;
  /* Overflow aqui dentro — body continua com overflow:hidden */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.7s var(--ease-out);
}

#scene-invite.is-visible {
  opacity: 1;
  pointer-events: all;
}

.invite-scroll {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Arte superior do convite */
.invite-art {
  width: 100%;
  height: 52vw;
  min-height: 200px;
  max-height: 55vh;
  background-image:    url('assets/festa-card.webp');
  background-size:     cover;
  background-position: center top;
  background-color:    var(--clr-purple);
  flex-shrink: 0;
  position: relative;
}

/* Gradiente que faz a arte fundir com o card */
.invite-art::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to bottom, transparent, var(--clr-deep));
}

/* Card com os dados da festa */
.invite-card {
  position: relative;
  z-index: 1;
  background: var(--clr-deep);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  margin-top: -2.5rem;
  padding:
    2rem
    1.5rem
    calc(var(--safe-b) + 2.5rem);
  text-align: center;
  flex: 1;
}

.invite-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-gold);
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

/* Nome da aniversariante — destaque principal */
.invite-name {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 15vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--clr-cream);
  text-shadow:
    0 0 40px rgba(180, 0, 255, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.75rem;
}

.invite-phrase {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  color: var(--clr-gold-light);
  margin-bottom: 0.625rem;
  opacity: 0.85;
  line-height: 1.5;
}

.invite-age {
  font-size: 1rem;
  color: var(--clr-muted);
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

.invite-age strong {
  color: var(--clr-text);
  font-weight: 600;
}

/* Separador decorativo */
.invite-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.invite-divider span {
  color: var(--clr-gold-dim);
  font-size: 0.6rem;
  opacity: 0.6;
}

/* ── LISTA DE DETALHES DA FESTA ─────────────────────────────── */
.invite-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2rem;
  text-align: left;
}

.invite-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 1rem;
}

.detail-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.1rem;
}

.detail-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-gold);
  opacity: 0.75;
  margin-bottom: 0.2rem;
}

.detail-value {
  display: block;
  font-size: 0.975rem;
  color: var(--clr-cream);
  font-weight: 500;
  line-height: 1.35;
}

.detail-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--clr-muted);
  line-height: 1.45;
  margin-top: 0.2rem;
}

/* ── BOTÕES DE AÇÃO ─────────────────────────────────────────── */
.invite-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── BOTÕES (base) ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 56px; /* Área de toque confortável */
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-btn);
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition:
    transform   0.15s var(--ease-bounce),
    box-shadow  0.2s,
    background  0.2s,
    border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 3px solid var(--clr-gold);
  outline-offset: 3px;
}

/* Botão primário — dourado sólido */
.btn-primary {
  background: var(--clr-gold);
  color: var(--clr-void);
  box-shadow: 0 4px 24px rgba(201, 168, 76, 0.28);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--clr-gold-light);
  box-shadow: 0 6px 32px rgba(245, 217, 138, 0.45);
  transform: translateY(-2px);
}

/* Botão secundário — contorno dourado */
.btn-secondary {
  background: transparent;
  color: var(--clr-text);
  border: 1.5px solid rgba(201, 168, 76, 0.35);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--clr-gold);
  color: var(--clr-gold-light);
  background: rgba(201, 168, 76, 0.05);
}

.btn-full {
  width: 100%;
}


/* ── BOTÃO DE ÁUDIO ─────────────────────────────────────────── */
.btn-audio {
  position: fixed;
  top:   calc(var(--safe-t) + 1rem);
  right: calc(var(--safe-r) + 1rem);
  z-index: var(--z-audio);
  width:  42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(10, 0, 24, 0.7);
  border: 1px solid rgba(201, 168, 76, 0.25);
  color: var(--clr-gold-dim);
  font-size: 1.1rem;
  cursor: pointer;
  display: none; /* JS ativa quando a cena de convite aparece */
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-audio.is-shown {
  display: flex;
}

.btn-audio.is-playing {
  color: var(--clr-gold);
  border-color: rgba(201, 168, 76, 0.5);
}

.btn-audio:hover,
.btn-audio:focus-visible {
  background: rgba(20, 0, 40, 0.85);
  color: var(--clr-gold-light);
}

.btn-audio:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════
   MODAL — CONFIRMAÇÃO DE PRESENÇA
══════════════════════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.modal.is-open {
  pointer-events: all;
}

/* Fundo escurecido */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.3s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal.is-open .modal-backdrop {
  opacity: 1;
}

/* Caixa deslizante de baixo para cima */
.modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--clr-dark);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 1.75rem 1.75rem 0 0;
  padding:
    2rem
    1.5rem
    calc(var(--safe-b) + 2rem);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-bounce);
}

.modal.is-open .modal-box {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--clr-muted);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--clr-text);
}

.modal-close:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 2px;
}

.modal-icon {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 0.625rem;
  line-height: 1;
}

.modal-title {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  color: var(--clr-cream);
  text-align: center;
  margin-bottom: 0.5rem;
}

.modal-desc {
  font-size: 0.9rem;
  color: var(--clr-muted);
  text-align: center;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

/* ── FORMULÁRIO ─────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.125rem;
}

.form-label {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
}

.form-input {
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-input);
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--clr-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.form-input::placeholder {
  color: rgba(144, 112, 184, 0.45);
}

.form-input:focus {
  outline: none;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.14);
}

.form-input.is-invalid {
  border-color: var(--clr-error);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);
}

.form-error {
  display: block;
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--clr-error);
  line-height: 1.4;
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════════════ */

/* Landscape estreito (celular deitado) */
@media (max-height: 480px) and (orientation: landscape) {
  .intro-title    { font-size: 2.25rem; }
  .intro-content  { padding-bottom: 1.5rem; }
  .invite-art     { max-height: 35vh; }
  .invite-name    { font-size: 2.5rem; }
  .modal-box      { border-radius: 1.25rem; }
}

/* Tablet e desktop */
@media (min-width: 640px) {

  .invite-scroll {
    align-items: center;
  }

  .invite-art {
    width: 100%;
    max-width: 560px;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    /* Centralizar a arte no desktop */
    align-self: center;
  }

  .invite-card {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-card);
    margin-top: 0;
    border: 1px solid rgba(201, 168, 76, 0.1);
  }

  .invite-actions {
    max-width: 400px;
    margin: 0 auto;
  }

  .modal-box {
    border-radius: 1.75rem;
    margin-bottom: 2rem;
  }
}

@media (min-width: 900px) {
  .intro-content {
    max-width: 600px;
    margin: 0 auto;
  }
}


/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION — acessibilidade
   Usuários que preferem menos animação vão direto ao convite.
══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }

  /* Oculta anéis pulsantes */
  .btn-enter-ring { display: none; }

  /* Partículas desativadas */
  .particles { display: none; }
}