/* ==================== WOW FACTOR CSS ENHANCEMENTS ==================== */

/* === PARTICLE EXPLOSION === */
.explosion-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 9999;
  animation: explode 1s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* === COMBO COUNTER === */
.combo-counter {
  position: fixed;
  top: 20%;
  right: 50px;
  z-index: 9999;
  text-align: center;
  pointer-events: none;
}

.combo-text {
  font-size: 1rem;
  color: #ffff33;
  text-shadow: 0 0 20px #ffff33;
  margin-bottom: 10px;
  letter-spacing: 3px;
}

.combo-number {
  font-size: 3rem;
  color: #ff3377;
  text-shadow: 
    0 0 20px #ff3377,
    0 0 40px #ff3377,
    0 0 60px #ff3377;
  animation: comboPulse 0.3s ease-in-out;
}

@keyframes comboShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg) scale(1.2); }
  75% { transform: rotate(10deg) scale(1.2); }
}

@keyframes comboPulse {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* === MOUSE TRAIL === */
.mouse-trail {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  animation: trailFade 0.5s ease-out forwards;
  box-shadow: 0 0 15px currentColor;
}

@keyframes trailFade {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* === ENHANCED 3D TILT === */
.project-card,
.skill-item {
  transition: transform 0.1s ease-out, box-shadow 0.3s;
  transform-style: preserve-3d;
}

.project-card:hover,
.skill-item:hover {
  box-shadow: 
    0 20px 40px rgba(51, 255, 51, 0.4),
    0 0 60px rgba(51, 255, 51, 0.3),
    inset 0 0 20px rgba(51, 255, 51, 0.1);
}

/* === GLITCH EFFECT === */
.glitch-active {
  animation: glitchAnim 0.3s infinite;
  position: relative;
}

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

.glitch-active::before {
  animation: glitchTop 0.3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  color: #ff3377;
  text-shadow: 2px 0 #ff3377;
}

.glitch-active::after {
  animation: glitchBottom 0.3s infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  color: #33ff33;
  text-shadow: -2px 0 #33ff33;
}

@keyframes glitchTop {
  0%, 100% { transform: translate(0); }
  33% { transform: translate(-4px, 2px); }
  66% { transform: translate(4px, -2px); }
}

@keyframes glitchBottom {
  0%, 100% { transform: translate(0); }
  33% { transform: translate(4px, 2px); }
  66% { transform: translate(-4px, -2px); }
}

@keyframes glitchAnim {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

/* === SCREEN SHAKE === */
.screen-shake {
  animation: screenShake 0.5s;
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, -10px); }
  20% { transform: translate(10px, 10px); }
  30% { transform: translate(-10px, 10px); }
  40% { transform: translate(10px, -10px); }
  50% { transform: translate(-10px, -10px); }
  60% { transform: translate(10px, 10px); }
  70% { transform: translate(-10px, 10px); }
  80% { transform: translate(10px, -10px); }
  90% { transform: translate(-10px, 10px); }
}

/* === SCORE POPUP === */
.score-popup {
  position: fixed;
  font-size: 1.5rem;
  color: #ffff33;
  text-shadow: 
    0 0 10px #ffff33,
    0 0 20px #ffff33,
    0 0 30px #ffff33;
  pointer-events: none;
  z-index: 9999;
  animation: scoreFloat 1s ease-out forwards;
  font-weight: bold;
  letter-spacing: 2px;
}

@keyframes scoreFloat {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(1.5);
    opacity: 0;
  }
}

/* === ACHIEVEMENT UNLOCKED === */
.achievement-unlocked {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1a1a1a;
  border: 6px solid #ffff33;
  padding: 30px 50px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 99999;
  animation: achievementPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 
    0 0 40px rgba(255, 255, 51, 0.8),
    0 0 80px rgba(255, 255, 51, 0.6),
    inset 0 0 20px rgba(255, 255, 51, 0.2);
}

