/* One home-page hero: the existing artwork becomes an interactive device selector.
   Each device slice uses the source image's exact coordinates; no relative rescaling. */
.hero--lineup .hero-art { isolation: isolate; overflow: hidden; }
.hero-motion-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: none;
}
.hero-home-view {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.hero-home-view { background: #e3d8ca; }
.hero--lineup .hero-home-view .hero-lineup,
.hero--lineup .hero-home-view .hero-lineup-image { width: 100%; height: 100%; }
.hero--lineup .hero-home-view .hero-lineup-image { object-fit: contain; }
.hero--lineup .hero-home-view .hero-overlay-wordmark {
  transition: transform 700ms cubic-bezier(.22,1,.36,1),opacity 500ms ease;
  z-index: 3;
}
.hero--lineup.is-selecting .hero-overlay-wordmark {
  /* Leave vertically: the incoming selector heading/labels still enter from the right. */
  transform: translateX(-50%) translateY(-110vh);
  opacity: 0;
}
.hero--lineup .hero-lineup-image { transition: opacity 160ms ease; }
/* Once the four transparent device layers are interactive, use them in BOTH
   home and selector views. Otherwise a static duplicate stays behind on lift. */
.hero--lineup.has-interactive-devices .hero-lineup-image,
.hero--lineup.is-selecting .hero-lineup-image { opacity: 0; }
/* Each product image and its name share one stage-sized coordinate system.
   Scaling this entire pair (rather than transforming each child separately)
   makes the label follow the image exactly around the device's bottom anchor.
   The model and its text label can both activate the shared hover state. */
.hero-device-selector {
  position: absolute;
  inset: 0;
  pointer-events: none;
  container-type: inline-size;
}
.hero-device-pair {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: var(--device-anchor-x) 100%;
  transition: transform 250ms cubic-bezier(.22,1,.36,1);
}
.hero-device-pair--pf2500 { --device-anchor-x: 17.90579%; }
.hero-device-pair--pf300r { --device-anchor-x: 44.46403%; }
.hero-device-pair--beam-break { --device-anchor-x: 66.17530%; }
.hero-device-pair--frame-shift { --device-anchor-x: 87.44592%; }
.hero-device-pair:has(> .hero-device:is(:hover, :focus-visible, .is-discovery-cue)),
.hero-device-pair:has(> .hero-device-name:hover),
.hero-device-pair:has(> .hero-device-bridge:hover) {
  transform: scale(1.035);
}
.hero-selector-heading {
  position: absolute;
  /* Wordmark-scale lowercase lettering, anchored inside the same hero artwork. */
  left: 21%;
  top: 8.5%;
  height: 18.2%;
  width: auto;
  max-width: none;
  opacity: 0;
  transform: translateX(100vw);
  transition: transform 700ms cubic-bezier(.22,1,.36,1),opacity 250ms ease;
  pointer-events: none;
}
.hero--lineup.is-selecting .hero-selector-heading { opacity: 1; transform: translateX(0); }
.hero-device {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
/* Extend the model's hit area a little beyond its visible crop without
   changing the artwork size or the bottom-anchored scale. */
.hero-device::before {
  content: "";
  position: absolute;
  inset: -clamp(5px, .6vw, 12px);
}
/* Buttons are usable even over the normal Overcloq wordmark. The SVG model
   labels and automatic discovery sequence still require selection mode. */
.hero--lineup.has-interactive-devices .hero-device,
.hero--lineup.is-selecting .hero-device { opacity: 1; pointer-events: auto; }
.hero-device-render {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The shared pair above controls both model and label movement. */
  transition: filter 250ms ease;
}
.hero-device-pair:has(> .hero-device:is(:hover, :focus-visible, .is-discovery-cue)) .hero-device-render,
.hero-device-pair:has(> .hero-device-name:hover) .hero-device-render,
.hero-device-pair:has(> .hero-device-bridge:hover) .hero-device-render {
  filter: drop-shadow(0 14px 12px rgba(45,36,25,.19));
}
.hero-device:focus-visible { outline: 2px solid #877565; outline-offset: 2px; }
.hero-device-name {
  position: absolute;
  /* This stage has exactly the same aspect ratio and bounds as the artwork.
     Unlike vw/px sizing, these labels shrink WITH the image on short screens. */
  height: 6.2%;
  width: auto;
  left: var(--label-x);
  top: var(--label-y);
  max-height: none;
  opacity: 0;
  transform: translateX(-50%) translateX(105vw);
  transition: transform 760ms cubic-bezier(.22,1,.36,1),opacity 250ms ease;
  pointer-events: none;
}
.hero--lineup.is-selecting .hero-device-name {
  opacity: 1;
  transform: translateX(-50%);
  /* The SVG title is part of the same clickable product as its image. */
  pointer-events: auto;
  cursor: pointer;
}
/* A transparent bridge connects the label and the model's clickable area.
   Coordinates are percentages of the SAME artwork stage, so these targets
   scale with the devices on short and narrow screens. Bridges only activate
   when labels are shown, leaving the original branded home unaffected. */
.hero-device-bridge {
  position: absolute;
  left: var(--bridge-x);
  top: var(--bridge-y);
  width: var(--bridge-w);
  height: var(--bridge-h);
  pointer-events: none;
}
.hero--lineup.is-selecting .hero-device-bridge {
  pointer-events: auto;
  cursor: pointer;
}
.hero-device-bridge--pf2500 { --bridge-x: 21%; --bridge-y: 49%; --bridge-w: 13%; --bridge-h: 6.5%; }
.hero-device-bridge--pf300r { --bridge-x: 39.5%; --bridge-y: 49%; --bridge-w: 10%; --bridge-h: 4.5%; }
.hero-device-bridge--beam-break { --bridge-x: 59%; --bridge-y: 61%; --bridge-w: 14%; --bridge-h: 5%; }
.hero-device-bridge--frame-shift { --bridge-x: 82%; --bridge-y: 69%; --bridge-w: 11%; --bridge-h: 5%; }

/* All four labels share the original image's coordinate system, not the
   individual device crop. Their font size, spacing and alignment remain
   proportional whenever the hero is resized by width OR viewport height. */
.hero-device-name--pf2500 { --label-x: 27.2%; --label-y: 44%; }
.hero-device-name--pf300r { --label-x: 44.5%; --label-y: 44%; }
.hero-device-name--beam-break { --label-x: 66.2%; --label-y: 56%; }
.hero-device-name--frame-shift { --label-x: 87%; --label-y: 64%; }

@media (prefers-reduced-motion: reduce) {
  .hero--lineup .hero-home-view .hero-overlay-wordmark,
  .hero-lineup-image, .hero-selector-heading, .hero-device,
  .hero-device-pair, .hero-device-render, .hero-device-name {transition:none!important;animation:none!important;}
}

/* The picture wrappers are used by both layouts. */
.hero-device-picture { display: block; width: 100%; height: 100%; }
.hero-device-picture > .hero-device-render { display: block; width: 100%; height: 100%; }

/* Separate mobile brand. On wide screens the original single desktop SVG is
   still used, exactly as before. */
.hero-mobile-brand { display: none; }

/* Only TWO compositions: wide (above), portrait/mobile (below). Phones and
   portrait screens of any width (tablets) use the portrait one; the <source
   media> in index.html must match this query. Each narrow
   device shares the same pixel-to-screen scale; visible alpha bounds define
   the four slots, so their spacing refers to actual products, not PNG gutters.
   PF2500 and Frame Shift are fixed at the edges; the two middle slots share
   the remaining space equally. No aspect-ratio or nested mobile overrides:
   the block after this one only swaps phone px caps for scaled sizes. */
@media (max-width: 690px), (orientation: portrait) {
  .landing-screen {
    height: var(--landing-h);
    min-height: var(--landing-h);
    max-height: var(--landing-h);
  }
  .landing-screen > .hero.hero--lineup {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    padding: 0;
  }
  .hero--lineup .hero-art {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    transform: none;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;

    --m-art-h: var(--landing-h);
    /* Image dimensions and visible-alpha bounds, in original image pixels. */
    --m-pf-w0: 759;
    --m-pf-image-w0: 860;
    --m-pf-image-left0: 58;
    --m-pf-h0: 3075;
    --m-pf300-w0: 237;
    --m-pf300-image-w0: 370;
    --m-pf300-image-left0: 79;
    --m-pf300-h0: 1610;
    --m-beam-w0: 235;
    --m-beam-image-w0: 290;
    --m-beam-image-left0: 42;
    --m-beam-h0: 1210;
    --m-frame-w0: 496;
    --m-frame-image-w0: 625;
    --m-frame-image-left0: 61;
    --m-frame-h0: 950;
    /* One legible label scale for every mobile model. */
    --m-label-h: clamp(12px, 3.75vw, 17px);

    /* Shared scale preserves the relative height/size of all four models. */
    --m-pixel-total: calc(var(--m-pf-w0) + var(--m-pf300-w0) + var(--m-beam-w0) + var(--m-frame-w0));
    --m-scale-w: calc((100vw - 23px) / var(--m-pixel-total));
    --m-scale-h: calc((var(--m-art-h) - 58px) / var(--m-pf-h0));
    --m-scale: min(var(--m-scale-w), var(--m-scale-h));
    --m-pf-w: calc(var(--m-pf-w0) * var(--m-scale));
    --m-pf-h: calc(var(--m-pf-h0) * var(--m-scale));
    --m-pf300-w: calc(var(--m-pf300-w0) * var(--m-scale));
    --m-beam-w: calc(var(--m-beam-w0) * var(--m-scale));
    --m-frame-w: calc(var(--m-frame-w0) * var(--m-scale));

    /* PF2500 and Frame Shift remain anchored. PF300R moves closer to the
       PF2500 tripod handle; Beam Break follows slightly to make more label room. */
    --m-pf-x: -4vw;
    --m-frame-x: calc(100% - var(--m-frame-w) + clamp(17px, 6.1vw, 33px));
    --m-gap: calc((var(--m-frame-x) - var(--m-pf-x) - var(--m-pf-w) - var(--m-pf300-w) - var(--m-beam-w)) / 3);
    --m-pf300-shift: clamp(14px, 4vw, 22px);
    --m-beam-shift: clamp(8px, 2.4vw, 12px);
    --m-pf300-x: calc(var(--m-pf-x) + var(--m-pf-w) + var(--m-gap) - var(--m-pf300-shift));
    --m-beam-x: calc(var(--m-pf300-x) + var(--m-pf300-w) + var(--m-gap) + var(--m-pf300-shift) - var(--m-beam-shift));
  }
  .hero--lineup .hero-lineup-image { opacity: 0; }
  /* Desktop SVG remains in the markup for desktop, but mobile uses a tightly
     cropped duplicate of its original logo paths plus two live text lines. */
  .hero--lineup .hero-overlay-wordmark { display: none; }
  .hero-mobile-brand {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 3;
    left: 21%;
    width: 78%;
    top: calc(100% - var(--m-pf-h) + 2px);
    pointer-events: none;
    transition: transform 700ms cubic-bezier(.22,1,.36,1), opacity 500ms ease;
  }
  .hero-mobile-logo { display: block; width: 100%; height: auto; }
  .hero-mobile-subtitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 7px 0 0;
    padding: 0;
    color: #877565;
    font: 400 clamp(15px, 4.8vw, 23px)/1.65 var(--font-brand, Arial, sans-serif);
    letter-spacing: -.055em;
    text-align: center;
    white-space: nowrap;
  }
  .hero-mobile-subtitle > span { display: block; }
  .hero--lineup.is-selecting .hero-mobile-brand {
    transform: translateY(-110vh);
    opacity: 0;
  }
  /* Incoming 'select a device' uses the same top-left anchor as the logo. */
  .hero-selector-heading {
    z-index: 4;
    left: 21%;
    top: calc(100% - var(--m-pf-h) + 5px);
    width: 78%;
    max-width: none;
    height: auto;
    translate: none;
  }

  .hero-device-pair { transform-origin: 50% 100%; }
  .hero-device-pair--pf2500 {
    --m-x: var(--m-pf-x);
    --m-w: var(--m-pf-w);
    --m-h: var(--m-pf-h);
    --m-image-w0: var(--m-pf-image-w0);
    --m-image-left0: var(--m-pf-image-left0);
    --m-label-x: .94;
    /* Place the label beside the shaft, below the subtitle and just above
       the PF2500 handle bend, rather than writing across the hardware. */
    --m-label-bottom: calc(var(--m-h) - clamp(170px, 46vw, 225px));
  }
  .hero-device-pair--pf300r {
    --m-x: var(--m-pf300-x);
    --m-w: var(--m-pf300-w);
    --m-h: calc(var(--m-pf300-h0) * var(--m-scale));
    --m-image-w0: var(--m-pf300-image-w0);
    --m-image-left0: var(--m-pf300-image-left0);
    --m-label-x: .5;
    --m-label-bottom: calc(var(--m-h) + 2px);
  }
  .hero-device-pair--beam-break {
    --m-x: var(--m-beam-x);
    --m-w: var(--m-beam-w);
    --m-h: calc(var(--m-beam-h0) * var(--m-scale));
    --m-image-w0: var(--m-beam-image-w0);
    --m-image-left0: var(--m-beam-image-left0);
    --m-label-x: .5;
    --m-label-bottom: calc(var(--m-h) + 2px);
  }
  .hero-device-pair--frame-shift {
    --m-x: var(--m-frame-x);
    --m-w: var(--m-frame-w);
    --m-h: calc(var(--m-frame-h0) * var(--m-scale));
    --m-image-w0: var(--m-frame-image-w0);
    --m-image-left0: var(--m-frame-image-left0);
    /* Align to the center of the camera head (the cable hangs to one side). */
    --m-label-x: .32;
    --m-label-bottom: calc(var(--m-h) + 2px);
  }
  .hero-device-pair > .hero-device {
    left: var(--m-x) !important;
    top: auto;
    bottom: 0;
    width: var(--m-w) !important;
    height: var(--m-h) !important;
    padding: 0;
    overflow: visible;
  }
  .hero-device-pair > .hero-device > .hero-device-picture,
  .hero-device-pair > .hero-device > .hero-device-render {
    position: absolute;
    left: calc(-1 * var(--m-image-left0) * var(--m-scale));
    bottom: 0;
    width: calc(var(--m-image-w0) * var(--m-scale));
    height: var(--m-h);
    max-width: none;
  }
  .hero-device-pair > .hero-device > .hero-device-picture > .hero-device-render {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .hero-device-pair > .hero-device-name {
    left: calc(var(--m-x) + var(--m-w) * var(--m-label-x));
    top: auto;
    bottom: var(--m-label-bottom);
    height: var(--m-label-h);
    max-height: none;
  }
  /* Frame Shift sits at the right edge. Center its name over the camera head
     whenever possible, but cap the right edge to leave room for the 3.5%
     hover enlargement (and avoid cutting letters off on short/wide phones).
     The SVG's half-width is 5430 / 950 / 2 = 2.858 times its height. */
  .hero-device-pair--frame-shift > .hero-device-name {
    left: min(
      calc(var(--m-x) + var(--m-w) * var(--m-label-x)),
      calc(100% - var(--m-label-h) * 2.858 - clamp(10px, 2vw, 18px))
    );
  }
  /* Wide-mode label bridges refer to the landscape composite's geometry. */
  .hero-device-bridge { display: none; }
}
/* Portrait tablets use the same composition, but there the PF2500's height,
   not the screen width, sets --m-scale, so the phone px caps above would
   leave labels, offsets and the subtitle phone-sized on a much larger stage.
   Here they follow --m-scale (models and labels) or vw (the brand lockup)
   instead, keeping their proportions on a 390px phone. */
@media (min-width: 691px) and (orientation: portrait) {
  .hero--lineup .hero-art {
    --m-label-h: calc(69 * var(--m-scale));
    --m-pf-x: calc(var(--m-pf-w) * -.1);
    --m-frame-x: calc(100% - var(--m-frame-w) * .775);
  }
  .hero-device-pair--pf2500 { --m-label-bottom: calc(var(--m-h) * .725); }
  .hero-mobile-subtitle { margin-top: .37em; font-size: 4.8vw; }
}