/* m1 Effects — dependency-free motion primitives
   Public contract: data-m1-effect + CSS custom properties. */

/* Reveal --------------------------------------------------------------- */

[data-m1-effect~="reveal"] {
  --m1-reveal-distance: 34px;
  --m1-reveal-duration: 900ms;
  --m1-reveal-opacity-duration: 650ms;
  --m1-reveal-delay: 0ms;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--m1-reveal-opacity-duration) cubic-bezier(.22, 1, .36, 1) var(--m1-reveal-delay),
    transform var(--m1-reveal-duration) cubic-bezier(.22, 1, .36, 1) var(--m1-reveal-delay);
  will-change: opacity, transform;
}

/* Choice router ------------------------------------------------------- */

[data-m1-effect~="choice-router"] [data-m1-choice] {
  --m1-choice-transition-duration: 180ms;
  transition:
    background-color var(--m1-choice-transition-duration) ease,
    color var(--m1-choice-transition-duration) ease;
}

[data-m1-effect~="choice-router"] [data-m1-choice-response][hidden],
[data-m1-effect~="choice-router"] [data-m1-choice-action][hidden] {
  display: none;
}

[data-m1-effect~="reveal"].m1-is-initialized:not(.m1-is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--m1-reveal-distance), 0);
}

[data-m1-effect~="reveal"].m1-is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Attention patch reveal ------------------------------------------------ */

[data-m1-effect~="patch-reveal"] {
  --m1-patch-reveal-duration: 900ms;
  --m1-patch-reveal-delay: 0ms;
  --m1-patch-reveal-radius: 24px;
  --m1-patch-reveal-offset-x: 0%;
}

[data-m1-effect~="patch-reveal"][data-m1-patch-profile="centered"] {
  --m1-patch-reveal-offset-x: -50%;
}

[data-m1-effect~="patch-reveal"].m1-is-initialized::before {
  transition:
    clip-path var(--m1-patch-reveal-duration) cubic-bezier(.22, 1, .36, 1) var(--m1-patch-reveal-delay),
    opacity 420ms ease-out var(--m1-patch-reveal-delay),
    transform var(--m1-patch-reveal-duration) cubic-bezier(.22, 1, .36, 1) var(--m1-patch-reveal-delay);
  will-change: clip-path, opacity, transform;
}

[data-m1-effect~="patch-reveal"].m1-is-initialized:not(.m1-is-visible)::before {
  clip-path: inset(16% 7% round var(--m1-patch-reveal-radius));
  opacity: .46;
  transform: translate3d(var(--m1-patch-reveal-offset-x), 42px, 0) scale(.965);
}

[data-m1-effect~="patch-reveal"].m1-is-visible::before {
  clip-path: inset(0 round var(--m1-patch-reveal-radius));
  opacity: 1;
  transform: translate3d(var(--m1-patch-reveal-offset-x), 0, 0) scale(1);
  will-change: auto;
}

/* Register ------------------------------------------------------------- */

[data-m1-effect~="register"],
[data-m1-effect~="edge-pulse"] {
  --m1-register-grow: 30px;
  --m1-register-reach: 0px;
  --m1-register-radius: 0px;
  --m1-register-duration: 760ms;
  box-sizing: border-box;
  width: calc(100% + var(--m1-register-grow) + var(--m1-register-reach));
  margin-left: calc(var(--m1-register-grow) * -1);
  border-radius: var(--m1-register-radius) 0 0 var(--m1-register-radius);
  clip-path: inset(0 0 0 var(--m1-register-grow) round var(--m1-register-radius) 0 0 var(--m1-register-radius));
  will-change: clip-path;
}

[data-m1-register-profile="choice"] [data-m1-effect~="edge-pulse"] {
  --m1-register-grow: var(--m1-choice-row-grow);
  --m1-register-reach: var(--m1-choice-row-reach);
  --m1-register-radius: 16px;
  --m1-register-duration: 760ms;
}

[data-m1-effect~="register"]:is(:hover, :focus-visible),
[data-m1-effect~="edge-pulse"]:is(:hover, :focus-visible) {
  animation: m1-register-reach var(--m1-register-duration) cubic-bezier(.16, 1, .3, 1);
}

[data-m1-effect~="register"].m1-is-pulsing,
[data-m1-effect~="edge-pulse"].m1-is-pulsing {
  animation: m1-register-click var(--m1-register-duration) cubic-bezier(.16, 1, .3, 1);
}

@keyframes m1-register-reach {
  0%, 100% {
    clip-path: inset(0 0 0 var(--m1-register-grow) round var(--m1-register-radius) 0 0 var(--m1-register-radius));
  }
  46% {
    clip-path: inset(0 0 0 0 round var(--m1-register-radius) 0 0 var(--m1-register-radius));
  }
}

