/* ================================================================
   ANIMATIONS.CSS — The Classic MU Online Season 21
   Todos os @keyframes e classes de animação
   ================================================================ */

/* ── Flutuação Ambiente ── */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(0.5deg); }
  66%       { transform: translateY(-4px) rotate(-0.3deg); }
}

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

@keyframes float-drift {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25%       { transform: translateY(-6px) translateX(4px); }
  75%       { transform: translateY(-10px) translateX(-3px); }
}

/* ── Pulso de Energia ── */
@keyframes pulse-gold {
  0%, 100% {
    box-shadow: 0 0 10px rgba(200, 152, 40, 0.3),
                0 0 30px rgba(200, 152, 40, 0.1),
                inset 0 0 20px rgba(200, 152, 40, 0.05);
  }
  50% {
    box-shadow: 0 0 20px rgba(232, 184, 64, 0.6),
                0 0 60px rgba(200, 152, 40, 0.25),
                inset 0 0 40px rgba(200, 152, 40, 0.1);
  }
}

@keyframes pulse-blue {
  0%, 100% {
    box-shadow: 0 0 10px rgba(74, 154, 255, 0.3),
                0 0 30px rgba(74, 154, 255, 0.08);
  }
  50% {
    box-shadow: 0 0 20px rgba(74, 154, 255, 0.6),
                0 0 60px rgba(74, 154, 255, 0.2);
  }
}

@keyframes pulse-blood {
  0%, 100% {
    box-shadow: 0 0 12px rgba(200, 32, 48, 0.35),
                0 0 35px rgba(200, 32, 48, 0.10);
  }
  50% {
    box-shadow: 0 0 24px rgba(232, 64, 32, 0.7),
                0 0 70px rgba(200, 32, 48, 0.25);
  }
}

@keyframes pulse-emerald {
  0%, 100% {
    box-shadow: 0 0 10px rgba(40, 160, 96, 0.30),
                0 0 30px rgba(40, 160, 96, 0.08);
  }
  50% {
    box-shadow: 0 0 20px rgba(40, 160, 96, 0.60),
                0 0 60px rgba(40, 160, 96, 0.20);
  }
}

@keyframes pulse-inf {
  0%, 100% {
    box-shadow: 0 0 12px rgba(160, 96, 224, 0.35),
                0 0 40px rgba(160, 96, 224, 0.10);
  }
  50% {
    box-shadow: 0 0 30px rgba(200, 130, 255, 0.7),
                0 0 80px rgba(160, 96, 224, 0.30);
  }
}

/* ── Brilho de Texto ── */
@keyframes text-glow-gold {
  0%, 100% { text-shadow: 0 0 20px rgba(200, 152, 40, 0.5), 0 0 60px rgba(200, 152, 40, 0.2); }
  50%       { text-shadow: 0 0 40px rgba(232, 184, 64, 0.9), 0 0 100px rgba(200, 152, 40, 0.4); }
}

@keyframes text-glow-blue {
  0%, 100% { text-shadow: 0 0 20px rgba(74, 154, 255, 0.4); }
  50%       { text-shadow: 0 0 40px rgba(128, 192, 255, 0.8), 0 0 80px rgba(74, 154, 255, 0.3); }
}

/* ── Névoa / Fog ── */
@keyframes fog-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25%       { transform: translate(4%, 2%) scale(1.06); opacity: 0.6; }
  50%       { transform: translate(-2%, 5%) scale(0.97); opacity: 0.4; }
  75%       { transform: translate(3%, -1%) scale(1.03); opacity: 0.55; }
}

@keyframes fog-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.35; }
  33%       { transform: translate(-5%, 3%) scale(1.08) rotate(1deg); opacity: 0.45; }
  66%       { transform: translate(3%, -2%) scale(0.95) rotate(-0.5deg); opacity: 0.3; }
}

@keyframes fog-drift-3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  50%       { transform: translate(6%, 4%); opacity: 0.3; }
}

/* ── Runas ── */
@keyframes rune-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

@keyframes rune-flicker {
  0%, 100% { opacity: 0.15; }
  20%       { opacity: 0.35; }
  40%       { opacity: 0.12; }
  60%       { opacity: 0.28; }
  80%       { opacity: 0.10; }
}

