/* WhenLeads motion, media and conversion furniture (shared). Adapted from the DV8 Motion Kit.
   Loaded on every page after base.css; each site tunes intensity with the tokens below in site.css.
   Rules that never bend:
   - every hidden start state is gated on html.mo, which motion.js adds only AFTER it has marked
     everything already on screen as finished, so the first screen never fades and a script
     failure never blanks the page (html.js alone hides nothing);
   - above the fold only transform moves (hero parallax, kenburns, magnetic buttons);
   - html.rm (prefers-reduced-motion) gets the finished state, a still poster and no loops;
   - no custom cursor, ever. */

:root {
  --mo-dist: 16px;
  --mo-dur: 700ms;
  --mo-wipe-dur: 900ms;
  --mo-ease: cubic-bezier(.2, .8, .2, 1);
  --mo-wipe-ease: cubic-bezier(.7, 0, .2, 1);
  --mo-stagger: 70ms;
  --wipe-start: inset(0 100% 0 0);
  --wipe-end: inset(0 0 0 0);
  --mag-max: 6px;
  --parallax-max: 40px;
  --tilt-max: 4deg;
  --hero-h: min(72vh, 620px);
  --bar-h: 72px;
}

/* ---------- hero media (image or video; the poster <img> is the LCP element) ---------- */
.hero-media { margin: 0; position: relative; min-width: 0; }
.hero-media__frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--panel); aspect-ratio: 4 / 3; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the video fades in over the poster <img> (which stays painted underneath, so LCP and CLS never change) */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; pointer-events: none; background: transparent; }
.hero__video.is-playing { opacity: 1; }
.hero-media__toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; min-height: 36px; padding: .35rem .75rem;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(10, 18, 30, .62); color: #fff;
  font: 600 .8rem/1 var(--font-body); cursor: pointer;
}
.hero-media__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* band and strip heroes: the key-facts card overlaps the lower edge, so the pause button sits top right */
.hero-media--band .hero-media__toggle, .hero-media--strip .hero-media__toggle { top: 12px; bottom: auto; z-index: 3; }
.hero-media__cap { font-size: .85rem; color: var(--ink-2); margin: .6rem 0 0; }