@keyframes m1-register-click {
  0%, 100% {
    clip-path: inset(0 0 0 var(--m1-register-grow) round var(--m1-register-radius) 0 0 var(--m1-register-radius));
  }
  46% {
    clip-path: inset(0 0 0 0 round var(--m1-register-radius) 0 0 var(--m1-register-radius));
  }
}

/* Panel mode keeps a card's layout fixed and lets only its register edge travel. */
[data-m1-effect~="register"][data-m1-register="panel"] {
  position: relative;
  isolation: isolate;
  width: auto;
  margin-left: auto;
  overflow: visible;
  clip-path: none;
  animation: none;
  will-change: auto;
}

[data-m1-effect~="register"][data-m1-register="panel"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: var(--m1-register-grow);
  border-radius: var(--m1-register-radius) 0 0 var(--m1-register-radius);
  background: inherit;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

[data-m1-effect~="register"][data-m1-register="panel"]:is(:hover, :focus-visible)::before {
  animation: m1-register-panel-reach var(--m1-register-duration) cubic-bezier(.16, 1, .3, 1);
}

[data-m1-effect~="register"][data-m1-register="panel"].m1-is-pulsing::before {
  animation: m1-register-panel-click var(--m1-register-duration) cubic-bezier(.16, 1, .3, 1);
}

@keyframes m1-register-panel-reach {
  0%, 100% { transform: translate3d(0, 0, 0); }
  46% { transform: translate3d(calc(var(--m1-register-grow) * -1), 0, 0); }
}

@keyframes m1-register-panel-click {
  0%, 100% { transform: translate3d(0, 0, 0); }
  46% { transform: translate3d(calc(var(--m1-register-grow) * -1), 0, 0); }
}

/* Page stack ----------------------------------------------------------- */

[data-m1-page-root] {
  --m1-stack-travel: 760px;
  position: relative;
  min-height: calc(100svh + var(--m1-stack-travel));
}

[data-m1-page-root][data-m1-stack-background] {
  --m1-stack-backdrop-height: 620px;
  --m1-stack-backdrop-color: var(--m1-color-surface);
  --m1-stack-backdrop-radius: 24px;
  --m1-stack-bg-cut: 0px;
  isolation: isolate;
  background: transparent;
}

[data-m1-page-root][data-m1-stack-background]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: var(--m1-stack-backdrop-height);
  border-radius: inherit;
  background: var(--m1-stack-backdrop-color);
  clip-path: inset(0 0 var(--m1-stack-bg-cut) 0 round var(--m1-stack-backdrop-radius));
  pointer-events: none;
  will-change: clip-path;
}

[data-m1-page-root][data-m1-stack-background] > * {
  position: relative;
  z-index: 1;
}

[data-m1-effect~="page-stack"] {
  --m1-stack-top: 126px;
  --m1-stack-height: 540px;
  --m1-page-radius: 24px;
  --m1-folio-back: var(--m1-color-band-strong);
  --m1-folio-sheet-two: var(--m1-color-band);
  --m1-folio-sheet-three: var(--m1-color-paper-muted);
  --m1-folio-edge: rgb(var(--m1-rgb-slate) / .16);
  --m1-folio-spine: rgb(var(--m1-rgb-slate) / .24);
  --m1-folio-y: 20px;
  --m1-folio-tilt: -6deg;
  --m1-folio-shadow-alpha: .2;
  --m1-folio-depth: 240px;
  --m1-page-shadow-color: rgb(var(--m1-rgb-shade) / .18);
  --m1-page-edge-highlight: rgb(var(--m1-rgb-highlight) / .9);
  --m1-page-layer-one: rgb(var(--m1-rgb-highlight) / .82);
  --m1-page-layer-two: rgb(var(--m1-rgb-highlight) / .92);
  position: sticky;
  top: var(--m1-stack-top);
  height: var(--m1-stack-height);
  isolation: isolate;
  perspective: 720px;
  perspective-origin: 50% 16%;
  transform-style: preserve-3d;
}

[data-m1-effect~="page-stack"]::before {
  content: "";
  position: absolute;
  top: -16px;
  right: -16px;
  left: -16px;
  z-index: 0;
  height: calc(var(--m1-page-height, 300px) + var(--m1-folio-depth));
  border: 1px solid var(--m1-folio-edge);
  border-left: 3px solid var(--m1-folio-spine);
  border-radius: calc(var(--m1-page-radius) + 5px);
  background:
    linear-gradient(105deg, rgb(var(--m1-rgb-highlight) / .2), transparent 24%),
    var(--m1-folio-back);
  box-shadow:
    0 6px 0 -1px var(--m1-folio-sheet-two),
    0 12px 0 -2px var(--m1-folio-sheet-three),
    0 32px 72px -34px rgb(var(--m1-rgb-shade) / var(--m1-folio-shadow-alpha));
  pointer-events: none;
  transform: translate3d(0, var(--m1-folio-y), -108px) rotateX(var(--m1-folio-tilt));
  transform-origin: 50% 0;
  backface-visibility: hidden;
}

