/* ============================================================
   PREMIUM VISUAL ENHANCEMENTS v2
   Three.js Integration + Glassmorphism + Neon + Micro-interactions
   ============================================================ */

/* ---- THREE.JS CANVAS ---- */
#three-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: fadeScene 2.8s ease-out 0.5s forwards;
}
#three-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes fadeScene {
  to { opacity: 0.55; }
}
[data-theme="light"] #three-bg { opacity: 0.25; }

/* Reduce old canvas behind three */
#particles-canvas { opacity: 0.06; }

/* ---- ROOT ADDITIONS ---- */
:root {
  --neon-cyan: #00f0ff;
  --neon-pink: #ff2d78;
  --neon-purple: #b24dff;
  --neon-gold: #e8b84b;
  --glass-bg: rgba(15, 15, 35, 0.45);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 28px;
}
[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(0, 0, 0, 0.06);
}

/* ---- GLITCH TEXT ---- */
.hero-big [data-text] {
  position: relative;
}
.hero-big [data-text]::before,
.hero-big [data-text]::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.hero-big:hover [data-text]::before {
  animation: glitch1 0.3s steps(2, end) forwards;
  color: var(--neon-cyan);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
  opacity: 0.7;
}
.hero-big:hover [data-text]::after {
  animation: glitch2 0.3s steps(2, end) forwards;
  color: var(--neon-pink);
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  opacity: 0.7;
}
@keyframes glitch1 {
  0%  { transform: translate(0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-1px, -2px); }
  100%{ transform: translate(0); }
}
@keyframes glitch2 {
  0%  { transform: translate(0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-3px, 1px); }
  75% { transform: translate(1px, 2px); }
  100%{ transform: translate(0); }
}

/* ---- HOLOGRAPHIC RING (hero visual) ---- */
.holographic-ring {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: conic-gradient(from 0deg, var(--neon-cyan), var(--neon-pink), var(--neon-purple), var(--neon-cyan)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  animation: holoSpin 8s linear infinite;
  pointer-events: none;
  opacity: 0.5;
  filter: blur(0.5px);
}
@keyframes holoSpin { to { transform: rotate(360deg); } }

/* ---- REIMAGINED GLASSMORPHISM CARDS ---- */
.glass-card,
.page-card,
.education-card,
.timeline-card,
.project-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid var(--glass-border) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(.22,.68,0,.98),
              box-shadow 0.45s cubic-bezier(.22,.68,0,.98),
              border-color 0.45s ease;
}

/* Animated shine sweep on hover */
.glass-card::before,
.page-card::before,
.education-card::before,
.timeline-card::before,
.project-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.7s ease;
  z-index: 1;
  pointer-events: none;
}
.glass-card:hover::before,
.page-card:hover::before,
.education-card:hover::before,
.timeline-card:hover::before,
.project-card:hover::before {
  left: 150%;
}

/* Hover lift */
.glass-card:hover,
.page-card:hover,
.education-card:hover,
.timeline-card:hover,
.project-card:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: rgba(0, 240, 255, 0.12) !important;
  box-shadow:
    0 12px 40px rgba(0, 240, 255, 0.06),
    0 2px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ---- NEON BLOOM HEADINGS ---- */
.page-title,
h2.section-title,
.section-heading {
  text-shadow:
    0 0 8px rgba(0, 240, 255, 0.3),
    0 0 20px rgba(0, 240, 255, 0.1);
  transition: text-shadow 0.4s ease;
}
.page-title:hover,
h2.section-title:hover,
.section-heading:hover {
  text-shadow:
    0 0 12px rgba(0, 240, 255, 0.5),
    0 0 40px rgba(0, 240, 255, 0.2),
    0 0 60px rgba(178, 77, 255, 0.15);
}

/* ---- ENHANCED CTA BUTTONS ---- */
.cta-btn,
.hero-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(.22,.68,0,.98);
}
.cta-btn::after,
.hero-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(0, 240, 255, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  pointer-events: none;
}
.cta-btn:hover::after,
.hero-btn:hover::after {
  width: 300px; height: 300px;
}
.cta-btn:hover,
.hero-btn:hover {
  box-shadow:
    0 0 20px rgba(0, 240, 255, 0.2),
    0 6px 25px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

/* ---- ENHANCED SKILL BARS ---- */
.skill-bar-fill {
  position: relative;
  overflow: hidden;
}
.skill-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  animation: barShimmer 2s ease-in-out infinite;
}
@keyframes barShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---- SKILL PILLS / TAGS ---- */
.skill-pill,
.skill-tag,
.tech-tag {
  transition: all 0.35s cubic-bezier(.22,.68,0,.98);
  position: relative;
}
.skill-pill:hover,
.skill-tag:hover,
.tech-tag:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.18);
  border-color: var(--neon-cyan) !important;
}