/* split hero: text left (5/12), media right (7/12) bleeding to the right edge; stacked on phones */
.hero--media, .page-head--split { overflow-x: clip; }
.hero--media .hero__grid, .hero__grid--split { display: grid; gap: 1.75rem 3.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero__text { min-width: 0; }
.hero__text .btn-row { margin-top: 1.5rem; }
@media (min-width: 960px) {
  .hero--media .hero__grid, .hero__grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* The text column is flattened into the grid: its lines take column 1, the photo spans their full height in
     column 2, and anything placed in the hero (a tool card, the fact strip) runs full width underneath, so
     the right side is never left empty and the photo is never cropped to a sliver. */
  .hero--media .hero__grid, .hero__grid--split { row-gap: 0; align-items: start; }
  .hero--media .hero__text, .hero__grid--split .hero__text { display: contents; }
  .hero--media .hero__text > *, .hero__grid--split .hero__text > * { grid-column: 1; }
  .hero--media .hero__text > .placed, .hero__grid--split .hero__text > .placed { grid-column: 1 / -1; margin: 2.25rem 0 0; }
  .hero--media .hero__grid > .hero-media, .hero__grid--split > .hero-media { grid-column: 2; grid-row: 1 / 8; align-self: stretch; }
  .hero-media--split { margin-right: calc(-1 * (max(0px, (100vw - var(--maxw, 1280px)) / 2) + 32px)); display: flex; flex-direction: column; }
  .hero-media--split .hero-media__frame { aspect-ratio: auto; flex: 1 1 auto; min-height: 360px; border-radius: var(--radius) 0 0 var(--radius); }
  .hero-media--split .hero-media__frame picture { position: absolute; inset: 0; }
  .hero-media--split .hero-media__cap { padding-right: 32px; }
}

/* band hero (guides, pages): full .wrap width under the page head, 16:7 desktop, 4:3 phone */
.hero-band-wrap { padding-top: 1.5rem; }
@media (min-width: 768px) { .hero-media--band .hero-media__frame { aspect-ratio: 16 / 7; } }

/* aside hero (tool and form pages): 4:3 in the head's right column or above the form promise */
.page-head__grid--aside { align-items: center; }
.page-head__media .hero-media__frame, .form-layout__aside .hero-media__frame { aspect-ratio: 4 / 3; }
.form-layout__aside .hero-media { margin-bottom: 1.5rem; }

/* jurisdiction strip: 21:9 under the head, key-facts card overlapping its lower edge */
.jstrip { padding-top: 1.5rem; }
@media (min-width: 768px) { .hero-media--strip .hero-media__frame { aspect-ratio: 21 / 9; } }
.jfacts { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin: -2.5rem 1rem 0; box-shadow: 0 12px 32px rgba(10, 20, 40, .12); }
.jfacts p { margin: 0; }
@media (min-width: 900px) { .jfacts { margin: -3.5rem 2rem 0 auto; max-width: 720px; } }

/* phones: the hero picture sits right under the H1, so the first screen always holds a photo. display: contents
   flattens the text column so its parts and the figure can be ordered together; the poster stays the LCP image. */
@media (max-width: 699px) {
  .page-head--split .crumbs, .page-head--aside .crumbs, .page-head--band .crumbs { display: none; }
  .hero--media .hero__grid, .page-head--split .wrap, .page-head--aside .wrap, .page-head--band .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .page-head--band .toc { margin-top: 1.25rem; }
  .hero--media .hero__text, .page-head--split .hero__grid--split, .page-head--split .hero__text,
  .page-head--aside .page-head__grid, .page-head--aside .page-head__grid > div,
  .page-head--band .page-head__grid, .page-head--band .page-head__grid > div, .page-head--band .hero-band-wrap { display: contents; }
  .hero__text > .eyebrow, .page-head__grid > div > .eyebrow { order: -3; }
  [data-hero] h1 { order: -2; }
  [data-hero] .hero-media:not(.placed .hero-media) { order: -1; margin: .15rem 0 1.1rem; }
  [data-hero] .hero-media .hero-media__frame { aspect-ratio: 16 / 10; }
  [data-hero] .hero-media__cap { display: none; }
}

/* TOC as a row under a split hero (persona pages) */
.toc--row { margin-top: 1.5rem; }
.toc--row ol { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.toc--row li + li { margin-top: 0; }

/* ---------- inline media, diagrams and tools placed after an H2 ---------- */
.placed { margin: 0 0 2.25rem; min-width: 0; }
.split__body > .placed { margin: 1.5rem 0 0; }
.media { margin: 0; }
.media picture, .media img { display: block; width: 100%; height: auto; }
.media img { border-radius: var(--radius); background: var(--panel); }
.media figcaption, .diagram figcaption { font-size: .875rem; color: var(--ink-2); margin-top: .6rem; }
@media (min-width: 900px) { .placed--half { max-width: 50%; } .placed--inset { max-width: min(100%, 420px); } }
.diagram { margin: 0; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, var(--bg)); }
.diagram svg { display: block; width: 100%; height: auto; max-height: 80vh; }

/* ---------- in-content CTA band, share row, sticky phone bar ---------- */
.cta-band { margin: 2.5rem 0; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cta-band__grid { display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cta-band__grid { grid-template-columns: minmax(220px, 4fr) 8fr; align-items: start; } }
.cta-band h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.cta-band__body > p { margin: 0 0 1.25rem; font-size: 1.05rem; }
.share { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; align-items: center; }
.share__label { margin: 0; font-weight: 700; }
.share__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.share__status { font-size: .9rem; color: var(--ok); }
.share .btn { min-height: 44px; }

.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(10, 20, 40, .08); padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom, 0px));
  transition: transform .3s var(--mo-ease);
}
.cta-bar__in { display: flex; align-items: center; gap: .75rem 1rem; }
.cta-bar__btn { flex: 1 1 auto; }
.cta-bar__sec { flex: 0 1 auto; font-size: .9rem; font-weight: 600; line-height: 1.2; text-align: center; padding: .45rem .75rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; border: 2px solid var(--ink); border-radius: var(--radius-btn, var(--radius)); background: var(--bg); }
html.js .cta-bar.is-away { transform: translate3d(0, 115%, 0); }
body.has-bar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .cta-bar { display: none; } body.has-bar { padding-bottom: 0; } }
@media (max-width: 767px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

/* reading progress (articles) */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--progress, var(--accent)); transform: scaleX(0); transform-origin: 0 50%; }

