/* ============================================
   RAVIXO.FUN — Animation System
   ============================================ */

@keyframes orb-pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.15); }
}

@keyframes bounce-arrow {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(6px); }
}

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

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

/* Counter-rotate planet content so icons stay upright */
.planet__body {
  animation: planet-float 4s ease-in-out infinite, planet-counter 60s linear infinite;
}

@keyframes planet-counter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Energy wall card shuffle */
.energy-card--1  { animation: card-drift-1 12s ease-in-out infinite; }
.energy-card--2  { animation: card-drift-2 14s ease-in-out infinite; }
.energy-card--3  { animation: card-drift-3 11s ease-in-out infinite; }
.energy-card--4  { animation: card-drift-4 13s ease-in-out infinite; }
.energy-card--5  { animation: card-drift-5 15s ease-in-out infinite; }
.energy-card--6  { animation: card-drift-6 10s ease-in-out infinite; }
.energy-card--7  { animation: card-drift-7 16s ease-in-out infinite; }
.energy-card--8  { animation: card-drift-8 12s ease-in-out infinite; }
.energy-card--9  { animation: card-drift-9 14s ease-in-out infinite; }
.energy-card--10 { animation: card-drift-10 11s ease-in-out infinite; }
.energy-card--11 { animation: card-drift-11 13s ease-in-out infinite; }
.energy-card--12 { animation: card-drift-12 15s ease-in-out infinite; }

@keyframes card-drift-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(8px, -12px) rotate(1deg); }
  50% { transform: translate(-4px, 6px) rotate(-0.5deg); }
  75% { transform: translate(6px, 4px) rotate(0.5deg); }
}

@keyframes card-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-10px, 8px); }
  66% { transform: translate(6px, -10px); }
}

@keyframes card-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5px, -8px) scale(1.02); }
}

@keyframes card-drift-4 {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(-6px, -6px); }
  80% { transform: translate(8px, 4px); }
}

@keyframes card-drift-5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-8px, 10px) rotate(-1deg); }
}

@keyframes card-drift-6 {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(10px, -5px); }
  70% { transform: translate(-5px, 8px); }
}

@keyframes card-drift-7 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4px, 12px); }
}

@keyframes card-drift-8 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10px, -4px) scale(0.98); }
}

@keyframes card-drift-9 {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(7px, 6px); }
  70% { transform: translate(-6px, -8px); }
}

@keyframes card-drift-10 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-4px, -10px); }
}

@keyframes card-drift-11 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, 8px) rotate(0.8deg); }
}

@keyframes card-drift-12 {
  0%, 100% { transform: translate(0, 0); }
  45% { transform: translate(-8px, 5px); }
  90% { transform: translate(5px, -6px); }
}

/* Factory machine animations */
.factory__gear--1 { animation: gear-spin 4s linear infinite; }
.factory__gear--2 { animation: gear-spin 3s linear infinite reverse; }

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

.factory__lightbulb { animation: bulb-glow 2s ease infinite; }

@keyframes bulb-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) drop-shadow(0 0 10px var(--accent)); }
}

.factory__screen { animation: screen-flicker 3s ease infinite; }

@keyframes screen-flicker {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0.7; }
  94% { opacity: 1; }
  96% { opacity: 0.8; }
}

.factory__pen { animation: pen-draw 2s ease-in-out infinite; }

@keyframes pen-draw {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-30%) rotate(-15deg); }
}

.factory__target { animation: target-pulse 1.5s ease infinite; }

@keyframes target-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.factory__bolt::before { animation: bolt-flash 1s ease infinite; display: inline-block; }

@keyframes bolt-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.factory__nodes span:nth-child(1) { animation: node-pulse 2s ease infinite 0s; }
.factory__nodes span:nth-child(2) { animation: node-pulse 2s ease infinite 0.5s; }
.factory__nodes span:nth-child(3) { animation: node-pulse 2s ease infinite 1s; }
.factory__nodes span:nth-child(4) { animation: node-pulse 2s ease infinite 1.5s; }

@keyframes node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px var(--coral-glow); }
}

.factory__chest { animation: chest-bounce 2s ease infinite; }

@keyframes chest-bounce {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -55%); }
}

.factory__sparkles { animation: sparkle-shift 3s ease infinite; }

