/* =========================================================
   ÁNGELES · Animaciones · Keyframes
   ========================================================= */

@keyframes shimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

@keyframes shimmerSlow {
  0%   { background-position: 0 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scrollHint {
  0%, 100% { transform: translateX(-50%) scaleY(.6); opacity: .4; }
  50%      { transform: translateX(-50%) scaleY(1);  opacity: .9; }
}

@keyframes pulseGold {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.55); }
  70%  { box-shadow: 0 0 0 26px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 22px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

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

@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes goldFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ───── Reveal on scroll ───── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* ───── Parallax helper (vía data attr y JS) ───── */
.parallax-y { will-change: transform; }

/* ───── Letras "rising" para el hero ───── */
.split-chars { display: inline-block; }
.split-chars span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(40deg);
  transform-origin: 50% 100%;
  animation: charRise .9s var(--ease-out) forwards;
}
@keyframes charRise {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* ───── Hero V2 ───── */
@keyframes meshFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(2%, -1.5%) scale(1.04); }
  66%      { transform: translate(-1.5%, 1%) scale(.98); }
}

@keyframes heroGlowPulse {
  0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes pulseGreenSm {
  0%   { box-shadow: 0 0 0 0   rgba(74, 222, 128, .65); }
  70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes particleRise {
  0%   { transform: translateY(20vh) translateX(0)   scale(0); opacity: 0; }
  10%  { opacity: 1; transform: translateY(15vh) translateX(0) scale(1); }
  90%  { opacity: .8; }
  100% { transform: translateY(-30vh) translateX(20px) scale(.4); opacity: 0; }
}

/* Shine sweep para el lettering script */
@keyframes shineSweep {
  0%   { background-position: -150% 0, 0 0; }
  55%  { background-position: 250% 0, 0 0; }
  100% { background-position: 250% 0, 0 0; }
}

/* Underline draw */
@keyframes ulDraw {
  to { stroke-dashoffset: 0; }
}