/* Mobile — scale down all hardcoded sizes to fit narrow viewports.
   Triggers at ≤820px (matches the IS_MOBILE detection in JS). */
/* Tablets (and large phones in landscape). They sit above the phone
   breakpoint but well below a desktop viewing distance, so type and hit
   targets get a modest bump rather than inheriting desktop values tuned
   for a mouse. Card geometry is handled in JS by viewport width. */
@media (min-width: 821px) and (max-width: 1180px) {
  .progress .stop { font-size: 13px; gap: 13px; }
  .progress .stop .dot { width: 12px; height: 12px; }
  .progress { gap: 22px; right: 20px; }
  .card-title { font-size: 15px; }
  .card-cat { font-size: 10px; }
  .detail-card .value { font-size: 14px; }
  .detail-card .label { font-size: 10px; }
  .size-opt { font-size: 14px; min-width: 48px; padding: 10px 13px; }
}

@media (max-width: 820px) {
  :root {
    --title-fs: 44px;
    --title-ls: 0.20em;
    --statement-pad-y: 12px;
    --card-w: 180px;
    --card-h: 124px;
  }
  /* Per-shape titles: shrink h2 + supporting text */
  .helix-title h2,
  .sphere-title h2,
  .torus-title h2 {
    font-size: clamp(18px, 5vw, 28px) !important;
    letter-spacing: 0.14em !important;
  }
  .helix-title .we-are,
  .sphere-title .sub {
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
  }
  .helix-title .tagline,
  .torus-title .body {
    font-size: 10px !important;
    line-height: 1.6 !important;
  }
  /* Bigger title statement scales down too */
  /* Mobile statement (the "WE ARE HAZE" intro block during grid hold).
     Override desktop styling: opaque bg for legibility against the busy
     matrix background, 1.5× line size, scaled padding. Vars used so
     dev-panel color choices still apply, just with full alpha. */
  .statement {
    max-width: 88vw !important;
    --statement-bg-alpha: 1 !important;
    padding: calc(var(--statement-pad-y, 21px) * 1.2) 22px !important;
  }
  .statement .line {
    font-size: 16px !important;       /* 11 × 1.45 ≈ 1.5x of the previous mobile size */
    letter-spacing: 0.10em !important;
    line-height: 1.55 !important;
  }
  /* Right-side scroll menu — already 30% bigger on desktop, rein it back
     in on mobile so it doesn't take a 1/4 of the screen. */
  .progress { gap: 16px !important; right: 14px !important; }
  .progress .stop { gap: 10px !important; font-size: 11px !important; }
  .progress .stop .dot { width: 10px !important; height: 10px !important; }

  /* Focus mode — restructure for vertical phone layout. Hero pinned at top
     (positioned by JS via FOCUS_HERO_X/Y mobile overrides), detail panel
     stacked below as a vertical scroll list using full viewport width. */

  /* Focused card: FULL BLEED — fills viewport edge-to-edge from the top.
     Height is computed from the image's aspect ratio (set by JS as
     --focused-card-h on body, with a 16:9 fallback when no image yet).
     Capped at 70vh so portrait photos still leave room for detail panel. */
  .project-card.focused {
    --card-w: 100vw !important;
    --card-h: var(--focused-card-h, 56vw) !important;
    transform: translate(0, 0) !important;
    left: 0 !important;
    top: 0 !important;
  }
  .project-card.focused .card-image {
    inset: 0 !important;          /* photo fills the card edge-to-edge */
  }
  /* Photo fills the card with object-fit: cover by default; on mobile focus
     use 'contain' so the full image is visible (no crop) since we've sized
     the card to match the image's aspect ratio. */
  .project-card.focused .card-photo {
    object-fit: contain !important;
    background: rgba(0, 0, 0, 0.85);
  }
  /* Title overlay on the focused image — much smaller on mobile so it
     doesn't dominate the photo */
  .project-card.focused .card-title {
    font-size: 16px !important;
    letter-spacing: 0.12em !important;
  }
  .project-card.focused .card-blurb {
    font-size: 10px !important;
  }
  .project-card.focused .card-cat,
  .project-card.focused .card-num {
    font-size: 8px !important;
    letter-spacing: 0.32em !important;
  }
  .project-card.focused .card-overlay {
    padding: 12px 14px !important;
  }

  /* Carousel pagination dots — sit on the bottom-right of the photo */
  .carousel-dots {
    position: absolute;
    bottom: 8px; right: 10px;
    display: flex; gap: 6px;
    z-index: 3;
    pointer-events: none;
  }
  .carousel-dots .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(180, 255, 200, 0.35);
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .carousel-dots .dot.active {
    background: #6cff8a;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.95);
    transform: scale(1.3);
  }

  /* Detail panel: sits below the photo, full-width, vertically scrollable.
     Top position uses the body's --focused-card-h var (set by updateFocusLayout
     in JS based on the focused image's aspect ratio). 18px gap below photo. */
  .focus-detail {
    top: calc(var(--focused-card-h, 56vw) + 18px) !important;
    bottom: auto !important;
    right: auto !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-height: calc(100vh - var(--focused-card-h, 56vw) - 28px);
    overflow-y: auto;
    gap: 8px !important;
    padding: 0 14px 24px 14px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  /* Detail cards: bigger padding + bigger text — these are the primary
     content surface on mobile, not a side panel. */
  .detail-card {
    padding: 14px 16px !important;
    animation: none !important;
    backdrop-filter: none !important;
  }
  .detail-card .label {
    font-size: 10px !important;
    letter-spacing: 0.40em !important;
    margin-bottom: 8px !important;
  }
  .detail-card .value {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* CTA — bigger, more glow, fully readable */
  .detail-card.detail-cta {
    border-width: 1.5px !important;
    box-shadow:
      0 0 24px rgba(0, 255, 65, 0.55),
      inset 0 0 12px rgba(0, 255, 65, 0.18) !important;
    animation: cta-pulse 2.4s ease-in-out infinite !important;
  }
  @keyframes cta-pulse {
    0%, 100% {
      box-shadow:
        0 0 24px rgba(0, 255, 65, 0.55),
        inset 0 0 12px rgba(0, 255, 65, 0.18);
    }
    50% {
      box-shadow:
        0 0 36px rgba(0, 255, 65, 0.85),
        inset 0 0 18px rgba(0, 255, 65, 0.25);
    }
  }
  .detail-card .cta-link { padding: 18px 18px !important; }
  .detail-card .cta-prefix {
    font-size: 10px !important;
    letter-spacing: 0.40em !important;
    margin-bottom: 10px !important;
  }
  .detail-card .cta-action {
    font-size: 16px !important;
    letter-spacing: 0.18em !important;
    color: #f0fff5 !important;
    text-shadow:
      0 0 10px rgba(108, 255, 138, 0.95),
      0 0 24px rgba(0, 255, 65, 0.6) !important;
  }

  /* Focus connector SVG line — designed for horizontal layout. Hide on mobile. */
  .focus-connector { display: none !important; }
}

/* MOBILE PERF — replace expensive canvas blur during focus mode with a
   simple brightness reduction. CSS filter blur on a fullscreen WebGL
   canvas is one of the heaviest mobile GPU operations there is; killing
   it makes focus-mode feel snappy on iPhone instead of laggy. */
@media (max-width: 820px) {
  body.focus-mode #canvas-blur-target,
  body.focus-mode canvas {
    filter: brightness(0.32) !important;
  }
  /* Statement and overlays already use backdrop-filter — disable on mobile */
  .statement, .nav-menu, .detail-card {
    backdrop-filter: none !important;
  }
  /* iOS Safari zooms the whole page when focusing an input whose font-size
     is under 16px. Keep the fields at 16px on phones so the focus-mode
     layout stays put while typing. */
  .detail-form .form-field { font-size: 16px; }
  .detail-form .form-field::placeholder { font-size: 11px; }
  .scroll-hint { font-size: 10px; letter-spacing: 0.34em; bottom: 3vh; }
}