@keyframes sparkle-shift {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.factory__conveyor { animation: conveyor-move 2s linear infinite; }

@keyframes conveyor-move {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

/* Portal particle burst on open */
.portal[open] .portal__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  animation: portal-burst 0.6s ease forwards;
}

@keyframes portal-burst {
  0% { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2); }
}

/* Arena animations */
.arena__challenge-card--1 { animation: card-orbit-1 8s ease-in-out infinite; }
.arena__challenge-card--2 { animation: card-orbit-2 10s ease-in-out infinite; }
.arena__challenge-card--3 { animation: card-orbit-3 9s ease-in-out infinite; }

@keyframes card-orbit-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, -15px) rotate(2deg); }
}

@keyframes card-orbit-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-12px, 8px); }
}

@keyframes card-orbit-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(8px, 12px) rotate(-2deg); }
}

@keyframes spotlight-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.arena__rankings li {
  animation: rank-slide-in 0.6s ease backwards;
}

.arena__rankings li:nth-child(1) { animation-delay: 0.1s; }
.arena__rankings li:nth-child(2) { animation-delay: 0.2s; }
.arena__rankings li:nth-child(3) { animation-delay: 0.3s; }
.arena__rankings li:nth-child(4) { animation-delay: 0.4s; }
.arena__rankings li:nth-child(5) { animation-delay: 0.5s; }

@keyframes rank-slide-in {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Sound tunnel */
.tunnel__eq span:nth-child(1)  { height: 20px; animation-delay: 0s; }
.tunnel__eq span:nth-child(2)  { height: 45px; animation-delay: 0.1s; }
.tunnel__eq span:nth-child(3)  { height: 30px; animation-delay: 0.2s; }
.tunnel__eq span:nth-child(4)  { height: 60px; animation-delay: 0.15s; }
.tunnel__eq span:nth-child(5)  { height: 25px; animation-delay: 0.05s; }
.tunnel__eq span:nth-child(6)  { height: 50px; animation-delay: 0.25s; }
.tunnel__eq span:nth-child(7)  { height: 35px; animation-delay: 0.1s; }
.tunnel__eq span:nth-child(8)  { height: 55px; animation-delay: 0.2s; }
.tunnel__eq span:nth-child(9)  { height: 22px; animation-delay: 0.05s; }
.tunnel__eq span:nth-child(10) { height: 48px; animation-delay: 0.15s; }
.tunnel__eq span:nth-child(11) { height: 32px; animation-delay: 0.3s; }
.tunnel__eq span:nth-child(12) { height: 58px; animation-delay: 0.1s; }
.tunnel__eq span:nth-child(13) { height: 28px; animation-delay: 0.2s; }
.tunnel__eq span:nth-child(14) { height: 42px; animation-delay: 0.05s; }
.tunnel__eq span:nth-child(15) { height: 38px; animation-delay: 0.25s; }

@keyframes eq-bounce {
  from { height: 15px; }
  to { height: var(--eq-height, 60px); }
}

.tunnel__eq--left span:nth-child(1)  { --eq-height: 35px; }
.tunnel__eq--left span:nth-child(2)  { --eq-height: 65px; }
.tunnel__eq--left span:nth-child(3)  { --eq-height: 45px; }
.tunnel__eq--left span:nth-child(4)  { --eq-height: 75px; }
.tunnel__eq--left span:nth-child(5)  { --eq-height: 30px; }
.tunnel__eq--left span:nth-child(6)  { --eq-height: 55px; }
.tunnel__eq--left span:nth-child(7)  { --eq-height: 40px; }
.tunnel__eq--left span:nth-child(8)  { --eq-height: 70px; }
.tunnel__eq--left span:nth-child(9)  { --eq-height: 25px; }
.tunnel__eq--left span:nth-child(10) { --eq-height: 50px; }
.tunnel__eq--left span:nth-child(11) { --eq-height: 38px; }
.tunnel__eq--left span:nth-child(12) { --eq-height: 68px; }
.tunnel__eq--left span:nth-child(13) { --eq-height: 32px; }
.tunnel__eq--left span:nth-child(14) { --eq-height: 48px; }
.tunnel__eq--left span:nth-child(15) { --eq-height: 42px; }

.tunnel__eq--right span:nth-child(1)  { --eq-height: 42px; }
.tunnel__eq--right span:nth-child(2)  { --eq-height: 58px; }
.tunnel__eq--right span:nth-child(3)  { --eq-height: 35px; }
.tunnel__eq--right span:nth-child(4)  { --eq-height: 72px; }
.tunnel__eq--right span:nth-child(5)  { --eq-height: 28px; }
.tunnel__eq--right span:nth-child(6)  { --eq-height: 62px; }
.tunnel__eq--right span:nth-child(7)  { --eq-height: 48px; }
.tunnel__eq--right span:nth-child(8)  { --eq-height: 38px; }
.tunnel__eq--right span:nth-child(9)  { --eq-height: 55px; }
.tunnel__eq--right span:nth-child(10) { --eq-height: 32px; }
.tunnel__eq--right span:nth-child(11) { --eq-height: 65px; }
.tunnel__eq--right span:nth-child(12) { --eq-height: 45px; }
.tunnel__eq--right span:nth-child(13) { --eq-height: 52px; }
.tunnel__eq--right span:nth-child(14) { --eq-height: 30px; }
.tunnel__eq--right span:nth-child(15) { --eq-height: 60px; }

.tunnel__wave--1 { animation: wave-flow 4s ease-in-out infinite; }
.tunnel__wave--2 { animation: wave-flow 4s ease-in-out infinite 0.5s; }

@keyframes wave-flow {
  0%, 100% { d: path("M0,60 Q100,20 200,60 T400,60 T600,60 T800,60"); }
  50% { d: path("M0,60 Q100,100 200,60 T400,60 T600,60 T800,60"); }
}

.tunnel-card {
  animation: tunnel-slide 20s linear infinite;
}

.tunnel-card:nth-child(1) { animation-delay: 0s; }
.tunnel-card:nth-child(2) { animation-delay: -4s; }
.tunnel-card:nth-child(3) { animation-delay: -8s; }
.tunnel-card:nth-child(4) { animation-delay: -12s; }
.tunnel-card:nth-child(5) { animation-delay: -16s; }

@keyframes tunnel-slide {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-4px); }
  75% { transform: translateY(4px); }
}