[data-m1-effect~="page-stack"]::after {
  content: "";
  position: absolute;
  top: -42px;
  left: 24px;
  z-index: 0;
  width: min(42%, 220px);
  height: 48px;
  border: 1px solid var(--m1-folio-edge);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--m1-folio-back);
  box-shadow: inset 0 1px 0 rgb(var(--m1-rgb-highlight) / .2);
  pointer-events: none;
  transform: translate3d(0, var(--m1-folio-y), -106px) rotateX(var(--m1-folio-tilt));
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}

[data-m1-effect~="page-stack"] > [data-m1-page] {
  --m1-page-y: 0px;
  --m1-page-z: 2px;
  --m1-page-scale: 1;
  --m1-page-rotate: 0deg;
  --m1-page-tilt-x: 0deg;
  --m1-page-tilt-y: 0deg;
  --m1-page-shadow-y: 18px;
  --m1-page-shadow-blur: 36px;
  --m1-page-shade: 0;
  --m1-page-focus-y: 0px;
  --m1-page-focus-z: 0px;
  --m1-page-focus-scale: 1;
  position: absolute;
  inset: 0 0 auto;
  min-height: var(--m1-page-min-height, 300px);
  height: var(--m1-page-height, auto);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--m1-folio-edge);
  border-radius: var(--m1-page-radius);
  transform-origin: 50% 0%;
  transform:
    translate3d(
      0,
      calc(var(--m1-page-y) + var(--m1-page-focus-y)),
      calc(var(--m1-page-z) + var(--m1-page-focus-z))
    )
    rotateX(var(--m1-page-tilt-x))
    rotateY(var(--m1-page-tilt-y))
    rotateZ(var(--m1-page-rotate))
    scale(var(--m1-page-scale))
    scale(var(--m1-page-focus-scale));
  box-shadow:
    inset 0 1px 0 var(--m1-page-edge-highlight),
    0 -5px 0 -2px var(--m1-page-layer-one),
    0 -10px 0 -4px var(--m1-page-layer-two),
    0 2px 4px rgb(var(--m1-rgb-shade) / .08),
    0 var(--m1-page-shadow-y) var(--m1-page-shadow-blur) -18px var(--m1-page-shadow-color);
  backface-visibility: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}

[data-m1-effect~="page-stack"] > [data-m1-page]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--m1-color-teal-fill) 72%, transparent);
  outline-offset: 4px;
}

[data-m1-effect~="page-stack"] > [data-m1-page].m1-is-active,
[data-m1-effect~="page-stack"] > [data-m1-page].m1-is-settling {
  z-index: 40 !important;
  transition:
    transform 480ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 480ms cubic-bezier(.16, 1, .3, 1);
}

[data-m1-effect~="page-stack"] > [data-m1-page].m1-is-active {
  --m1-page-focus-y: -20px;
  --m1-page-focus-z: 92px;
  --m1-page-focus-scale: 1.018;
  transform:
    translate3d(
      0,
      calc(var(--m1-page-y) + var(--m1-page-focus-y)),
      calc(var(--m1-page-z) + var(--m1-page-focus-z))
    )
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    scale(var(--m1-page-focus-scale));
  box-shadow:
    inset 0 1px 0 var(--m1-page-edge-highlight),
    0 -6px 0 -2px var(--m1-page-layer-one),
    0 -12px 0 -4px var(--m1-page-layer-two),
    0 3px 7px rgb(var(--m1-rgb-shade) / .12),
    0 38px 76px -22px var(--m1-page-shadow-color);
}

@media (max-width: 760px) {
  [data-m1-effect~="page-stack"] {
    --m1-folio-depth: 164px;
  }

  [data-m1-effect~="page-stack"]::before {
    right: -8px;
    left: -8px;
  }

  [data-m1-effect~="page-stack"]::after {
    top: -34px;
    left: 18px;
    height: 40px;
  }
}

[data-m1-effect~="page-stack"] > [data-m1-page]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--m1-rgb-slate) / var(--m1-page-shade)), transparent 34%);
}

[data-m1-effect~="page-stack"] > [data-m1-page]:nth-child(1) {
  background: var(--m1-page-one, var(--m1-color-surface));
  z-index: 1;
}