@keyframes rune-appear {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Fluxo de Energia ── */
@keyframes energy-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes energy-pulse-line {
  0%   { opacity: 0.3; transform: scaleX(0.95); }
  50%  { opacity: 1.0; transform: scaleX(1.02); }
  100% { opacity: 0.3; transform: scaleX(0.95); }
}

@keyframes energy-stream {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ── Spine da Timeline ── */
@keyframes spine-fill {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

@keyframes node-activate {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Reveals de Scroll ── */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-left {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-right {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Shimmer (glitter dourado) ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Scan line (ciberano-medieval) ── */
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ── Orbe de energia ── */
@keyframes orb-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%       { transform: scale(1.08); filter: brightness(1.3); }
}

@keyframes orb-ring-expand {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Aparecimento de letras ── */
@keyframes char-reveal {
  from { opacity: 0; transform: translateY(15px) rotateX(-40deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

/* ── Mapa de Jornada ── */
@keyframes road-pulse {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50%       { opacity: 1.0; transform: scaleX(1.03); }
}

@keyframes diamond-appear {
  0%   { transform: rotate(45deg) scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: rotate(45deg) scale(1.15) rotate(-45deg); }
  100% { transform: rotate(45deg) scale(1) rotate(-45deg); opacity: 1; }
}

@keyframes waypoint-glow-s1 {
  0%,100% { box-shadow: 0 0 8px rgba(106,96,88,0.3), inset 0 0 8px rgba(106,96,88,0.1); }
  50%     { box-shadow: 0 0 20px rgba(160,144,128,0.5), inset 0 0 16px rgba(106,96,88,0.2); }
}
@keyframes waypoint-glow-s2 {
  0%,100% { box-shadow: 0 0 8px rgba(40,160,96,0.3), inset 0 0 8px rgba(40,160,96,0.1); }
  50%     { box-shadow: 0 0 24px rgba(80,208,136,0.55), inset 0 0 16px rgba(40,160,96,0.2); }
}
@keyframes waypoint-glow-s3 {
  0%,100% { box-shadow: 0 0 10px rgba(200,32,48,0.4), inset 0 0 10px rgba(200,32,48,0.15); }
  50%     { box-shadow: 0 0 30px rgba(232,64,32,0.65), inset 0 0 20px rgba(200,32,48,0.25); }
}
@keyframes waypoint-glow-s4 {
  0%,100% { box-shadow: 0 0 12px rgba(160,96,224,0.45), inset 0 0 12px rgba(160,96,224,0.15); }
  50%     { box-shadow: 0 0 36px rgba(200,128,255,0.70), inset 0 0 24px rgba(160,96,224,0.30); }
}

/* Energia descendo a estrada */
@keyframes road-energy-drop {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* Footstep trail */
@keyframes step-fade {
  0%,100% { opacity: 0.08; }
  50%     { opacity: 0.25; }
}

/* Crusader cross glow */
@keyframes cross-radiate {
  0%,100% { opacity: 0.2; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.05); }
}

/* ── Feature Art — personagens vivos, inclinados ao texto ── */
@keyframes art-live-blood {
  0%, 100% { transform: translateY(0) translateX(-36px) scale(1); }
  33%       { transform: translateY(-12px) translateX(-52px) scale(1.014); }
  66%       { transform: translateY(-6px) translateX(-44px) scale(1.008); }
}

@keyframes art-live-gold-left {
  0%, 100% { transform: translateY(0) translateX(28px) scale(1); }
  50%       { transform: translateY(-14px) translateX(44px) scale(1.018); }
}

@keyframes art-live-gold-right {
  0%, 100% { transform: translateY(0) translateX(-20px) scale(1); }
  50%       { transform: translateY(-14px) translateX(-36px) scale(1.018); }
}

@keyframes art-live-blue {
  0%, 100% { transform: translateY(0) translateX(-32px) scale(1); }
  40%       { transform: translateY(-10px) translateX(-48px) scale(1.012); }
  70%       { transform: translateY(-16px) translateX(-40px) scale(1.016); }
}

@keyframes art-live-emerald {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  50%       { transform: translateY(-14px) translateX(-6px) scale(1.012); }
}

@keyframes art-live-inf {
  0%, 100% { transform: translateY(0) translateX(-48px) scale(1); opacity: 0.72; }
  50%       { transform: translateY(-18px) translateX(-64px) scale(1.022); opacity: 0.80; }
}

@keyframes art-live-purple {
  0%, 100% { transform: translateY(0) translateX(-16px) scale(1); }
  50%       { transform: translateY(-14px) translateX(-32px) scale(1.018); }
}

@keyframes art-live-blood-pk {
  0%, 100% { transform: translateY(0) scale(1); }
  35%       { transform: translateY(-8px) scale(1.008); }
  65%       { transform: translateY(-14px) scale(1.014); }
}

@keyframes art-live-treasure {
  0%, 100% { transform: translateY(0) scale(1) rotate(-0.4deg); }
  50%       { transform: translateY(-16px) scale(1.012) rotate(0.4deg); }
}

@keyframes art-live-gallop {
  0%, 100% { transform: translateY(0) translateX(-24px) scale(1); }
  20%       { transform: translateY(-6px) translateX(-38px) scale(1.01); }
  40%       { transform: translateY(-12px) translateX(-30px) scale(1.016); }
  60%       { transform: translateY(-8px) translateX(-42px) scale(1.012); }
  80%       { transform: translateY(-14px) translateX(-34px) scale(1.018); }
}

@keyframes art-live-fish {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-12px) scale(1.008); }
}

@keyframes art-live-bomb {
  0%, 100% { transform: translateY(0) translateX(-8px) rotate(0deg) scale(1); }
  50%       { transform: translateY(-10px) translateX(-16px) rotate(1deg) scale(1.012); }
}

@keyframes art-live-heroes {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-8px) scale(1.006); }
}

@keyframes art-live-invasion {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.88; }
  50%       { transform: translateY(-10px) scale(1.012); opacity: 0.94; }
}

@keyframes minimap-lift {
  0%, 100% { transform: rotateX(5deg) scale(1); }
  50%       { transform: rotateX(4deg) scale(1.018); }
}

@keyframes vision-art-float {
  0%, 100% { transform: translateY(5px); }
  50%       { transform: translateY(-9px); }
}

@keyframes art-live-char {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-16px) scale(1.018); }
}

@keyframes art-live-char-bg {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.42; }
  50%       { transform: translateY(-10px) scale(1.025); opacity: 0.48; }
}

@keyframes art-glow-breathe {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(1); }
  50%       { opacity: 0.75; transform: translateX(-50%) scale(1.12); }
}

