/* ═══════════════════════════════════════════════════════════════════════
   Projects Expert — hero options (review only)
   pe-hero-options.css  ·  loaded AFTER css/pe.css and css/pe-r2.css,
   and ONLY by templates/_hero-options/*. No shipping page loads it.
   ───────────────────────────────────────────────────────────────────────
   Two alternatives to the approved photographic hero, for the hero
   section only. Everything below the hero is untouched, so the options
   can be compared against the same page furniture.

     A. Drivetrain  .pe-hx-a   the gear cluster from the approved kit,
                               with an engage sequence added
     B. Instrument  .pe-hx-b   the code-built interface panel, no
                               photography, no figures to fabricate

   Rules join the layers pe.css declares, so they win on source order at
   equal specificity. Motion lives in pe.motion and is written so that
   .pe-motion-reduced and .pe-motion-off get the finished state with no
   animation — never a different layout.
   ═══════════════════════════════════════════════════════════════════════ */

@layer pe.templates {

  /* ── Review chrome: a strip naming the option, so screenshots are never ambiguous ── */
  .pe-hx-tag {
    position: absolute; z-index: 3; top: calc(var(--pe-header-h) + 0.75rem); left: 50%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.75rem; border-radius: var(--pe-radius-pill);
    border: 1px solid var(--pe-line-inverse-soft); background: rgba(7, 45, 51, 0.55);
    font-family: var(--pe-font-body); font-size: 0.75rem; letter-spacing: var(--pe-tracking-caps);
    text-transform: uppercase; color: var(--pe-text-inverse-muted); white-space: nowrap;
  }
  .pe-hx-tag b { font-weight: var(--pe-weight-body-bold); color: var(--pe-white); }

  /* ═══════════════════════════════════════════════════════════════════
     A. DRIVETRAIN
     The approved kit's cluster (.pe-drivetrain in pe.css) is reused as
     built; only the load-in and the joint treatment are added here.
     ═══════════════════════════════════════════════════════════════════ */

  /* The cluster is decorative, so it may bleed past the container edge */
  .pe-hx-a .pe-home-hero__grid { position: relative; }

  /* Rim sweep: one pass of light round the wheel when the mechanism takes load.
     A conic gradient inside a ring mask, so it costs no extra element depth. */
  .pe-hx-a .pe-drivetrain__wheel::after {
    content: ""; position: absolute; inset: 6%;
    border-radius: 50%; pointer-events: none; opacity: 0;
    background: conic-gradient(from 0deg, transparent 0turn, rgba(255, 255, 255, 0.5) 0.06turn, transparent 0.16turn);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  }

  /* Small phones: three compact rows (value beside label) instead of a 2 + 1 wrap.
     Same treatment the shipping hero uses; carried here so the option is judged
     against a fixed mobile layout rather than the old RB-04 wrap. */
  @media (max-width: 479.98px) {
    .pe-hx-a .pe-hero__proof { display: grid; gap: var(--pe-space-3); }
    .pe-hx-a .pe-hero__proof .pe-stat { display: flex; align-items: baseline; gap: var(--pe-space-4); padding-left: 0; border-left: 0; }
    .pe-hx-a .pe-hero__proof .pe-stat__value { flex: none; min-width: 5.75rem; font-size: 1.5rem; }
    .pe-hx-a .pe-hero__proof .pe-stat__label { max-width: none; margin-top: 0; }
  }

  /* Drive joints read as joints, not dots: a hairline ring around each node */
  .pe-hx-a .pe-drivetrain__node::after {
    content: ""; position: absolute; inset: -5px;
    border: 1px solid var(--pe-teal-300); border-radius: 50%; opacity: 0.35;
  }

  /* ═══════════════════════════════════════════════════════════════════
     B. INSTRUMENT
     Reuses the R2 hero ground and typography (.pe-r2-hero) and swaps the
     photograph for the .pe-ui component already used on Home. Overrides
     are written .pe-r2-hero.pe-hx-b so they beat the photographic rules
     at every breakpoint regardless of file order.
     ═══════════════════════════════════════════════════════════════════ */

  .pe-r2-hero.pe-hx-b { grid-template-areas: "content" "art"; }
  .pe-hx-b__art { grid-area: art; position: relative; z-index: 2; }

  /* Mobile and tablet: the panel sits under the copy, inside the gutter.
     The width is explicit rather than max-width + auto margins: auto inline margins
     cancel a grid item's stretch, and the panel would then shrink to the width of
     .pe-ui's absolutely positioned contents — which is nothing. */
  .pe-hx-b__art {
    justify-self: center;
    width: min(100% - var(--pe-gutter) * 2, 34rem);
    margin-bottom: clamp(3rem, 2rem + 4vw, 4.5rem);
  }

  /* Desktop: copy left, instrument right, on one row */
  @media (min-width: 1024px) {
    .pe-r2-hero.pe-hx-b {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      grid-template-areas: "content art";
      align-items: center;
      column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
      padding-right: var(--pe-gutter);
    }
    /* pe-r2.css puts the content in a single "stack" area from 1024 so the photograph can sit
       behind it. This option is a two-column hero, so the content is placed back into its own
       column; without this the content is auto-placed and the grid grows implicit tracks. */
    .pe-r2-hero.pe-hx-b .pe-r2-hero__content { grid-area: content; padding-right: 0; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
    .pe-r2-hero.pe-hx-b .pe-hx-b__art { grid-area: art; }
    .pe-r2-hero.pe-hx-b .pe-r2-hero__copy { max-width: 38rem; }
    .pe-hx-b__art {
      justify-self: stretch; width: auto; margin-bottom: 0;
      padding: calc(var(--pe-header-h) * 0.5) 0 0;
      /* the panel runs a little past its column toward the page edge, like an instrument bezel,
         but never far enough to clip the "Illustrative interface" caption at the bottom right */
      margin-right: clamp(-2.5rem, -0.5rem - 1.5vw, 0rem);
    }
  }
  /* 1024-1279: .pe-ui is a container query component — under a 420px container it drops to
     two KPIs and three timeline rows by design. An even split gives the panel enough width to
     keep the full instrument (three KPIs, five rows) without squeezing the headline. */
  @media (min-width: 1024px) and (max-width: 1279.98px) {
    .pe-r2-hero.pe-hx-b { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--pe-space-6); }
    .pe-hx-b__panel { padding: 0.625rem; }
  }

  @media (min-width: 1440px) {
    .pe-hx-b__art { margin-right: -3rem; }
  }

  /* The panel itself: a raised sheet on the dark ground */
  .pe-hx-b__panel {
    position: relative; border-radius: var(--pe-radius-xl);
    background: var(--pe-white); box-shadow: var(--pe-shadow-dialog);
    padding: clamp(0.75rem, 0.5rem + 0.75vw, 1.125rem);
  }
  .pe-hx-b__panel .pe-ui { margin: 0; }
  .pe-hx-b__panel .pe-ui__caption { margin-top: 0.625rem; }

  /* Brand anchor: one quiet gear behind the sheet, so the motif is present without a cluster */
  .pe-hx-b__gear {
    position: absolute; z-index: -1; right: -3.5rem; bottom: -4rem; width: 16rem; opacity: 0.16;
  }
  @media (min-width: 1024px) { .pe-hx-b__gear { right: -5rem; bottom: -5.5rem; width: 20rem; } }
  @media (max-width: 639.98px) { .pe-hx-b__gear { display: none; } }

  /* Scanning highlight, drawn once and reused by the motion layer */
  .pe-hx-b__panel::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
  }
}

