/* ==========================================================================
   Lozy — service page scroll motifs
   Loaded ONLY by FrontEndPanel/ServiceDetail.blade.php (same as solution-v2.css).

   One motion vocabulary, sixteen motifs. Each motif is a drawing
   (partials/scroll-motif.blade.php) plus one word from this file:

     fill   parts appear in sequence            stack  parts build up from the floor
     drop   parts settle in from above          flow   parts travel along a track
     scan   a beam sweeps and marks appear      wrap   a red wrap line draws across
     cycle  a ring / hand turns with progress   open   shutters roll up

   How it works: scroll-motifs.js writes --p (0..1) on .mt-band as the band crosses the
   viewport. Each part carries --i, and --t is that part's trigger point (--i / --n), so
   every part animates at its own moment and the drawing assembles as you scroll.
   No timelines, no library, no per-motif JavaScript.

   No-JS: the recipes are gated on `.js`, so the drawings render complete.
   No @property support: --p/--t stop being numbers, the recipes compute to nothing and
   the drawings again render complete. Reduced motion: everything resolves to the end
   state (see the bottom of this file).
   ========================================================================== */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.12;
}
@property --t {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ================================================================ the band */
.ws-page .mt-band {
  padding: var(--bw-band-sm) 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  position: relative;
}
.ws-page .mt-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.ws-page .mt-copy { max-width: 30em; }
.ws-page .mt-copy p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-grey);
  max-width: 32em;
}
.ws-page .mt-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  box-shadow: var(--shadow-sm);
  padding: clamp(14px, 2.2vw, 28px);
}
.ws-page .mt { display: block; width: 100%; height: auto; }
.ws-page .mt-note {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.ws-page .mt-hint { display: none; }
.js .ws-page .mt-hint { display: inline; }
.ws-page .mt-note::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--red);
  flex: 0 0 auto;
}

/* ============================================================== the parts */
/* --t: this part's trigger point. --k: how far it has come in (0..1).
   Both are plain numbers, so every recipe below is arithmetic.
   .mt-wrap carries --i too: the wrap recipe animates a stroke, not a part. */
.ws-page .mt-part,
.ws-page .mt-wrap { --t: calc(var(--i, 0) / var(--n, 8) * .74); }
.js .ws-page .mt-band .mt-part,
.js .ws-page .mt-band .mt-wrap { --k: clamp(0, (var(--p) - var(--t)) * 8, 1); }

/* a slow loop that keeps a motif feeling alive between scroll moves */
@keyframes mt-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.ws-page .mt-bolt { animation: mt-pulse 2.8s ease-in-out infinite; }

/* --- fill ---------------------------------------------------------------- */
.js .ws-page .mt-band[data-motif="fill"] .mt-part { opacity: var(--k); }
.js .ws-page .mt-band[data-motif="fill"] .mt-red {
  opacity: clamp(0, (var(--p) - var(--t) - .09) * 8, 1);
}

/* --- stack --------------------------------------------------------------- */
.js .ws-page .mt-band[data-motif="stack"] .mt-part {
  opacity: var(--k);
  transform: translateY(calc((1 - var(--k)) * 42px));
}

/* --- drop ---------------------------------------------------------------- */
.js .ws-page .mt-band[data-motif="drop"] .mt-part {
  opacity: var(--k);
  transform: translateY(calc((1 - var(--k)) * -58px));
}

/* --- flow ---------------------------------------------------------------- */
.js .ws-page .mt-band[data-motif="flow"] .mt-part {
  opacity: var(--k);
  transform: translateX(calc((1 - var(--k)) * -140px));
}

/* --- scan ---------------------------------------------------------------- */
.js .ws-page .mt-band[data-motif="scan"] .mt-part { opacity: var(--k); }
.js .ws-page .mt-band[data-motif="scan"] .mt-beam {
  transform: translateY(calc(var(--p) * 84px));
  animation: mt-pulse 1.9s ease-in-out infinite;
}

