/* responsive.css — breakpoints + reduced-motion fallbacks */

@media (max-width: 1024px) {
  .section { padding: clamp(4rem, 9vh, 8rem) var(--gutter); }
}

@media (max-width: 720px) {
  .nav { padding: 1rem 1.2rem; }
  .hero__subtagline { max-width: 30ch; }
  .vision__text { font-size: var(--step-2); }
  .universe__stage { height: 60vh; }
}

@media (max-width: 480px) {
  .enter-cta { padding: 0.9rem 1.8rem; }
  .footer__tag { font-size: var(--step--1); }
}

/* Reduced motion — strip the cinema, keep the elegance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .webgl { display: none; }
  .hero__wordmark { opacity: 1 !important; transform: none !important; }
  .hero__subtagline { opacity: 1 !important; }
  .vision__text .word,
  .manifesto__line,
  .reveal-up { opacity: 1 !important; transform: none !important; filter: none !important; }
  .scroll-indicator { display: none; }
  body, body * { cursor: auto !important; }
  .cursor { display: none !important; }
}

/* When JS flags no-webgl (init failed / unsupported) */
.no-webgl .webgl { display: none; }
.no-webgl .hero { background: radial-gradient(ellipse at 50% 30%, rgba(123,47,255,.18), transparent 60%); }