/*
 * Breakpoints and motion preferences. Loaded last so it wins on specificity ties.
 *
 * The carousel adapts purely by re-declaring --cw and --cg: js/lib/carousel-math.js
 * expresses the cylinder radius as calc() over those two variables, so the geometry
 * re-solves on resize with no JavaScript re-layout.
 */

/*
 * Keep --cg roughly equal to --cw at every size.
 *
 * The cylinder radius is 0.866·cw + cg, and perspective is set to that same
 * radius, so the cw:radius ratio decides how hard the side frames splay. Let cg
 * shrink faster than cw and the ratio climbs towards 1, the perspective goes
 * extreme, and the neighbouring cards crowd into the front one.
 */
@media (max-width: 1080px) {
  :root { --cw: 40vw; --cg: 34vw; }
}

@media (max-width: 780px) {
  :root { --gutter: 24px; --cw: 52vw; --cg: 44vw; }

  .about { padding-top: 96px; }
  .about__inner { gap: 40px; }

  /* Image above text once there isn't room for two readable columns. */
  .project,
  .role {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .head { align-items: flex-start; }

  .contact__inner { gap: 48px; }
  .contact-card { padding: 26px; }

  .lightbox { padding: 24px; }
  .lightbox__close { top: 16px; right: 18px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; --cw: 62vw; --cg: 52vw; }

  .header { padding: 16px var(--gutter); gap: 14px; }
  .header__brand { font-size: 10px; }

  /* Six nav items will not fit; let them scroll rather than wrap the header. */
  .header__nav {
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .header__nav::-webkit-scrollbar { display: none; }
  .header__link { font-size: 10px; }

  .hud { padding: 18px var(--gutter); }
  .hud__hint { display: none; }

  .band { padding: 72px var(--gutter) 32px; }
  .band--flush { padding: 20px var(--gutter) 72px; }

  .metrics { gap: 18px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/*
 * Reduced motion.
 *
 * The hero is scroll-driven motion end to end, so this is not cosmetic. The CSS
 * here removes transitions and the photo hover scale; js/carousel.js separately
 * snaps the ring to its target instead of easing towards it, and js/nav.js drops
 * smooth scrolling. The carousel still tracks scroll — it just stops animating
 * between positions.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .shot:hover .shot__img,
  .shot:focus-visible .shot__img { transform: none; }

  .panel__inner { transform: none; }
  .link:hover { padding-left: 4px; }
}