/* ================================================================
   animations.css v5 — Pixel Gaming Animations
   Bouncing ball cursor | Pixel boot | Color-shift ring
   ================================================================ */

/* ── Boot Screen ── */
#boot-screen{position:fixed;inset:0;background:var(--bg-main);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono);overflow:hidden;}
#boot-canvas{position:absolute;inset:0;opacity:.45;}
.boot-content{position:relative;z-index:2;text-align:center;max-width:580px;padding:2rem;width:100%;}
.boot-logo{
  font-family:var(--font-pixel);font-size:clamp(1.5rem,6vw,3.5rem);font-weight:900;
  background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--violet));
  background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:.2em;margin-bottom:.75rem;
  animation:flickerIn .5s ease forwards, gradientShift 3s linear infinite;
}
@keyframes gradientShift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.boot-tagline{font-family:var(--font-pixel);font-size:.42rem;color:var(--blue-hi);letter-spacing:.15em;margin-bottom:1.5rem;opacity:0;animation:fadeInAnim .4s ease .5s forwards;font-weight:900;}
.boot-log{text-align:left;font-size:.62rem;color:var(--blue-hi);letter-spacing:.04em;line-height:1.9;min-height:110px;border:2px solid rgba(69,123,189,.3);padding:.9rem;border-radius:2px;background:rgba(10,14,26,.6);margin-bottom:1.25rem;}
.boot-log-line{opacity:0;animation:fadeInAnim .1s ease forwards;}
.boot-log-line.ok{color:var(--green);}
.boot-bar-wrap{width:100%;height:8px;background:rgba(10,14,26,.6);border:2px solid rgba(255,215,0,.25);overflow:hidden;margin-bottom:.75rem;image-rendering:pixelated;}
.boot-bar{height:100%;background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow));box-shadow:0 0 10px rgba(255,215,0,.5);width:0%;transition:width .05s linear;}
.boot-pct{font-family:var(--font-pixel);font-size:.5rem;color:var(--yellow);text-shadow:var(--glow-yellow);}
.boot-exit{animation:bootExit .6s cubic-bezier(.77,0,.18,1) forwards;}
@keyframes bootExit{0%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(1.02);filter:brightness(3) saturate(2)}100%{opacity:0;transform:scale(1.05);pointer-events:none}}
@keyframes flickerIn{0%{opacity:0}10%{opacity:1}15%{opacity:0}20%{opacity:1}25%{opacity:0}30%{opacity:1}100%{opacity:1}}
@keyframes fadeInAnim{to{opacity:1}}

/* ================================================================
   BOUNCING BALL CURSOR
   - Normal: glowing sphere rolling/bouncing
   - On click: big jump + squash/stretch
   ================================================================ */
