/* ============================================================ */
/* Engine Room Conveyor — produx-style specimen tiles            */
/* Large tilted portrait cards drifting on a clean full-bleed    */
/* band; scroll velocity flings the strip (js/engine-rail.js).   */
/* Theme-aware (uses --accent / --base-tint / --t-* tokens)      */
/* ============================================================ */

/* The full-bleed rail below is 100vw wide, which is half a scrollbar
   wider than the page on classic-scrollbar browsers — clip the section's
   horizontal axis (same fix as .rw) so the document never gains a
   horizontal scrollbar. clip, not hidden, keeps this a non-scroll box;
   the hidden line is only a fallback for engines without clip. */
.mxd-engine-section {
  overflow-x: hidden;
  overflow-x: clip;
}

.mxd-engine {
  position: relative;
}

/* ---- compact header row ---- */
.mxd-engine__head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 1.2rem 2.4rem;
  margin-bottom: 3.2rem;
}

.mxd-engine__eyebrow {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 1.1rem 0.4rem 0.9rem;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 100px;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-bright);
  background-color: rgba(var(--accent-rgb), 0.06);
  -ms-flex-item-align: center;
  align-self: center;
  white-space: nowrap;
}

.mxd-engine__eyebrow::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: var(--accent);
  -webkit-box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  -webkit-animation: eng-ping 2.4s ease-out infinite;
  animation: eng-ping 2.4s ease-out infinite;
}

@-webkit-keyframes eng-ping {
  0%        { -webkit-box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70%, 100% { -webkit-box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
}
@keyframes eng-ping {
  0%        { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
}

.mxd-engine__title {
  margin: 0;
  font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem);
  line-height: 1.1;
  color: var(--t-bright);
}

.mxd-engine__sub {
  margin: 0 0 0 auto;
  max-width: 34rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--t-muted);
}

/* ---- full-bleed rail ---- */
.mxd-engine__rail {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* tilted cards swing above/below the row — budget headroom so
     nothing clips against the overflow box */
  padding: 3.4rem 0 4rem;
  overflow: hidden;
}

/* edge fades (cheap gradient overlays, not masks — see rw perf gate) */
.mxd-engine__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10rem;
  z-index: 2;
  pointer-events: none;
}
.mxd-engine__fade--left {
  left: 0;
  background: linear-gradient(90deg, rgba(var(--base-rgb), 1), rgba(var(--base-rgb), 0));
}
.mxd-engine__fade--right {
  right: 0;
  background: linear-gradient(270deg, rgba(var(--base-rgb), 1), rgba(var(--base-rgb), 0));
}

/* the moving strip */
.mxd-engine__track {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 2.4rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding-left: 2.4rem;
  will-change: transform;
}

/* reduced-motion / no-JS fallback: a hand-scrollable static strip */
.mxd-engine__rail.is-static {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mxd-engine__rail.is-static .mxd-engine__fade { display: none; }

/* ---------------------------------------------------------- */
/* Cards — "specimen plate" tiles, produx-style                */
/* A slide-mount composition: inset screen panel with a fine   */
/* blueprint grid + accent glow, the animated viz scaled up as */
/* the hero mark, an oversized frame numeral, and a centred    */
/* caption strip. Each card carries its own static rotate/     */
/* offset (JS only ever transforms the track).                 */
/* ---------------------------------------------------------- */
.eng-card {
  position: relative;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  width: 29rem;
  padding: 1.2rem 1.2rem 0;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: var(--_radius-m);
  background-color: var(--base-tint);
  /* sheen lifts the surface off the near-identical page bg in dark mode;
     invisible on the light theme's white cards */
  background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 58%);
  overflow: hidden;
  -webkit-box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 44px -22px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 44px -22px rgba(0, 0, 0, 0.6);
  /* no transform transition — the tilt is smoothed frame-by-frame in JS */
  -webkit-transition: border-color 0.45s var(--_animbezier), box-shadow 0.45s var(--_animbezier);
  transition: border-color 0.45s var(--_animbezier), box-shadow 0.45s var(--_animbezier);
}

/* cards sit level at rest; while you scroll, JS drives --eng-tilt on
   the track (degrees, signed with the scroll direction) and every card
   leans into the motion, easing back upright when the page settles.
   JS still only ever writes the track — the cards read the variable. */
.mxd-engine__track .eng-card {
  -webkit-transform: rotate(var(--eng-tilt, 0deg));
  transform: rotate(var(--eng-tilt, 0deg));
  will-change: transform;
}

.no-touch .mxd-engine__track .eng-card:hover {
  border-color: rgba(var(--accent-rgb), 0.38);
  -webkit-box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 20px 44px -16px rgba(0, 0, 0, 0.45),
    0 30px 60px -28px rgba(var(--accent-rgb), 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 20px 44px -16px rgba(0, 0, 0, 0.45),
    0 30px 60px -28px rgba(var(--accent-rgb), 0.3);
}

/* oversized frame numeral sitting in the screen's corner */
.eng-card__ghost {
  position: absolute;
  top: 2.2rem;
  right: 2.4rem;
  z-index: 1;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--accent-rgb), 0.32);
  pointer-events: none;
  -webkit-transition: color 0.45s var(--_animbezier);
  transition: color 0.45s var(--_animbezier);
}

.no-touch .eng-card:hover .eng-card__ghost {
  color: rgba(var(--accent-rgb), 0.6);
}