/* ---- SIDEBAR GLASS ---- */
.sidebar,
.mobile-header {
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
}
.nav-item.active {
  position: relative;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink));
  border-radius: 0 4px 4px 0;
  animation: sidebarPulse 2s ease-in-out infinite;
}
@keyframes sidebarPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--neon-cyan); }
  50% { opacity: 0.6; box-shadow: 0 0 4px var(--neon-cyan); }
}

/* ---- PAGE REVEAL ---- */
.page.active {
  animation: pageReveal 0.6s cubic-bezier(.22,.68,0,.98) forwards;
}
@keyframes pageReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ---- PRELOADER ENHANCEMENT ---- */
.preloader {
  background: radial-gradient(ellipse at center, #0a0a2e 0%, #050510 70%, #000 100%) !important;
}
.preloader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,240,255,0.04) 0%, transparent 60%);
  animation: preloaderPulse 2s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* ---- AURORA ENHANCEMENT ---- */
.aurora .blob {
  filter: blur(90px) !important;
  opacity: 0.08 !important;
}

/* ---- SCROLL PROGRESS BAR ---- */
.scroll-progress {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-purple)) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

/* ---- TIMELINE ENHANCEMENT ---- */
.timeline::before {
  background: linear-gradient(180deg,
    var(--neon-cyan) 0%,
    var(--neon-pink) 50%,
    var(--neon-purple) 100%
  ) !important;
  width: 2px !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}
.timeline-dot {
  box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.15),
              0 0 16px rgba(0, 240, 255, 0.2) !important;
  transition: all 0.4s ease;
}
.timeline-dot:hover {
  box-shadow: 0 0 0 6px rgba(0, 240, 255, 0.25),
              0 0 28px rgba(0, 240, 255, 0.35) !important;
  transform: scale(1.3);
}

/* ---- PROJECT CARDS GLOW ---- */
.project-card {
  transition: all 0.5s cubic-bezier(.22,.68,0,.98);
}
.project-card:hover {
  box-shadow:
    0 16px 50px rgba(0, 240, 255, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.project-card .project-img {
  transition: transform 0.6s cubic-bezier(.22,.68,0,.98), filter 0.5s ease;
}
.project-card:hover .project-img {
  transform: scale(1.06);
  filter: brightness(1.1) saturate(1.2);
}

/* ---- QR CODE GLOW ---- */
.qr-container {
  transition: all 0.4s ease;
}
.qr-container:hover {
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.2),
              0 8px 30px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
}

/* ---- GRADIENT TEXT SHIMMER ---- */
.gradient-text,
.hero-big {
  background-size: 200% auto;
  animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
  to { background-position: 200% center; }
}

/* ---- FLOATING LABELS / METRICS ---- */
.metric-value,
.counter {
  transition: all 0.35s ease;
}
.metric-value:hover,
.counter:hover {
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  transform: scale(1.08);
}

/* ---- CONTACT FORM INPUTS ---- */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08),
              0 0 20px rgba(0, 240, 255, 0.05);
}

/* ---- SCANNER FRAME GLOW ---- */
.scanner-frame {
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.1),
              inset 0 0 20px rgba(0, 240, 255, 0.05);
}

/* ---- ABOUT QUOTE LINE ---- */
.about-quote {
  position: relative;
}
.about-quote::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0%;
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink));
  border-radius: 3px;
  transition: height 0.8s cubic-bezier(.22,.68,0,.98);
}
.about-quote:hover::before {
  height: 100%;
}

/* ---- HIGHLIGHT HOVER ---- */
.highlight {
  position: relative;
  transition: color 0.3s ease;
}
.highlight::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  transition: width 0.4s cubic-bezier(.22,.68,0,.98);
  border-radius: 2px;
}
.highlight:hover::after {
  width: 100%;
}

/* ---- LETTER POP for headings ---- */
@keyframes letterPop {
  from { opacity: 0; transform: translateY(15px) scale(0.8); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.letter-pop span {
  display: inline-block;
  opacity: 0;
  animation: letterPop 0.5s ease forwards;
}

/* ---- LANGUAGE BAR SHIMMER ---- */
.lang-bar-fill {
  position: relative;
  overflow: hidden;
}
.lang-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: barShimmer 2.5s ease-in-out infinite;
}

/* ---- RADIAL METER GLOW ---- */
.meter-circle {
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.25));
  transition: filter 0.4s ease;
}
.meter-circle:hover {
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.45));
}

/* ---- MUSIC PLAYER GLASS ---- */
.floating-music {
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  transition: all 0.4s ease;
}
.floating-music:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
              0 0 15px rgba(0, 240, 255, 0.08);
}