[data-m1-effect~="page-stack"] > [data-m1-page]:nth-child(2) {
  background: var(--m1-page-two, var(--m1-color-canvas));
  z-index: 2;
}

[data-m1-effect~="page-stack"] > [data-m1-page]:nth-child(3) {
  background: var(--m1-page-three, var(--m1-color-hover-soft));
  z-index: 3;
}

[data-m1-effect~="page-stack"] > [data-m1-page]:nth-child(n + 4) {
  background: var(--m1-page-more, var(--m1-color-band-strong));
  z-index: 4;
}

/* Dossier journey ----------------------------------------------------- */

[data-m1-dossier-journey] [data-m1-journey-chapter]::before {
  transform: translate3d(0, 0, 0) scaleY(var(--m1-chapter-scale-y, 1));
  transform-origin: 50% 0;
  will-change: transform;
}

[data-m1-page-mode="journey"] {
  perspective: none;
  transform-style: flat;
}

[data-m1-page-mode="journey"] > [data-m1-page] {
  touch-action: pan-y;
  transform-style: flat;
  will-change: transform;
}

[data-m1-page-mode="journey"] > [data-m1-page].m1-is-active {
  --m1-page-focus-y: -14px;
  --m1-page-focus-z: 76px;
  --m1-page-focus-scale: 1.01;
}

/* Media switch --------------------------------------------------------- */

[data-m1-media-trigger] {
  cursor: pointer;
}

[data-m1-effect~="media-switch"] [data-m1-media-trigger] {
  --m1-media-trigger-duration: 260ms;
  transition:
    color var(--m1-media-trigger-duration) ease,
    background-color var(--m1-media-trigger-duration) ease,
    padding-left 480ms cubic-bezier(.16, 1, .3, 1),
    transform 280ms cubic-bezier(.2, .72, .2, 1);
}

[data-m1-effect~="media-switch"] [data-m1-media-trigger]::before {
  transition:
    inset 360ms cubic-bezier(.22, 1, .36, 1),
    background-color 320ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 320ms cubic-bezier(.22, 1, .36, 1);
}

[data-m1-media-stage] {
  isolation: isolate;
}

[data-m1-media-panel] {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(1.025);
  transition:
    opacity 420ms cubic-bezier(.22, 1, .36, 1),
    transform 900ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  will-change: opacity, transform;
}

[data-m1-media-stage] > [data-m1-media-panel]:first-child {
  opacity: 1;
  transform: scale(1);
}

[data-m1-effect~="media-switch"].m1-is-initialized [data-m1-media-panel] {
  opacity: 0;
  transform: scale(1.025);
}

[data-m1-effect~="media-switch"].m1-is-initialized [data-m1-media-panel].m1-is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
  /* Inactive panels stay click-through (and inert); the visible panel must accept its links. */
  pointer-events: auto;
}

[data-m1-media-trigger].m1-is-active {
  color: var(--m1-color-ink);
}

[data-m1-media-stage][data-m1-media-layout="stack"] {
  display: grid;
}

[data-m1-media-stage][data-m1-media-layout="stack"] > [data-m1-media-panel] {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}

/* Mobile guided media transition -------------------------------------- */

[data-m1-media-mobile-scroll] {
  --m1-mobile-media-duration: 520ms;
  --m1-mobile-media-distance: 14px;
  --m1-mobile-media-easing: cubic-bezier(.22, 1, .36, 1);
}

[data-m1-media-mobile-scroll] [data-m1-media-stage] {
  scroll-margin-top: 24px;
}

@media (max-width: 920px) {
  [data-m1-media-mobile-scroll] [data-m1-media-stage] {
    position: relative;
    scroll-margin-top: 92px;
  }

  [data-m1-media-mobile-scroll] .m1-is-mobile-confirming {
    animation: m1-mobile-trigger-confirm 460ms cubic-bezier(.16, 1, .3, 1);
  }

  [data-m1-media-mobile-scroll] [data-m1-media-panel].m1-is-mobile-revealing {
    animation: m1-mobile-media-arrive var(--m1-mobile-media-duration) var(--m1-mobile-media-easing) both;
  }

  [data-m1-media-mobile-motion="proof"] [data-m1-media-stage]::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    right: 28px;
    left: 28px;
    height: 3px;
    background: var(--m1-color-teal-fill);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
  }

  [data-m1-media-mobile-motion="proof"] [data-m1-media-stage].m1-is-mobile-arriving::before {
    animation: m1-mobile-proof-line var(--m1-mobile-media-duration) var(--m1-mobile-media-easing) both;
  }

  [data-m1-media-mobile-motion="image"] [data-m1-media-stage]::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    background: linear-gradient(90deg, rgb(var(--m1-rgb-teal) / 0), rgb(var(--m1-rgb-teal) / .16), rgb(var(--m1-rgb-teal) / 0));
    transform: translate3d(-105%, 0, 0);
    pointer-events: none;
  }

  [data-m1-media-mobile-motion="image"] [data-m1-media-stage].m1-is-mobile-arriving::after {
    animation: m1-mobile-image-wash var(--m1-mobile-media-duration) var(--m1-mobile-media-easing) both;
  }
}

