/* ============================================
   CURSOR & SPOTLIGHT EFFECTS
   ============================================ */

/* Background gradient overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(100, 255, 218, 0.04), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(100, 255, 218, 0.03), transparent 50%);
  z-index: -1;
  pointer-events: none;
}

/* Cursor spotlight overlay — dual layer for realistic falloff */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(250px circle at var(--mx, 50%) var(--my, 50%),
      rgba(100, 255, 218, 0.04),
      rgba(100, 255, 218, 0.01) 40%,
      transparent 55%),
    radial-gradient(800px circle at var(--mx, 50%) var(--my, 50%),
      rgba(100, 255, 218, 0.01),
      transparent 70%);
  z-index: 0;
  pointer-events: none;
  opacity: var(--spotlight-opacity, 0);
  transition: opacity 0.5s ease;
}


/* Cursor Glow Effect (trailing via JS rAF) */
.cursor-glow {
  position: fixed;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.2), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 999;
  mix-blend-mode: screen;
  filter: blur(16px);
  transition: none;
  opacity: 0;
  will-change: transform, opacity;
  animation: cursorFadeIn 0.5s ease forwards 0.3s;
}

/* Cursor trail particles */
.cursor-trail {
  position: fixed;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 998;
  mix-blend-mode: screen;
  filter: blur(10px);
  opacity: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  :root {
    --section-gap: 80px;
  }

  .nav-links,
  #nav-resume-btn {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  /* Mobile: stacked layout — dissolve containers, interleave via order */
  .projects-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .projects-text,
  .projects-images {
    display: contents;
  }

  .projects-text {
    position: static;
  }

  .project-text {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  /* Interleave: images first, then text for each project */
  .image-block[data-project="0"] {
    order: 1;
  }

  .project-text[data-project="0"] {
    order: 2;
  }

  .image-block[data-project="1"] {
    order: 3;
  }

  .project-text[data-project="1"] {
    order: 4;
  }

  .image-block[data-project="2"] {
    order: 5;
  }

  .project-text[data-project="2"] {
    order: 6;
  }

  .image-block[data-project="3"] {
    order: 7;
  }

  .project-text[data-project="3"] {
    order: 8;
  }

  .image-block {
    min-height: auto;
  }

  .about-content {
    grid-template-columns: 1fr;
  }

  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .building-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  :root {
    --section-gap: 64px;
  }

  .hero-content {
    width: 100%;
    max-width: 100vw;
  }

  .hero-name {
    font-size: clamp(2.2rem, 8vw, 3rem);
    letter-spacing: -1px;
    word-break: break-word;
  }

  .hero-building {
    white-space: normal;
    word-break: break-word;
    height: auto;
    max-width: 100%;
    display: block;
    width: fit-content;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-buttons .btn {
    justify-content: center;
    white-space: normal;
    text-align: center;
    height: auto;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .heading-line {
    display: none;
  }

  .image-block {
    min-height: auto;
  }
  .hero-scroll-indicator {
    display: none;
  }

  .pipeline-flow {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    text-align: center;
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }

  .contact-links {
    flex-direction: column;
  }

  .contact-links .btn {
    justify-content: center;
  }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATION
   ============================================ */
@media (pointer: coarse) {
  .reveal {
    will-change: opacity;
    filter: none !important;
  }

  .skill-category,
  .building-card {
    will-change: auto;
    filter: none !important;
  }

  body::after {
    display: none;
  }

  .cursor-glow,
  .cursor-trail {
    display: none;
  }

  .pipeline-arrow {
    animation: none;
    opacity: 0.5;
  }
}