/* ===== CONFIGURAÇÕES GERAIS ===== */

:root {
  --preto: #FFF9EC;
  --vinho: #E8C875;
  --rosa: #D9A92E;
  --rosa-claro: #B68A35;
  --branco: #49371D;
  --texto-suave: #78684B;

  --amarelo: #FFF5CC;
  --creme: #FFF9EC;
  --dourado: #E8C875;
  --marrom: #49371D;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  background: var(--creme);
  color: var(--marrom);
  font-family: "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

button {
  font: inherit;
}

.tela {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s ease, visibility .65s;
}

.tela.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ===== TELA INICIAL ===== */

.tela-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(232, 200, 117, .45),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #FFF9EC,
      #FFF1C2 60%,
      #FFF9EC
    );
}

.conteudo-inicial {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  text-align: center;
  animation: aparecer .9s ease both;
}

.subtitulo {
  margin-bottom: 22px;
  color: var(--rosa-claro);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .25em;
}

.conteudo-inicial h1 {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
  color: var(--marrom);
}

.conteudo-inicial h1 span,
.declaracao-conteudo h2 span {
  color: #B68A35;
  text-shadow: 0 2px 20px rgba(217, 169, 46, .2);
}

.descricao {
  margin-top: 24px;
  color: var(--texto-suave);
  font-size: 1rem;
}

.area-botoes {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 90px;
  margin-top: 24px;
}

/* ===== BOTÕES ===== */

.btn-sim,
.btn-nao {
  min-width: 125px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background .25s,
    box-shadow .25s,
    transform .25s;
}

/* Botão SIM */

.btn-sim {
  position: relative;
  z-index: 3;
  border: 1px solid #D9A92E;
  background: #E8C875;
  color: #49371D;
  box-shadow: 0 5px 22px rgba(182, 138, 53, .2);
}

.btn-sim:hover {
  background: #F1D995;
  box-shadow: 0 5px 30px rgba(182, 138, 53, .3);
  transform: translateY(-2px);
}

/* Botão NÃO */

.btn-nao {
  position: relative;
  z-index: 4;
  border: 1px solid #E2CC91;
  background: #FFFDF6;
  color: var(--marrom);
  white-space: nowrap;
  touch-action: manipulation;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-wrap: anywhere;
  touch-action: manipulation;
}

.btn-nao:hover {
  border-color: #D9A92E;
  background: #FFF5CC;
}

/* ===== ELEMENTOS DECORATIVOS ===== */

.decoracao {
  position: absolute;
  color: #D9A92E;
  opacity: .55;
  pointer-events: none;
  animation: flutuar 5s ease-in-out infinite;
}

.decoracao-1 {
  top: 17%;
  left: 13%;
  font-size: 3.5rem;
}

.decoracao-2 {
  top: 27%;
  right: 15%;
  font-size: 2.2rem;
  animation-delay: -2s;
}

.decoracao-3 {
  bottom: 15%;
  right: 22%;
  font-size: 2rem;
  animation-delay: -3s;
}

.dica {
  margin-top: 18px;
  color: #9B8765;
  font-size: .75rem;
}

/* ===== TELA DA DECLARAÇÃO ===== */

.tela-declaracao {
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at center,
      rgba(232, 200, 117, .35),
      transparent 65%
    ),
    linear-gradient(
      145deg,
      #FFF9EC,
      #FFF0BD 65%,
      #FFF9EC
    );
}

.fundo-brilho {
  position: absolute;
  z-index: 0;
  width: 340px;
  height: 340px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #F1D477;
  filter: blur(150px);
  opacity: .25;
  pointer-events: none;
  animation: pulsar 5s ease-in-out infinite alternate;
}

/* ===== FOTOS E Z-INDEX ===== */

.moldura {
  position: absolute;
  width: clamp(130px, 17vw, 230px);
  padding: 9px 9px 30px;
  overflow: hidden;
  border: 1px solid #E8D6A5;
  border-radius: 5px;
  background: #FFFDF6;
  box-shadow: 0 15px 45px rgba(89, 65, 24, .17);
  transition:
    transform .45s ease,
    box-shadow .45s ease;
  animation: fotoEntrar .9s ease both;
}

.moldura img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
}

.foto-1 {
  top: 9%;
  left: 7%;
  z-index: 1;
  transform: rotate(-12deg);
}

.foto-2 {
  top: 12%;
  right: 8%;
  z-index: 2;
  transform: rotate(10deg);
  animation-delay: .1s;
}