/* persona cards and kinetic band (home pages) */
.pcards { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.pcards__head { display: grid; gap: .5rem 3rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 900px) { .pcards__head { grid-template-columns: minmax(220px, 4fr) 8fr; align-items: end; } }
.pcards__head h2, .pcards__head p { margin: 0; }
.pcard { display: flex; flex-direction: column; gap: .5rem; padding: 0; overflow: hidden; color: inherit; text-decoration: none; height: 100%; }
.pcard picture, .pcard img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pcard__body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .35rem; }
.pcard__body h3 { margin: 0; }
.pcard__body p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.pcard__go { font-weight: 700; color: var(--link); margin-top: .25rem; }
.def-strip { display: grid; gap: .5rem 3rem; grid-template-columns: minmax(0, 1fr); padding: 1.5rem 0; }
@media (min-width: 900px) { .def-strip { grid-template-columns: minmax(220px, 4fr) 8fr; } }
.def-strip p { margin: 0; }
.kinetic { overflow: hidden; white-space: nowrap; padding: 1.1rem 0; }
.kinetic__track { display: inline-flex; align-items: center; gap: 1.5rem; padding-left: 16px; transform: translate3d(var(--kx, 0px), 0, 0); will-change: transform; }
.kinetic__item { font: 700 clamp(1.4rem, 3.4vw, 2.4rem)/1.1 var(--font-head); letter-spacing: -0.02em; }
.kinetic__sep { width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: var(--signal, var(--accent)); }

/* ---------- motion states (all gated on html.mo; see header) ---------- */
html.mo:not(.rm) [data-reveal] { transition: opacity var(--mo-dur) ease, transform var(--mo-dur) var(--mo-ease); }
html.mo:not(.rm) [data-reveal]:not(.in) { opacity: 0; transform: translate3d(0, var(--mo-dist), 0); }

html.mo:not(.rm) [data-wipe] { clip-path: var(--wipe-end); transition: clip-path var(--mo-wipe-dur) var(--mo-wipe-ease); }
html.mo:not(.rm) [data-wipe]:not(.in) { clip-path: var(--wipe-start); }
html.mo:not(.rm) [data-wipe] img { transition: transform calc(var(--mo-wipe-dur) * 1.5) var(--mo-ease); }
html.mo:not(.rm) [data-wipe]:not(.in) img { transform: scale(1.08); }

/* Signature tier: wide figures open like a window as they scroll through (--x 0..1, default finished) */
html.mo:not(.rm) [data-expand] { clip-path: inset(calc((1 - var(--x, 1)) * 9%) calc((1 - var(--x, 1)) * 14%) round calc(var(--radius) + (1 - var(--x, 1)) * 18px)); }
html.mo:not(.rm) [data-expand] img { transform: scale(calc(1 + (1 - var(--x, 1)) * .14)); }

html.mo:not(.rm) [data-stagger] > * { transition: opacity var(--mo-dur) ease, transform var(--mo-dur) var(--mo-ease); transition-delay: calc(var(--i, 0) * var(--mo-stagger)); }
html.mo:not(.rm) [data-stagger]:not(.in) > * { opacity: 0; transform: translate3d(0, calc(var(--mo-dist) * 1.5), 0); }

