/* ============================================================
   INTEGRATION — mobile-native animated pipeline (<=880px)
   Vertical flow: ERP -> FRAME -> Rails -> Ledger, with a
   travelling payment packet. Assembles on scroll-into-view.
   CSS transitions + IntersectionObserver, no pin/scrub/GSAP.
   Visible if JS/IO unavailable. Mirrors the 2.0 stack pattern.
   ============================================================ */

.pipe__mobile { display: none; }

@media (max-width: 880px) {
  .pipe__mobile {
    display: grid; gap: clamp(16px, 4vw, 24px);
    padding: clamp(76px, 16vw, 120px) var(--gutter) clamp(40px, 9vw, 64px);
  }
}

.pmk__lead { max-width: 52ch; }

.pmk { position: relative; display: grid; gap: 10px; margin-top: 6px; }

/* ---- nodes ---- */
.pmk__node {
  position: relative; border-radius: 16px; padding: 18px 18px;
  border: 1px solid rgba(99,157,205,.18); overflow: hidden;
  background: linear-gradient(160deg, rgba(28,62,93,.4), rgba(11,17,24,.9));
}
.pmk__node::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,176,220,.5), transparent);
}
.pmk__node--frame {
  display: grid; place-items: center; gap: 8px; text-align: center; padding: 24px 18px;
  background: linear-gradient(160deg, rgba(38,112,172,.5), rgba(10,51,88,.96));
  border-color: rgba(120,176,220,.5);
  box-shadow: 0 0 0 1px rgba(99,157,205,.22), 0 18px 50px rgba(15,76,129,.38);
}
.pmk__node--done { border-color: rgba(46,124,108,.42); }

.pmk__row { display: flex; align-items: center; gap: 13px; }
.pmk__ico {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--frame-deepwater); color: #fff;
  font-variation-settings: 'FILL' 1, 'wght' 600;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.pmk__node--done .pmk__ico { background: var(--frame-patina, #2E7C6C); }
.pmk__n { font-family: var(--font-condensed); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--frame-conduit); }
.pmk__name {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: -.01em; color: #fff; line-height: 1.04; font-size: clamp(1.1rem, 4.8vw, 1.32rem); margin-top: 3px;
}
.pmk__desc { font-family: var(--font-body); font-size: .92rem; line-height: 1.5; color: var(--frame-galvanized); margin: 11px 0 0; }

/* frame node mark + ops */
.pmk__mark { width: clamp(104px, 30vw, 132px); display: block; }
.pmk__mark svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 16px rgba(99,157,205,.7)); }
.pmk__mark svg path { fill: #fff; }
.pmk__ops { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 4px; }
.pmk__ops span {
  font-family: var(--font-condensed); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--frame-clearspan);
  padding: 5px 11px; background: rgba(7,10,13,.32); box-shadow: inset 0 0 0 1px rgba(99,157,205,.3);
}

/* chips */
.pmk__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.pmk__chip {
  font-family: var(--font-condensed); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; color: var(--frame-clearspan); padding: 6px 11px;
  background: linear-gradient(155deg, rgba(28,62,93,.6), rgba(13,17,22,.9));
  box-shadow: inset 0 0 0 1px rgba(99,157,205,.28);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}

/* reconciled stamp */
.pmk__stamp {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
  font-family: var(--font-condensed); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  padding: 6px 11px; background: var(--frame-patina, #2E7C6C);
}
.pmk__stamp .material-symbols-sharp { font-size: 15px; font-variation-settings: 'FILL' 1, 'wght' 700; }

/* connector beams */
.pmk__beam { height: 22px; display: grid; place-items: center; }
.pmk__beam i {
  display: block; width: 2px; height: 100%; transform-origin: top;
  background: linear-gradient(180deg, rgba(99,157,205,.08), rgba(99,157,205,.85), rgba(99,157,205,.08));
}

/* travelling payment packet */
.pmk__packet {
  position: absolute; left: 50%; top: 10%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, #d7e8f7, var(--frame-conduit) 60%, var(--frame-deepwater) 72%);
  box-shadow: 0 0 18px rgba(99,157,205,.9); opacity: 0; pointer-events: none; z-index: 6;
}
.pmk__packet .material-symbols-sharp { font-size: 16px; color: #07121d; font-variation-settings: 'FILL' 1, 'wght' 700; }

/* ============================================================
   entrance — armed (JS sets initial), in (JS plays on scroll)
   ============================================================ */
.pmk--armed .pmk__node { opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard); }
.pmk--armed .pmk__beam i { transform: scaleY(0); transition: transform .55s var(--ease-standard); }
.pmk--armed .pmk__mark path { opacity: 0; transform: translateY(-7px);
  transition: opacity .5s var(--ease-standard), transform .5s var(--ease-standard); }
.pmk--armed .pmk__chip,
.pmk--armed .pmk__ops span { opacity: 0; transform: translateY(9px) scale(.93);
  transition: opacity .45s var(--ease-standard), transform .45s var(--ease-standard); }

.pmk--in .pmk__node { opacity: 1; transform: none; }
.pmk--in .pmk__node[data-pmk="0"] { transition-delay: .05s; }
.pmk--in .pmk__node[data-pmk="1"] { transition-delay: .26s; }
.pmk--in .pmk__node[data-pmk="2"] { transition-delay: .42s; }
.pmk--in .pmk__node[data-pmk="3"] { transition-delay: .58s; }
.pmk--in .pmk__beam i { transform: scaleY(1); }
.pmk--in .pmk__beam[data-pmk-beam="0"] i { transition-delay: .42s; }
.pmk--in .pmk__beam[data-pmk-beam="1"] i { transition-delay: .54s; }
.pmk--in .pmk__beam[data-pmk-beam="2"] i { transition-delay: .66s; }
.pmk--in .pmk__mark path { opacity: 1; transform: none; }
.pmk--in .pmk__mark .l3 { transition-delay: .34s; }
.pmk--in .pmk__mark .l2 { transition-delay: .42s; }
.pmk--in .pmk__mark .l1 { transition-delay: .50s; }
.pmk--in .pmk__mark .l0 { transition-delay: .58s; }
.pmk--in .pmk__chip, .pmk--in .pmk__ops span { opacity: 1; transform: none; }
.pmk--in .pmk__chip:nth-child(1) { transition-delay: .5s; }
.pmk--in .pmk__chip:nth-child(2) { transition-delay: .56s; }
.pmk--in .pmk__chip:nth-child(3) { transition-delay: .62s; }
.pmk--in .pmk__chip:nth-child(4) { transition-delay: .68s; }

/* heartbeat: payment flows down the pipeline; frame node breathes */
.pmk--in .pmk__packet { animation: pmkFlow 3.8s ease-in-out 1.3s infinite; }
.pmk--in .pmk__node--frame { animation: pmkBreathe 4.2s ease-in-out 1.5s infinite; }

@keyframes pmkFlow {
  0%   { top: 10%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}
@keyframes pmkBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(99,157,205,.22), 0 18px 50px rgba(15,76,129,.38); }
  50%      { box-shadow: 0 0 0 1px rgba(99,157,205,.45), 0 22px 64px rgba(15,76,129,.6); }
}

@media (prefers-reduced-motion: reduce) {
  .pmk--armed .pmk__node,
  .pmk--armed .pmk__beam i,
  .pmk--armed .pmk__mark path,
  .pmk--armed .pmk__chip,
  .pmk--armed .pmk__ops span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pmk--in .pmk__packet,
  .pmk--in .pmk__node--frame { animation: none !important; }
}