/* ============================================================
   animations.css — reveals + keyframes
   ============================================================ */

/* ---------- Reveal base ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms var(--ease-enter),
    transform 700ms var(--ease-enter);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Reveal por palabra (split) */
.reveal-words {
  display: inline-block;
}
.reveal-words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.05em;
  margin-bottom: -0.05em;
}
.reveal-words .word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 720ms var(--ease-enter), opacity 720ms var(--ease-enter);
}
.reveal-words.is-in .word > span {
  transform: translateY(0);
  opacity: 1;
}

/* Stagger: nth-child delay */
.reveal-words .word:nth-child(1)  > span { transition-delay: 60ms; }
.reveal-words .word:nth-child(2)  > span { transition-delay: 110ms; }
.reveal-words .word:nth-child(3)  > span { transition-delay: 160ms; }
.reveal-words .word:nth-child(4)  > span { transition-delay: 210ms; }
.reveal-words .word:nth-child(5)  > span { transition-delay: 260ms; }
.reveal-words .word:nth-child(6)  > span { transition-delay: 310ms; }
.reveal-words .word:nth-child(7)  > span { transition-delay: 360ms; }
.reveal-words .word:nth-child(8)  > span { transition-delay: 410ms; }
.reveal-words .word:nth-child(9)  > span { transition-delay: 460ms; }
.reveal-words .word:nth-child(10) > span { transition-delay: 510ms; }
.reveal-words .word:nth-child(11) > span { transition-delay: 560ms; }
.reveal-words .word:nth-child(12) > span { transition-delay: 610ms; }

/* Stagger para listas / grids */
.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter);
}
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1)  { transition-delay: 60ms; }
.stagger.is-in > *:nth-child(2)  { transition-delay: 120ms; }
.stagger.is-in > *:nth-child(3)  { transition-delay: 180ms; }
.stagger.is-in > *:nth-child(4)  { transition-delay: 240ms; }
.stagger.is-in > *:nth-child(5)  { transition-delay: 300ms; }
.stagger.is-in > *:nth-child(6)  { transition-delay: 360ms; }
.stagger.is-in > *:nth-child(7)  { transition-delay: 420ms; }
.stagger.is-in > *:nth-child(8)  { transition-delay: 480ms; }

/* Reveal lateral */
.reveal-right {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter);
}
.reveal-right.is-in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.page-enter { animation: pageFadeIn 480ms var(--ease-enter) both; }

@keyframes underlineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.55; }
}
.pulse-dot { animation: pulseDot 2.4s ease-in-out infinite; }

@keyframes stampDrop {
  0%   { opacity: 0; transform: scale(1.4) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(0.96) rotate(-7deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
.sello.is-stamped { animation: stampDrop 600ms var(--ease-out) both; }

/* Cursor custom (sutil) */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: var(--z-tooltip);
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out), opacity 180ms;
  mix-blend-mode: multiply;
}
@media (hover: none) { .cursor-dot { display: none; } }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 200ms linear !important;
  }
  .reveal-words .word > span { transform: none !important; opacity: 1 !important; }
  .stagger > * { opacity: 1 !important; transform: none !important; }
  .sello.is-stamped { animation: none !important; transform: rotate(-8deg); }
  .pulse-dot { animation: none !important; }
}

/* Page transition */
body.is-leaving { opacity: 0; transition: opacity 180ms var(--ease-out); }