@keyframes art-glow-breathe-blood {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50%       { opacity: 0.85; transform: translateX(-50%) scale(1.15); }
}

/* ── Classes de animação ── */
.anim-float        { animation: float-gentle 6s ease-in-out infinite; }
.anim-float-slow   { animation: float-slow 10s ease-in-out infinite; }
.anim-float-drift  { animation: float-drift 8s ease-in-out infinite; }

.anim-pulse-gold    { animation: pulse-gold 3s ease-in-out infinite; }
.anim-pulse-blue    { animation: pulse-blue 3s ease-in-out infinite; }
.anim-pulse-blood   { animation: pulse-blood 2.5s ease-in-out infinite; }
.anim-pulse-emerald { animation: pulse-emerald 3.5s ease-in-out infinite; }
.anim-pulse-inf     { animation: pulse-inf 4s ease-in-out infinite; }

.anim-glow-gold  { animation: text-glow-gold 3s ease-in-out infinite; }
.anim-glow-blue  { animation: text-glow-blue 4s ease-in-out infinite; }

.anim-rune-spin    { animation: rune-spin 20s linear infinite; }
.anim-rune-reverse { animation: rune-spin-reverse 30s linear infinite; }
.anim-rune-flicker { animation: rune-flicker 5s ease-in-out infinite; }

.anim-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ── Estado de reveal (base) ── */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Delays de stagger */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.35s; }
[data-delay="4"] { transition-delay: 0.5s; }
[data-delay="5"] { transition-delay: 0.65s; }
[data-delay="6"] { transition-delay: 0.8s; }
[data-delay="7"] { transition-delay: 1.0s; }
[data-delay="8"] { transition-delay: 1.2s; }