/* the screen — an inset panel with a fine blueprint grid and a soft
   accent glow; the animated viz (authored at icon scale in
   tech-stack.css) is blown up as the hero mark */
.eng-card__viz {
  position: relative;
  width: 100%;
  height: 18rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: calc(var(--_radius-m) - 0.8rem);
  background-color: rgba(var(--base-rgb), 0.5);
  background-image:
    radial-gradient(120% 90% at 50% 42%, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-rgb), 0) 62%),
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.045) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(var(--accent-rgb), 0.045) 0 1px, transparent 1px 24px);
  overflow: hidden;
  color: var(--accent);
  -webkit-transition: border-color 0.45s var(--_animbezier);
  transition: border-color 0.45s var(--_animbezier);
}

/* second hairline frame just inside the screen — the slide-mount detail */
.eng-card__viz::before {
  content: "";
  position: absolute;
  inset: 0.7rem;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: calc(var(--_radius-m) - 1.4rem);
  pointer-events: none;
}

.eng-card__viz > * {
  -webkit-transform: scale(2);
  transform: scale(2);
}

.no-touch .eng-card:hover .eng-card__viz {
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* speed the icons up on hover, like the old stack did */
.no-touch .eng-card:hover .eng-card__viz * {
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
}

/* caption strip */
.eng-card__text {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  text-align: center;
  padding: 1.8rem 1rem 2.2rem;
}

/* uniform type metrics so every card's interior lines up exactly:
   one-line title, description always reserving two lines */
.eng-card__title {
  margin: 0 0 0.6rem;
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--t-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eng-card__desc {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.45;
  min-height: 2.9em;
  color: var(--t-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================ */
/* Phones (<=767px): compact static service grid                 */
/* The drifting conveyor is unusable on a phone — it never       */
/* settles, hijacks vertical scroll, and runs many screens tall. */
/* Below 767px we hide the rail and show a still 2-col grid of    */
/* small specimen tiles instead. Hiding the rail (display:none)   */
/* also parks the JS: its IntersectionObserver reports the rail   */
/* out of view, so the rAF loop never starts (no JS change).      */
/* ============================================================ */
.eng-grid {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .mxd-engine__rail { display: none; }

  .eng-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.4rem;
  }

  .eng-tile {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.5rem 1.3rem 1.6rem;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: var(--_radius-m);
    background-color: var(--base-tint);
    /* same sheen the big cards use to lift off the near-identical dark bg */
    background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
    overflow: hidden;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  /* small frame numeral, echoing the desktop cards' "frame 0X" language */
  .eng-tile__num {
    position: absolute;
    top: 1.2rem;
    right: 1.3rem;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--accent-rgb), 0.34);
    pointer-events: none;
  }

  /* icon chip — a shrunk version of the card's screen panel; the viz
     glyphs are authored ~3.6–4rem in tech-stack.css, so no scaling here */
  .eng-tile__icon {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    border-radius: 1.1rem;
    background-color: rgba(var(--base-rgb), 0.5);
    background-image:
      radial-gradient(120% 90% at 50% 42%, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0) 62%),
      repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 0 1px, transparent 1px 16px),
      repeating-linear-gradient(0deg, rgba(var(--accent-rgb), 0.05) 0 1px, transparent 1px 16px);
    color: var(--accent);
    overflow: hidden;
  }

  .eng-tile__icon > * {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  .eng-tile__title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--t-bright);
  }

  .eng-tile__desc {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--t-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* very narrow phones: give each tile the full width so nothing crowds */
@media (max-width: 359px) {
  .eng-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- */
/* Touch / small-screen perf gate (rw-mobile standard)         */
/* ---------------------------------------------------------- */
@media (pointer: coarse), (max-width: 767px) {
  .mxd-engine__head { margin-bottom: 2rem; }
  .mxd-engine__sub { margin-left: 0; }
  .mxd-engine__rail { padding: 2rem 0 2.6rem; }
  .mxd-engine__fade { width: 3.6rem; }
  .mxd-engine__track { gap: 1.6rem; padding-left: 1.6rem; }
  .eng-card {
    width: 21rem;
    padding: 1rem 1rem 0;
  }
  .eng-card__viz { height: 13rem; }
  .eng-card__viz > * {
    -webkit-transform: scale(1.45);
    transform: scale(1.45);
  }
  .eng-card__text { padding: 1.4rem 0.6rem 1.8rem; }
  .eng-card__title { font-size: 1.6rem; }
  .eng-card__ghost { top: 1.8rem; right: 1.9rem; font-size: 2.4rem; }
  /* rw perf gate: no velocity tilt on touch — cards stay level and the
     strip keeps its drift + scroll fling; drop the per-card layers too */
  .mxd-engine__track .eng-card {
    -webkit-transform: none;
    transform: none;
    will-change: auto;
  }
}

/* ---------------------------------------------------------- */
/* Reduced motion                                              */
/* ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mxd-engine__eyebrow::before,
  .eng-card__viz *,
  .eng-tile__icon * {
    -webkit-animation: none !important;
    animation: none !important;
  }
  /* level the strip so the hand-scrollable fallback reads tidy */
  .mxd-engine__track .eng-card {
    -webkit-transform: none !important;
    transform: none !important;
  }
  .eng-card__viz .viz-lang span:first-child,
  .eng-tile__icon .viz-lang span:first-child { opacity: 1; }
}