/* ═══════════════════════════════════════════════════════════════════════
 * MALON — motion layer (demo)
 *
 * Purely additive. Every rule is scoped under `html.mtn`, so removing that
 * one class on <html> returns the page to the original site, pixel for pixel.
 * The floating Before/After bar does exactly that.
 *
 * The centrepiece is the depth parallax: each photo is pre-split into three
 * cumulative layers (back / mid / fore) that travel at different speeds as
 * the section crosses the viewport. See scripts/motion.js.
 * ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Motion-layer easings — long, settled curves for marketing motion */
  --mtn-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mtn-ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);

  --mtn-dur-word: 900ms;
  --mtn-dur-rise: 850ms;
  --mtn-dur-wipe: 1150ms;
}

/* ─── 1. Depth parallax ──────────────────────────────────────────────
 * Three pre-cut depth planes stacked over the flat <img>, each sliding at its
 * own speed. The original <img> stays in the DOM so assistive tech keeps the
 * alt text and the Before/After toggle can bring it straight back.
 */

.mtn-plx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Hidden until all three planes have decoded. There is no reveal animation
     on purpose — at rest the stack is identical to the <img> it replaces, so
     the handover is invisible and the photograph is simply THERE when you
     arrive at it. A wipe on top of the parallax only got in its way. */
  opacity: 0;
}

html.mtn .mtn-host.is-ready .mtn-plx {
  opacity: 1;
}

/* Motion off → the stack steps aside and the original flat <img> shows
   through untouched. This is what makes the toggle a true A/B. */
html:not(.mtn) .mtn-plx {
  display: none;
}

/* Figures are position:static in the base stylesheet — give them a containing
   block for the absolutely positioned plane stack, and nothing else. The
   figure itself is never transformed, so it stays exactly where the layout
   put it. */
html.mtn .mtn-host {
  position: relative;
}

/* The flat original keeps carrying the picture until the planes are ready, so
   nothing ever pops in. */
html.mtn .mtn-host.is-ready > img {
  visibility: hidden;
}

.mtn-plx__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Oversized so the travel never exposes an edge. Kept in sync with SCALE
     in motion.js. */
  transform: scale(1.38);
  will-change: transform;
  backface-visibility: hidden;
}

/* ─── 2. Kinetic headings ────────────────────────────────────────────
 * Words rise out of a mask. The outer span clips; the inner one moves.
 */

html.mtn .mtn-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Room for descenders so the mask never clips a 'g' or 'y'. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

html.mtn .mtn-wi {
  display: inline-block;
  transform: translateY(115%);
  transition: transform var(--mtn-dur-word) var(--mtn-ease);
}

html.mtn .mtn-split.is-in .mtn-wi {
  transform: translateY(0);
}

/* ─── 3. Rise + defocus for copy blocks ──────────────────────────────
 * Deliberately quieter than the headings: these support, they don't perform.
 */

html.mtn .mtn-rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--mtn-dur-rise) var(--mtn-ease),
    transform var(--mtn-dur-rise) var(--mtn-ease);
}

html.mtn .mtn-rise.is-in {
  opacity: 1;
  transform: none;
}

/* Only the big display headings get the focus-pull — on body text it reads
   as a rendering bug rather than an effect. */
html.mtn .mtn-defocus {
  filter: blur(7px);
  transition: filter var(--mtn-dur-rise) var(--mtn-ease);
}

html.mtn .mtn-defocus.is-in {
  filter: blur(0);
}

/* ─── 4. Staggered groups ────────────────────────────────────────────
 * The delay itself is set inline by the script so the cadence can adapt to
 * how many items a group holds.
 */

html.mtn .mtn-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--mtn-ease), transform 700ms var(--mtn-ease);
}

html.mtn .mtn-item.is-in {
  opacity: 1;
  transform: none;
}

/* Concept glyphs scale in rather than slide — they're marks, not text. */
html.mtn .concept-list__item .concept-list__icon {
  transform: scale(0.55);
  opacity: 0;
  transition: transform 640ms var(--mtn-ease), opacity 480ms ease;
}

html.mtn .concept-list__item.is-in .concept-list__icon {
  transform: scale(1);
  opacity: 1;
}

/* ─── 5. Drawn rules ─────────────────────────────────────────────────
 * Any hairline the script tags gets drawn left-to-right on entry.
 */

html.mtn .mtn-rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1000ms var(--mtn-ease-wipe);
}

html.mtn .mtn-rule.is-in {
  transform: scaleX(1);
}

/* Process numbers get a counter rule of their own. */
html.mtn .process-step {
  position: relative;
}

html.mtn .process-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.18;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--mtn-ease-wipe);
}

html.mtn .process-step.is-in::after {
  transform: scaleX(1);
}

/* ─── 6. Scroll progress ─────────────────────────────────────────────  */

html.mtn .mtn-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--mustard, #d8a54a);
  z-index: 90;
  pointer-events: none;
}

/* ─── 7. Before / After control bar ──────────────────────────────────
 * Lives outside the html.mtn scope so it stays visible when motion is off.
 */

.mtn-bar {
  position: fixed;
  z-index: 9999;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 15px;
  border-radius: 999px;
  background: oklch(0.2 0 0 / 0.93);
  border: 1px solid oklch(1 0 0 / 0.16);
  box-shadow: 0 10px 34px oklch(0 0 0 / 0.36);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1;
  color: oklch(0.97 0 0);
}

.mtn-bar__readout {
  opacity: 0.72;
  letter-spacing: 0.02em;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 96px;
  text-align: right;
}

.mtn-bar button {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 140ms var(--mtn-ease), background 180ms ease,
    color 180ms ease;
}

.mtn-bar button:active {
  transform: scale(0.96);
}

.mtn-bar__toggle {
  background: var(--mustard, #d8a54a);
  color: oklch(0.2 0 0);
  min-width: 108px;
}

.mtn-bar__toggle[data-on="0"] {
  background: transparent;
  color: oklch(0.97 0 0);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.3);
}

.mtn-bar__replay {
  background: transparent;
  color: oklch(0.97 0 0);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.3);
}

.mtn-bar__replay:hover {
  background: oklch(1 0 0 / 0.1);
}

@media (max-width: 640px) {
  .mtn-bar__readout {
    display: none;
  }
  .mtn-bar {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 6px;
  }
  .mtn-bar button {
    padding: 8px 12px;
    font-size: 12px;
  }
  .mtn-bar__toggle {
    min-width: 92px;
  }
}

/* ─── 8. Reduced motion ──────────────────────────────────────────────
 * The script refuses to start at all, but belt and braces: if the class
 * somehow lands, nothing moves.
 */

@media (prefers-reduced-motion: reduce) {
  html.mtn .mtn-wi,
  html.mtn .mtn-rise,
  html.mtn .mtn-item,
  html.mtn .mtn-rule,
  html.mtn .concept-list__item .concept-list__icon {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.mtn .mtn-defocus {
    filter: none !important;
  }
  .mtn-plx {
    display: none !important;
  }
  .mtn-plx__layer {
    transform: scale(1.38) !important;
  }
  html.mtn .process-step::after {
    transform: scaleX(1) !important;
  }
}