/* =====================================================
   ESTILO BASE & FUNDO BANDEIRA LÉSBICA PASTEL
   ===================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(
    135deg, 
    #ffb3a7 0%,   
    #ffd8be 25%,  
    #ffffff 50%,  
    #f8c8dc 75%,  
    #e8a5c8 100%  
  );
  background-attachment: fixed;
  font-family: 'Fredoka', cursive, sans-serif;
  color: #5c3d46;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
}

/* Fonte Cursiva para o Bilhete */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

/* CARTÃO PRINCIPAL */
.card {
  background: #fff3e8; /* Tom creme/pêssego pastel */
  border-radius: 18px;
  width: 100%;
  max-width: 440px;
  /* Espaçamento interno ajustado: 45px na esquerda cria a margem perfeita para o fichário */
  padding: 40px 25px 30px 48px;
  text-align: center;
  position: relative;
  border: 2px solid #f3cbbe;
  box-shadow: 0 15px 35px rgba(180, 100, 120, 0.18);
  border-left: 2px solid #f8a5a5; /* Linha de margem do caderno */
  z-index: 1; /* isola o cartão em seu próprio contexto de empilhamento, para a chuva poder passar por cima do bilhete sem "vazar" para dentro do cartão inteiro */
}

/* ARGOLAS DELICADAS DO CADERNO (Lado Esquerdo) */
.card::after {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 10px;
  width: 14px;
  /* Argolas prateadas/rosé bem fininhas */
  background-image: repeating-linear-gradient(
    to bottom,
    #8a8a8a 0px,
    #e0e0e0 2px,
    #8a8a8a 4px,
    transparent 4px,
    transparent 24px
  );
  z-index: 2;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.18));
}

/* FUROS DO CADERNO (Onde as argolas passam) */
.card::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 20px;
  width: 6px;
  /* Furos circulares escuros */
  background-image: repeating-linear-gradient(
    to bottom,
    #d8b8a8 0px,
    #d8b8a8 6px,
    transparent 6px,
    transparent 24px
  );
  border-radius: 50%;
  z-index: 1;
}

/* BILHETINHO MINI (Discreto e fofo no canto) */
.sticky-note {
  position: absolute;
  top: -15px;
  right: 20px;
  background: #fff29e; /* Amarelo post-it delicado */
  color: #8c3245;
  padding: 4px 10px; /* Bem menor e compacto */
  border-radius: 2px;
  transform: rotate(4deg);
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
  z-index: 10;
  border: 1px solid #ebd96e;
}

.note-text {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.05rem; /* Letra num tamanho delicado */
  font-weight: 600;
  display: block;
  line-height: 1.1;
  white-space: nowrap;
}

/* MINI CLIPE DE PAPEL ROSA */
.paper-clip {
  position: absolute;
  top: -15px;
  left: 8px;
  width: 6px;
  height: 16px;
  border: 2px solid #ff758f;
  border-radius: 5px;
  background: transparent;
  z-index: 11;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
  transform: rotate(-10deg);
}

/* Parte interna da dobra do clipe */
.paper-clip::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 1px;
  width: 2px;
  height: 12px;
  background: #ff758f;
  border-radius: 2px;
}

/* Linhas sutis pautadas no fundo */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    transparent,
    transparent 27px,
    rgba(230, 170, 180, 0.12) 28px
  );
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
}

.card > * {
  position: relative;
  z-index: 1;
}

/* Linhas sutis pautadas no fundo */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    transparent,
    transparent 27px,
    rgba(230, 170, 180, 0.12) 28px
  );
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
}

.card > * {
  position: relative;
  z-index: 1;
}

/* BRILHINHOS PIXEL ART */
.pixel-star {
  position: fixed;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='100%' height='100%' shape-rendering='crispEdges'><path fill='%23ffe66d' d='M3 0h1v7H3zM0 3h7v1H0zM2 2h3v3H2z'/><path fill='%23ffffff' d='M3 3h1v1H3z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 1;
  animation: twinkle 2.5s infinite ease-in-out;
}

