/* ════════════════════════════════════════════════
   animations.css — Keyframes & transition rules
   PlanetMC
   ════════════════════════════════════════════════ */

/* ════ INTRO ════ */
@keyframes introFade {
  to { opacity: 0; pointer-events: none; }
}

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

@keyframes dotPop {
  0%,100% { transform: scale(1);   opacity: .4; }
  50%      { transform: scale(1.6); opacity: 1;  }
}

/* ════ ROCKET ════ */
@keyframes rocketFlyH {
  0%   { left: -80px;             opacity: 0; transform: translateY(-50%) rotate(90deg); }
  8%   { opacity: 1;              transform: translateY(-50%) rotate(90deg); }
  100% { left: calc(100% + 80px); opacity: 1; transform: translateY(-50%) rotate(90deg); }
}

@keyframes trailShow {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ════ LOGO ════ */
@keyframes logoPulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 32px rgba(0,229,255,.35)) drop-shadow(0 0 64px rgba(124,58,237,.2)); }
  50%  { transform: scale(1.06); filter: drop-shadow(0 0 50px rgba(0,229,255,.6))  drop-shadow(0 0 100px rgba(124,58,237,.4)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 32px rgba(0,229,255,.35)) drop-shadow(0 0 64px rgba(124,58,237,.2)); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════ BACKGROUND ════ */
@keyframes drift1 { to { transform: translate(60px,80px) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-40px,-60px) scale(1.08); } }
@keyframes rotatePlanet { to { transform: rotate(360deg); } }

/* ════ STATUS ════ */
@keyframes blink {
  0%,100% { opacity: 1;  }
  50%      { opacity: .2; }
}

@keyframes blinkRed {
  0%,100% { opacity: 1;   }
  50%      { opacity: .15; }
}

/* ════ MOBS ════ */
@keyframes mobFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ════ SCROLL REVEAL ════ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ════ INTRO ELEMENT ANIMATIONS ════ */
#intro-screen {
  animation: introFade 0.4s ease 2.2s forwards;
}

.rocket-svg {
  animation: rocketFlyH 1.6s cubic-bezier(.4,0,.2,1) 0.2s forwards;
}

.rocket-trail {
  opacity: 0;
  animation: trailShow 1.6s ease 0.2s forwards;
}

.intro-logo    { animation: introLogoIn 0.6s ease 0.1s both; opacity: 0; }
.intro-tagline { animation: introLogoIn 0.6s ease 0.3s both; opacity: 0; }
.intro-dots    { animation: introLogoIn 0.5s ease 0.5s both; opacity: 0; }

.intro-dots span                { animation: dotPop 1.2s ease-in-out infinite; }
.intro-dots span:nth-child(2)   { animation-delay: 0.2s; }
.intro-dots span:nth-child(3)   { animation-delay: 0.4s; }

/* ════ HERO ANIMATIONS ════ */
.hero-logo-img,
.hero-logo-fallback { animation: fadeDown .6s ease both, logoPulse 4s ease-in-out infinite; }
.hero-sub           { animation: fadeDown .7s .2s ease both; }
.hero-btns-wrap     { animation: fadeDown .7s .3s ease both; }

/* ════ BACKGROUND ANIMATIONS ════ */
.nebula::before   { animation: drift1 20s ease-in-out infinite alternate; }
.nebula::after    { animation: drift2 25s ease-in-out infinite alternate; }
.planet-deco      { animation: rotatePlanet 60s linear infinite; }
.planet-deco-2    { animation: rotatePlanet 90s linear infinite reverse; }

/* ════ STATUS BLINK ════ */
.ip-online-pill .blink       { animation: blink 1.4s infinite; }
.ip-maintenance-pill .blink-red { animation: blinkRed 1s infinite; }

/* ════ MOB FLOAT ════ */
.mc-chick-wrap   { animation: mobFloat 3.8s ease-in-out infinite; }
.mc-axolotl-wrap { animation: mobFloat 4.5s ease-in-out infinite 0.7s; }
.mc-turtle-wrap  { animation: mobFloat 5.2s ease-in-out infinite 1.4s; }