/*
 * Stage geometry (owner decisions §2; owner: camera/core). Linked after site.css.
 * The scroll length IS camera time: the camera stands still while a panel is read and flies only
 * in the travel zone in front of the next panel. --travel (side by side) / --travel-m (stacked)
 * must cover the flight the camera needs: `node tools/camera-speed.mjs` prints "need → given
 * +slack" per zone and fails on a compressed zone. Change values only with the keyframes.
 * Calibrated R3 (integrator, 26.09.2026) at 1440×900, 1920×960, 1280×650, 1024×768, 768×1024 and
 * 390×844 in DE and EN: slack ≥ 10 px everywhere. Stacked = STACK_MQ in config/blocks.js (E-9).
 * Fix R3 (27.09.2026): dp-2 and ws-2 pulled back, landscape tablets fit dp-1…dp-3 fully, stacked
 * dp-2/dp-4 framed lower — dp-2…dp-4, ws-2, ws-3 recalibrated (also 820×1180 and 360×780).
 * Anchor margins only skip the travel; header + 16 px come from html { scroll-padding-top } (K-1).
 */

/* side by side: desktop and landscape tablet */
@media (min-width: 1100px), (min-width: 760px) and (orientation: landscape) {
  .block {
    min-height: 0;
    padding-block: var(--travel, 40svh) 0;
  }
  .block--dp + .block--dp,
  .block--ws + .block--ws { padding-top: var(--travel, 40svh); }
  .station--hero { min-height: max(100svh, 640px); }

  /* S1/S2: the view offset may glide ≤ 96 px per 100 px (ENG-04), so these zones grow with the
     width; dissolves (dp-0, dp-1, ws-1, artikel, haltung, kontakt) need half a viewport */
  [data-block="security"]   { --travel: max(48svh, 830px, calc(68vw - 80px)); }
  [data-block="applied-ai"] { --travel: max(48svh, 860px, calc(65vw - 20px)); }
  [data-block="dp-0"]       { --travel: max(50svh + 40px, 400px); }
  [data-block="dp-1"]       { --travel: calc(50svh + 100px); }
  [data-block="dp-2"]       { --travel: max(48svh, 600px); }
  [data-block="dp-3"]       { --travel: max(48svh, 800px); }
  [data-block="dp-4"]       { --travel: max(48svh, 820px); }
  [data-block="dp-5"]       { --travel: max(48svh, 1030px); }
  [data-block="ws-1"]       { --travel: max(50svh + 40px, 400px); }
  [data-block="ws-2"]       { --travel: max(48svh, 930px); }
  [data-block="ws-3"]       { --travel: max(48svh, 1280px); }
  [data-block="artikel"]    { --travel: max(50svh + 40px, 400px); }
  [data-block="haltung"]    { --travel: max(50svh + 40px, 400px); }
  [data-block="kontakt"]    { --travel: max(50svh + 40px, 400px); padding-bottom: 30svh; }

  /* anchors land on the panel (camera arrived), sections carry their first block's travel */
  #dev-process { --travel: max(50svh + 40px, 400px); }
  #werkstatt { --travel: max(50svh + 40px, 400px); }
  .has-webgl :is([data-block][id], #dev-process, #werkstatt) {
    scroll-margin-top: calc(-1 * var(--travel, 40svh));
  }

  /* without the stage: calmer rhythm */
  html:not(.has-webgl) .block:not(.station--hero) { min-height: 0; padding-block: var(--space-9); }
  html:not(.has-webgl) :is(.block--dp + .block--dp, .block--ws + .block--ws) { padding-top: 0; }
}

/* landscape tablet: 6/12 panel, the fit moves the camera out, flights get longer */
@media (min-width: 760px) and (max-width: 1099px) and (orientation: landscape) {
  [data-block="security"]   { --travel: max(48svh, 1100px); }
  [data-block="applied-ai"] { --travel: max(48svh, 1040px); }
  [data-block="dp-2"]       { --travel: max(48svh, 735px); }
  [data-block="dp-3"]       { --travel: max(48svh, 1035px); }
  [data-block="ws-2"]       { --travel: max(48svh, 1230px); }
  [data-block="ws-3"]       { --travel: max(48svh, 1485px); }
}

