/* ===================================================
   MY GAMING HUBB — ce-animations.css
   Keyframes & Animation Utilities
=================================================== */

/* ── KEYFRAMES ── */

@keyframes ce-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ce-fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ce-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ce-slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ce-slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ce-pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.2); }
  50%       { box-shadow: 0 0 40px rgba(0, 229, 255, 0.5); }
}

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

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

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

@keyframes ce-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ce-scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes ce-neon-pulse {
  0%, 100% {
    text-shadow:
      0 0 4px var(--ce-neon-cyan),
      0 0 10px var(--ce-neon-cyan),
      0 0 20px var(--ce-neon-cyan);
  }
  50% {
    text-shadow:
      0 0 2px var(--ce-neon-cyan),
      0 0 6px var(--ce-neon-cyan),
      0 0 14px var(--ce-neon-cyan);
  }
}

@keyframes ce-shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

@keyframes ce-spin {
  to { transform: rotate(360deg); }
}

@keyframes ce-bounce-subtle {
  0%, 100% { transform: translateY(0); }
  30%       { transform: translateY(-6px); }
  60%       { transform: translateY(-3px); }
}

@keyframes ce-counter-tick {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes ce-slide-up-reveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes ce-particle-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50%  { opacity: 1; }
  100% { transform: translate(var(--dx, 30px), var(--dy, -60px)) scale(0); opacity: 0; }
}

@keyframes ce-card-appear {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── ANIMATION CLASSES ── */

.ce-anim-fade-up {
  opacity: 0;
  animation: ce-fadeInUp 0.7s ease forwards;
}

.ce-anim-fade-in {
  opacity: 0;
  animation: ce-fadeIn 0.6s ease forwards;
}

.ce-anim-slide-left {
  opacity: 0;
  animation: ce-slideInLeft 0.7s ease forwards;
}

.ce-anim-slide-right {
  opacity: 0;
  animation: ce-slideInRight 0.7s ease forwards;
}

.ce-anim-float {
  animation: ce-float 4s ease-in-out infinite;
}

.ce-anim-pulse-glow {
  animation: ce-pulse-glow 2.5s ease-in-out infinite;
}

.ce-anim-rotate {
  animation: ce-rotate-slow 20s linear infinite;
}

.ce-anim-neon {
  animation: ce-neon-pulse 2s ease-in-out infinite;
}

.ce-anim-gradient {
  background-size: 200% 200%;
  animation: ce-gradient-shift 4s ease infinite;
}

/* ── DELAY UTILITIES ── */
.ce-delay-100 { animation-delay: 0.1s; }
.ce-delay-200 { animation-delay: 0.2s; }
.ce-delay-300 { animation-delay: 0.3s; }
.ce-delay-400 { animation-delay: 0.4s; }
.ce-delay-500 { animation-delay: 0.5s; }
.ce-delay-600 { animation-delay: 0.6s; }
.ce-delay-700 { animation-delay: 0.7s; }
.ce-delay-800 { animation-delay: 0.8s; }
.ce-delay-900 { animation-delay: 0.9s; }
.ce-delay-1000 { animation-delay: 1s; }

/* ── SCROLL-TRIGGERED REVEAL ── */
.ce-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ce-reveal.ce-visible {
  opacity: 1;
  transform: translateY(0);
}

.ce-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ce-reveal-left.ce-visible {
  opacity: 1;
  transform: translateX(0);
}

.ce-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ce-reveal-right.ce-visible {
  opacity: 1;
  transform: translateX(0);
}

.ce-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ce-reveal-scale.ce-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.ce-stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ce-stagger-children.ce-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.ce-stagger-children.ce-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
.ce-stagger-children.ce-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.25s; }
.ce-stagger-children.ce-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.35s; }
.ce-stagger-children.ce-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.45s; }
.ce-stagger-children.ce-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.55s; }

/* ── PARTICLE CANVAS ── */
#ce-particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── HERO CURSOR GLOW ── */
.ce-cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

/* ── TYPING CURSOR ── */
.ce-typing::after {
  content: '|';
  animation: ce-blink 0.75s step-start infinite;
  color: var(--ce-neon-cyan);
  margin-left: 2px;
}

/* ── SHIMMER SKELETON ── */
.ce-shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: ce-shimmer 1.5s infinite;
}

/* ── HOVER LIFT ── */
.ce-hover-lift {
  transition: transform var(--ce-transition);
}
.ce-hover-lift:hover { transform: translateY(-4px); }

/* ── ICON SPIN ON HOVER ── */
.ce-icon-spin-hover:hover i,
.ce-icon-spin-hover:hover svg {
  animation: ce-spin 0.5s linear;
}

/* ── NEON LINE DRAW ── */
.ce-neon-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s ease;
}
.ce-neon-line.ce-drawn { stroke-dashoffset: 0; }

/* ── TESTIMONIAL FADE TRANSITION ── */
.ce-testi-slide { display: none; }
.ce-testi-slide.ce-active {
  display: block;
  animation: ce-fadeIn 0.5s ease;
}

/* ── ORBIT DECORATION ── */
.ce-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.07);
  animation: ce-rotate-slow 30s linear infinite;
}

.ce-orbit-ring-2 {
  animation-duration: 20s;
  animation-direction: reverse;
}

/* ── GLITCH EFFECT ── */
.ce-glitch {
  position: relative;
}

.ce-glitch::before,
.ce-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.ce-glitch::before {
  color: var(--ce-neon-pink);
  animation: ce-glitch-1 3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.ce-glitch::after {
  color: var(--ce-neon-cyan);
  animation: ce-glitch-2 3s infinite linear alternate-reverse;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes ce-glitch-1 {
  0%   { transform: none; }
  5%   { transform: translateX(-3px); }
  10%  { transform: none; }
  95%  { transform: none; }
  100% { transform: translateX(3px); }
}

@keyframes ce-glitch-2 {
  0%   { transform: none; }
  5%   { transform: translateX(3px); }
  10%  { transform: none; }
  95%  { transform: none; }
  100% { transform: translateX(-3px); }
}

/* ── LOADING SPINNER ── */
.ce-spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(0,229,255,0.2);
  border-top-color: var(--ce-neon-cyan);
  border-radius: 50%;
  animation: ce-spin 0.7s linear infinite;
  display: inline-block;
}