.star-left-1 { top: 25%; left: calc(50% - 260px); width: 24px; height: 24px; animation-delay: 0s; }
.star-left-2 { top: 70%; left: calc(50% - 250px); width: 18px; height: 18px; animation-delay: 1.2s; }
.star-right-1 { top: 35%; left: calc(50% + 235px); width: 22px; height: 22px; animation-delay: 0.6s; }
.star-right-2 { top: 80%; left: calc(50% + 225px); width: 18px; height: 18px; animation-delay: 1.8s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8) translateY(0px); }
  50% { opacity: 1; transform: scale(1.2) translateY(-4px); }
}

/* DIVISOR DE FLORES TRANS PIXEL ART */
.pixel-flower-divider {
  width: 100%;
  height: 24px;
  margin: 18px 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' width='100%' height='100%' shape-rendering='crispEdges'><g transform='translate(10, 0)'><path fill='%23a7d8de' d='M3 2h2v2H3zm-2 2h2v2H1zm4 0h2v2H5zm-2 2h2v2H3z'/><path fill='%23f8c8dc' d='M33 2h2v2h-2zm-2 2h2v2h-2zm4 0h2v2h-2zm-2 2h2v2h-2z'/><path fill='%23ffffff' d='M63 2h2v2h-2zm-2 2h2v2h-2zm4 0h2v2h-2zm-2 2h2v2h-2z'/><path fill='%23f8c8dc' d='M93 2h2v2h-2zm-2 2h2v2h-2zm4 0h2v2h-2zm-2 2h2v2h-2z'/><path fill='%23a7d8de' d='M123 2h2v2h-2zm-2 2h2v2h-2zm4 0h2v2h-2zm-2 2h2v2h-2z'/><path fill='%23ffe66d' d='M3 4h2v2H3zm30 0h2v2h-2zm30 0h2v2h-2zm30 0h2v2h-2zm30 0h2v2h-2z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* CORAÇÃO PRINCIPAL */
.heart-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.pixel-heart-btn {
  width: 60px;
  height: 52px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 13' width='100%' height='100%' shape-rendering='crispEdges'><path fill='%23000000' d='M2 0h4v1H2zm7 0h4v1H9zM1 1h1v1H1zm5 1h3v1H6zm6-1h1v1h-1zM0 2h1v5H0zm14 0h1v5h-1zM1 7h1v1H1zm12 0h1v1h-1zM2 8h1v1H2zm10 0h1v1h-1zM3 9h1v1H3zm8 0h1v1h-1zM4 10h1v1H4zm6 0h1v1h-1zM5 11h1v1H5zm4 0h1v1h-1zM6 12h3v1H6z'/><path fill='%23ffffff' d='M2 1h2v1H2zm-1 1h1v2H1z'/><path fill='%23ff6685' d='M4 1h2v1H4zm5 0h4v1H9zM2 2h4v1H2zm7 0h5v1H9z'/><path fill='%23ff4d73' d='M1 3h13v1H1z'/><path fill='%23ff3360' d='M1 4h13v1H1z'/><path fill='%23e6194b' d='M1 5h13v1H1z'/><path fill='%23cc0033' d='M1 6h13v1H1zm1 1h11v1H2zm1 1h9v1H3zm1 1h7v1H4zm1 1h5v1H5zm1 1h3v1H6z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 0.15s ease;
}

.pixel-heart-btn:hover { transform: scale(1.15); }
.pixel-heart-btn:active { transform: scale(0.95); }

.btn-label {
  font-weight: 600;
  color: #c94a6e;
  margin-top: 8px;
}

/* CAIXA DE STATUS */
.status-box {
  background: #fff0f3;
  border: 2px dashed #f8c8dc;
  border-radius: 16px;
  padding: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.status-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(248, 200, 220, 0.5);
}

.status-title {
  color: #c94a6e;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* CONTAINER DO ENVELOPE + CORAÇÕES */
.envelope-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ENVELOPE FECHADO (PADRÃO) */
.pixel-envelope {
  width: 22px;
  height: 16px;
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' width='100%' height='100%' shape-rendering='crispEdges'><path fill='%23000' d='M0 0h16v12H0z'/><path fill='%23ffffff' d='M1 1h14v10H1z'/><path fill='%23e352a1' d='M2 2h12v1H2zm1 1h10v1H3zm1 1h8v1H4zm1 1h6v1H5zm1 1h4v1H6zm1 1h2v1H7z'/><path fill='%23ff99cc' d='M7 5h2v2H7z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 0.2s ease;
}

/* ENVELOPE ABRINDO AO PASSAR O MOUSE */
.status-box:hover .pixel-envelope {
  transform: translateY(-2px) scale(1.1);
  /* Troca para a textura de envelope aberto */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' width='100%' height='100%' shape-rendering='crispEdges'><path fill='%23000' d='M0 3h16v9H0z'/><path fill='%23e352a1' d='M3 0h10v3H3z'/><path fill='%23ffffff' d='M1 4h14v7H1z'/><path fill='%23ff99cc' d='M4 4h8v2H4zm2 2h4v2H6z'/></svg>");
}

/* CORAÇÕES FLUTUANTES */
.floating-heart {
  position: absolute;
  top: -2px;
  font-size: 0.75rem;
  color: #ff4d73;
  opacity: 0;
  pointer-events: none;
  font-weight: bold;
}

/* Animação disparada no Hover */
.status-box:hover .floating-heart.h1 {
  animation: floatUp 0.8s ease-out forwards;
  left: -4px;
}

.status-box:hover .floating-heart.h2 {
  animation: floatUp 0.9s ease-out 0.15s forwards;
  left: 6px;
  color: #c94a6e;
}

.status-box:hover .floating-heart.h3 {
  animation: floatUp 0.8s ease-out 0.3s forwards;
  right: -4px;
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6) rotate(0deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-22px) scale(1.2) rotate(15deg);
  }
}

