/* ================================================================
   FUTURISTIC ENHANCEMENTS
   Blade Runner × Linear.app — kunalchaudharyrajora.cloud
   ================================================================ */

/* ========== 1. PAGE LOAD TRANSITION ========== */
body {
  animation: pageLoad 0.8s ease-out;
}
@keyframes pageLoad {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

/* ========== 2. PARTICLE CANVAS ========== */
#particleCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ========== 3. PERSPECTIVE GRID (Hero) ========== */
.hero-grid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background:
    linear-gradient(rgba(59,130,246,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent 80%);
  animation: gridScroll 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes gridScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 60px; }
}
.light .hero-grid {
  background:
    linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ========== 4. GLASSMORPHISM CARDS ========== */
.dark .pillar-card,
.dark .project-card,
.dark .impact-card,
.dark .approach-item,
.dark .timeline-card,
.dark .stat-card,
.dark .contact-card,
.dark .footer-widget,
.dark .about-pullquote,
.dark .project-highlight {
  background: rgba(30, 41, 59, 0.4) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-color: rgba(148, 163, 184, 0.1) !important;
}

.light .pillar-card,
.light .project-card,
.light .impact-card,
.light .approach-item,
.light .timeline-card,
.light .stat-card,
.light .contact-card,
.light .footer-widget,
.light .about-pullquote,
.light .project-highlight {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-color: rgba(226,232,240,0.6) !important;
}

/* ========== 5. NEON GLOW EFFECTS ========== */
.dark .hero-tagline {
  text-shadow: 0 0 40px rgba(59,130,246,0.15), 0 0 80px rgba(59,130,246,0.05);
}
.dark .stat-number,
.dark .impact-number,
.dark .project-metric,
.dark .metric {
  text-shadow: 0 0 20px rgba(16,185,129,0.3), 0 0 40px rgba(16,185,129,0.1);
}
.dark .pillar-card:hover,
.dark .project-card:hover,
.dark .impact-card:hover,
.dark .stat-card:hover,
.dark .approach-item:hover,
.dark .timeline-card:hover,
.dark .contact-card:hover {
  box-shadow: 0 0 20px rgba(59,130,246,0.15), 0 0 40px rgba(59,130,246,0.05), inset 0 0 20px rgba(59,130,246,0.02) !important;
}
.dark .nav {
  box-shadow: 0 4px 30px rgba(0,0,0,0.3), inset 0 0 30px rgba(59,130,246,0.03);
}
.dark .section-title {
  text-shadow: 0 0 30px rgba(59,130,246,0.08);
}
.dark .gradient-text {
  filter: drop-shadow(0 0 30px rgba(59,130,246,0.2));
}
.dark .resume-header h1 {
  text-shadow: 0 0 40px rgba(59,130,246,0.15), 0 0 80px rgba(59,130,246,0.05);
}

/* ========== 6. CUSTOM CURSOR ========== */
@media (pointer: fine) {
  html {
    cursor: none !important;
  }
  a, button, [onclick], .project-card, .pillar-card, .impact-card,
  .stat-card, .timeline-card, .timeline-item, .approach-item, .contact-card,
  .filter-pill, .skill-tab, .btn, .social-link, .nav-toggle-theme,
  .hamburger, .nav-brand, .nav-links a, input, select, textarea {
    cursor: none !important;
  }
}
.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: #3B82F6;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.15s, height 0.15s, background 0.2s;
  will-change: left, top;
}
.cursor-dot.clicking {
  width: 4px;
  height: 4px;
}
.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(59,130,246,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s;
  will-change: left, top;
}
.cursor-ring.hover {
  width: 56px;
  height: 56px;
  border-color: #10B981;
}
@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* ========== 7. ANIMATED GRADIENT BORDERS ========== */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes borderRotate {
  to { --angle: 360deg; }
}

/* Stat card glow border (no existing ::before) */
.stat-card.glow-border {
  position: relative;
  overflow: hidden;
}
.stat-card.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 25%, #3B82F6 37%, #10B981 50%, transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderRotate 4s linear infinite;
  pointer-events: none;
  opacity: 0.5;
}

/* Featured project card glow border (override existing ::before) */
.project-card.featured.glow-border::before {
  background: conic-gradient(from var(--angle), transparent 25%, #3B82F6 37%, #10B981 50%, transparent 75%) !important;
  animation: borderRotate 4s linear infinite !important;
  opacity: 0.5 !important;
}

/* ========== 8. HOLOGRAPHIC SHIMMER ========== */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.02) 44%,
    rgba(255,255,255,0.05) 50%,
    rgba(255,255,255,0.02) 56%,
    transparent 60%
  );
  animation: shimmerMove 6s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
}
@keyframes shimmerMove {
  0%, 20% { transform: translateX(-150%); }
  80%, 100% { transform: translateX(250%); }
}

/* ========== 9. FLOATING DATA SYMBOLS ========== */
.floating-symbols {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.floating-symbol {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0;
  color: var(--text, #F1F5F9);
  animation: floatUp linear infinite;
  user-select: none;
}
@keyframes floatUp {
  0% {
    transform: translateY(110vh) rotate(0deg);
    opacity: 0;
  }
  5% { opacity: 0.035; }
  90% { opacity: 0.035; }
  100% {
    transform: translateY(-50px) rotate(180deg);
    opacity: 0;
  }
}
.light .floating-symbol {
  color: var(--text, #0F172A);
}

/* ========== 10. SECTION DIVIDERS ========== */
.section-glow-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue, #3B82F6), var(--emerald, #10B981), var(--blue, #3B82F6), transparent);
  position: relative;
  overflow: visible;
  margin: 0 auto;
  max-width: 1280px;
  opacity: 0.4;
}
.section-glow-divider::after {
  content: '';
  position: absolute;
  top: -2px;
  height: 5px;
  width: 60px;
  background: var(--blue, #3B82F6);
  border-radius: 3px;
  filter: blur(3px);
  animation: dividerPulse 3s ease-in-out infinite;
}
@keyframes dividerPulse {
  0%, 100% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 60px); opacity: 0; }
}

/* ========== 11. TYPEWRITER CURSOR ========== */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--blue, #3B82F6);
  margin-left: 3px;
  animation: twBlink 1s step-end infinite;
  vertical-align: text-bottom;
}
@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ========== 12. TILT CARDS ========== */
.tilt-card {
  transform-style: preserve-3d;
}

/* ========== 13. SCROLL PARALLAX ========== */
.hero-content.parallax-active {
  will-change: transform, opacity;
}

/* ========== 14. PRINT OVERRIDES ========== */
@media print {
  .cursor-dot, .cursor-ring, .floating-symbols,
  .hero-grid, .section-glow-divider, #particleCanvas {
    display: none !important;
  }
  body {
    animation: none !important;
  }
  .shimmer::after,
  .glow-border::before {
    display: none !important;
  }
}