/* ================================================================
   ANIMATIONS.CSS — Keyframes, grain, reveal, parallax
================================================================ */

/* ── Grain overlay ──────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");
  opacity: .5;
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {
  0%,100% { transform: translate(0,0); }
  10%      { transform: translate(-2%,-3%); }
  20%      { transform: translate(3%,2%); }
  30%      { transform: translate(-1%,4%); }
  40%      { transform: translate(2%,-1%); }
  50%      { transform: translate(-3%,3%); }
  60%      { transform: translate(1%,-2%); }
  70%      { transform: translate(3%,1%); }
  80%      { transform: translate(-2%,3%); }
  90%      { transform: translate(2%,-3%); }
}

/* ── Ken Burns (hero bg) ────────────────────────────────────── */
@keyframes kenburns {
  0%   { transform: scale(1)    translateX(0)     translateY(0); }
  50%  { transform: scale(1.08) translateX(-1%)   translateY(-0.5%); }
  100% { transform: scale(1)    translateX(0)     translateY(0); }
}

/* ── Fade / Slide reveal ────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeZoom {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse-dot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: .6; }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── Clases de reveal (controladas por JS IntersectionObserver) ── */
.rv      { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.rl      { opacity: 0; transform: translateX(-36px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.rr      { opacity: 0; transform: translateX(36px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.rz      { opacity: 0; transform: scale(.94); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.rv.in,.rl.in,.rr.in,.rz.in { opacity: 1; transform: none; }

/* Delays escalonados */
.d1 { transition-delay: 100ms; }
.d2 { transition-delay: 200ms; }
.d3 { transition-delay: 300ms; }
.d4 { transition-delay: 400ms; }
.d5 { transition-delay: 500ms; }