/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1200px) {
  :root {
    --space-lg: 3rem;
  }

  .hero__inner {
    gap: var(--space-md);
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .nav__links {
    display: none;
  }

  .nav__cta {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: left;
    padding-bottom: var(--space-xl);
  }

  .hero__content {
    max-width: 640px;
  }

  .hero__visual {
    margin-top: var(--space-lg);
    justify-content: flex-start;
  }

  .hero__stage {
    max-width: 320px;
  }

  .hero__aurora {
    filter: blur(60px);
  }

  .hero__card {
    animation: none;
  }

  .hero__title {
    font-size: clamp(2.8rem, 9vw, 4.4rem);
  }

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

  .about__portrait {
    position: static;
    flex-direction: row;
    align-items: center;
    max-width: 320px;
  }

  .about__portrait-frame {
    width: 140px;
    aspect-ratio: 1;
  }

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

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

  .project,
  .project--left {
    grid-template-columns: 1fr;
  }

  .project--left .project__visual,
  .project--left .project__body {
    order: initial;
  }

  .journey__list::before {
    left: 60px;
  }

  .journey__item {
    grid-template-columns: 60px 1fr;
    gap: var(--space-md);
  }

  .journey__node {
    left: 56px;
  }

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

  .contact__meta {
    padding: var(--space-lg);
  }

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

/* ---------- Tablet portrait / large phone ---------- */
@media (max-width: 720px) {
  :root {
    --space-lg: 2rem;
    --nav-height: 76px;
  }

  .nav__inner {
    padding: 0 var(--space-md);
  }

  .hero__inner {
    padding: 0 var(--space-md);
    padding-top: var(--nav-height);
  }

  .hero__label {
    letter-spacing: 0.3em;
    font-size: 0.68rem;
  }

  .hero__paragraph {
    font-size: 0.92rem;
    line-height: 1.75;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .btn {
    width: 100%;
    padding: 1rem 1.5rem;
  }

  .scroll-indicator {
    bottom: var(--space-md);
  }

  .about__biodata-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

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

  .philosophy {
    padding: var(--space-lg) var(--space-md);
  }

  .philosophy__card {
    padding: var(--space-md);
  }

  .philosophy__mark {
    font-size: 3.6rem;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(2.3rem, 12vw, 3.2rem);
  }

  .hero__subtitle {
    font-size: 0.92rem;
  }

  .hero__stage {
    max-width: 240px;
  }

  .hero__card {
    padding: var(--space-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 24, 34, 0.92);
  }

  .hero__chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 24, 34, 0.9);
    font-size: 0.66rem;
    padding: 0.4rem 0.7rem;
  }

  .hero__chip--c {
    display: none;
  }

  .hero__actions .btn--ghost {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 21, 28, 0.82);
  }

  .loader__label-text {
    font-size: 0.68rem;
    letter-spacing: 0.32em;
  }

  .loader__bar {
    width: 140px;
  }

  .mobile-menu__link {
    font-size: 1.7rem;
  }

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

  .journey__list::before {
    left: 44px;
  }

  .journey__item {
    grid-template-columns: 44px 1fr;
    gap: var(--space-sm);
  }

  .journey__node {
    left: 40px;
  }

  .journey__number {
    font-size: 1.5rem;
  }

  .education__card {
    padding: var(--space-md);
  }

  .stats__grid {
    gap: var(--space-xs);
  }

  .stats__item {
    padding: var(--space-md) var(--space-sm);
  }

  .stats__value {
    font-size: 1.7rem;
  }

  .about__biodata {
    padding: var(--space-md);
  }
}

/* ---------- Short viewports (landscape phones) ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(var(--nav-height) + var(--space-md)) 0 var(--space-lg);
  }

  .hero__visual {
    display: none;
  }

  .scroll-indicator {
    display: none;
  }
}

/* ---------- Ambient field — mobile performance ----------
   Large-radius blur is one of the more expensive things a mobile GPU can
   be asked to do continuously. Below the tablet breakpoint the blobs
   trade some softness for a lighter blur radius, and the animated grain
   layer (a full-viewport blend-mode overlay repainting every frame) is
   dropped entirely — the blobs alone still read as "alive." */
@media (max-width: 720px) {
  .ambient-field__blob {
    filter: blur(70px);
    opacity: 0.4;
  }

  .ambient-field__grain {
    display: none;
  }

  .site-footer__glow {
    filter: blur(60px);
  }
}

/* Touch/coarse-pointer devices never receive the pointer-driven magnetic
   pull or 3D tilt (see interactions.js), so the idle float is the only
   motion those cards need — nothing further to disable here. */