.achievement-icon {
  font-size: 4rem;
  color: #ffff33;
  animation: rotateStar 2s ease-in-out infinite;
  text-shadow: 0 0 20px #ffff33;
}

.achievement-text {
  text-align: left;
}

.achievement-text > div:first-child {
  font-size: 0.8rem;
  color: #33ff33;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.achievement-title {
  font-size: 1.5rem;
  color: #ffff33;
  text-shadow: 0 0 10px #ffff33;
  letter-spacing: 3px;
}

@keyframes achievementPop {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes rotateStar {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
}

/* === RAINBOW MODE === */
.rainbow-mode {
  animation: rainbowBackground 2s linear infinite;
}

.rainbow-mode * {
  animation: rainbowText 2s linear infinite;
}

@keyframes rainbowBackground {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes rainbowText {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* === POWER-UP EFFECT === */
.power-up-effect {
  position: fixed;
  width: 100px;
  height: 100px;
  border: 5px solid #ffff33;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: powerUpExpand 1s ease-out forwards;
  box-shadow: 0 0 30px #ffff33;
}

.power-up-effect::before,
.power-up-effect::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  border: 3px solid #ff3377;
  border-radius: 50%;
  animation: powerUpRing 1s ease-out forwards;
}

.power-up-effect::after {
  width: 140%;
  height: 140%;
  border-color: #33ff33;
  animation-delay: 0.2s;
}

@keyframes powerUpExpand {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2) rotate(360deg);
    opacity: 0;
  }
}

@keyframes powerUpRing {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* === NEON PULSE === */
.neon-pulse-active {
  animation: neonPulseEffect 2s ease-in-out;
}

@keyframes neonPulseEffect {
  0%, 100% {
    text-shadow: 
      0 0 10px currentColor,
      0 0 20px currentColor;
  }
  50% {
    text-shadow: 
      0 0 20px currentColor,
      0 0 40px currentColor,
      0 0 60px currentColor,
      0 0 80px currentColor;
    transform: scale(1.05);
  }
}

/* === SCREEN FLASH === */
.screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffff33;
  z-index: 99998;
  pointer-events: none;
  animation: flashFade 0.5s ease-out forwards;
}

@keyframes flashFade {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* === SOUND WAVE === */
@keyframes soundWave {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* === STARFIELD === */
.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  animation: starTwinkle 3s ease-in-out infinite;
  box-shadow: 0 0 6px #fff;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* === ENHANCED BUTTON HOVER === */
.pixel-button:hover,
.carousel-btn:hover,
.nav-link:hover {
  transition: transform 0.1s ease-out;
}

/* === MAGNETIC CURSOR HINT === */
.pixel-button::after,
.carousel-btn::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px dashed currentColor;
  opacity: 0;
  transition: opacity 0.3s;
  animation: rotateBorder 4s linear infinite;
}

.pixel-button:hover::after,
.carousel-btn:hover::after {
  opacity: 0.5;
}

@keyframes rotateBorder {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === ENHANCED PROJECT CARD GLOW === */
.project-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(
    45deg,
    #33ff33,
    #ff3377,
    #ffff33,
    #33ff33
  );
  background-size: 400% 400%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s;
  animation: gradientShift 3s ease infinite;
  filter: blur(10px);
}

.project-card:hover::before {
  opacity: 1;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === SKILL ITEM RIPPLE === */
.skill-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid currentColor;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s;
}

.skill-item:hover::after {
  opacity: 1;
  transform: scale(1.2);
}

/* === FLOATING ANIMATION FOR TITLES === */
.section-title {
  animation: floatTitle 4s ease-in-out infinite;
}

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

/* === CRT FLICKER EFFECT === */
@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
  z-index: 9996;
  animation: crtFlicker 0.15s infinite;
}

/* === LOADING SCREEN ENHANCEMENT === */
.spinner-container {
  background: radial-gradient(
    circle,
    rgba(51, 255, 51, 0.2),
    #000
  );
}

.spinner div {
  box-shadow: 
    0 0 20px currentColor,
    0 0 40px currentColor;
}