/* ============================================
   INTRO SCREEN - LOADING ANIMATION
============================================ */

#intro {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #0b1e36 0%, #030507 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 999;
  animation: 
    backgroundShimmer 6s ease-in-out infinite,
    introBreathe 8s ease-in-out infinite;
}

#intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(91, 124, 255, 0.02) 0px,
      rgba(91, 124, 255, 0.02) 2px,
      transparent 2px,
      transparent 4px
    );
  pointer-events: none;
  animation: scanlineShift 8s linear infinite;
  z-index: 1;
}

@keyframes scanlineShift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

@keyframes backgroundShimmer {
  0%, 100% {
    background: 
      radial-gradient(circle at 50% 50%, #0b1e36 0%, #030507 70%),
      linear-gradient(135deg, transparent 0%, rgba(91, 124, 255, 0.03) 50%, transparent 100%);
    box-shadow: inset 0 0 100px rgba(91, 124, 255, 0.05);
  }
  25% {
    background: 
      radial-gradient(circle at 50% 50%, #0f2545 0%, #050608 70%),
      linear-gradient(135deg, transparent 0%, rgba(155, 182, 255, 0.05) 50%, transparent 100%);
    box-shadow: inset 0 0 80px rgba(155, 182, 255, 0.08);
  }
  50% {
    background: 
      radial-gradient(circle at 50% 50%, #0d2241 0%, #030507 70%),
      linear-gradient(135deg, transparent 0%, rgba(91, 124, 255, 0.04) 50%, transparent 100%);
    box-shadow: inset 0 0 100px rgba(91, 124, 255, 0.05);
  }
  75% {
    background: 
      radial-gradient(circle at 50% 50%, #0b2038 0%, #050608 70%),
      linear-gradient(135deg, transparent 0%, rgba(155, 182, 255, 0.06) 50%, transparent 100%);
    box-shadow: inset 0 0 90px rgba(155, 182, 255, 0.07);
  }
}

@keyframes introBreathe {
  0%, 100% {
    filter: brightness(1);
  }
  25% {
    filter: brightness(1.02);
  }
  50% {
    filter: brightness(0.98);
  }
  75% {
    filter: brightness(1.01);
  }
}

/* ============================================
   INTRO TEXT ANIMATION
============================================ */

.intro-text {
  position: relative;
  z-index: 10;
  font-size: clamp(28px, 8vw, 52px);
  font-weight: 700;
  letter-spacing: 6px;
  color: #9bb6ff;
  text-shadow:
    0 0 15px rgba(155, 182, 255, 0.4),
    0 0 40px rgba(91, 124, 255, 0.25),
    0 0 60px rgba(91, 124, 255, 0.15);
  opacity: 0;
  animation:
    textAppear 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards,
    textPulse 3s ease-in-out 1.7s forwards,
    textGlowPulse 2.5s ease-in-out 1.7s infinite,
    textBlurPulse 1.5s ease-in-out 2.5s infinite,
    textDisappear 0.8s ease-out 4.5s forwards;
  pointer-events: none;
  will-change: opacity, transform, filter, text-shadow;
}

@keyframes textAppear {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes textPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes textGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 15px rgba(155, 182, 255, 0.4),
      0 0 40px rgba(91, 124, 255, 0.25),
      0 0 60px rgba(91, 124, 255, 0.15);
    filter: brightness(1);
  }
  50% {
    text-shadow:
      0 0 20px rgba(155, 182, 255, 0.6),
      0 0 50px rgba(91, 124, 255, 0.4),
      0 0 80px rgba(91, 124, 255, 0.25),
      0 0 100px rgba(155, 182, 255, 0.15);
    filter: brightness(1.15);
  }
}

@keyframes textBlurPulse {
  0%, 100% {
    filter: blur(0px) drop-shadow(0 0 8px rgba(155, 182, 255, 0.3));
  }
  50% {
    filter: blur(0.5px) drop-shadow(0 0 15px rgba(91, 124, 255, 0.5));
  }
}

@keyframes textDisappear {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ============================================
   ANIMATED BACKGROUND ORBS
============================================ */

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0;
  will-change: transform, opacity;
  animation: orbFadeIn 1s ease-out forwards;
}

@keyframes orbFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.6;
  }
}

.orb1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #5b7cff, #1e3a8a);
  top: 10%;
  left: 5%;
  animation: 
    orbFadeIn 1s ease-out forwards,
    floatOrb1 12s ease-in-out infinite 0.5s,
    orbPulse1 4s ease-in-out infinite 0.8s;
  opacity: 0;
}

.orb2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #4ecdc4, #0d7377);
  bottom: 5%;
  right: 10%;
  animation: 
    orbFadeIn 1.2s ease-out forwards,
    floatOrb2 14s ease-in-out infinite 0.3s,
    orbPulse2 3.5s ease-in-out infinite 1.2s;
  opacity: 0;
}

.orb3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #fd79a8, #a91d3a);
  top: 50%;
  left: 50%;
  animation: 
    orbFadeIn 1.1s ease-out forwards,
    floatOrb3 13s ease-in-out infinite 0.6s,
    orbPulse3 3.8s ease-in-out infinite 1s;
  transform: translate(-50%, -50%);
  opacity: 0;
}

@keyframes floatOrb1 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.65;
  }
  15% {
    transform: translate(20px, -30px) scale(1.05) rotate(60deg);
    opacity: 0.72;
  }
  30% {
    transform: translate(30px, -40px) scale(1.1) rotate(90deg);
    opacity: 0.7;
  }
  50% {
    transform: translate(-20px, 0) scale(0.95) rotate(180deg);
    opacity: 0.6;
  }
  75% {
    transform: translate(40px, 30px) scale(1.05) rotate(270deg);
    opacity: 0.68;
  }
}

