/* ==========================================================================
   responsive.css — breakpoint adjustments
   Breakpoints are based on layout needs, not device names.
   Mobile-first tokens live in main.css via clamp(); this file handles
   structural shifts (columns, nav shape, effect intensity).
   ========================================================================== */

/* ---- Up to ~640px: single-column mobile ---- */
@media (max-width: 640px) {
  :root {
    --container-pad: 1.25rem;
  }

  .glass-floating,
  .glass-ultra {
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }

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

/* ---- 641px–1024px: tablet ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  .section {
    padding-block: var(--space-5);
  }
}

/* ---- 1025px and up: desktop — full cinematic spacing, tilt/reflection
   effects are enabled by JS feature detection, not CSS breakpoints ---- */
@media (min-width: 1025px) {
  .section {
    padding-block: var(--space-6);
  }
}

/* ---- Hover-dependent affordances only apply where hover truly exists ---- */
@media (hover: none) {
  .glass-interactive:hover {
    transform: none;
  }
}