html.mo:not(.rm) [data-unmask] { transition: clip-path 1s var(--mo-wipe-ease), transform 1.1s var(--mo-ease); }
html.mo:not(.rm) [data-unmask]:not(.in) { clip-path: inset(0 0 100% 0); transform: translate3d(0, .5em, 0); }
html.mo:not(.rm) [data-unmask].in { clip-path: inset(-20% -5% -25% -5%); transform: none; }

html.mo:not(.rm) [data-words] .w { transition: color .25s ease; }
html.mo:not(.rm) [data-words] .w:not(.lit) { color: var(--ink-dim, #5a6475); }
[data-words] .w.hi { color: var(--accent-ink); }

html.mo:not(.rm) [data-steps] > li { border-left: 3px solid var(--line); padding-left: 1rem; transition: border-color .35s ease, color .35s ease; }
html.mo:not(.rm) [data-steps] > li:not(.on):not(.done) { color: var(--ink-2); }
html.mo:not(.rm) [data-steps] > li.on { border-left-color: var(--accent-ink); }
html.mo:not(.rm) [data-steps] > li.done { border-left-color: var(--line-strong); }

[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--mo-ease); }
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), var(--spot, rgba(255, 255, 255, .12)), transparent 60%); }

.draw-on { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--mo-ease); }
html.mo:not(.rm) [data-draw]:not(.in) .draw-on, html.mo:not(.rm) figure.diagram:not(.in) .draw-on { stroke-dashoffset: var(--len); }

html:not(.rm) body[data-motion~="signal-pulse"] .sig-pulse { transform-box: fill-box; transform-origin: center; animation: wl-sig 2.6s ease-out infinite; }
html:not(.rm) body[data-motion~="signal-pulse"] .sig-pulse:nth-of-type(2n) { animation-delay: .9s; }
@keyframes wl-sig { from { transform: scale(.55); opacity: .85; } to { transform: scale(2.3); opacity: 0; } }

html:not(.rm) body[data-motion~="kenburns"] .hero-media:not(.hero-media--video) .hero-media__img { animation: wl-kb 20s ease-in-out infinite alternate; }
@keyframes wl-kb { from { transform: scale(1); } to { transform: scale(1.05); } }

/* parallax moves the picture inside the clipped frame, never the figure, so the hero cannot slide into the content below.
   Scaled from the bottom edge so a downward shift never shows a gap at the top. */
[data-hero-media] .hero-media__frame > picture { display: block; height: 100%; }
@media (min-width: 768px) {
  html:not(.rm) body[data-motion~="hero-parallax"] [data-hero-media] .hero-media__frame > picture,
  html:not(.rm) body[data-motion~="hero-parallax"] [data-hero-media] .hero-media__frame > .hero__video { transform-origin: 50% 100%; transform: translate3d(0, var(--py, 0px), 0) scale(1.12); }
}
.page-head--band { padding-bottom: 2.5rem; }
.btn[data-mag] { transition: transform .35s var(--mo-ease); }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none !important; }
  [data-tilt], [data-hero-media], [data-hero-media] .hero-media__frame > picture, [data-hero-media] .hero-media__frame > .hero__video, .kinetic__track { transform: none !important; }
}

@media print {
  .cta-bar, .share, .read-progress, .hero__video, .hero-media__toggle, .page-head__media, .kinetic, .pcards picture { display: none !important; }
  [data-reveal], [data-stagger] > *, [data-wipe], [data-expand], [data-unmask] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  body.has-bar { padding-bottom: 0; }
  /* a printed article is the words, sources and diagrams: interactive tools, photos and CTA bands stay on screen */
  main .wl-tool, main .placed--media, .hero-media, .cta-band, .pcards, .def-band { display: none !important; }
  .diagram, figure.dg { break-inside: avoid; }
}