/* ============================================================
   Shopboy Gaming — sg-animations.css
   ============================================================ */

/* ---- Keyframes ---- */
@keyframes sg-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sg-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sg-slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sg-slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sg-scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sg-gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes sg-pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(0,180,255,0.2); }
  50%       { box-shadow: 0 0 30px rgba(0,180,255,0.6), 0 0 60px rgba(0,180,255,0.2); }
}
@keyframes sg-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes sg-scan-line {
  0%   { top: -10%; }
  100% { top: 110%; }
}
@keyframes sg-hero-bg-pan {
  0%   { transform: scale(1.05) translateX(0); }
  100% { transform: scale(1.05) translateX(-2%); }
}
@keyframes sg-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes sg-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sg-counter-tick {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---- Animation Utilities ---- */
.sg-anim-fade-in-up         { animation: sg-fadeInUp 0.7s ease forwards; }
.sg-anim-fade-in            { animation: sg-fadeIn 0.6s ease forwards; }
.sg-anim-slide-in-left      { animation: sg-slideInLeft 0.7s ease forwards; }
.sg-anim-slide-in-right     { animation: sg-slideInRight 0.7s ease forwards; }
.sg-anim-scale-in           { animation: sg-scaleIn 0.5s ease forwards; }
.sg-anim-float              { animation: sg-float 4s ease-in-out infinite; }
.sg-anim-pulse-glow         { animation: sg-pulse-glow 3s ease-in-out infinite; }

/* Delay utilities */
.sg-delay-100 { animation-delay: 0.1s; }
.sg-delay-200 { animation-delay: 0.2s; }
.sg-delay-300 { animation-delay: 0.3s; }
.sg-delay-400 { animation-delay: 0.4s; }
.sg-delay-500 { animation-delay: 0.5s; }
.sg-delay-600 { animation-delay: 0.6s; }
.sg-delay-700 { animation-delay: 0.7s; }
.sg-delay-800 { animation-delay: 0.8s; }

/* Initially hidden for scroll-triggered animations */
.sg-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sg-reveal.sg-revealed {
  opacity: 1;
  transform: translateY(0);
}
.sg-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sg-reveal-left.sg-revealed { opacity: 1; transform: translateX(0); }
.sg-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sg-reveal-right.sg-revealed { opacity: 1; transform: translateX(0); }
.sg-reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.sg-reveal-scale.sg-revealed { opacity: 1; transform: scale(1); }

/* Stagger children */
.sg-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.sg-stagger.sg-revealed > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0s; }
.sg-stagger.sg-revealed > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.1s; }
.sg-stagger.sg-revealed > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.2s; }
.sg-stagger.sg-revealed > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.3s; }
.sg-stagger.sg-revealed > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.4s; }
.sg-stagger.sg-revealed > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:0.5s; }

/* Gradient text animation */
.sg-gradient-animated-text {
  background: linear-gradient(270deg, #00b4ff, #a855f7, #06ecd8, #00b4ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sg-gradientShift 5s ease infinite;
}

/* Hero background animation */
.sg-hero-bg { animation: sg-hero-bg-pan 20s ease-in-out infinite alternate; }

/* Scan line effect */
.sg-scan-line-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sg-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,180,255,0.4), transparent);
  animation: sg-scan-line 8s linear infinite;
  opacity: 0.4;
}

/* Glow pulse on accent elements */
.sg-glow-pulse { animation: sg-pulse-glow 3s ease-in-out infinite; }

/* Loading spinner */
.sg-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--sg-border);
  border-top-color: var(--sg-accent-blue);
  border-radius: 50%;
  animation: sg-rotate 0.8s linear infinite;
  display: inline-block;
}