/* ============================================================
   RESPONSIVE.CSS — Media Queries
   ============================================================ */

/* ========================
   Large Desktop (1400px+)
   ======================== */
@media (min-width: 1400px) {
  :root { --container: 1320px; }
  .hero { padding: 8rem 3rem 4rem; }
  .hero-visual { width: 480px; height: 480px; }
  .hero-img-frame { width: 300px; height: 300px; }
  .ring-outer { width: 460px; height: 460px; }
  .ring-mid   { width: 380px; height: 380px; }
  .ring-inner { width: 300px; height: 300px; }
}

/* ========================
   Tablet Landscape (1024–1199px)
   ======================== */
@media (max-width: 1199px) {
  :root { --section-py: 5rem; }

  .hero { gap: 2rem; padding: 8rem 2rem 4rem; }
  .hero-visual { width: 360px; height: 360px; }
  .hero-img-frame { width: 230px; height: 230px; }
  .ring-outer { width: 350px; height: 350px; }
  .ring-mid   { width: 275px; height: 275px; }
  .ring-inner { width: 200px; height: 200px; }

  .about-grid    { gap: 3rem; }
  .timeline      { gap: 2rem 3rem; }

  .portfolio-grid    { grid-template-columns: repeat(2,1fr); }
  .skills-layout     { gap: 3rem; }
  .contact-grid      { gap: 3rem; }
  .footer-grid       { grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; }
  .footer-grid .footer-col:last-child { grid-column: 1 / -1; }
}

/* ========================
   Tablet Portrait (768–1023px)
   ======================== */
@media (max-width: 1023px) {
  :root { --section-py: 4rem; }

  /* Nav */
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 80vw);
    background: rgba(10,10,20,.97);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255,255,255,.07);
    flex-direction: column;
    align-items: flex-start;
    padding: 7rem 2.5rem 3rem;
    gap: .5rem;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.16,1,.3,1);
    z-index: 999;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-link { font-size: 1.1rem; padding: .75rem 0; width: 100%; }
  .nav-link::after { bottom: 0; }

  /* Hero */
  .hero {
    flex-direction: column-reverse;
    text-align: center;
    padding: 7rem 2rem 4rem;
    min-height: auto;
    gap: 2.5rem;
  }
  .hero-content { max-width: 100%; }
  .hero-greeting { justify-content: center; }
  .hero-cta      { justify-content: center; }
  .hero-stats    { justify-content: center; }
  .hero-description { margin: 0 auto 2rem; }

  .hero-visual { width: 320px; height: 320px; }
  .hero-img-frame { width: 210px; height: 210px; }
  .ring-outer { width: 310px; height: 310px; }
  .ring-mid   { width: 245px; height: 245px; }
  .ring-inner { width: 180px; height: 180px; }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about-img-stack { height: 360px; }
  .about-content { text-align: center; }
  .about-content .btn { margin: 0 auto; }
  .about-info-grid { max-width: 500px; margin: 2rem auto; }

  /* Timeline */
  .timeline { grid-template-columns: 1fr; gap: 1.5rem; }
  .timeline-item[data-side="right"] { margin-top: 0; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }

  /* Skills */
  .skills-layout { grid-template-columns: 1fr; gap: 3rem; }
  .skill-circles-grid { grid-template-columns: repeat(4,1fr); }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .contact-info { text-align: center; }
  .contact-items { align-items: center; }
  .contact-item { max-width: 360px; }
  .social-row { justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-col.footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}

/* ========================
   Mobile Large (640–767px)
   ======================== */
@media (max-width: 767px) {
  :root { --section-py: 3.5rem; }

  .container { padding: 0 1.25rem; }

  /* Hero */
  .hero { padding: 6.5rem 1.25rem 3rem; }
  .hero-name { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .hero-stats { gap: 1.2rem; }
  .stat-number { font-size: 1.8rem; }
  .hero-visual { width: 270px; height: 270px; }
  .hero-img-frame { width: 180px; height: 180px; }
  .ring-outer { width: 260px; height: 260px; }
  .ring-mid   { width: 205px; height: 205px; }
  .ring-inner { width: 150px; height: 150px; }

  .orbit-item { width: 46px; height: 46px; font-size: .54rem; }

  /* About */
  .about-img-stack { height: 300px; }
  .about-badge { width: 75px; height: 75px; }
  .badge-num { font-size: 1.3rem; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .portfolio-filter { gap: .5rem; }
  .filter-btn { padding: .4rem 1rem; font-size: .8rem; }

  /* Skills */
  .skill-circles-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  /* Contact Form */
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 1.5rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col.footer-brand { grid-column: auto; }
  .back-to-top { bottom: 2rem; right: 1rem; }
}

/* ========================
   Mobile Small (< 480px)
   ======================== */
@media (max-width: 479px) {
  :root { --section-py: 3rem; }

  .hero { padding: 6rem 1rem 3rem; }
  .hero-name { font-size: clamp(2rem, 12vw, 2.8rem); }
  .hero-title-wrapper { font-size: 1rem; justify-content: center; }
  .hero-description { font-size: .9rem; }
  .btn { padding: .7rem 1.4rem; font-size: .88rem; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; max-width: 280px; justify-content: center; }

  .hero-visual { width: 240px; height: 240px; }
  .hero-img-frame { width: 160px; height: 160px; }
  .ring-outer { width: 230px; height: 230px; }
  .ring-mid   { width: 180px; height: 180px; }
  .ring-inner { width: 130px; height: 130px; }

  .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  .about-img-stack { height: 250px; }
  .about-img-secondary { display: none; }
  .about-img-main { width: 90%; height: 90%; }

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

  .timeline-card { padding: 1.2rem; }
  .timeline-card h4 { font-size: .95rem; }

  .portfolio-filter { flex-wrap: wrap; justify-content: center; }

  .skill-circles-grid { gap: 1rem; }
  .circle-wrap { width: 90px; height: 90px; }
  .circle-svg  { width: 90px; height: 90px; }

  .contact-form-wrap { padding: 1.2rem; border-radius: 16px; }
  .form-group input,
  .form-group textarea,
  .form-group select { padding: .9rem .9rem .55rem; font-size: .9rem; }

  .footer-grid { gap: 1.5rem; }
  .footer-bottom { font-size: .75rem; }

}

/* ========================
   Reduced Motion
   ======================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cursor-dot,
  .cursor-ring { display: none; }
  #particleCanvas { display: none; }
}

/* ========================
   High Contrast
   ======================== */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(255,255,255,.2);
    --border-glow: rgba(255,255,255,.3);
    --text-2: #cbd5e1;
    --text-3: #94a3b8;
  }
}

/* ========================
   Print
   ======================== */
@media print {
  .navbar, .cursor-dot, .cursor-ring,
  #particleCanvas, .scroll-indicator,
  .scroll-progress, .back-to-top,
  .page-loader { display: none !important; }

  body { background: #fff; color: #000; }
  .hero, section { padding: 2rem 0; }
  .text-gradient { -webkit-text-fill-color: #5b21b6; color: #5b21b6; }
}