/* --- wrap ---------------------------------------------------------------- */
.js .ws-page .mt-band[data-motif="wrap"] .mt-wrap {
  stroke-dasharray: 230;
  stroke-dashoffset: calc((1 - var(--k)) * 230);
}

/* --- cycle --------------------------------------------------------------- */
.js .ws-page .mt-band[data-motif="cycle"] .mt-ring {
  transform-box: view-box;
  transform-origin: 200px 130px;
  transform: rotate(calc(var(--p) * 210deg));
}
.js .ws-page .mt-band[data-motif="cycle"] .mt-hand {
  transform-box: view-box;
  transform-origin: 200px 124px;
  transform: rotate(calc(var(--p) * 300deg));
}
.js .ws-page .mt-band[data-motif="cycle"] .mt-part { opacity: var(--k); }

/* --- open ---------------------------------------------------------------- */
/* default (no JS) is the rolled-up state, so the stored box is always visible;
   the script closes the shutter and rolls it up again as the band is scrolled */
.ws-page .mt-shutter {
  transform-box: fill-box;
  transform-origin: top center;
  transform: scaleY(0);
}
.js .ws-page .mt-band[data-motif="open"] .mt-shutter {
  transform: scaleY(calc(1 - var(--k)));
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1100px) {
  .ws-page .mt-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-page .mt-copy { max-width: none; }
  .ws-page .mt-panel { order: 2; }
}

/* ======================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .js .ws-page .mt-band .mt-part,
  .js .ws-page .mt-band .mt-red { opacity: 1 !important; transform: none !important; }
  .js .ws-page .mt-band .mt-wrap { opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .js .ws-page .mt-band .mt-shutter { transform: scaleY(0) !important; }
  .js .ws-page .mt-band .mt-beam,
  .js .ws-page .mt-band .mt-ring,
  .js .ws-page .mt-band .mt-hand { transform: none !important; animation: none !important; }
  .ws-page .mt-bolt { animation: none; }
}

/* ================================================== LIGHT RE-TINT (v2 brief)
   The service template shipped three dark surfaces — the stats band, the closing CTA
   and the sticky enquiry card. This page now has none of them: colour only, no layout
   change, and solution-v2.css is left exactly as it was (it is loaded only by this
   template, so nothing here can leak to another page). */
.ws-page .bw-stats,
.ws-page .bw-cta { background: var(--bg); color: var(--ink); }
.ws-page .bw-stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ws-page .bw-stat-label,
.ws-page .bw-cta-meta,
.ws-page .bw-stat-num small { color: var(--muted-strong); }
.ws-page .bw-stat-num,
.ws-page .bw-cta h2 { color: var(--ink); }
.ws-page .bw-stat-note,
.ws-page .bw-cta p { color: var(--body-grey); }
.ws-page .bw-stat { border-left-color: var(--line-2); }
/* the drifting rail texture was white-on-dark; on paper it reads as a faint tick row */
.ws-page .bw-cta::before { background: radial-gradient(760px 420px at 88% 0%, rgba(237,28,36,.10), transparent 62%); }
.ws-page .bw-cta::after {
  background-image: repeating-linear-gradient(90deg, #141414 0 2px, transparent 2px 92px);
  opacity: .05;
}
/* on a light band the primary button has to carry its own colour again */
.ws-page .bw-cta .btn-primary { background: var(--red); color: #fff; }
.ws-page .bw-cta .btn-primary:hover { background: var(--red-deep); color: #fff; box-shadow: var(--shadow-red); }

.ws-page .bw-aside-cta { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.ws-page .bw-aside-cta h3 { color: var(--ink); }
.ws-page .bw-aside-cta .aside-list { color: var(--body-grey); }
.ws-page .bw-aside-cta .aside-list li { border-bottom-color: var(--line); }
.ws-page .bw-aside-cta .aside-list li span:last-child { color: var(--ink); }