/*
 * LEVEL 2 MOTION - this file exists only in site-V2.
 * site/ is the same site with level-1 motion; everything here is the difference.
 *
 * Loaded after app.css. Every hiding state is scoped to `.m2`, a class motion.js
 * puts on <html>, so if the script never runs the page is complete and visible.
 * Reduced motion removes `.m2` entirely and pins every effect to its end state.
 */

/* ---------------------------------------------------- hero dust */
.m2-dust {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.m2-dust span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: m2-drift var(--d) linear var(--delay) infinite;
}
@keyframes m2-drift {
  0%   { opacity: 0;       transform: translate3d(0, 0, 0); }
  12%  { opacity: var(--o); }
  88%  { opacity: var(--o); }
  100% { opacity: 0;       transform: translate3d(var(--dx), var(--dy), 0); }
}

/* ------------------------------------------------ hero parallax */
.m2 .ds-hero__media {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.08);   /* headroom so the drift never shows an edge */
}

/* ------------------------------------------- word-by-word rise */
/* The block itself stops rising; its words carry the entrance instead. */
.m2 .ds-section-head.reveal,
.m2 .ds-cta-band.reveal { transform: none !important; }

.m2 .m2-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.m2 .m2-split.in .m2-w { opacity: 1; transform: none; }
.m2 .m2-split.in.done .m2-w { transition-delay: 0ms !important; }
/* descenders need room or g, y and p get clipped by the inline-block box */
.m2 .m2-split { padding-bottom: .12em; margin-bottom: -.12em; }

/* --------------------------------------------- self-drawing rule */
.m2-rule { display: block; width: 120px; height: 2px; margin: var(--space-md) auto 0; overflow: visible; }
.m2-rule line {
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 900ms var(--ease-out);
}
.m2-rule.in line { stroke-dashoffset: 0; }
.ds-section--ink .m2-rule line { stroke: var(--color-primary-bright); }

/* ------------------------------------------ checklist in sequence */
.m2 .ds-checklist li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.m2 .ds-checklist.in li { opacity: 1; transform: none; }
.m2 .ds-checklist.in.done li { transition-delay: 0ms !important; }

/* ----------------------------------- wipe the dust off (the one moment) */
.m2-wipe {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}
.m2-wipe > img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* The dust lives on a canvas the visitor erases. pan-y lets a vertical drag scroll
   the page as normal, so nobody gets trapped trying to scroll past; horizontal
   swipes do the wiping. */
.m2-wipe__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%2740%27><circle cx=%2720%27 cy=%2720%27 r=%2717%27 fill=%27rgba(255,255,255,0.25)%27 stroke=%27white%27 stroke-width=%272%27/></svg>") 20 20, grab;
  transition: opacity 620ms var(--ease-out);
}
.m2-wipe.is-clean .m2-wipe__canvas { opacity: 0; pointer-events: none; }

.m2-wipe__hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  background: rgba(27, 34, 55, .72);
  color: #fff;
  font: var(--type-body-emphasis);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}
.m2-wipe.is-dirty .m2-wipe__hint { opacity: 0; }

.m2-wipe__skip {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  min-height: 36px;
  padding: 0 var(--space-md);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-md);
  background: rgba(27, 34, 55, .55);
  color: #fff;
  font: var(--type-button-sm);
  letter-spacing: var(--tracking-button-sm);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 320ms var(--ease-out), background var(--motion-fast) var(--ease-soft);
}
.m2-wipe__skip:hover { background: rgba(27, 34, 55, .8); }
.m2-wipe.is-clean .m2-wipe__skip { opacity: 0; pointer-events: none; }

.m2-wipe__done {
  position: absolute;
  left: 50%;
  bottom: var(--space-xl);
  transform: translateX(-50%) translateY(8px);
  margin: 0;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .94);
  color: var(--color-ink);
  font: var(--type-body-emphasis);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-mid) var(--ease-out), transform var(--motion-mid) var(--ease-out);
}
.m2-wipe.is-clean .m2-wipe__done { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .m2-wipe__hint { font: var(--type-caption-bold); padding: var(--space-xs) var(--space-md); }
  .m2-wipe__done { left: var(--space-md); right: var(--space-md); transform: none; width: auto; }
  .m2-wipe.is-clean .m2-wipe__done { transform: none; }
}

/* ------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .m2-dust { display: none; }
  .m2-rule line { stroke-dashoffset: 0 !important; transition: none !important; }
  .m2 .m2-w,
  .m2 .ds-checklist li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .m2-wipe__canvas, .m2-wipe__hint, .m2-wipe__skip { display: none; }
  .m2-wipe__done { opacity: 1; transform: translateX(-50%); }
  .m2 .ds-hero__media { transform: scale(1.02) !important; }
}