/* Eyeconic — mobile + reduced-motion overrides. Loaded last. */

/* respect users who turned animations off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ocean-bg, .grain { display: none !important; }
  .manifest-eye { opacity: 0.06 !important; }
}

/* hide custom cursor on touch */
@media (pointer: coarse) {
  .cursor { display: none !important; }
}

/* phones: trim animation count + simplify layout */
@media (max-width: 760px) {
  /* drop the grain texture and dim the canvas for paint cost */
  .grain { opacity: 0.4; }
  .ocean-bg { opacity: 0.55; }

  /* kill the giant ambient eyes in the CTA — heaviest paint at the fold */
  .cta-final .ambient-eye { display: none !important; }

  /* manifesto giant eye → small, lower opacity */
  .manifest-eye .eye {
    width: 90vw !important;
    height: 50vh !important;
    transform: scale(1.05) !important;
  }
  .manifest-eye { opacity: 0.12 !important; }

  /* nav: tighten + collapse */
  .nav .shell { padding-top: 12px; padding-bottom: 12px; }
  .nav-cta { display: none; }

  /* hero typography scales already with clamp, but kill huge line-heights */
  .hero-headline, .display { line-height: 0.98; }

  /* hero split layouts collapse */
  .hero .shell:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .hero-right { max-width: 360px; margin: 0 auto; }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .hero-stats .stat { padding: 14px 0; }

  /* stream + why + uses collapse */
  .stream-section .shell,
  .why-grid,
  .uses-list .use-row,
  .rig .shell,
  .compare-grid,
  .case .shell,
  .auth-block .shell,
  .contact .shell,
  .play-stage .shell {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* hide ring-grid extras past 4 to keep mobile light */
  .ring-grid .micro:nth-child(n+5) { display: none; }

  /* footer collapses to 2-col */
  .footer .shell {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 18px !important;
  }
  .footer .signature { grid-column: span 2; }

  /* code blocks: smaller font so they fit */
  .codeblock pre { font-size: 11px; padding: 16px; }

  /* play page: stack viewport above telemetry */
  .viewport { aspect-ratio: 4/3; }
  .telemetry { gap: 12px; }

  /* footer-bottom stacks */
  .footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  /* big section paddings → tighter */
  section { padding: 70px 0 !important; }
  .hero, .prod-hero, .dev-hero, .uc-hero, .man-hero, .play-hero {
    padding-top: 130px !important;
    padding-bottom: 50px !important;
  }
}

/* very small phones */
@media (max-width: 420px) {
  .hero-stats { grid-template-columns: 1fr !important; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 12px; }
  .catalog-grid { grid-template-columns: 1fr; }
}