/* Launch pad */
@keyframes flame-flicker {
  from { transform: scaleY(1); opacity: 0.8; }
  to { transform: scaleY(1.2); opacity: 1; }
}

.launch__rocket { animation: rocket-hover 4s ease-in-out infinite; }

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

.launch:hover .launch__rocket {
  animation: rocket-hover 4s ease-in-out infinite, rocket-shake 0.1s ease infinite;
}

@keyframes rocket-shake {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  25% { transform: translateX(calc(-50% - 1px)) translateY(-1px); }
  75% { transform: translateX(calc(-50% + 1px)) translateY(1px); }
}

.launch__rings { animation: ring-expand 3s ease infinite; }

@keyframes ring-expand {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Gate logo letter animations */
.gate__logo-r { animation: letter-glow 3s ease infinite 0s; }
.gate__logo-a { animation: letter-glow 3s ease infinite 0.5s; }
.gate__logo-v { animation: letter-glow 3s ease infinite 1s; }
.gate__logo-i { animation: letter-glow 3s ease infinite 1.5s; }
.gate__logo-x { animation: letter-glow 3s ease infinite 2s; }
.gate__logo-o { animation: letter-glow 3s ease infinite 2.5s; }

@keyframes letter-glow {
  0%, 100% { text-shadow: 0 0 20px transparent; }
  50% { text-shadow: 0 0 30px var(--coral-glow), 0 0 60px var(--accent-glow); }
}

/* Pathway glow pulse */
.pathway__glow {
  animation: pathway-pulse 3s ease infinite;
}

.pathway--arcade .pathway__glow { animation-delay: 0s; }
.pathway--mystery .pathway__glow { animation-delay: 0.5s; }
.pathway--creator .pathway__glow { animation-delay: 1s; }
.pathway--challenge .pathway__glow { animation-delay: 1.5s; }
.pathway--party .pathway__glow { animation-delay: 2s; }
.pathway--discovery .pathway__glow { animation-delay: 2.5s; }

@keyframes pathway-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}

/* Particle burst for gate */
.gate__particles::before,
.gate__particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: particle-rise 6s ease infinite;
}

.gate__particles::before {
  left: 20%;
  bottom: 30%;
  animation-delay: 0s;
}

.gate__particles::after {
  left: 70%;
  bottom: 40%;
  animation-delay: 3s;
  background: var(--coral);
}

@keyframes particle-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-200px) scale(0); opacity: 0; }
}

/* Mosaic tile entrance */
.mosaic__tile {
  animation: tile-appear 0.4s ease backwards;
}

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