/* ============================================
   ✨ WOW Effects — Cinematic & Luxury
   ============================================ */

/* ══════════════════════════════════════════════
   PRELOADER — Cinematic intro
   ══════════════════════════════════════════════ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: background 0.4s ease;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.preloader-logo {
  display: flex;
  gap: 0.15em;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.preloader-char {
  display: inline-block;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: preloaderChar 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.preloader-char:nth-child(1) { animation-delay: 0.1s; }
.preloader-char:nth-child(2) { animation-delay: 0.2s; }

@keyframes preloaderChar {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.preloader-bar {
  width: 120px;
  height: 3px;
  background: var(--glass-bg-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.preloader-bar-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  animation: preloaderFill 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes preloaderFill {
  0% { width: 0; }
  100% { width: 100%; }
}

/* ── Preloader Exit ── */
.preloader-exit {
  animation: preloaderExit 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes preloaderExit {
  0% {
    opacity: 1;
    clip-path: circle(100% at 50% 50%);
  }
  100% {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
  }
}

/* ── App entrance after preloader ── */
body.loaded #app {
  opacity: 1;
  animation: appReveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes appReveal {
  0% {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ══════════════════════════════════════════════
   3D CARD SPECULAR HIGHLIGHT
   ══════════════════════════════════════════════ */
.glass-card,
.glass-card-static,
.project-card {
  --shine-x: 50%;
  --shine-y: 50%;
}

.glass-card::after,
.glass-card-static .project-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.glass-card:hover::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════
   GRADIENT BORDER GLOW ON HOVER
   ══════════════════════════════════════════════ */
.glow-active {
  position: relative;
}

.glow-active::before {
  background: linear-gradient(
    135deg,
    var(--accent-blue),
    var(--accent-purple),
    var(--accent-pink),
    var(--accent-teal)
  ) !important;
  background-size: 300% 300% !important;
  animation: gradientRotate 3s ease infinite !important;
  opacity: 0.4 !important;
  filter: blur(12px);
  z-index: -1 !important;
  inset: -2px !important;
}

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

/* ══════════════════════════════════════════════
   ENHANCED HERO ENTRANCE
   ══════════════════════════════════════════════ */
body.loaded .hero-content > * {
  animation: heroRevealWow 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.loaded .hero-content > *:nth-child(1) { animation-delay: 0.3s; }
body.loaded .hero-content > *:nth-child(2) { animation-delay: 0.45s; }
body.loaded .hero-content > *:nth-child(3) { animation-delay: 0.55s; }
body.loaded .hero-content > *:nth-child(4) { animation-delay: 0.65s; }
body.loaded .hero-content > *:nth-child(5) { animation-delay: 0.75s; }
body.loaded .hero-content > *:nth-child(6) { animation-delay: 0.85s; }
body.loaded .hero-content > *:nth-child(7) { animation-delay: 0.95s; }

@keyframes heroRevealWow {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Override default hero animation when wow is active */
body.loaded .hero-content > * {
  animation-name: heroRevealWow;
}

/* ── Hero name extra glow ── */
body.loaded .hero-name {
  text-shadow: 0 0 60px rgba(10, 132, 255, 0.15);
}

/* ── Hero orbs entrance ── */
body.loaded .hero-orb {
  animation: orbEntrance 2s cubic-bezier(0.16, 1, 0.3, 1) both,
             orbFloat 25s infinite ease-in-out 2s;
}

body.loaded .hero-orb-1 { animation-delay: 0s, 2s; }
body.loaded .hero-orb-2 { animation-delay: 0.2s, 2.2s; }
body.loaded .hero-orb-3 { animation-delay: 0.4s, 2.4s; }
body.loaded .hero-orb-4 { animation-delay: 0.6s, 2.6s; }

@keyframes orbEntrance {
  0% {
    opacity: 0;
    transform: scale(0.3);
    filter: blur(150px);
  }
  100% {
    opacity: var(--orb-opacity, 0.6);
    transform: scale(1);
    filter: blur(100px);
  }
}

/* ── Floating elements entrance ── */
body.loaded .hero-float {
  animation: floatEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both,
             floatElement 8s infinite ease-in-out 1.5s;
}

body.loaded .hero-float-1 { animation-delay: 0.8s, 1.5s; }
body.loaded .hero-float-2 { animation-delay: 0.9s, 1.5s; }
body.loaded .hero-float-3 { animation-delay: 1.0s, 1.5s; }
body.loaded .hero-float-4 { animation-delay: 1.1s, 1.5s; }

@keyframes floatEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ══════════════════════════════════════════════
   SECTION HEADING TEXT REVEAL
   ══════════════════════════════════════════════ */
.section-header h2 {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header h2.text-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ══════════════════════════════════════════════
   SCROLL INDICATOR — Enhanced bounce
   ══════════════════════════════════════════════ */
body.loaded .scroll-indicator {
  animation: scrollBounceWow 2.5s infinite cubic-bezier(0.16, 1, 0.3, 1) 1.5s;
}

@keyframes scrollBounceWow {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(12px);
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════
   SMOOTH HOVER LIFT — Enhanced
   ══════════════════════════════════════════════ */
.glass-card:hover,
.project-card:hover {
  box-shadow: var(--glass-shadow-lg), 0 0 30px rgba(10, 132, 255, 0.06);
}

/* ══════════════════════════════════════════════
   BTN HOVER GLOW PULSE
   ══════════════════════════════════════════════ */
.btn-primary:hover {
  animation: btnGlow 2s infinite ease-in-out;
}

@keyframes btnGlow {
  0%, 100% {
    box-shadow: var(--btn-primary-shadow-hover);
  }
  50% {
    box-shadow: var(--btn-primary-shadow-hover), 0 0 40px rgba(10, 132, 255, 0.2);
  }
}

/* ══════════════════════════════════════════════
   LIGHT THEME SPECULAR
   ══════════════════════════════════════════════ */
[data-theme="light"] .glass-card::after,
[data-theme="light"] .glass-card-static .project-image::after {
  background: radial-gradient(
    circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  );
}

[data-theme="light"] body.loaded .hero-name {
  text-shadow: 0 0 40px rgba(0, 102, 255, 0.1);
}

[data-theme="light"] .glass-card:hover,
[data-theme="light"] .project-card:hover {
  box-shadow: var(--glass-shadow-lg), 0 0 20px rgba(0, 102, 255, 0.04);
}

/* ══════════════════════════════════════════════
   REDUCED MOTION — Disable wow effects
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none;
  }

  body.loaded #app {
    animation: none;
  }

  body.loaded .hero-content > * {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  body.loaded .hero-orb {
    animation: none;
  }

  body.loaded .hero-float {
    animation: none;
  }

  .section-header h2 {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .glow-active::before {
    animation: none !important;
  }
}