/* ==========================================================================
   Animações & microinterações
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: none; }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: none; }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: none; }

[data-reveal-group] > * { transition-delay: calc(var(--reveal-index, 0) * 70ms); }

/* As entradas laterais começam deslocadas 32px para o lado; num ecrã
   estreito isso passava a margem direita e criava scroll horizontal (era
   o bloco de texto da história na Início e no Sobre, +12px). A <section>
   que as contém recorta só na horizontal — clip, ao contrário de hidden,
   não cria uma área de scroll. */
section:has([data-reveal="left"]),
section:has([data-reveal="right"]) { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.parallax-layer { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .hero-float { animation: hero-float 7s ease-in-out infinite; }
  .hero-float--slow { animation-duration: 10s; }
  .hero-float--rev { animation-direction: alternate-reverse; }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-2deg); }
}

.pulse-dot { position: relative; }
.pulse-dot::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  animation: pulse-ring 2.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .pulse-dot::before { animation: none; } }
@keyframes pulse-ring {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---- Transição de página (router) ---- */
#app {
  animation: page-in var(--dur-med) var(--ease-out);
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #app { animation: none; }
}

/* ---- Estado de sucesso animado (check) ---- */
.success-check circle { stroke-dasharray: 76; stroke-dashoffset: 76; animation: draw 0.6s var(--ease-out) forwards; }
.success-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 0.4s var(--ease-out) 0.5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .success-check circle, .success-check path { animation: none; stroke-dashoffset: 0; }
}

/* ---- Botão "adicionado" feedback ---- */
@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.18); } }
.is-bumping { animation: bump 0.4s var(--ease-out); }