/* ============================================================
   Mac Usta · Responsive breakpoints + entrance animations + reduced motion
   Loaded by index.html via <link>.  See styles/_index.css for order.
   ============================================================ */

   18. RESPONSIVE (compact widths)
   ============================================================ */
@media (max-width: 1200px) {
  .grid-dashboard {
    grid-template-areas:
      "rails rails rails rails rails rails target target target target target target"
      "i2c i2c i2c i2c spi spi spi spi usb usb usb usb"
      "lines lines lines lines lines lines lines lines lines lines lines lines"
      "board board board board board board board board board board board board";
  }
  .hero { grid-template-columns: 1fr; }
  .hero-board { grid-column: 1; grid-row: auto; transform: none; }
  .hero-wordmark-inline { font-size: clamp(22px, 4.5vw, 34px); }
}
@media (max-width: 900px) {
  .stage { margin-left: 0; }
  .topnav { padding: 0 8px; }
  .nav-no { display: none; }
  .nav-item { padding: 0 10px; }
  .topnav-foot { display: none; }
  .grid-dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rails" "target" "i2c" "spi" "usb" "lines" "board";
  }
  .grid-bench, .grid-iphone, .grid-terminal, .grid-panic { grid-template-columns: 1fr; }
  .grid-iphone-v2 {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "actions" "install" "apps" "services";
  }
  .grid-icloud {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "account" "storage" "backup" "devices";
  }
  .phone-hero { grid-template-columns: 1fr; justify-items: center; }
  .action-grid { grid-template-columns: 1fr; }
  .panic-row { grid-template-columns: 1fr; gap: 6px; }
  .hero-strip, .hero-foot { grid-template-columns: 1fr 1fr; }
  .strip-cell, .strip-cell:not(:first-child) { padding: 18px 14px; }
}

/* ============================================================
   19. ENTRANCE ANIMATIONS (page load)
   ============================================================ */
body[data-page="landing"] .hero-meta     { animation: rise 700ms var(--t-mid) both; }
body[data-page="landing"] .hero-lede     { animation: rise 800ms 260ms cubic-bezier(.22,.6,.2,1) both; }
body[data-page="landing"] .hero-cta      { animation: rise 800ms 380ms cubic-bezier(.22,.6,.2,1) both; }
body[data-page="landing"] .hero-board    { animation: boardIn 1000ms 200ms cubic-bezier(.22,.6,.2,1) both; }
body[data-page="landing"] .hero-strip    { animation: rise 800ms 520ms cubic-bezier(.22,.6,.2,1) both; }
body[data-page="landing"] .hero-foot     { animation: rise 800ms 640ms cubic-bezier(.22,.6,.2,1) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes boardIn {
  from { opacity: 0; transform: rotate(2deg) translateY(20px); }
  to   { opacity: 1; transform: rotate(-1.4deg) translateY(0); }
}

/* ============================================================
   20. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}