/* ═════════════════════════════════════════════════════════════════════════════
   MOBILE ULTRA-OPTIMIZED - Zero Lag, Maximum Performance
   Load this ONLY on mobile devices (<768px)
   ═════════════════════════════════════════════════════════════════════════════ */

/* CRITICAL: Disable ALL animations on mobile - completely remove jank */
@media (max-width: 768px) {
  /* ─────────────────────────────────────────────────────────────────────────
     1. COMPLETELY REMOVE ALL DECORATIVE ELEMENTS
     ───────────────────────────────────────────────────────────────────────── */

  /* Hide all background animations and decorative elements */
  .site-world,
  #gpu-world,
  .world-grid,
  .world-beams,
  .world-orbits,
  .world-datafall,
  .world-vignette,
  .hero-scroll-root,
  .hero-sunset-bg,
  .hero-sunset-sky,
  .hero-sunset-sun-wrap,
  .hero-sunset-grid,
  .reactor-constellation,
  .constellation-lines {
    display: none !important;
  }

  /* Remove all canvas elements */
  canvas {
    display: none !important;
  }

  /* Remove decorative SVG */
  svg:not([aria-label="icon"]):not([role="img"]) {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     2. DISABLE ALL ANIMATIONS & TRANSITIONS
     ───────────────────────────────────────────────────────────────────────── */

  * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Force no scrolling behavior */
  html {
    scroll-behavior: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     3. SIMPLIFY LAYOUT TO SINGLE COLUMN
     ───────────────────────────────────────────────────────────────────────── */

  /* All grids become single column */
  .hero-grid,
  .hero-stats,
  .grid-2,
  .grid-3,
  .grid-4,
  .story-strip,
  .assembly-layout,
  .runtime-layout,
  .production-layout,
  .docs-layout,
  .command-grid,
  .turing-grid,
  .detail-panel,
  .surface-grid,
  .reactor-center,
  .reactor-orbit-copy,
  .filter-row,
  .nasa-video-block,
  .nvidia-video-block,
  .pitch-grid,
  .pipeline,
  .transform-show,
  .req-grid,
  .lang-grid,
  .thread-diagram,
  .thread-stats,
  .bench-table,
  .footer-inner,
  .footer-grid,
  .surface-overlay-copy {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    flex-direction: column !important;
    display: grid !important;
    gap: 1rem !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     4. REMOVE EXCESSIVE PADDING & MARGINS
     ───────────────────────────────────────────────────────────────────────── */

  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  .shell,
  .section-inner,
  .hero-inner,
  .topbar-inner,
  .footer-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    margin: 0 !important;
  }

  section {
    padding: 2rem 0 !important;
    margin: 0 !important;
  }

  .hero {
    padding: 2rem 0 !important;
    min-height: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     5. SIMPLIFY SHADOWS & EFFECTS
     ───────────────────────────────────────────────────────────────────────── */

  .panel,
  .stat-card,
  .content-card,
  .card,
  .feature-card,
  .doc-card,
  .tm-card,
  .legend-card,
  .install-panel,
  .reactor-stage,
  .surface-stage,
  .canvas-stage,
  .code-window,
  .window-frame,
  .story-card {
    box-shadow: none !important;
    border: 1px solid rgba(116, 152, 255, 0.08) !important;
    padding: 1rem !important;
    margin: 0 !important;
  }

  /* Remove backdrop blur - heavy on mobile */
  .topbar,
  .topbar.scrolled {
    backdrop-filter: none !important;
    background: rgba(4, 7, 11, 0.95) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     6. OPTIMIZE TEXT & TYPOGRAPHY
     ───────────────────────────────────────────────────────────────────────── */

  h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin: 1rem 0 !important;
  }

  h2 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin: 1rem 0 !important;
  }

  h3 {
    font-size: 1rem !important;
    margin: 0.8rem 0 !important;
  }

  p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Remove skewed text (hard to read on mobile) */
  .nav-links a,
  .brand-copy strong,
  .beta-headline-wrap {
    transform: none !important;
    font-style: normal !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     7. OPTIMIZE BUTTONS & INTERACTIONS
     ───────────────────────────────────────────────────────────────────────── */

  .button,
  .nav-links a,
  .module-tab,
  .filter-chip,
  .btn-primary,
  .btn-secondary {
    min-height: 44px !important; /* Touch-friendly */
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0.5rem 0 !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
  }

  .hero-actions,
  .beta-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     8. HIDE UNNECESSARY UI ELEMENTS ON MOBILE
     ───────────────────────────────────────────────────────────────────────── */

  /* Hide non-essential decorative elements */
  .badge,
  .stat-card,
  .reactor-stage,
  .surface-stage,
  .canvas-stage,
  .reactor-side,
  .hero-visual,
  .hero-panel,
  .nav-wordmark,
  .brand-copy,
  .constellation-node {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     9. OPTIMIZE FORMS & INPUTS
     ───────────────────────────────────────────────────────────────────────── */

  input,
  textarea,
  select {
    width: 100% !important;
    font-size: 1rem !important; /* Prevents zoom on iOS */
    padding: 0.75rem !important;
    border: 1px solid rgba(116, 152, 255, 0.18) !important;
    border-radius: 8px !important;
  }

  textarea {
    min-height: 100px !important;
    resize: vertical !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     10. REMOVE EXPENSIVE CSS FEATURES
     ───────────────────────────────────────────────────────────────────────── */

  /* No gradients - heavy on GPU */
  * {
    background-clip: border-box !important;
  }

  /* Simplify filters */
  [style*="filter"] {
    filter: none !important;
  }

  /* No blur effects */
  [style*="blur"] {
    backdrop-filter: none !important;
    filter: none !important;
  }

  /* No multiple shadows */
  [style*="box-shadow"] {
    box-shadow: none !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     11. ENSURE PROPER VIEWPORT & SCROLLING
     ───────────────────────────────────────────────────────────────────────── */

  /* Force proper mobile layout */
  body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100% !important;
  }

  main,
  section,
  .shell {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Remove horizontal scrolling */
  .code-body,
  pre,
  code {
    overflow-x: auto !important;
    word-break: break-word !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     12. OPTIMIZE TABLES FOR MOBILE
     ───────────────────────────────────────────────────────────────────────── */

  table {
    width: 100% !important;
    font-size: 0.85rem !important;
  }

  th,
  td {
    padding: 0.75rem !important;
    border: 1px solid rgba(116, 152, 255, 0.08) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     13. STICKY HEADER OPTIMIZATION
     Left as `sticky` (matches the desktop rule) rather than forced `fixed`:
     sticky keeps the header in document flow, so it always reflows correctly
     with whatever height the header/nav-links content needs at any width —
     no manual body padding-top calculation to keep in sync, and nav-links
     stay visible/tappable instead of being hidden outright.
     ───────────────────────────────────────────────────────────────────────── */

  .topbar {
    padding: 0.6rem 1rem !important;
  }

  .topbar-inner {
    min-height: auto !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }

  .brand img {
    height: 2.1rem !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     14. FOOTER OPTIMIZATION
     ───────────────────────────────────────────────────────────────────────── */

  footer {
    padding: 2rem 1rem !important;
    gap: 1rem !important;
  }

  .footer-links {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     15. MINIMAL, FAST, RESPONSIVE
     ───────────────────────────────────────────────────────────────────────── */

  /* No will-change, no perspective */
  * {
    will-change: auto !important;
    perspective: none !important;
  }

  /* Simple, fast colors */
  ::-webkit-scrollbar {
    width: 6px !important;
  }

  ::-webkit-scrollbar-track {
    background: rgba(4, 7, 11, 0.9) !important;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(90, 240, 196, 0.3) !important;
    border-radius: 3px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ULTRA-SMALL PHONES (<480px) - BARE MINIMUM
   ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Ensure zero padding on tiny screens */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .shell,
  .section-inner,
  section {
    padding: 1rem !important;
    margin: 0 !important;
  }

  h1 {
    font-size: 1.25rem !important;
  }

  h2 {
    font-size: 1.1rem !important;
  }

  .button {
    font-size: 0.9rem !important;
  }

  /* Ensure buttons don't overflow */
  .hero-actions {
    gap: 0 !important;
  }

  .button {
    margin: 0.25rem 0 !important;
  }
}

/* Force repaints to be fast */
body * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}