/* ============================================================
   RESET / BASE
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* página única, sem scroll */
  background: #fdfdfd;
}

/* ============================================================
   FONTES E VARIÁVEIS GERAIS
   ============================================================ */
@font-face {
  font-family: "AprilJune";
  src: url("../assets/font/April June.ttf") format("truetype");
}

:root {
  /* ==========================================================
     CONTROLES DO MAR
     ========================================================== */
  --scale-mar: 1.02; /* Escala: 1.0 é o original, 1.05 aumenta 5% */
  --x-mar: 0px; /* Eixo X: Positivo move para direita, negativo para esquerda */
  --y-mar: 15px; /* Eixo Y: Positivo move para baixo, negativo move para cima */
  --corte-mar: 15%; /* Corte: Fatia % do topo da imagem para esconder a faixa clara */

  /* ==========================================================
     CONTROLES DO MAR (MOBILE)
     ========================================================== */
  --s-m-mob: 1.1; /* Escala: 1.1 aumenta em 10% para garantir que cubra as bordas */
  --x-m-mob: 0px; /* Eixo X: Positivo move para a direita, negativo para a esquerda */
  --y-m-mob: 75px; /* Eixo Y: Positivo empurra para baixo (para tampar o branco) */

  /* ==========================================================
     CONTROLES DO YOUTUBE
     ========================================================== */

  /* PARA CELULAR: */
  --yt-w-mob: 18px;
  --yt-x-mob: 0px; /* <- Positivo vai para direita, negativo para esquerda */
  --yt-top-mob: 37.5%;

  /* PARA COMPUTADOR: */
  --yt-w-desk: 45px;
  --yt-x-desk: 25px; /* <- Positivo vai para direita, negativo para esquerda */
  --yt-top-desk: 18%;

  /* ==========================================================
     CONTROLE DE ÁUDIO (Ajuste por aqui)
     ========================================================== */
  --bgm-volume: 0.2; /* Valores de 0.0 (mudo) até 0.2 é o que tava
  /* ==========================================================
     FONTES E CORES
     ========================================================== */
  --cor-txt: #8a1f2b; /* Tom vinho */
  /* Antes estava: clamp(18px, 4vmin, 26px) */
  --tam-txt-mob: clamp(
    10px,
    3.5vmin,
    21px
  ); /* Reduzimos os três valores para encolher no celular */

  --tam-txt-desk: clamp(
    20px,
    3vw,
    32px
  ); /* O desktop continua igual, intocado */

  /* ==========================================================
     CONTROLES DA CAIXA (MOBILE / CELULAR)
     ========================================================== */
  --cx-w-mob: 60%; /* Aumentamos de 25% para 80% para caber nomes longos */
  --cx-h-mob: 0.2em; /* Mantenha aquele 0.2em que ajustamos para não cortar o topo/base */
  --cx-x-mob: 5px;
  --cx-y-mob: 85px;

  /* ==========================================================
     CONTROLES DA CAIXA (DESKTOP / PC)
     ========================================================== */
  --cx-w-desk: 30%; /* Aumentamos de 15% para 50% */
  --cx-h-desk: 0.2em;
  --cx-x-desk: 30px;
  --cx-y-desk: 178px;
}

/* ============================================================
   SISTEMA DE CONFETES (JS)
   ============================================================ */
#confete-container {
  position: fixed; /* Desprende do cenário e prende no monitor */
  top: 0;
  left: 0;
  width: 100vw; /* 100% da largura da tela real */
  height: 100vh; /* 100% da altura da tela real */
  pointer-events: none;
  z-index: 9999; /* Máxima prioridade possível */
  overflow: hidden;
}

/* ============================================================
   PALCO RESPONSIVO
   O .stage mantém SEMPRE a proporção exata da arte (sem cortar
   nada), centralizado na tela, com "letterbox" se a proporção
   da janela não bater com a da arte.
   ============================================================ */
.stage-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdfdfd;
  overflow: hidden;
}