/* MÚSICA E VINIL RETRÔ */
.now-playing {
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: #a3828a;
}

.song-title {
  font-weight: 600;
  color: #c94a6e;
}

.pixel-vinyl {
  width: 72px;
  height: 72px;
  margin: 15px auto;
  border-radius: 50%;
  background: 
    radial-gradient(circle at center, #000 0%, #000 8%, transparent 8%),
    radial-gradient(circle at center, #fff 8%, #fff 12%, #ff6699 12%, #ff6699 35%, transparent 35%),
    repeating-radial-gradient(circle at center, #111 35%, #222 38%, #111 41%, #000 45%),
    #111;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.3s ease;
}

.pixel-vinyl.spinning {
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn {
  background: #ffb3c1;
  color: #5c3d46;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn:hover { background: #ff8fa3; }

/* =====================================================
   MASCOTES INTERATIVOS (AJUSTE DE ALINHAMENTO)
   ===================================================== */
.mascots {
  display: flex;
  justify-content: center;
  align-items: flex-end; 
  gap: 30px;
}

.mascot-wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center; 
  width: 101px; 
}

.pixel-mascot {
  width: 108px;
  height: 75px; /* proporção ajustada para o novo viewBox 26x18, sem esticar o pixel art */
  aspect-ratio: 26 / 18;
  display: block; 
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 0.2s ease, scale 0.2s ease; /* Adicionada transição para scale */
}

/* 1. Virar a Alice de frente para a Julia usando a propriedade individual scale */
#catWrapper .pixel-mascot {
  scale: -1 1; /* Inverte no eixo X e mantém 1 no eixo Y */
}

/* 2. Efeito de Hover Funcional (Preenchimento visual/Animação) */
.mascot-wrapper:hover .pixel-mascot {
  transform: translateY(-8px); /* Faz a mascote flutuar um pouco ao passar o mouse */
}

/* Garante que o gato continue espelhado mesmo durante o hover */
#catWrapper:hover .pixel-mascot {
  transform: translateY(-8px);
  scale: -1 1; /* Mantém o espelhamento ativo */
}


.mascot-name {
  font-size: 0.85rem;
  margin-top: 8px;
  margin-bottom: 0;
  text-align: center;
}

/* ANIMAÇÃO 1: Alice Deita e Dorme (Zzz) */
.sleep-zzz {
  position: absolute;
  top: -15px;
  right: 10px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

#catWrapper.sleeping .sleep-zzz {
  opacity: 1;
  transform: translateY(-8px);
}

/* ANIMAÇÃO 2: Julia Pula e Dá uma Voltinha */
.fox-spin-jump {
  animation: foxJump 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes foxJump {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-22px) rotate(360deg) scale(1.15); }
  100% { transform: translateY(0) rotate(720deg) scale(1); }
}

/* ANIMAÇÃO 3: Alice Dá uma Voltinha e Vai Dormir */
.cat-spin-sleep {
  animation: catSpinSleep 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.cat-spin-wake {
  animation: catSpinWake 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes catSpinSleep {
  0%   { transform: rotate(0deg) scale(1); }
  55%  { transform: rotate(360deg) scale(1.15); }
  100% { transform: rotate(360deg) scaleY(0.75) translateY(12px); }
}

@keyframes catSpinWake {
  0%   { transform: rotate(0deg) scaleY(0.75) translateY(12px); }
  55%  { transform: rotate(-360deg) scale(1.15); }
  100% { transform: rotate(-360deg) scale(1); }
}

.mascot-name {
  font-size: 0.85rem;
  margin-top: 5px;
}

/* RODAPÉ */
.footer {
  margin-top: 20px;
  font-size: 0.8rem;
  color: #a3828a;
}

.footer-link a {
  color: #c94a6e;
  text-decoration: underline;
}

/* =====================================================
   PRESENTE DE 10 MESES ♡
   ===================================================== */

/* Esconde elementos que ainda não devem aparecer */
.hidden {
  display: none !important;
}


/* =====================================================
   CONTAINER DO PRESENTE
   ===================================================== */

.anniversary-gift {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1000;

  pointer-events: none;

  /* Camada suave sobre o Love Link */
  background: rgba(255, 243, 232, 0.72);

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  animation: anniversaryOverlay 0.5s ease-out;
}

@keyframes anniversaryOverlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* =====================================================
   PRESENTE FECHADO
   ===================================================== */

.gift-wrapper {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  pointer-events: auto;

  animation: giftAppear 0.8s ease-out;
}

@keyframes giftAppear {

  0% {
    opacity: 0;
    transform: translateY(25px) scale(0.8);
  }

  70% {
    transform: translateY(-5px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

}


/* Botão do presente */

.gift-box {

  width: 180px;
  height: 165px;

  padding: 0;

  border: none;
  background: transparent;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}


/* SVG */

.gift-svg {

  width: 100%;
  height: 100%;

  overflow: visible;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  filter:
    drop-shadow(
      0 8px 8px
      rgba(180, 100, 120, 0.18)
    );
}


/* Cores do SVG */

.gift-svg rect:first-child {
  fill: #f8c8dc;
  stroke: #5c3d46;
  stroke-width: 3;
}

.gift-svg rect:nth-child(2) {
  fill: #ffb3c1;
  stroke: #5c3d46;
  stroke-width: 3;
}

.gift-svg rect:nth-child(3) {
  fill: #fff29e;
  stroke: #5c3d46;
  stroke-width: 2;
}

.gift-svg path {
  fill: #ff8fa3;
  stroke: #5c3d46;
  stroke-width: 3;
}


/* Hover */

.gift-box:hover {

  transform:
    translateY(-8px)
    rotate(-2deg)
    scale(1.05);

  filter:
    drop-shadow(
      0 8px 12px
      rgba(201, 74, 110, 0.25)
    );
}


/* Clique */

.gift-box:active {

  transform:
    translateY(2px)
    scale(0.96);

}


/* Texto abaixo do presente */

.gift-label {

  margin-top: -5px;

  font-family: 'Caveat', cursive;

  font-size: 1.4rem;

  font-weight: 600;

  color: #c94a6e;

  transform: rotate(-3deg);

}


/* =====================================================
   ABERTURA DO PRESENTE
   ===================================================== */

.anniversary-gift.gift-opened .gift-wrapper {

  animation:
    giftDisappear 0.45s ease forwards;

}

@keyframes giftDisappear {

  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform:
      scale(0.65)
      translateY(20px);
  }

}


/* =====================================================
   CARTINHA
   ===================================================== */

.anniversary-message {

  position: fixed;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 25px;

  background:
    rgba(92, 61, 70, 0.18);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.45s ease;
}


.anniversary-message.message-visible {

  opacity: 1;

  pointer-events: auto;

}


/* Papel */

.anniversary-card {

  position: relative;

  width: min(390px, 90vw);

  padding: 38px 30px 30px;

  background: #fff3e8;

  border: 2px solid #f3cbbe;

  border-radius: 8px;

  box-shadow:
    8px 10px 0 rgba(201, 74, 110, 0.12),
    0 15px 35px rgba(92, 61, 70, 0.22);

  text-align: center;

  transform:
    rotate(-1.5deg)
    scale(0.8);

  transition:
    transform 0.5s
    cubic-bezier(
      0.175,
      0.885,
      0.32,
      1.275
    );

}


/* Entrada da cartinha */

.message-visible .anniversary-card {

  transform:
    rotate(-1.5deg)
    scale(1);

}


/* Linhas de caderno */

.anniversary-card::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 8px;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 27px,
      rgba(230, 170, 180, 0.12) 28px
    );

  pointer-events: none;

}


/* Pequeno pedaço de washi tape */

.anniversary-card::after {

  content: "";

  position: absolute;

  top: -13px;
  left: 50%;

  width: 95px;
  height: 25px;

  transform:
    translateX(-50%)
    rotate(-3deg);

  background: #f8c8dc;

  opacity: 0.9;

  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08);

}


/* Conteúdo acima das linhas */

.anniversary-card > * {

  position: relative;

  z-index: 2;

}


/* =====================================================
   DECORAÇÃO DA CARTINHA
   ===================================================== */

.anniversary-decoration {

  font-size: 2rem;

  color: #ff6685;

  margin-bottom: 5px;

  animation:
    littleHeart 1.8s
    ease-in-out
    infinite;

}

@keyframes littleHeart {

  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

}


.anniversary-months {

  font-family: 'Caveat', cursive;

  font-size: 2.2rem;

  font-weight: 600;

  color: #c94a6e;

  margin-bottom: 10px;

}


.anniversary-card h2 {

  font-size: 1.35rem;

  line-height: 1.35;

  color: #5c3d46;

  margin-bottom: 18px;

}


.anniversary-card p {

  color: #7b555f;

  line-height: 1.6;

  margin-bottom: 8px;

}


/* =====================================================
   BOTÃO DA CARTINHA
   ===================================================== */

.anniversary-close {

  margin-top: 18px;

  padding: 9px 17px;

  border: none;

  border-radius: 18px;

  background: #ffb3c1;

  color: #5c3d46;

  font-family: inherit;

  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;

}


.anniversary-close:hover {

  background: #ff8fa3;

  transform:
    translateY(-2px);

}


/* =====================================================
   CONFETES
   ===================================================== */

.confetti-container {

  position: fixed;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

}


.anniversary-confetti {

  position: absolute;

  top: -30px;

  color: #ff6685;

  font-family: 'Fredoka', sans-serif;

  font-weight: 600;

  opacity: 0;

  animation-name: anniversaryConfetti;

  animation-timing-function: linear;

  animation-fill-mode: forwards;

}


.anniversary-confetti:nth-child(3n) {
  color: #f8c8dc;
}

.anniversary-confetti:nth-child(4n) {
  color: #ffe66d;
}

.anniversary-confetti:nth-child(5n) {
  color: #a7d8de;
}


@keyframes anniversaryConfetti {

  0% {

    opacity: 0;

    transform:
      translateY(-20px)
      rotate(0deg)
      scale(0.5);

  }

  10% {

    opacity: 1;

  }

  100% {

    opacity: 0.9;

    transform:
      translateY(110vh)
      rotate(540deg)
      scale(1);

  }

}


/* =====================================================
   CHUVA DE PÉTALAS PIXEL ART
   ===================================================== */
.pixel-rain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5; /* acima do .card (z-index: 1), para a chuva também cair sobre o bilhetinho que sai da borda do cartão */
}