/* reduced motion: the camera switches per block, no travel */
@media (min-width: 1100px) and (prefers-reduced-motion: reduce), (min-width: 760px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {
  .has-webgl .block:not(.station--hero) { padding-top: 24svh; }
  .has-webgl :is([data-block][id], #dev-process, #werkstatt) { scroll-margin-top: -24svh; }
}

/* stacked (phones, portrait tablets): full-width panels below an empty stage window that frames
   the object; the travel is the visible stage between two panels (390 × 844 reference) */
@media (max-width: 759px), (max-width: 1099px) and (orientation: portrait) {
  .station--hero { min-height: 0; }
  .station--hero .stage-window,
  .has-webgl .stage-window { display: block; height: 48svh; }
  .has-webgl .stage-window--step { height: 44svh; }
  .has-webgl [data-block="dp-4"] .stage-window { height: 90svh; }
  .has-webgl :is([data-block="dp-2"], [data-block="dp-5"]) .stage-window { height: 56svh; }
  .has-webgl .block:not(.station--hero) { padding-top: var(--travel-m, 0px); }
  [data-block="security"]   { --travel-m: 190px; }
  [data-block="applied-ai"] { --travel-m: 680px; }
  [data-block="dp-0"]       { --travel-m: 80px; }
  [data-block="dp-2"]       { --travel-m: 460px; }
  [data-block="dp-3"]       { --travel-m: 540px; }
  [data-block="dp-4"]       { --travel-m: 900px; }
  [data-block="dp-5"]       { --travel-m: 440px; }
  [data-block="ws-1"]       { --travel-m: 150px; }
  [data-block="ws-2"]       { --travel-m: 930px; }
  [data-block="ws-3"]       { --travel-m: 1380px; }
  [data-block="haltung"]    { --travel-m: 130px; }
  [data-block="kontakt"]    { --travel-m: 100px; }
  #dev-process { --travel-m: 80px; }
  #werkstatt { --travel-m: 150px; }
  /* the stage window lands right below the header (scroll-padding adds header + 16 px) */
  .has-webgl :is([data-block][id], #dev-process, #werkstatt) {
    scroll-margin-top: calc(-16px - var(--travel-m, 0px));
  }
  html:not(.has-webgl) .block:not(.station--hero) { padding-top: var(--space-7); }
}

/* portrait tablet: the wider window frames closer (shorter flights); the dissolves need 50svh, so
   their zones grow with the height (checked at 768×1024, 820×1180 and 1024×1366) */
@media (min-width: 760px) and (max-width: 1099px) and (orientation: portrait) {
  [data-block="security"]   { --travel-m: calc(10svh - 42px); }
  [data-block="applied-ai"] { --travel-m: calc(10svh + 250px); }
  [data-block="dp-0"], #dev-process { --travel-m: calc(40svh - 175px); }
  [data-block="dp-2"]       { --travel-m: calc(20svh + 90px); }
  [data-block="dp-3"]       { --travel-m: calc(10svh + 290px); }
  [data-block="dp-4"]       { --travel-m: 610px; }
  [data-block="dp-5"]       { --travel-m: 480px; }
  [data-block="ws-1"], #werkstatt { --travel-m: calc(40svh - 135px); }
  [data-block="ws-2"]       { --travel-m: calc(40svh + 70px); }
  [data-block="ws-3"]       { --travel-m: 1000px; }
  [data-block="artikel"]    { --travel-m: calc(20svh - 165px); }
  [data-block="haltung"]    { --travel-m: calc(40svh - 155px); }
  [data-block="kontakt"]    { --travel-m: calc(40svh - 165px); }
}