/* ---- CURSOR GLOW ENHANCEMENT ---- */
.cursor-glow {
  background: radial-gradient(circle, rgba(0,240,255,0.08) 0%, transparent 70%) !important;
  width: 280px !important; height: 280px !important;
}

/* ---- SMOOTH SCROLLBAR ---- */
.main-content::-webkit-scrollbar {
  width: 4px;
}
.main-content::-webkit-scrollbar-track {
  background: transparent;
}
.main-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
  border-radius: 4px;
}

/* ---- SELECTION ---- */
::selection {
  background: rgba(0, 240, 255, 0.2);
  color: #fff;
}

/* ---- KEYBOARD SHORTCUT HINT ---- */
.keyboard-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
  margin-left: 8px;
}

/* ---- HOVER IMAGE PARALLAX ---- */
.hero-visual img,
.about-avatar {
  transition: transform 0.5s cubic-bezier(.22,.68,0,.98);
}
.hero-visual:hover img,
.about-avatar:hover {
  transform: scale(1.04) rotate(1deg);
}

/* ---- STAGGERED FADE IN for lists ---- */
.skills-grid > *,
.projects-grid > *,
.education-list > *,
.timeline > * {
  opacity: 0;
  animation: staggerIn 0.6s ease forwards;
}
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.skills-grid > *:nth-child(1), .projects-grid > *:nth-child(1), .education-list > *:nth-child(1), .timeline > *:nth-child(1) { animation-delay: 0.05s; }
.skills-grid > *:nth-child(2), .projects-grid > *:nth-child(2), .education-list > *:nth-child(2), .timeline > *:nth-child(2) { animation-delay: 0.1s; }
.skills-grid > *:nth-child(3), .projects-grid > *:nth-child(3), .education-list > *:nth-child(3), .timeline > *:nth-child(3) { animation-delay: 0.15s; }
.skills-grid > *:nth-child(4), .projects-grid > *:nth-child(4) { animation-delay: 0.2s; }
.skills-grid > *:nth-child(5), .projects-grid > *:nth-child(5) { animation-delay: 0.25s; }
.skills-grid > *:nth-child(6), .projects-grid > *:nth-child(6) { animation-delay: 0.3s; }
.skills-grid > *:nth-child(n+7) { animation-delay: 0.35s; }

/* ---- NOISE TEXTURE ENHANCEMENT ---- */
.noise-overlay {
  opacity: 0.025 !important;
  mix-blend-mode: overlay;
}

/* ---- FOCUS VISIBLE for ACCESSIBILITY ---- */
*:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- MOBILE RESPONSIVE ---- */
@media (max-width: 768px) {
  .cursor-glow { display: none !important; }
  #three-bg { opacity: 0.7; }

  .glass-card:hover,
  .page-card:hover,
  .education-card:hover,
  .timeline-card:hover,
  .project-card:hover {
    transform: translateY(-3px) scale(1.005);
  }
}

@media (max-width: 480px) {
  #three-bg { opacity: 0.5; }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #three-bg { display: none; }
}

/* ---- TYPING CURSOR (handled in style.css now) ---- */

/* ---- HERO AVATAR GLOW PULSE ---- */
.hero-avatar-frame {
  position: relative;
}
.hero-avatar-frame::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,240,255,0.08) 0%, transparent 60%);
  pointer-events: none;
  animation: heroGlowPulse 4s ease-in-out infinite;
  z-index: -1;
}
@keyframes heroGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ---- TECH LOGO CARD ENHANCEMENTS ---- */
.tech-logo-card {
  position: relative;
}
.tech-logo-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transition: left 0.7s ease;
  z-index: 1;
  pointer-events: none;
}
.tech-logo-card:hover::before {
  left: 150%;
}

/* ---- HERO STATS BAR GLASS ---- */
.hero-stats-bar {
  position: relative;
  overflow: hidden;
}
.hero-stats-bar::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  animation: statsBarSweep 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes statsBarSweep {
  0% { left: -100%; }
  50% { left: 150%; }
  100% { left: 150%; }
}

/* ---- FLOATING TECH ICON GLOW ---- */
.floating-tech-icon {
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.floating-tech-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,240,255,.1), rgba(178,77,255,.1));
  z-index: -1;
  opacity: 0;
  transition: opacity .4s ease;
}
.floating-tech-icon:hover::after {
  opacity: 1;
}

/* ---- SECTION TAG DOT PULSE ---- */
.section-tag .tag-dot {
  animation: tagDotPulse 2s ease-in-out infinite;
}
@keyframes tagDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(0, 240, 255, 0); }
}

/* ---- SMOOTH 3D CARD HOVER ---- */
.project-card,
.education-card,
.timeline-card,
.glass-card {
  transition: transform 0.35s cubic-bezier(.22,.68,0,.98),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  will-change: transform;
}