.stage {
  position: relative;
  --ratio: 0.5625; /* 1080 / 1920 — proporção mobile (retrato) */
  width: min(100vw, calc(100vh * var(--ratio)));
  height: min(100vh, calc(100vw / var(--ratio)));
}

/* Telas em paisagem (tablets, notebooks, monitores) usam a arte desktop */
@media (orientation: landscape) {
  .stage {
    --ratio: 1.77778; /* 1920 / 1080 — proporção desktop */
  }
}

/* ============================================================
   CAMADAS (FUNDO, NUVENS, BOLO, MAR, CARTA)
   Cada layer-set ocupa o palco inteiro; só um conjunto (mobile
   ou desktop) fica visível por vez, trocado via orientation.
   ============================================================ */
/* ============================================================
   MAR MOBILE
   ============================================================ */
.layer--mar-mob {
  object-fit: cover;
  object-position: bottom;

  /* Aplica as variáveis de controle */
  scale: var(--s-m-mob);
  translate: var(--x-m-mob) var(--y-m-mob);
}
.layer-set {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer-set--desktop {
  display: none;
}

@media (orientation: landscape) {
  .layer-set--mobile {
    display: none;
  }
  .layer-set--desktop {
    display: block;
  }
}

.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* por enquanto nada é clicável */
  user-select: none;
}

.is-hidden {
  display: none !important;
}

/* ============================================================
   ÁREA DE ASSINATURA
   Posicionada em % sobre a linha pontilhada da carta aberta.
   Os valores foram medidos diretamente em cima da arte —
   pode precisar de pequenos ajustes depois de ver no navegador.
   ============================================================ */
/* ============================================================
   ÁREA DE ASSINATURA E INPUT
   ============================================================ */
.signature-area {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition:
    opacity 0.6s ease,
    visibility 0.6s;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
}

.signature-input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cx-w-mob);
  transform: translate(
    calc(-50% + var(--cx-x-mob)),
    calc(-50% + var(--cx-y-mob))
  );

  background: transparent;
  border: none;
  border-radius: 999px;
  padding: var(--cx-h-mob) 1em;

  font-family: "AprilJune", cursive;
  font-size: var(--tam-txt-mob);
  color: var(--cor-txt);
  text-align: center;
  outline: none;

  /* Adicione esta linha para travar em maiúsculo: */
  text-transform: uppercase;
}

.signature-input::placeholder {
  color: rgba(138, 31, 43, 0.45);

  /* Remove a trava de maiúsculo apenas do texto temporário */
  text-transform: none;
}

.signature-input:focus {
  border-color: var(--cor-txt);
}

/* Ajustes lendo as variáveis em pixel para Desktop */
@media (orientation: landscape) {
  .signature-input {
    width: var(--cx-w-desk);
    padding: var(--cx-h-desk) 1em;
    font-size: var(--tam-txt-desk);

    /* Aplica o cálculo dos pixels do desktop */
    transform: translate(
      calc(-50% + var(--cx-x-desk)),
      calc(-50% + var(--cx-y-desk))
    );
  }
}

/* ============================================================
   EFEITO DE ABERTURA E DESTAQUE DA CARTA
   ============================================================ */

/* A transição de TUDO (opacidade, tamanho e filtro) fica exclusivamente aqui na raiz */
.layer--carta {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    visibility 0.6s,
    filter 0.3s ease; /* Filtro adicionado na base */
}

/* Carta fechada precisa aceitar o clique do mouse */
.layer--carta-fechada {
  cursor: pointer;
  pointer-events: auto;
}

/* Destaque visual e movimento ao passar o mouse na carta fechada */
.layer--carta-fechada:hover {
  /* 1. BRILHO BRANCO */
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9));

  /* 2. BALANÇO */
  animation: menuWiggle 0.3s ease-in-out 1;

  /* IMPORTANTE: NENHUMA propriedade de 'transition' aqui dentro para não quebrar a abertura */
}

/* Estado inicial: Carta aberta invisível e levemente encolhida (95%) */
.layer--carta-aberta {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
}

