/* ============================================================
   responsive.css — breakpoint tuning (not mere scaling).
   Each breakpoint adjusts journey length, density, and effects
   cost independently. Progress stays normalized, so the engine,
   timeline, and nav math work unchanged at every size.
   ============================================================ */

/* ---- Touch affordances (all touch devices) ---- */
@media (hover: none) and (pointer: coarse) {
  body { -webkit-tap-highlight-color: transparent; }
  a, button, .card { touch-action: manipulation; } /* no double-tap-zoom delay */
}

/* ---- Laptop ---- */
@media (max-width: 1100px) {
  .cinematic-story { height: 750vh; }
  .story-content { max-width: 960px; }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .cinematic-story { height: 700vh; }
  .brand-logo { height: 34px; } /* leave room for the hamburger */
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu { max-height: calc(100svh - var(--nav-h)); overflow-y: auto; }
  .scene-tracking, .scene-integrations { margin-left: 0; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .journey-video { object-position: 62% center; } /* reframe for narrow */
  .scene-features .card { padding: 12px; }
  .scene-features .card p { font-size: 0.8rem; }
  .scene-tracking .scene-media { max-height: 30vh; }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  :root { --nav-h: 56px; }
  .brand-logo { height: 30px; }
  .cinematic-story { height: 620vh; } /* shorter journey, less fatigue */
  .story-content { padding: calc(var(--nav-h) + 12px) 18px 32px; }
  .story-scene { max-width: 100%; }
  .story-scene.is-active::before { inset: -16px -18px; }
  .card-grid { grid-template-columns: 1fr; gap: 8px; }
  .card { padding: 10px 12px; }
  .card p { font-size: 0.8rem; margin-bottom: 4px; }
  .card h3 { font-size: 0.95rem; }
  .stat-row { gap: 16px; flex-wrap: wrap; }
  .stat-row dt { font-size: 1.3rem; }
  .lede { font-size: 0.9rem; }
  .eyebrow { font-size: 0.7rem; }
  .quote blockquote { font-size: 0.85rem; }
  .quote { padding: 10px 12px; }
  .contact-form { padding: 12px; }
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline .btn { width: 100%; }
  .field input, .field textarea { padding: 8px 10px; }
  .journey-video { object-position: 68% center; }
  .fx-grain { display: none; } /* reduce overdraw on weak GPUs */
  /* backdrop-filter blur is expensive on low-end GPUs: swap frosted
     panels for flat translucent ones (same readability, far cheaper). */
  .card, .quote, .contact-form, .pill-list li, .value-list li,
  .btn-ghost, .site-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card, .quote, .contact-form, .value-list li { background: rgba(10, 17, 30, 0.78); }
  .scene-tracking .scene-media { max-height: 22vh; }
  .pill-list li { padding: 5px 10px; font-size: 0.8rem; }
  .value-list li { padding: 8px 10px; font-size: 0.85rem; }
}

/* ---- Short viewports (small phones, landscape, short windows) ----
   Compact vertical rhythm so tall scenes (services, contact) fit
   without clipping. Applies at any width. */
@media (max-height: 700px) {
  .eyebrow { margin-bottom: 8px; }
  h1, h2 { margin-bottom: 10px; }
  .lede { margin-bottom: 14px; }
  .scroll-hint { display: none; } /* below the fold on short screens */
  .card { padding: 12px; }
  .card p { margin-bottom: 6px; }
  .quote { padding: 12px; }
  .contact-form { gap: 8px; padding: 14px; }
  .field input, .field textarea { padding: 10px 12px; }
  .value-list { gap: 8px; }
  .value-list li { padding: 10px 14px; }
}

/* ---- Very short landscape (rotated phones) ---- */
@media (max-height: 560px) and (min-width: 600px) {
  h1 { font-size: clamp(2rem, 5vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
  .lede { font-size: 0.95rem; }
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card p, .card .card-link { display: none; } /* headlines only; detail on tap-through */
  .scene-media { display: none; } /* media would crowd the frame */
  .pill-list { margin-bottom: 0; }
}

/* ---- Notched devices: respect safe areas ---- */
@supports (padding: env(safe-area-inset-left)) {
  .nav-inner {
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
  }
  .story-content {
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
  }
  .debug-panel {
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}