.foto-3 {
  bottom: 8%;
  left: 11%;
  z-index: 3;
  transform: rotate(8deg);
  animation-delay: .2s;
}

.foto-4 {
  right: 10%;
  bottom: 8%;
  z-index: 1;
  transform: rotate(-9deg);
  animation-delay: .3s;
}

.foto-5 {
  top: 50%;
  left: 50%;
  z-index: 1;
  width: clamp(110px, 13vw, 170px);
  transform: translate(-50%, -50%) rotate(-3deg);
  animation-delay: .4s;
}

.moldura:hover {
  z-index: 5;
  box-shadow: 0 0 35px rgba(217, 169, 46, .3);
}

.foto-1:hover {
  transform: rotate(-5deg) scale(1.06);
}

.foto-2:hover {
  transform: rotate(4deg) scale(1.06);
}

.foto-3:hover {
  transform: rotate(3deg) scale(1.06);
}

.foto-4:hover {
  transform: rotate(-4deg) scale(1.06);
}

.foto-5:hover {
  transform: translate(-50%, -50%) rotate(0) scale(1.06);
}

/* ===== TEXTO CENTRAL ===== */

.declaracao-conteudo {
  position: relative;
  z-index: 6;
  width: min(540px, 43vw);
  padding: 38px 32px;
  text-align: center;
  border: 1px solid #E8D6A5;
  border-radius: 18px;
  background: rgba(255, 249, 236, .93);
  box-shadow:
    0 10px 45px rgba(89, 65, 24, .12),
    0 0 40px rgba(217, 169, 46, .05);
  backdrop-filter: blur(9px);
  animation: aparecer .9s .2s ease both;
}

.declaracao-conteudo .subtitulo {
  font-size: .62rem;
  margin-bottom: 15px;
}