@keyframes m1-mobile-trigger-confirm {
  0%, 100% { transform: translate3d(0, 0, 0); }
  42% { transform: translate3d(6px, 0, 0); }
}

@keyframes m1-mobile-media-arrive {
  0% { opacity: .42; transform: translate3d(0, var(--m1-mobile-media-distance), 0) scale(1.025); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes m1-mobile-proof-line {
  0% { opacity: 0; transform: scaleX(0); }
  28% { opacity: 1; }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes m1-mobile-image-wash {
  0% { transform: translate3d(-105%, 0, 0); }
  100% { transform: translate3d(105%, 0, 0); }
}

/* Closing meter ------------------------------------------------------- */

[data-m1-effect~="closing-meter"] [data-m1-meter-text] {
  --m1-meter-duration: 1600ms;
  --m1-meter-white-stop: 62%;
  --m1-meter-teal-start: 78%;
  --m1-meter-color: var(--m1-color-teal-fill);
  display: inline-block;
  color: var(--m1-color-on-ink-fixed);
  background-image: linear-gradient(
    90deg,
    var(--m1-color-on-ink-fixed) 0%,
    var(--m1-color-on-ink-fixed) var(--m1-meter-white-stop),
    var(--m1-meter-color) var(--m1-meter-teal-start),
    var(--m1-meter-color) 100%
  );
  background-position: 0% 50%;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position var(--m1-meter-duration) cubic-bezier(.22, 1, .36, 1);
}

[data-m1-effect~="closing-meter"].m1-is-active [data-m1-meter-text],
[data-m1-effect~="closing-meter"] [data-m1-meter-text]:hover {
  background-position: 100% 50%;
}

/* Editorial hero flow ------------------------------------------------ */

[data-m1-effect~="hero-flow"] {
  --m1-hero-aperture-duration: 16s;
  --m1-hero-photo-duration: 18s;
  --m1-hero-belt-duration: 17s;
}

[data-m1-effect~="hero-flow"] [data-m1-hero-flow-track] {
  --m1-flow-pointer-x: 0px;
  --m1-flow-pointer-y: 0px;
  --m1-flow-scroll-x: 0px;
  --m1-flow-scroll-y: 0px;
}

[data-m1-effect~="hero-flow"] [data-m1-hero-flow-item] {
  --m1-flow-end-x: calc(-100vw + 580px);
  --m1-flow-end-y: 108px;
  --m1-flow-early-x: -12vw;
  --m1-flow-mid-x: -28vw;
  --m1-flow-buffer-x: calc(var(--m1-flow-end-x) + 74px);
  --m1-flow-contact-x: calc(var(--m1-flow-end-x) + 62px);
  --m1-flow-approach-x: calc(var(--m1-flow-end-x) + 170px);
}

[data-m1-effect~="hero-flow"] [data-m1-hero-flow-track] {
  transform: translate3d(
    calc(var(--m1-flow-pointer-x, 0px) + var(--m1-flow-scroll-x, 0px)),
    calc(var(--m1-flow-pointer-y, 0px) + var(--m1-flow-scroll-y, 0px)),
    0
  );
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1);
}

[data-m1-effect~="hero-flow"].m1-is-initialized [data-m1-editorial-aperture] {
  animation: m1-editorial-aperture var(--m1-hero-aperture-duration) cubic-bezier(.45, 0, .55, 1) 900ms infinite alternate;
  animation-play-state: paused;
}

[data-m1-effect~="hero-flow"] [data-m1-editorial-drift] {
  transform: translate3d(
    var(--m1-photo-pointer-x, 0px),
    calc(var(--m1-photo-pointer-y, 0px) + var(--m1-photo-scroll-y, 0px)),
    0
  );
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}

[data-m1-effect~="hero-flow"].m1-is-initialized [data-m1-editorial-drift] img {
  animation: m1-editorial-drift var(--m1-hero-photo-duration) cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: paused;
}

[data-m1-effect~="hero-flow"].m1-is-initialized [data-m1-hero-flow-item] {
  animation: m1-service-belt var(--m1-hero-belt-duration) linear var(--m1-flow-delay, 0s) infinite both;
  animation-play-state: paused;
}

[data-m1-effect~="hero-flow"].m1-is-hero-active [data-m1-editorial-aperture],
[data-m1-effect~="hero-flow"].m1-is-hero-active [data-m1-editorial-drift] img,
[data-m1-effect~="hero-flow"].m1-is-hero-active [data-m1-hero-flow-item] {
  animation-play-state: running;
}

[data-m1-effect~="hero-flow"] [data-m1-brand-mark] {
  transform: translate3d(var(--m1-logo-scroll-x, 0px), var(--m1-logo-scroll-y, 0px), 0);
}

[data-m1-effect~="hero-flow"] [data-m1-brand-piece] {
  translate: var(--m1-piece-x, 0px) var(--m1-piece-y, 0px);
  transition: translate 720ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes m1-editorial-aperture {
  0% { clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%, 0 69%, 6% 69%, 6% 24%, 13% 24%); }
  42% { clip-path: polygon(5% 0, 100% 0, 100% 100%, 8% 100%, 8% 74%, 0 74%, 0 19%, 5% 19%); }
  70% { clip-path: polygon(16% 0, 100% 0, 100% 100%, 3% 100%, 3% 64%, 9% 64%, 9% 29%, 16% 29%); }
  100% { clip-path: polygon(8% 0, 100% 0, 100% 100%, 6% 100%, 6% 72%, 1% 72%, 1% 22%, 8% 22%); }
}

@keyframes m1-editorial-drift {
  0% { transform: translate3d(-1.8%, 0, 0) scale(1.085); }
  45% { transform: translate3d(.15%, -.7%, 0) scale(1.11); }
  100% { transform: translate3d(1.9%, .45%, 0) scale(1.09); }
}

@keyframes m1-service-belt {
  0% {
    opacity: 0;
    transform: translate3d(var(--m1-belt-start-x), 2px, 0) rotate(calc(var(--m1-flow-tilt, 0deg) * -.45)) scale(.72);
  }
  7% { opacity: .76; }
  30% { transform: translate3d(var(--m1-belt-one-x), -2px, 0) rotate(var(--m1-flow-tilt, 0deg)) scale(.86); }
  58% { transform: translate3d(var(--m1-belt-mid-x), 3px, 0) rotate(calc(var(--m1-flow-tilt, 0deg) * -.42)) scale(.9); }
  91% { opacity: .72; }
  100% {
    opacity: 0;
    transform: translate3d(var(--m1-flow-end-x, -72px), var(--m1-flow-end-y, -1px), 0) rotate(0) scale(.64);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-m1-effect~="choice-router"] [data-m1-choice],
  [data-m1-effect~="media-switch"] [data-m1-media-trigger],
  [data-m1-effect~="media-switch"] [data-m1-media-trigger]::before,
  [data-m1-media-panel],
  [data-m1-media-mobile-scroll] .m1-is-mobile-confirming,
  [data-m1-media-mobile-scroll] .m1-is-mobile-revealing,
  [data-m1-media-mobile-scroll] .m1-is-mobile-arriving::before,
  [data-m1-media-mobile-scroll] .m1-is-mobile-arriving::after {
    animation: none !important;
    transition: none;
  }

  [data-m1-effect~="patch-reveal"]::before {
    clip-path: none;
    opacity: 1;
    transform: translate3d(var(--m1-patch-reveal-offset-x, 0%), 0, 0);
    transition: none;
  }
}

/* Kinetic m1 mark ------------------------------------------------------ */

[data-m1-effect~="kinetic-mark"] {
  --m1-mark-navy: var(--m1-color-navy);
  --m1-mark-teal: var(--m1-color-teal-fill);
  --m1-mark-size: min(44vw, 520px);
  position: relative;
  display: grid;
  width: var(--m1-mark-size);
  aspect-ratio: 31 / 36;
  place-items: center;
  contain: layout paint;
  isolation: isolate;
}

[data-m1-effect~="kinetic-mark"] .m1-mark__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

[data-m1-effect~="kinetic-mark"] .m1-mark__piece {
  transform: translate3d(var(--m1-mark-x, 0), var(--m1-mark-y, 0), 0);
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

[data-m1-effect~="kinetic-mark"] .m1-mark__entry--navy {
  animation: m1-mark-enter-navy 1050ms cubic-bezier(.16, 1, .3, 1) both;
}

[data-m1-effect~="kinetic-mark"] .m1-mark__entry--teal {
  animation: m1-mark-enter-teal 1120ms 80ms cubic-bezier(.16, 1, .3, 1) both;
}

[data-m1-effect~="kinetic-mark"] .m1-mark__drive--navy {
  animation: m1-mark-breathe-navy 8s 1.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

[data-m1-effect~="kinetic-mark"] .m1-mark__drive--teal {
  animation: m1-mark-breathe-teal 8s 1.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

[data-m1-effect~="kinetic-mark"] .m1-mark__navy { fill: var(--m1-mark-navy); }
[data-m1-effect~="kinetic-mark"] .m1-mark__teal { fill: var(--m1-mark-teal); }

[data-m1-effect~="kinetic-mark"] .m1-mark__signal {
  fill: rgb(var(--m1-rgb-on-ink-fixed) / .58);
  opacity: 0;
  animation: m1-mark-signal 8s 1.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes m1-mark-enter-navy {
  0% { opacity: 0; transform: translate3d(-72px, 54px, 0); }
  46% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes m1-mark-enter-teal {
  0% { opacity: 0; transform: translate3d(0, -78px, 0); }
  52% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes m1-mark-breathe-navy {
  0%, 67%, 100% { transform: translate3d(0, 0, 0); }
  73% { transform: translate3d(-8px, 8px, 0); }
  81% { transform: translate3d(3px, -3px, 0); }
}

@keyframes m1-mark-breathe-teal {
  0%, 67%, 100% { transform: translate3d(0, 0, 0); }
  73% { transform: translate3d(0, -12px, 0); }
  81% { transform: translate3d(0, 4px, 0); }
}

@keyframes m1-mark-signal {
  0%, 67%, 100% { opacity: 0; transform: translateX(-120px) rotate(-43deg); }
  71% { opacity: .58; }
  82% { opacity: 0; transform: translateX(680px) rotate(-43deg); }
}

[data-m1-effect~="choice-router"] .m1-wham-choice.m1-is-activating {
  animation: m1-wham-choice-confirm 420ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes m1-wham-choice-confirm {
  0% { transform: translateY(-6px) scale(1); }
  38% { transform: translateY(1px) scale(.975); }
  72% { transform: translateY(-4px) scale(1.012); }
  100% { transform: translateY(-3px) scale(1); }
}

@media (max-width: 620px) {
  [data-m1-effect~="page-stack"] {
    --m1-stack-top: 92px;
    --m1-stack-height: 450px;
  }

  [data-m1-effect~="kinetic-mark"] {
    --m1-mark-size: min(82vw, 390px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-m1-effect~="reveal"] {
    opacity: 1;
    transform: none;
  }

  [data-m1-effect~="register"],
  [data-m1-effect~="register"][data-m1-register="panel"]::before,
  [data-m1-effect~="edge-pulse"],
  [data-m1-effect~="kinetic-mark"] *,
  [data-m1-effect~="page-stack"] > [data-m1-page] {
    animation: none !important;
    transition: none !important;
  }

  [data-m1-effect~="closing-meter"] [data-m1-meter-text] {
    transition: none;
  }

  [data-m1-effect~="hero-flow"] [data-m1-hero-flow-track] {
    display: none;
  }

  [data-m1-effect~="hero-flow"] [data-m1-editorial-aperture],
  [data-m1-effect~="hero-flow"] [data-m1-editorial-drift],
  [data-m1-effect~="hero-flow"] [data-m1-editorial-drift] img,
  [data-m1-effect~="hero-flow"] [data-m1-brand-piece] {
    animation: none !important;
    transition: none !important;
  }

  [data-m1-effect~="choice-router"] .m1-wham-choice.m1-is-activating {
    animation: none !important;
  }

  [data-m1-effect~="hero-flow"] [data-m1-brand-piece] {
    translate: 0 0;
  }

  [data-m1-dossier-journey] [data-m1-journey-chapter]::before {
    animation: none !important;
    transform: none;
  }

  [data-m1-effect~="kinetic-mark"] .m1-mark__signal { opacity: 0; }
}

/* Depth parallax (statement scene): scroll-scrubbed transform layer. */
[data-m1-effect~="depth-parallax"] .m1-work-card {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-m1-effect~="depth-parallax"] .m1-work-card {
    will-change: auto;
  }
}

/* Scroll-driven layer --------------------------------------------------
   Native CSS scroll timelines: compositor-driven, no scroll listeners, no JS.
   Browsers without animation-timeline and reduced-motion users keep the
   static page. Only translate, scale and opacity are animated. */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Header: reading-progress hairline and a soft lift once the page moves. */
    .m1-header::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      box-shadow: 0 10px 30px -18px rgb(var(--m1-rgb-shade) / .35);
      opacity: 0;
      pointer-events: none;
      animation: m1-scroll-fade-in linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 96px;
    }

    .m1-header::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      background: var(--m1-color-teal-fill);
      transform-origin: 0 50%;
      scale: 0 1;
      pointer-events: none;
      animation: m1-scroll-progress linear both;
      animation-timeline: scroll(root block);
    }

    /* Scroll depth: layers of the opening hero part at different speeds. */
    @media (min-width: 681px) {
      [data-m1-effect~="scroll-depth"] [data-m1-depth] {
        animation: m1-scroll-depth linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 90vh;
      }

      [data-m1-effect~="scroll-depth"] [data-m1-depth="text"] { --m1-depth-shift: -36px; }
      [data-m1-effect~="scroll-depth"] [data-m1-depth="photo"] { --m1-depth-shift: 30px; }
      [data-m1-effect~="scroll-depth"] [data-m1-depth="card"] { --m1-depth-shift: 56px; }

      /* Andrea sinks behind the hero rule instead of crossing it. */
      [data-m1-effect~="scroll-depth"] .m1-wham-hero__portrait {
        clip-path: inset(-100vh -100vw 0 -100vw);
      }
    }

    /* Scroll stagger: direct children rise in one after another. */
    [data-m1-effect~="scroll-stagger"] > * {
      --m1-stagger-distance: 28px;
      --m1-stagger-step: 32px;
      --m1-stagger-index: 0;
      animation: m1-scroll-rise linear both;
      animation-timeline: view(block);
      animation-range:
        entry calc(var(--m1-stagger-index) * var(--m1-stagger-step))
        entry calc(200px + var(--m1-stagger-index) * var(--m1-stagger-step));
    }

    [data-m1-effect~="scroll-stagger"] > :nth-child(2) { --m1-stagger-index: 1; }
    [data-m1-effect~="scroll-stagger"] > :nth-child(3) { --m1-stagger-index: 2; }
    [data-m1-effect~="scroll-stagger"] > :nth-child(4) { --m1-stagger-index: 3; }
    [data-m1-effect~="scroll-stagger"] > :nth-child(n + 5) { --m1-stagger-index: 4; }

    /* Anchor targets only fade: Chrome resolves scroll-into-view against the
       transformed box, so a moving target would land under the sticky header. */
    [data-m1-effect~="scroll-stagger"] > [id] { animation-name: m1-scroll-appear; }
  }
}

@keyframes m1-scroll-fade-in {
  to { opacity: 1; }
}

@keyframes m1-scroll-progress {
  to { scale: 1 1; }
}

@keyframes m1-scroll-depth {
  to { translate: 0 var(--m1-depth-shift, 0px); }
}

@keyframes m1-scroll-appear {
  from { opacity: 0; }
}

@keyframes m1-scroll-rise {
  from {
    opacity: 0;
    translate: 0 var(--m1-stagger-distance, 28px);
    scale: .98;
  }
}

/* Statement points: "Editorial Ledger" --------------------------------
   scroll-assemble: each column's lines rise in as they enter (columns offset
   by 40px scroll), then the teal bar on each rule draws in from the left,
   one column after another (01 → 02 → 03). Only translate/scale/opacity and
   background-position are animated; without motion the bars are simply there. */

[data-m1-effect~="scroll-assemble"] > :nth-child(2) { --m1-assemble-column: 1; }
[data-m1-effect~="scroll-assemble"] > :nth-child(3) { --m1-assemble-column: 2; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-m1-effect~="scroll-assemble"] {
      view-timeline: --m1-assemble block;
    }

    [data-m1-effect~="scroll-assemble"] > * > * {
      animation: m1-assemble linear both;
      animation-timeline: view(block);
      animation-range:
        entry calc(var(--m1-assemble-column, 0) * 40px)
        entry calc(170px + var(--m1-assemble-column, 0) * 40px);
    }

    [data-m1-effect~="scroll-assemble"] > *::before {
      animation: m1-ledger-bar linear both;
      animation-timeline: --m1-assemble;
      animation-range:
        cover calc(30% + var(--m1-assemble-column, 0) * 7%)
        cover calc(40% + var(--m1-assemble-column, 0) * 7%);
    }
  }
}

@keyframes m1-assemble {
  from { opacity: 0; translate: 0 22px; scale: .97; }
}

@keyframes m1-ledger-bar {
  from { background-position: -72px 100%; }
  to { background-position: 0 100%; }
}

/* Scroll lift: an element (e.g. the WEBSCORE report excerpt) rises gently
   while it crosses the viewport. Transform only; static without motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-m1-effect~="scroll-lift"] {
      animation: m1-scroll-lift linear both;
      animation-timeline: view(block);
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes m1-scroll-lift {
  from { translate: 0 48px; }
  to { translate: 0 -32px; }
}