/* ═══════════════════════════════════════════
   Reset & base element styles
   ═══════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Keep the composition proportional on displays wider than 1080p.
     0.833333vw is 16px at 1920px and 21.33px at 2560px. */
  font-size: clamp(100%, 0.833333vw, 200%);
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Reduced motion ───
   Movement is removed (slides, hover lifts, loops) but the staggered
   scroll reveals still fade in with their delays, so content appears
   progressively instead of all at once. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Looping / decorative animations: off.
     The tagline cursor blink is kept — it's a hard opacity
     toggle (no motion), well below the 3 Hz flash threshold.
     The scroll indicator is kept too — small, slow, deliberately
     requested (≤9px travel, 2s loop). */
  .aurora__blob {
    animation: none !important;
  }

  /* Neutralize movement on interaction and scroll-reveal.
     Cards, nav links and the theme toggle are exempt — their
     effects are driven directly by the user's own cursor
     (input-following, not autonomous motion). */
  .section,
  .section.revealed,
  .nav,
  .nav--hidden,
  .contact-link:hover,
  .contact-link:focus-visible {
    transform: none !important;
  }

  .nav__theme-toggle::before {
    animation-duration: 2.4s !important;
  }

  /* Nav link flip + active underline: no movement, instant state change */
  .nav__link-label,
  .nav__link::after {
    transition: none !important;
  }

  .nav__link--active::before {
    animation: none !important;
  }

  /* Entrance reveals: staggered fade (no slide), delays preserved */
  .nav {
    animation-name: fadeIn !important;
    animation-duration: 0.6s !important;
  }

  .hero__name,
  .hero__tagline,
  .hero__sub {
    animation-name: fadeIn !important;
    animation-duration: 0.8s !important;
  }

  .section.revealed .section__label,
  .section.revealed .section__title,
  .section.revealed .section__body,
  .section.revealed .now-item:nth-child(1),
  .section.revealed .now-item:nth-child(2),
  .section.revealed .now-item:nth-child(3),
  .section.revealed .project-card:nth-child(1),
  .section.revealed .project-card:nth-child(2),
  .section.revealed .project-card:nth-child(3),
  .section.revealed .section__inner > .contact-links {
    animation-name: fadeIn !important;
    animation-duration: 0.7s !important;
  }

  .footer.revealed {
    animation-name: fadeIn !important;
    animation-duration: 0.6s !important;
  }
}

/* ─── Selection ─── */
::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-primary);
}

/* ─── Scrollbar ─── */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-border) transparent;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}