.declaracao-conteudo h2 {
  color: var(--marrom);
  font-size: clamp(1.65rem, 3.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.04em;
}

.mensagem {
  margin-top: 20px;
  color: #78684B;
  font-size: clamp(.82rem, 1.2vw, 1rem);
  line-height: 1.9;
}

.coracao-central {
  margin-top: 18px;
  color: #D9A92E;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(217, 169, 46, .4);
  animation: pulsar 1.7s ease-in-out infinite alternate;
}

.assinatura {
  margin-top: 12px;
  color: #A47A2A;
  font-family: Georgia, serif;
  font-style: italic;
}

/* ===== BOTÃO PARA VOLTAR ===== */

.botao-voltar {
  position: absolute;
  z-index: 10;
  top: 24px;
  left: 24px;
  padding: 9px 16px;
  border: 1px solid #E2CC91;
  border-radius: 999px;
  background: rgba(255, 249, 236, .95);
  color: var(--marrom);
  cursor: pointer;
  transition:
    border-color .2s,
    background .2s;
}

.botao-voltar:hover {
  border-color: #D9A92E;
  background: #FFF5CC;
}

/* ===== ANIMAÇÕES ===== */

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fotoEntrar {
  from {
    opacity: 0;
    scale: .9;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes flutuar {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -16px;
  }
}

@keyframes pulsar {
  from {
    opacity: .12;
  }

  to {
    opacity: .3;
  }
}

/* ===== RESPONSIVIDADE ===== */

@media (max-width: 900px) {
  .moldura {
    width: clamp(105px, 20vw, 170px);
    padding: 6px 6px 20px;
  }

  .foto-1 {
    left: 3%;
    top: 8%;
  }

  .foto-2 {
    right: 3%;
    top: 8%;
  }

  .foto-3 {
    left: 4%;
    bottom: 5%;
  }

  .foto-4 {
    right: 4%;
    bottom: 5%;
  }

  .declaracao-conteudo {
    width: min(470px, 60vw);
    padding: 28px 22px;
  }

  .foto-5 {
    width: 105px;
  }
}

@media (max-width: 560px) {
  .conteudo-inicial h1 {
    font-size: clamp(2.4rem, 10vw, 3.6rem);
  }

  .descricao {
    max-width: 290px;
    margin-inline: auto;
    margin-top: 20px;
  }

  .decoracao-1 {
    top: 12%;
    left: 5%;
  }

  .decoracao-2 {
    top: 17%;
    right: 6%;
  }

  .decoracao-3 {
    bottom: 10%;
    right: 12%;
  }

  .area-botoes {
    gap: 12px;
  }

  .btn-sim,
  .btn-nao {
    min-width: 105px;
    padding: 12px 20px;
  }

  /* Fotos próximas das bordas */

  .moldura {
    width: clamp(83px, 25vw, 120px);
    padding: 5px 5px 15px;
  }

  .foto-1 {
    top: 9%;
    left: 3%;
    transform: rotate(-10deg);
  }

  .foto-2 {
    top: 9%;
    right: 3%;
    transform: rotate(9deg);
  }

  .foto-3 {
    left: 3%;
    bottom: 7%;
    transform: rotate(7deg);
  }

  .foto-4 {
    right: 3%;
    bottom: 7%;
    transform: rotate(-8deg);
  }

  .foto-5 {
    width: 78px;
  }

  .declaracao-conteudo {
    width: 76vw;
    padding: 22px 16px;
    border-radius: 14px;
    background: rgba(255, 249, 236, .96);
  }

  .declaracao-conteudo .subtitulo {
    font-size: .48rem;
    letter-spacing: .15em;
  }

  .declaracao-conteudo h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .mensagem {
    margin-top: 14px;
    font-size: .77rem;
    line-height: 1.65;
  }

  .coracao-central {
    margin-top: 10px;
    font-size: 1.5rem;
  }

  .assinatura {
    font-size: .82rem;
  }

  .botao-voltar {
    top: 14px;
    left: 14px;
    font-size: .8rem;
  }
}

@media (max-height: 650px) and (min-width: 561px) {
  .moldura {
    width: 120px;
  }

  .declaracao-conteudo {
    padding: 18px 22px;
  }

  .mensagem {
    margin-top: 10px;
    line-height: 1.55;
  }

  .foto-1,
  .foto-2 {
    top: 4%;
  }

  .foto-3,
  .foto-4 {
    bottom: 4%;
  }
}

/* ===== ACESSIBILIDADE ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== FOTOS SOBREPOSTAS SEM COBRIR O TEXTO NO CELULAR ===== */

@media (max-width: 560px) {
  .tela-declaracao {
    position: fixed;
    overflow: hidden;
    isolation: isolate;
  }

  /* Cartão central com espaço para leitura */
  .declaracao-conteudo {
    position: relative;
    z-index: 6;

    width: 76vw;
    max-height: 68dvh;
    overflow-y: auto;

    margin-top: 5dvh;
    padding: 24px 14px;

    background: rgba(255, 249, 236, 0.97);
  }

  /* Todas as fotos ficam atrás do cartão */
  .moldura {
    position: absolute;
    z-index: 2;

    width: clamp(68px, 19vw, 92px);
    padding: 4px 4px 12px;

    pointer-events: none;
  }

  .moldura img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  /* Fotos superiores */
  .foto-1 {
    top: 5%;
    left: 5%;
    transform: rotate(-12deg);
  }

  .foto-2 {
    top: 5%;
    right: 5%;
    transform: rotate(10deg);
  }

  /* Fotos inferiores */
  .foto-3 {
    bottom: 5%;
    left: 5%;
    transform: rotate(9deg);
  }

  .foto-4 {
    bottom: 5%;
    right: 5%;
    transform: rotate(-10deg);
  }

  /* Quinta foto no centro superior, fora do texto */
  .foto-5 {
    top: 19%;
    left: 50%;
    width: 65px;
    transform: translateX(-50%) rotate(-4deg);
  }

  /* Garante que o conteúdo fique sempre à frente */
  .declaracao-conteudo h2,
  .declaracao-conteudo .subtitulo,
  .declaracao-conteudo .mensagem,
  .declaracao-conteudo .coracao-central,
  .declaracao-conteudo .assinatura {
    position: relative;
    z-index: 1;
  }
}

/* ===== TODAS AS FOTOS SOBRE A MOLDURA DO TEXTO ===== */

@media (max-width: 560px) {
  .declaracao-conteudo {
    position: relative;
    z-index: 6;
    overflow: visible;
  }

  /* Fotos superiores */
  .foto-1,
  .foto-2 {
    z-index: 8;
  }

  /* Foto central superior */
  .foto-5 {
    z-index: 8;
  }

  /* Fotos inferiores */
  .foto-3,
  .foto-4 {
    z-index: 8;
  }

  /* Texto sempre à frente das fotos */
  .declaracao-conteudo h2,
  .declaracao-conteudo .subtitulo,
  .declaracao-conteudo .mensagem,
  .declaracao-conteudo .coracao-central,
  .declaracao-conteudo .assinatura {
    position: relative;
    z-index: 9;
  }
}