.pixel-petal {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0.9;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.pixel-petal.color-a {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'><path fill='%23f8c8dc' d='M2 0h2v1H2zM1 1h4v1H1zM1 2h4v2H1zM2 4h2v1H2z'/><path fill='%23ffffff' d='M2 1h1v1H2z'/></svg>");
}
.pixel-petal.color-b {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'><path fill='%23e8a5c8' d='M2 0h2v1H2zM1 1h4v1H1zM1 2h4v2H1zM2 4h2v1H2z'/><path fill='%23ffffff' d='M2 1h1v1H2z'/></svg>");
}
.pixel-petal.color-c {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'><path fill='%23ffb3a7' d='M2 0h2v1H2zM1 1h4v1H1zM1 2h4v2H1zM2 4h2v1H2z'/><path fill='%23ffffff' d='M2 1h1v1H2z'/></svg>");
}
.pixel-petal.color-d {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'><path fill='%23a7d8de' d='M2 0h2v1H2zM1 1h4v1H1zM1 2h4v2H1zM2 4h2v1H2z'/><path fill='%23ffffff' d='M2 1h1v1H2z'/></svg>");
}

@keyframes petalFall {
  0%   { transform: translate(0, -5vh) rotate(0deg); opacity: 0.9; }
  40%  { transform: translate(var(--drift), 45vh) rotate(150deg); opacity: 0.9; }
  60%  { transform: translate(calc(var(--drift) * 0.4), var(--land)) rotate(280deg); opacity: 0.9; }
  /* pétala "pousa" e fica acumulada perto do rodapé por um tempo */
  80%  { transform: translate(calc(var(--drift) * 0.3), var(--land)) rotate(285deg); opacity: 0.85; }
  92%  { transform: translate(calc(var(--drift) * 0.2), var(--land)) rotate(288deg); opacity: 0.35; }
  100% { transform: translate(calc(var(--drift) * 0.2), var(--land)) rotate(290deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-petal { animation: none; display: none; }
}

/* =====================================================
   CONTADOR DE DIAS JUNTAS
   ===================================================== */
.days-counter {
  background: #fff9f0;
  border: 2px dashed #f8c8dc;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 4px 0 15px;
  text-align: center;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.days-counter-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  color: #a3828a;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pixel-calendar-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'><path fill='%23c94a6e' d='M1 2h10v9H1z'/><path fill='%23fff3e8' d='M2 4h8v6H2z'/><path fill='%23c94a6e' d='M2 0h1v3H2zm7 0h1v3H9z'/><path fill='%23ff8fa3' d='M3 5h2v2H3zm4 0h2v2H7z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.days-counter-number {
  font-family: 'Caveat', cursive, sans-serif;
  font-weight: 600;
  color: #c94a6e;
  line-height: 1;
  margin: 2px 0 8px;
}

.days-counter-number #daysCount {
  font-size: 2.6rem;
}

.days-counter-label {
  font-size: 1.25rem;
}

.days-progress-track {
  width: 100%;
  height: 10px;
  margin: 4px 0 10px;
  background: repeating-linear-gradient(90deg, #f3cbbe 0 4px, #fff3e8 4px 8px);
  border: 1px solid #f3cbbe;
  border-radius: 6px;
  overflow: hidden;
}

.days-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffb3c1, #ff6685);
  transition: width 0.6s ease;
}

.days-counter-sub {
  font-size: 0.78rem;
  color: #a3828a;
}

.days-counter.complete {
  border-style: solid;
  border-color: #ff8fa3;
  background: linear-gradient(135deg, #fff0f3, #ffe9ee);
  animation: completePulse 1.8s ease-in-out infinite;
}

@keyframes completePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 102, 133, 0); }
  50% { box-shadow: 0 0 18px rgba(255, 102, 133, 0.35); }
}

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

@media (max-width: 480px) {

  .gift-box {

    width: 150px;
    height: 140px;

  }

  .anniversary-card {

    padding:
      35px
      22px
      25px;

  }

  .anniversary-card h2 {

    font-size: 1.2rem;

  }

}