/* Estado inicial: Assinatura invisível */
.signature-area {
  transition:
    opacity 0.6s ease,
    visibility 0.6s;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
}

/* --- ESTADOS QUANDO A CARTA FOR ABERTA --- */

.stage.aberto .layer--carta-fechada {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
}

.stage.aberto .layer--carta-aberta {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.stage.aberto .signature-area {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   KEYFRAMES DO BALANÇO DA CARTA FECHADA
   ============================================================ */
@keyframes menuWiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* ============================================================
   REGRAS PARA BACKGROUND ULTRA-WIDE (DESKTOP)
   ============================================================ */

.layer-set--bg {
  z-index: 0;
}

.stage {
  z-index: 1;
}

.layer-set--front {
  z-index: 2;
  /* Garante que o bolo não bloqueie o clique na carta ou no input */
  pointer-events: none;
}

/* ============================================================
   ANIMAÇÃO DOS BOLOS (EFEITO GELATINA SUTIL)
   ============================================================ */
.layer--bolo {
  /* Desliga o top:0 da classe base e fixa apenas na base da tela */
  top: auto;
  bottom: 0;

  /* Cria uma sobra de 5% para cima, escondendo o limite da imagem */
  height: 105%;

  transform-origin: bottom center;
  object-fit: cover;
  object-position: bottom;

  animation: gelatinaBolo 4s ease-in-out infinite;
}

/* ============================================================
   ANIMAÇÃO DO MAR (ONDULAÇÃO VERTICAL NO TOPO)
   ============================================================ */
.layer--mar {
  transform-origin: bottom center;
  animation: ondaMar 6s ease-in-out infinite;

  /* Aplica a escala de forma independente */
  scale: var(--scale-mar);

  /* Aplica as variáveis X e Y usando pixels */
  translate: var(--x-mar) var(--y-mar);

  /* Mantém a tesoura para cortar a parte clara do topo */
  clip-path: inset(var(--corte-mar) 0 0 0);

  z-index: 10;
}

@keyframes ondaMar {
  0%,
  100% {
    /* Estado original, água parada */
    transform: scaleY(1) skewY(0deg);
  }
  25% {
    /* Estica 2% para cima e inclina a "onda" meio grau para a direita */
    transform: scaleY(1.02) skewY(0.5deg);
  }
  50% {
    /* Volta a relaxar */
    transform: scaleY(1) skewY(0deg);
  }
  75% {
    /* Estica 2% para cima e inclina a "onda" meio grau para a esquerda */
    transform: scaleY(1.02) skewY(-0.5deg);
  }
}

@media (orientation: landscape) {
  /* ============================================================
     CONTROLES DA CARTA (ESCALA E POSIÇÃO)
     ============================================================ */
  .stage {
    /* Altere estes valores para controlar o layout: */
    --carta-scale: 0.9; /* Tamanho da carta FECHADA */
    --carta-aberta-scale: 1.1; /* Tamanho da carta ABERTA (1.1 = 10% maior) */
    --carta-x: 0px; /* Valores positivos movem para a direita, negativos para esquerda */
    --carta-y: -70px; /* Valores positivos movem para baixo, negativos para cima */
  }

  /* Aplicamos o transform na carta e na assinatura juntas para não desalinhar os inputs */
  .layer-set--fg,
  .signature-area {
    /* Adicionamos a transição aqui para que o crescimento seja suave */
    transition: transform 0.6s ease;
    transform: translate(var(--carta-x), var(--carta-y))
      scale(var(--carta-scale));
    transform-origin: center center;
  }

  /* Quando o JavaScript adiciona a classe .aberto, o CSS altera a escala de tudo */
  .stage.aberto .layer-set--fg,
  .stage.aberto .signature-area {
    transform: translate(var(--carta-x), var(--carta-y))
      scale(var(--carta-aberta-scale));
  }

  /* ============================================================
     COMPORTAMENTO DAS CAMADAS DE FUNDO E FRENTE
     ============================================================ */
  .layer-set--bg .layer,
  .layer-set--front .layer {
    width: 100%;
    height: 100%;
  }

  .layer-set--bg .layer--fundo {
    object-fit: cover;
    object-position: center;
  }

  .layer-set--bg .layer--nuvens {
    object-fit: cover;
    object-position: center;
    /* Aplica a animação no desktop */
    animation: driftNuvens 20s ease-in-out infinite;
    transform-origin: center center;
  }

  /* Atualizamos o endereço do mar para --front */
  .layer-set--front .layer--mar,
  .layer-set--front .layer--bolo {
    object-fit: cover;
    object-position: bottom;
  }
}

/* ============================================================
   APLICAÇÃO DA ANIMAÇÃO NO MOBILE
   ============================================================ */
@media (orientation: portrait) {
  .layer-set--mobile .layer--nuvens {
    animation: driftNuvens 10s ease-in-out infinite;
    transform-origin: center center;
  }
}

/* ============================================================
   KEYFRAMES DA ANIMAÇÃO DAS NUVENS
   ============================================================ */
@keyframes driftNuvens {
  0% {
    transform: scale(1.06) translateX(-1.5%);
  }
  50% {
    transform: scale(1.06) translateX(1.5%);
  }
  100% {
    transform: scale(1.06) translateX(-1.5%);
  }
}

/* ============================================================
   KEYFRAMES DA GELATINA (BOLOS)
   ============================================================ */
@keyframes gelatinaBolo {
  0%,
  100% {
    /* Base estável, tamanho normal */
    transform: scale(1, 1);
  }
  50% {
    /* Eixo X travado em 1.
       Eixo Y em 1.02 (estica 2% para cima).
       Como a base está travada no rodapé, ele cresce apenas para cima! */
    transform: scale(1, 1.02);
  }
}

/* ============================================================
   MODAL DE ERRO (BLOQUEIO DE NOME)
   ============================================================ */
.modal-erro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(253, 253, 253, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}

.modal-erro.ativo {
  opacity: 1;
  visibility: visible;
}

.modal-caixa {
  background: #fff;
  border: 2px solid var(--cor-txt);
  border-radius: 12px;
  padding: 30px 50px;
  box-shadow: 0 10px 30px rgba(138, 31, 43, 0.2);
  transform: scale(0.8);
  transition: transform 0.3s ease;
  text-align: center;
  cursor: pointer;
}

.modal-erro.ativo .modal-caixa {
  transform: scale(1);
}

.modal-txt {
  /* Trocamos a cursiva por fontes nativas limpas do sistema */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

  /* Ajustamos o tamanho para combinar com a nova fonte mais encorpada */
  font-size: clamp(18px, 3vw, 26px);

  /* Deixamos a fonte grossa, maiúscula e espaçada para máxima leitura */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;

  color: var(--cor-txt);
}

/* ============================================================
   LINK YOUTUBE TOPO DA CARTA
   ============================================================ */
.link-yt {
  position: absolute;
  top: var(--yt-top-mob);
  left: 50%;

  /* Mantém o centro (-50%) e empurra para o lado com a sua variável */
  transform: translateX(calc(-50% + var(--yt-x-mob)));

  text-decoration: none;
  z-index: 10;
  cursor: pointer;
}

.icone-yt {
  width: var(--yt-w-mob);
  height: var(--yt-w-mob);
  fill: #f2a900;
  transition:
    transform 0.3s ease,
    filter 0.3s ease,
    fill 0.3s ease;
}

.link-yt:hover .icone-yt {
  fill: #f2a900;
  transform: scale(1.15);
  filter: drop-shadow(0 4px 10px rgba(242, 169, 0, 0.6));
}

/* Ajustes para Desktop */
@media (orientation: landscape) {
  .link-yt {
    top: var(--yt-top-desk);
    /* Traz o cálculo do PC para cá também */
    transform: translateX(calc(-50% + var(--yt-x-desk)));
  }
  .icone-yt {
    width: var(--yt-w-desk);
    height: var(--yt-w-desk);
  }
}