/* ============================================================
   IBRAHIM ELSHISHTAWY — FUTURISTIC 3D PORTFOLIO
   High-Tier Transitions & Keyframes (animations.css)
   ============================================================ */

/* ── PRELOADER ANIMATIONS ───────────────────────────────── */
#cyber-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #020108;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease;
}

.preloader-glow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  border-bottom-color: var(--secondary);
  animation: spinGlow 1.5s linear infinite;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-glow::after {
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-left-color: var(--accent);
  border-right-color: #f59e0b;
  animation: spinGlow 1s linear infinite reverse;
}

@keyframes spinGlow { to { transform: rotate(360deg); } }

/* ── AURORA BACKGROUND ANIMATION ────────────────────────── */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 10% 20%, rgba(13, 10, 36, 1) 0%, rgba(3, 2, 9, 1) 100%);
  overflow: hidden;
}

.aurora-glow-1 {
  position: absolute;
  top: -15%;
  right: -15%;
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.14) 0%, transparent 70%);
  filter: blur(80px);
  animation: floatGlow 18s infinite alternate ease-in-out;
}

.aurora-glow-2 {
  position: absolute;
  bottom: -15%;
  left: -15%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.09) 0%, transparent 70%);
  filter: blur(90px);
  animation: floatGlow 22s infinite alternate-reverse ease-in-out;
}

.aurora-glow-3 {
  position: absolute;
  top: 45%;
  left: 32%;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.06) 0%, transparent 60%);
  filter: blur(100px);
  animation: floatGlow 28s infinite alternate ease-in-out;
}

@keyframes floatGlow {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6%, 9%) scale(1.12); }
}

/* ── WEBGL PARTICLE CANVAS ──────────────────────────────── */
#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ── GLOW CYCLES ────────────────────────────────────────── */
.cyber-badge-glow { animation: pulseGlow 2.2s ease-in-out infinite alternate; }

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 5px rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.2); }
  100% { box-shadow: 0 0 18px rgba(139, 92, 246, 0.3); border-color: rgba(139, 92, 246, 0.5); }
}

@keyframes glowPulseGreen {
  0%   { transform: scale(0.9); box-shadow: 0 0 5px #10b981; }
  100% { transform: scale(1.1); box-shadow: 0 0 14px #10b981, 0 0 24px rgba(16, 185, 129, 0.5); }
}

/* Reveal entries bounding box helper */
.bento-reveal { opacity: 0; }