/* ===========================================================================
 * STRIP PANORAMA — horizontally-tiling panning backdrop with scroll-tied
 * vertical alignment when expanded.
 *
 * Movement runs through a single transform on the .strip-panorama::before
 * pseudo, GPU-composited:
 *
 *   --panorama-pan-x        keyframe-driven horizontal pan loop. Registered
 *                           as <length> via @property so the keyframe
 *                           interpolates on the compositor.
 *   --panorama-translate-y  JS-driven vertical position. Set by
 *                           js/panorama.js — rest value when collapsed,
 *                           scroll-tied alignment when expanded.
 *
 * The pseudo extends ±half a tile-width on each side of its container so
 * the keyframe can translate exactly one tile period for a seamless loop.
 *
 * Paired with js/panorama.js which:
 *   (a) projects scale / x / panDuration onto :root vars
 *   (b) probes naturalWidth + naturalHeight of the image
 *   (c) writes per-frame --panorama-translate-y on the strip element
 *   (d) registers the F3 debug target
 * ===========================================================================
 */

/* Registered for keyframe interpolation. Without @property the keyframe
   would treat --panorama-pan-x as an opaque string and jump at 50%. */
@property --panorama-pan-x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.accordion-strip.has-panorama {
  /* sRGB value of the panorama image's bottom-edge sky. Sampled via
     canvas.getImageData (returns sRGB) — not via a screen-pixel
     eyedropper, which would read the post-color-profile transformed
     panel pixel rather than the sRGB source. */
  background: #7bffff;
}

.strip-panorama {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #7bffff;
}

.strip-panorama::before {
  content: "";
  position: absolute;
  top: 0;
  /* Pseudo height matches the image's rendered height (nativeHeight ×
     scale) so the bg-color doesn't extend below the image — the box
     ends right at the image's bottom edge. The parallax math in
     js/panorama.js uses this same value to align image-top / image-
     bottom with the strip's top / bottom across the scroll-through. */
  height: calc(var(--panorama-native-height, 800px) * var(--panorama-scale, 1));
  /* Pseudo extends ±half-tile-width on each side so the keyframe pan
     can translate exactly one tile period, looping seamlessly. */
  left:  calc(var(--panorama-native-width, 2000px) * var(--panorama-scale, 1) * -0.5);
  right: calc(var(--panorama-native-width, 2000px) * var(--panorama-scale, 1) * -0.5);

  /* Duplicate the parent's bg color on the pseudo so its compositor
     layer is fully opaque cyan before the bg-image paints over it.
     Without this, repeat-x leaves transparent rows below the image's
     bottom row, and bilinear sampling during sub-pixel pan transforms
     averages the image's bottom row against transparency, producing a
     visible hairline seam. */
  background-color: #7bffff;
  background-image: url("../assets/panorama_image.png");
  background-repeat: repeat-x;
  background-position: calc(50% + var(--panorama-x, 0px)) 0;
  background-size:
    calc(var(--panorama-native-width, 2000px) * var(--panorama-scale, 1))
    auto;

  /* Composite movement: keyframe-driven X, JS-driven Y. */
  transform:
    translateX(var(--panorama-pan-x))
    translateY(var(--panorama-translate-y, 0px));

  animation: panorama-pan var(--panorama-pan-duration, 60s) linear infinite;
  will-change: transform;
}

@keyframes panorama-pan {
  from { --panorama-pan-x: calc(var(--panorama-native-width, 2000px) * var(--panorama-scale, 1) *  0.5); }
  to   { --panorama-pan-x: calc(var(--panorama-native-width, 2000px) * var(--panorama-scale, 1) * -0.5); }
}

.accordion-strip.has-panorama > .strip-header,
.accordion-strip.has-panorama > .strip-content {
  position: relative;
  z-index: 1;
}

/* Honor OS-level reduced-motion preference: pause the pan entirely. */
@media (prefers-reduced-motion: reduce) {
  .strip-panorama::before { animation: none; }
}

/* Quality-governor freeze (body.pano-static, added by js/panorama.js
   freezePanorama): stop the horizontal pan but KEEP the image visible —
   the low-quality tier wants a static backdrop, not a missing one
   (contrast with no-panorama below). Mirrors the reduced-motion rule. */
body.pano-static .strip-panorama::before {
  animation: none !important;
}

/* Profiling flag: `?noPanorama` (js/flags.js) adds body.no-panorama and
   js/main.js skips initPanorama(). Hiding the element is still required
   because the horizontal pan is a CSS @keyframes on ::before that runs
   from CSS alone — display:none stops that compositor animation and the
   image, so the strip contributes zero panorama compute for a clean
   perf baseline. */
body.no-panorama .strip-panorama { display: none !important; }