@keyframes floatOrb2 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.62;
  }
  15% {
    transform: translate(-20px, 30px) scale(0.98) rotate(-60deg);
    opacity: 0.7;
  }
  30% {
    transform: translate(-30px, 40px) scale(0.95) rotate(-90deg);
    opacity: 0.68;
  }
  50% {
    transform: translate(20px, -20px) scale(1.1) rotate(-180deg);
    opacity: 0.65;
  }
  75% {
    transform: translate(-40px, -30px) scale(1.05) rotate(-270deg);
    opacity: 0.7;
  }
}

@keyframes floatOrb3 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 0.58;
  }
  15% {
    transform: translate(-45%, -55%) scale(1.04) rotate(60deg);
    opacity: 0.68;
  }
  30% {
    transform: translate(-40%, -50%) scale(1.08) rotate(90deg);
    opacity: 0.65;
  }
  50% {
    transform: translate(-50%, -40%) scale(0.98) rotate(180deg);
    opacity: 0.62;
  }
  75% {
    transform: translate(-60%, -50%) scale(1.05) rotate(270deg);
    opacity: 0.66;
  }
}

@keyframes orbPulse1 {
  0%, 100% {
    filter: blur(70px) brightness(1);
    opacity: 0.65;
  }
  25% {
    filter: blur(65px) brightness(1.15);
    opacity: 0.72;
  }
  50% {
    filter: blur(60px) brightness(1.3);
    opacity: 0.75;
  }
  75% {
    filter: blur(68px) brightness(1.1);
    opacity: 0.68;
  }
}

@keyframes orbPulse2 {
  0%, 100% {
    filter: blur(70px) brightness(1);
    opacity: 0.62;
  }
  25% {
    filter: blur(64px) brightness(1.12);
    opacity: 0.68;
  }
  50% {
    filter: blur(55px) brightness(1.25);
    opacity: 0.72;
  }
  75% {
    filter: blur(67px) brightness(1.08);
    opacity: 0.65;
  }
}

@keyframes orbPulse3 {
  0%, 100% {
    filter: blur(70px) brightness(0.95);
    opacity: 0.58;
  }
  25% {
    filter: blur(66px) brightness(1.1);
    opacity: 0.65;
  }
  50% {
    filter: blur(60px) brightness(1.2);
    opacity: 0.7;
  }
  75% {
    filter: blur(68px) brightness(1.05);
    opacity: 0.62;
  }
}

/* ============================================
   INTRO EXIT ANIMATION
============================================ */

#intro.fade-out {
  animation: introExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes introExit {
  from {
    opacity: 1;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(8px);
  }
}

/* ============================================
   MOBILE RESPONSIVE
============================================ */

@media (max-width: 600px) {
  #intro {
    background: radial-gradient(circle at 50% 50%, #081629 0%, #020304 70%);
    animation: backgroundShimmerMobile 6s ease-in-out infinite;
  }

  @keyframes backgroundShimmerMobile {
    0%, 100% {
      background: radial-gradient(circle at 50% 50%, #081629 0%, #020304 70%);
    }
    50% {
      background: radial-gradient(circle at 50% 50%, #0a1d32 0%, #030506 70%);
    }
  }

  .intro-text {
    font-size: clamp(20px, 6vw, 28px);
    letter-spacing: 3px;
    text-shadow:
      0 0 10px rgba(155, 182, 255, 0.3),
      0 0 25px rgba(91, 124, 255, 0.15);
  }

  .orb1 {
    width: 200px;
    height: 200px;
    top: 8%;
    left: 2%;
    animation: 
      orbFadeIn 1s ease-out forwards,
      floatOrb1Mobile 12s ease-in-out infinite 0.5s,
      orbPulse1 4s ease-in-out infinite 0.8s;
  }

  .orb2 {
    width: 180px;
    height: 180px;
    bottom: 5%;
    right: 5%;
    animation: 
      orbFadeIn 1.2s ease-out forwards,
      floatOrb2Mobile 14s ease-in-out infinite 0.3s,
      orbPulse2 3.5s ease-in-out infinite 1.2s;
  }

  .orb3 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    filter: blur(60px);
    animation: 
      orbFadeIn 1.1s ease-out forwards,
      floatOrb3Mobile 13s ease-in-out infinite 0.6s,
      orbPulse3 3.8s ease-in-out infinite 1s;
  }

  @keyframes floatOrb1Mobile {
    0%, 100% {
      transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
      transform: translate(15px, -25px) scale(1.05) rotate(90deg);
    }
    50% {
      transform: translate(-10px, 0) scale(0.98) rotate(180deg);
    }
    75% {
      transform: translate(20px, 15px) scale(1.02) rotate(270deg);
    }
  }

  @keyframes floatOrb2Mobile {
    0%, 100% {
      transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
      transform: translate(-15px, 25px) scale(0.98) rotate(-90deg);
    }
    50% {
      transform: translate(10px, -10px) scale(1.05) rotate(-180deg);
    }
    75% {
      transform: translate(-20px, -15px) scale(1.02) rotate(-270deg);
    }
  }

  @keyframes floatOrb3Mobile {
    0%, 100% {
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
      transform: translate(-45%, -50%) scale(1.04) rotate(90deg);
    }
    50% {
      transform: translate(-50%, -45%) scale(0.98) rotate(180deg);
    }
    75% {
      transform: translate(-55%, -50%) scale(1.02) rotate(270deg);
    }
  }
}