@layer pe.motion {

  /* ── A. Engage sequence ───────────────────────────────────────────────
     The scroll driver in pe.js / pe-r2.js writes transform on the <img>,
     so every load-in animation here targets the .pe-gear WRAPPER. The two
     never touch the same property on the same element. */
  .pe-motion-full .pe-hx-a .pe-drivetrain__wheel,
  .pe-motion-full .pe-hx-a .pe-drivetrain__pinion,
  .pe-motion-full .pe-hx-a .pe-drivetrain__idler,
  .pe-motion-full .pe-hx-a .pe-home-hero__corner {
    animation: pe-hx-engage 1100ms var(--pe-ease-expo) backwards;
  }
  .pe-motion-full .pe-hx-a .pe-drivetrain__pinion { animation-delay: 160ms; }
  .pe-motion-full .pe-hx-a .pe-drivetrain__idler  { animation-delay: 280ms; }
  .pe-motion-full .pe-hx-a .pe-home-hero__corner  { animation-delay: 380ms; animation-duration: 1400ms; }
  /* filter: opacity() multiplies with the gear's own opacity, so the cluster keeps the
     depth pe.css gives it (wheel 0.9, idler 0.85, corner crop 0.3). Animating the opacity
     property directly would flatten all four to 1. */
  @keyframes pe-hx-engage {
    from { filter: opacity(0); transform: scale(0.94); }
    to   { filter: opacity(1); transform: none; }
  }

  /* Shafts draw from the gear they carry; nodes arrive when the shaft lands */
  .pe-motion-full .pe-hx-a .pe-drivetrain__shaft {
    transform-origin: top center; animation: pe-hx-shaft 700ms var(--pe-ease-out) 520ms both;
  }
  .pe-motion-full .pe-hx-a .pe-drivetrain__shaft--b { transform-origin: bottom center; animation-delay: 620ms; }
  @keyframes pe-hx-shaft { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  .pe-motion-full .pe-hx-a .pe-drivetrain__node { animation: pe-hx-node-in 500ms var(--pe-ease-out) 900ms both; }
  @keyframes pe-hx-node-in { from { opacity: 0; } to { opacity: 1; } }

  /* Joints breathe only while the cluster is on screen (PE adds .is-inview) */
  .pe-motion-full .pe-hx-a .pe-drivetrain.is-inview .pe-drivetrain__node::after {
    animation: pe-hx-joint 4.5s cubic-bezier(0.45, 0, 0.55, 1) 1.4s infinite;
  }
  .pe-motion-full .pe-hx-a .pe-drivetrain.is-inview .pe-drivetrain__node--b::after { animation-delay: 3.6s; }
  @keyframes pe-hx-joint {
    0%, 70%, 100% { opacity: 0.35; transform: scale(1); }
    12%           { opacity: 0.75; transform: scale(1.35); }
  }

  /* One pass of light round the rim as the mechanism takes load */
  .pe-motion-full .pe-hx-a .pe-drivetrain__wheel::after {
    animation: pe-hx-rim 2200ms var(--pe-ease-out) 700ms both;
  }
  @keyframes pe-hx-rim {
    0%   { opacity: 0;    transform: rotate(0deg); }
    18%  { opacity: 0.85; }
    100% { opacity: 0;    transform: rotate(360deg); }
  }

  /* ── B. Live instrument ───────────────────────────────────────────────
     The reveal choreography (bars, spark, ring, heat) is the approved one
     in pe-r2.css and needs nothing here. These add the "it is running"
     layer, and only while the panel is on screen. */
  .pe-motion-full .pe-hx-b__panel.is-inview::after {
    animation: pe-hx-scan 9s cubic-bezier(0.45, 0, 0.55, 1) 2.2s infinite;
  }
  @keyframes pe-hx-scan {
    0%, 62%, 100% { opacity: 0; transform: translateX(-30%); }
    68%           { opacity: 0.5; }
    92%           { opacity: 0;   transform: translateX(30%); }
  }

  /* The today marker drifts, the way a live schedule creeps. No value changes:
     nothing here asserts a measurement. */
  .pe-motion-full .pe-hx-b__panel.is-inview .pe-ui__today {
    animation: pe-hx-today 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  @keyframes pe-hx-today {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(1.25rem); }
  }

  /* The anchor gear idles very slowly; the scroll driver still owns its rotation
     when the page moves, so this only affects the wrapper's opacity. */
  .pe-motion-full .pe-hx-b__gear.is-inview { animation: pe-hx-anchor 14s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  @keyframes pe-hx-anchor { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.22; } }

  /* Panel lift on scroll, where the browser supports scroll-driven animation.
     Progressive: without support the panel simply does not move. */
  @supports (animation-timeline: view()) {
    .pe-motion-full .pe-hx-b__panel {
      animation: pe-hx-lift linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
    }
    @keyframes pe-hx-lift { from { transform: translateY(14px); } to { transform: translateY(-10px); } }
  }

  /* ── Reduced and off: the finished state, instantly, at the same layout ── */
  .pe-motion-reduced .pe-hx-a [class*="pe-drivetrain"],
  .pe-motion-off     .pe-hx-a [class*="pe-drivetrain"],
  .pe-motion-reduced .pe-hx-a .pe-home-hero__corner,
  .pe-motion-off     .pe-hx-a .pe-home-hero__corner,
  .pe-motion-reduced .pe-hx-b__panel, .pe-motion-off .pe-hx-b__panel,
  .pe-motion-reduced .pe-hx-b__panel::after, .pe-motion-off .pe-hx-b__panel::after,
  .pe-motion-reduced .pe-hx-b__gear, .pe-motion-off .pe-hx-b__gear,
  .pe-motion-reduced .pe-hx-a .pe-drivetrain__wheel::after,
  .pe-motion-off     .pe-hx-a .pe-drivetrain__wheel::after {
    animation: none !important; transform: none !important; opacity: revert-layer;
  }
  .pe-motion-reduced .pe-hx-b__panel::after, .pe-motion-off .pe-hx-b__panel::after { opacity: 0; }

  /* pe.css stops the idle spin through the prefers-reduced-motion media query, so a real
     reduced-motion visitor never sees it. The ?motion=reduced review parameter only sets the
     class, so without this the preview would show the gears still turning and overstate the
     motion. Scoped to these option pages; pe.css is not changed. */
  .pe-motion-reduced .pe-hx-a .pe-gear--idle img,
  .pe-motion-off     .pe-hx-a .pe-gear--idle img { animation: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .pe-hx-a [class*="pe-drivetrain"], .pe-hx-a .pe-home-hero__corner,
    .pe-hx-a .pe-drivetrain__wheel::after, .pe-hx-a .pe-drivetrain__node::after,
    .pe-hx-b__panel, .pe-hx-b__panel::after, .pe-hx-b__gear, .pe-hx-b__panel .pe-ui__today {
      animation: none !important;
    }
    .pe-hx-b__panel { transform: none !important; }
    .pe-hx-b__panel::after { opacity: 0; }
  }
}