.cursor-ball{
  position:fixed;
  pointer-events:none;
  z-index:99999;
  width:18px;height:18px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 35%, var(--yellow-hi) 0%, var(--yellow) 40%, var(--orange) 80%, var(--pixel-orange-d) 100%);
  box-shadow:0 0 8px var(--yellow),0 0 20px rgba(255,215,0,.4),0 4px 8px rgba(0,0,0,.5);
  transition:width .15s ease,height .15s ease,background .2s ease;
}
/* Shine on ball */
.cursor-ball::before{
  content:'';position:absolute;top:20%;left:25%;
  width:35%;height:35%;border-radius:50%;
  background:rgba(255,255,255,.55);
  filter:blur(1px);
}
/* Shadow under ball */
.cursor-ball::after{
  content:'';position:absolute;
  bottom:-8px;left:50%;transform:translateX(-50%);
  width:70%;height:4px;border-radius:50%;
  background:rgba(0,0,0,.3);filter:blur(2px);
}
/* Hover state — ball grows */
.cursor-ball.hover{
  width:26px;height:26px;
  background:radial-gradient(circle at 35% 35%, #fff 0%, var(--yellow-hi) 30%, var(--orange) 70%, var(--red-lo) 100%);
  box-shadow:0 0 12px var(--yellow),0 0 30px rgba(255,215,0,.5),0 6px 12px rgba(0,0,0,.5);
}
/* JUMP animation on click */
@keyframes ballJump{
  0%  {transform:translate(-50%, -50%) scaleX(1) scaleY(1);}
  10% {transform:translate(-50%, -50%) scaleX(1.3) scaleY(0.7);}  /* squash on launch */
  30% {transform:translate(-50%, calc(-50% - 40px)) scaleX(0.8) scaleY(1.3);}  /* stretch going up */
  50% {transform:translate(-50%, calc(-50% - 65px)) scaleX(0.9) scaleY(1.1);}  /* peak */
  70% {transform:translate(-50%, calc(-50% - 30px)) scaleX(0.85) scaleY(1.2);} /* coming down */
  85% {transform:translate(-50%, calc(-50% + 5px)) scaleX(1.4) scaleY(0.6);}   /* squash on land */
  95% {transform:translate(-50%, calc(-50% - 8px)) scaleX(0.9) scaleY(1.1);}   /* small bounce */
  100%{transform:translate(-50%, -50%) scaleX(1) scaleY(1);}
}
.cursor-ball.jump{
  animation:ballJump .6s cubic-bezier(.36,.07,.19,.97) forwards;
  background:radial-gradient(circle at 35% 35%, #fff 0%, var(--red-hi) 40%, var(--red) 80%, var(--red-lo) 100%);
  box-shadow:0 0 15px var(--red),0 0 40px rgba(230,57,70,.5),0 4px 8px rgba(0,0,0,.5);
}
/* Trail dot — pixel style */
.cursor-trail{
  position:fixed;pointer-events:none;z-index:99998;
  width:6px;height:6px;border-radius:0;
  background:var(--yellow);
  transform:translate(-50%,-50%);
  animation:trailFade .4s ease forwards;
  image-rendering:pixelated;
}
@keyframes trailFade{0%{opacity:.7;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(0)}}

/* ── Glitch — Red+Blue ── */
.glitch{position:relative;}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;}
.glitch::before{color:var(--red-hi);animation:glitch-a 3.5s infinite steps(1);opacity:.7;}
.glitch::after{color:var(--blue-hi);animation:glitch-b 3.5s infinite steps(1) reverse;opacity:.5;animation-delay:.15s;}
@keyframes glitch-a{0%{clip-path:inset(0 0 96% 0);transform:translate(-3px,0)}10%{clip-path:inset(35% 0 55% 0);transform:translate(3px,0)}20%{clip-path:inset(75% 0 8% 0);transform:translate(-2px,0)}50%,100%{clip-path:inset(0 0 96% 0);transform:translate(0)}}
@keyframes glitch-b{0%{clip-path:inset(90% 0 0 0);transform:translate(3px,0)}15%{clip-path:inset(20% 0 65% 0);transform:translate(-3px,0)}75%,100%{clip-path:inset(90% 0 0 0);transform:translate(0)}}

/* ── Float ── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes floatBadge{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.float{animation:float 4s ease-in-out infinite;}
.float-badge{animation:floatBadge 5s ease-in-out infinite;}

/* ── Pulse ── */
@keyframes pulseBlue{0%,100%{box-shadow:var(--glow-blue)}50%{box-shadow:0 0 30px rgba(69,123,189,.8),0 0 80px rgba(69,123,189,.3)}}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(69,123,189,.4),var(--glow-blue)}50%{box-shadow:0 0 0 14px rgba(69,123,189,0),var(--glow-red)}}
.pulse-glow{animation:pulseBlue 2.5s ease-in-out infinite;}
.pulse-ring{animation:pulseRing 2.5s ease-in-out infinite;}

/* ── Color shift ring ── */
@keyframes colorShiftRing{
  0%  {box-shadow:var(--glow-blue),0 0 0 5px rgba(69,123,189,.1),0 0 0 12px rgba(69,123,189,.05);}
  25% {box-shadow:var(--glow-violet),0 0 0 5px rgba(123,47,255,.1),0 0 0 12px rgba(123,47,255,.05);}
  50% {box-shadow:var(--glow-red),0 0 0 5px rgba(230,57,70,.1),0 0 0 12px rgba(230,57,70,.05);}
  75% {box-shadow:var(--glow-yellow),0 0 0 5px rgba(255,215,0,.1),0 0 0 12px rgba(255,215,0,.05);}
  100%{box-shadow:var(--glow-blue),0 0 0 5px rgba(69,123,189,.1),0 0 0 12px rgba(69,123,189,.05);}
}
.color-shift-ring{animation:colorShiftRing 4s ease-in-out infinite;}

/* ── Spin ── */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinBack{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

/* ── Blink pixel ── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.blink{animation:blink 1s step-end infinite;}

/* ── Timeline dot ── */
@keyframes tlDot{0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,.5)}50%{box-shadow:0 0 0 6px rgba(230,57,70,0)}}

/* ── Avatar scan line ── */
@keyframes scanDown{0%{top:0%;opacity:.5}100%{top:100%;opacity:0}}

/* ── Wipe ── */
@keyframes wipeUp{to{transform:scaleY(1)}}

/* ── Pixel bounce (for hero stats etc) ── */
@keyframes pixelBounce{0%,100%{transform:translateY(0) scaleY(1)}40%{transform:translateY(-10px) scaleY(1.05)}60%{transform:translateY(-5px) scaleY(0.98)}}