/* ============================================================
   WDA UI KIT — MOTION & INTERACTION LAYER  (v1.1)
   Extends kit.css. Every value reads from the motion.* tokens
   in tokens.css. No legacy jQuery, no plugin CSS — modern CSS
   transitions / keyframes + a thin IntersectionObserver driver.
   ============================================================ */

/* ---------------------------------------------------------------
   0 · REVEAL ENGINE
   Elements start hidden, get .is-in when they enter the viewport
   (added by motion.js). Reduced-motion users get them instantly.
   --------------------------------------------------------------- */
/* sidebar section divider */
.kit-nav__div { margin: 18px 0 8px; padding: 0 12px; }
.kit-nav__div span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-brand-primary); font-weight: 700; }
.kit-nav__div { border-top: 1px solid var(--color-ink-border); padding-top: 16px; }

[data-reveal] { will-change: transform, opacity; }

/* No-JS / pre-JS safety: until motion.js sets html.m-js, never hide content.
   This guarantees reveal targets are visible if scripting is off or delayed. */
html:not(.m-js) [data-reveal],
html:not(.m-js) [data-stagger] > *,
html:not(.m-js) [data-reveal="title"] > span,
html:not(.m-js) .hero h2 .ln > span,
html:not(.m-js) .hero__lead,
html:not(.m-js) .hero__cta,
html:not(.m-js) .price-feat > *,
html:not(.m-js) .mdemo__win .field { opacity: 1 !important; transform: none !important; }
html:not(.m-js) [data-reveal="wipe"]::after,
html:not(.m-js) [data-reveal="mask"]::after,
html:not(.m-js) .hero__wipe { display: none !important; }
html:not(.m-js) .prg__fill { width: var(--v, 0%) !important; }

/* fade-up */
[data-reveal="fade-up"] {
  opacity: 0;
  transform: translateY(var(--motion-distance-small));
  transition: opacity var(--motion-duration-reveal) var(--motion-easing-enter),
              transform var(--motion-duration-reveal) var(--motion-easing-enter);
}
[data-reveal="fade-up"].is-in { opacity: 1; transform: none; }

/* fade-up large (cards / images) */
[data-reveal="rise"] {
  opacity: 0;
  transform: translateY(var(--motion-distance-medium));
  transition: opacity var(--motion-duration-reveal) var(--motion-easing-enter),
              transform var(--motion-duration-reveal) var(--motion-easing-enter);
}
[data-reveal="rise"].is-in { opacity: 1; transform: none; }

/* title-fill — masked line that wipes up from below */
[data-reveal="title"] { display: inline-block; overflow: hidden; padding-bottom: .06em; vertical-align: bottom; }
[data-reveal="title"] > span {
  display: inline-block;
  transform: translateY(var(--motion-distance-full));
  transition: transform var(--motion-duration-reveal) var(--motion-easing-reveal);
}
[data-reveal="title"].is-in > span { transform: none; }

/* overlay-wipe — a brand panel slides off to reveal the surface beneath */
[data-reveal="wipe"] { position: relative; overflow: hidden; }
[data-reveal="wipe"]::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: var(--color-brand-primary);
  transform: translateX(-101%);
  transition: transform var(--motion-duration-cinematic) var(--motion-easing-cinematic);
}
[data-reveal="wipe"].is-in::after { transform: translateX(101%); }

/* mask-line — text revealed through a moving horizontal mask */
[data-reveal="mask"] { position: relative; overflow: hidden; display: inline-block; }
[data-reveal="mask"]::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: var(--color-ink);
  transform: scaleX(1); transform-origin: right center;
  transition: transform var(--motion-duration-reveal) var(--motion-easing-reveal);
}
[data-reveal="mask"].is-in::after { transform: scaleX(0); }

/* staggered children — each child waits --i * stagger before easing in */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(var(--motion-distance-small));
  transition: opacity var(--motion-duration-standard) var(--motion-easing-enter),
              transform var(--motion-duration-standard) var(--motion-easing-enter);
  transition-delay: calc(var(--i, 0) * var(--motion-delay-stagger-sm));
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger="lg"] > * { transition-delay: calc(var(--i, 0) * var(--motion-delay-stagger-lg)); }

/* replay control for the doc */
.m-replay {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg-page); color: var(--color-text-secondary);
  font: 600 13px/1 var(--font-sans); cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
              color var(--motion-duration-fast) var(--motion-easing-standard);
}
.m-replay:hover { border-color: var(--color-ink); color: var(--color-text-primary); }
.m-replay svg { width: 15px; height: 15px; transition: transform var(--motion-duration-emphasis) var(--motion-easing-standard); }
.m-replay:active svg { transform: rotate(-180deg); }
.section--ink .m-replay { background: rgba(255,255,255,.05); border-color: var(--color-ink-border-strong); color: #D7DCD8; }
.section--ink .m-replay:hover { border-color: #fff; color: #fff; }

.m-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }

/* motion audit card */
.maudit { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-page); }
.maudit__head { padding: 14px 18px; display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--color-border-default); }
.maudit__head .badge { margin-left: auto; }
.maudit__sum { padding: 14px 18px; font-size: 14px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-default); }
.maudit__sum b { color: var(--color-text-primary); }
.maudit__list { padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 7px; border-bottom: 1px solid var(--color-border-default); }
.maudit__list .tag { height: 26px; font-size: 12px; }
.mgrid-4 { display: grid; grid-template-columns: repeat(4,1fr); }
.mgrid-4 > div { padding: 13px 16px; border-left: 1px solid var(--color-border-default); }
.mgrid-4 > div:first-child { border-left: 0; }
.mgrid-4 .k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 5px; display: flex; align-items: center; gap: 6px; }
.mgrid-4 p { margin: 0; font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }
.mgrid-4 .k svg { width: 13px; height: 13px; }
@media (max-width: 860px) { .mgrid-4 { grid-template-columns: 1fr 1fr; } .mgrid-4 > div:nth-child(odd) { border-left: 0; } }
@media (max-width: 560px) { .mgrid-4 { grid-template-columns: 1fr; } .mgrid-4 > div { border-left: 0; border-top: 1px solid var(--color-border-default); } .mgrid-4 > div:first-child { border-top: 0; } }

/* ---------------------------------------------------------------
   1 · MOTION TOKEN BOARD
   --------------------------------------------------------------- */
.tok { display: grid; gap: 10px; }
.tok__row {
  display: grid; grid-template-columns: 1.5fr 84px 1fr; gap: 18px; align-items: center;
  padding: 13px 18px; border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); background: var(--color-bg-page);
}
.tok__name { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; word-break: break-all; }
.tok__val  { font-family: var(--font-display); font-size: 12px; color: var(--color-text-muted); }
.tok__use  { font-size: 13px; color: var(--color-text-secondary); }

/* duration visualiser: a dot that travels the track on a loop */
.tok__demo { position: relative; height: 22px; }
.tok__track { position: absolute; top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); background: var(--color-border-default); border-radius: 2px; }
.tok__dot { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--color-brand-primary); }
.tok-run .tok__dot { animation: tokTravel var(--d, 320ms) var(--e, linear) both; }
@keyframes tokTravel { from { left: 0; } to { left: calc(100% - 12px); } }

/* easing curve cards */
.curveboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.curve { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 16px; background: var(--color-bg-page); }
.curve svg { width: 100%; height: 70px; display: block; }
.curve path.track { stroke: var(--color-border-strong); stroke-width: 2; fill: none; }
.curve path.line  { stroke: var(--color-brand-primary); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.curve__name { font-family: var(--font-display); font-size: 12px; font-weight: 600; margin: 12px 0 2px; }
.curve__val  { font-family: var(--font-display); font-size: 10.5px; color: var(--color-text-muted); word-break: break-all; }

/* ---------------------------------------------------------------
   2 · PRINCIPLE / DIRECTION CARDS
   --------------------------------------------------------------- */
.principle { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 24px; background: var(--color-bg-page); }
.principle__n { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--color-brand-primary); }
.principle h4 { margin: 8px 0 6px; font-size: 17px; }
.principle p { margin: 0; color: var(--color-text-secondary); font-size: 14px; }

.dirgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dircard { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 22px; background: var(--color-bg-page); }
.dircard__viz { height: 92px; border-radius: var(--radius-md); background: var(--color-bg-surface); position: relative; overflow: hidden; margin-bottom: 16px; display: grid; place-items: center; }
.dircard__box { width: 46px; height: 46px; border-radius: 10px; background: var(--color-ink); }
.dircard__box.brand { background: var(--color-brand-primary); }
.dircard:hover .dircard__viz .axis-x { animation: axisX 1.4s var(--motion-easing-standard) infinite; }
.dircard:hover .dircard__viz .axis-y { animation: axisY 1.4s var(--motion-easing-standard) infinite; }
.dircard:hover .dircard__viz .axis-s { animation: axisS 1.4s var(--motion-easing-standard) infinite; }
@keyframes axisX { 0%,100% { transform: translateX(-26px); } 50% { transform: translateX(26px); } }
@keyframes axisY { 0%,100% { transform: translateY(18px); opacity:.4; } 50% { transform: translateY(-12px); opacity:1; } }
@keyframes axisS { 0%,100% { transform: scale(.7); } 50% { transform: scale(1.1); } }
.dircard h4 { margin: 0 0 6px; font-size: 16px; }
.dircard p { margin: 0; font-size: 13.5px; color: var(--color-text-muted); }

/* ---------------------------------------------------------------
   3 · BUTTON MOTION FAMILIES
   --------------------------------------------------------------- */
.mbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--control-md); padding: 0 26px; border-radius: var(--radius-pill);
  font: var(--fw-semibold) var(--fs-body)/1 var(--font-sans); text-decoration: none;
  cursor: pointer; border: 0; background: none; color: var(--color-text-primary);
  -webkit-tap-highlight-color: transparent;
}
.mbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* A · Border-draw — two pseudo borders animate in from opposite corners */
.mbtn--border { color: var(--color-text-primary); }
.mbtn--border::before, .mbtn--border::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill); pointer-events: none;
}
.mbtn--border::before { border: 1.5px solid var(--color-border-strong); }
.mbtn--border::after {
  border: 1.5px solid var(--color-brand-primary);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path var(--motion-duration-emphasis) var(--motion-easing-standard);
}
.mbtn--border:hover::after, .mbtn--border:focus-visible::after { clip-path: inset(0 0 0 0); }
.section--ink .mbtn--border { color: #fff; }
.section--ink .mbtn--border::before { border-color: var(--color-ink-border-strong); }

/* B · Text-flip — two stacked labels, slide one out / one in */
.mbtn--flip { overflow: hidden; background: var(--color-ink); color: #fff; }
.mbtn--flip .flip { position: relative; display: block; overflow: hidden; height: 1.2em; }
.mbtn--flip .flip span { display: block; transition: transform var(--motion-duration-emphasis) var(--motion-easing-reveal); }
.mbtn--flip .flip span + span { position: absolute; top: 100%; left: 0; right: 0; color: var(--color-brand-primary); }
.mbtn--flip:hover .flip span { transform: translateY(-100%); }

/* C · Arrow-extend — line grows, head nudges */
.mbtn--arrow { color: var(--color-text-primary); padding-left: 4px; gap: 12px; }
.mbtn--arrow .arw { position: relative; display: inline-flex; align-items: center; width: 30px; height: 12px; }
.mbtn--arrow .arw::before { content: ""; position: absolute; left: 0; top: 50%; height: 1.6px; width: 18px; background: currentColor; transform: translateY(-50%); transition: width var(--motion-duration-emphasis) var(--motion-easing-standard); }
.mbtn--arrow .arw::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform var(--motion-duration-emphasis) var(--motion-easing-standard); }
.mbtn--arrow:hover .arw::before { width: 26px; }
.mbtn--arrow:hover .arw::after { transform: translate(4px,-50%) rotate(45deg); }
.mbtn--arrow:hover { color: var(--color-text-brand); }
.section--ink .mbtn--arrow { color: #fff; }
.section--ink .mbtn--arrow:hover { color: var(--color-brand-primary); }

/* D · Overlay-fill — primary CTA, brand panel wipes across on hover */
.mbtn--fill { background: var(--color-ink); color: #fff; overflow: hidden; }
.mbtn--fill .lbl { position: relative; z-index: 2; transition: color var(--motion-duration-standard) var(--motion-easing-standard); }
.mbtn--fill::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-brand-primary); transform: translateX(-101%); transition: transform var(--motion-duration-emphasis) var(--motion-easing-reveal); }
.mbtn--fill:hover::before { transform: translateX(0); }
.mbtn--fill:hover .lbl { color: var(--color-text-on-brand); }

/* ---------------------------------------------------------------
   4 · TEXT-REVEAL SPECIMENS (doc-driven, replayable)
   --------------------------------------------------------------- */
.reveal-demo { background: var(--color-bg-page); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 32px; }
.reveal-demo .big { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; margin: 0; }
.reveal-demo .big span { color: inherit; }

/* ---------------------------------------------------------------
   5 · CUSTOM CURSOR SPECIMENS
   --------------------------------------------------------------- */
.cursorboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cursorcard { border: 1px solid var(--color-ink-border); border-radius: var(--radius-lg); background: var(--color-ink); padding: 24px; text-align: center; position: relative; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.cursorcard--light { background: var(--color-brand-primary); border-color: transparent; }
.cur { border-radius: 50%; display: grid; place-items: center; transition: transform var(--motion-duration-standard) var(--motion-easing-cursor); }
.cur--dot { width: 10px; height: 10px; background: var(--color-brand-primary); }
.cur--lg { width: 64px; height: 64px; background: rgba(var(--color-brand-primary-rgb),.18); border: 1.5px solid var(--color-brand-primary); }
.cur--sm { width: 30px; height: 30px; border: 1.5px solid var(--color-brand-primary); box-shadow: 0 0 18px rgba(var(--color-brand-primary-rgb),.5); }
.cur--ring { width: 58px; height: 58px; border: 1.5px solid #fff; color: #fff; }
.cur--ring svg { width: 20px; height: 20px; }
.cur--dark { width: 58px; height: 58px; border: 1.5px solid var(--color-ink); color: var(--color-ink); }
.cur--dark svg { width: 20px; height: 20px; }
.cursorcard:hover .cur { transform: scale(1.12); }
.cursorcard__name { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: #fff; }
.cursorcard--light .cursorcard__name { color: var(--color-ink); }
.cursorcard__meta { font-size: 11px; color: var(--color-text-on-dark-muted); }
.cursorcard--light .cursorcard__meta { color: rgba(11,16,32,.7); }

/* live cursor inside the playground */
.cursor-play { position: relative; min-height: 220px; border-radius: var(--radius-lg); background: var(--color-ink); overflow: hidden; cursor: none; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; padding: 28px; }
.cursor-play__hint { position: absolute; top: 14px; left: 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-dark-muted); }
.cursor-play .target { padding: 14px 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-ink-border-strong); color: #fff; font-weight: 600; font-size: 15px; }
.cursor-play .target[data-cursor="open"] { background: rgba(255,255,255,.04); }
.ccursor { position: absolute; top: 0; left: 0; z-index: 20; pointer-events: none; border-radius: 50%; transform: translate(-50%,-50%); transition: width var(--motion-duration-standard) var(--motion-easing-cursor), height var(--motion-duration-standard) var(--motion-easing-cursor), background var(--motion-duration-standard) var(--motion-easing-cursor), border-color var(--motion-duration-standard) var(--motion-easing-cursor); }
.ccursor { width: 10px; height: 10px; background: var(--color-brand-primary); border: 0; }
.ccursor.is-lg { width: 60px; height: 60px; background: rgba(var(--color-brand-primary-rgb),.16); border: 1.5px solid var(--color-brand-primary); }
.ccursor svg { width: 0; height: 0; opacity: 0; color: #fff; transition: opacity var(--motion-duration-fast); }
.ccursor.is-open { width: 56px; height: 56px; background: transparent; border: 1.5px solid #fff; }
.ccursor.is-open svg { width: 18px; height: 18px; opacity: 1; }
@media (hover: none) { .cursor-play { cursor: auto; } .ccursor { display: none; } }

/* ---------------------------------------------------------------
   6 · HERO PROTOTYPE
   --------------------------------------------------------------- */
.hero {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 460px;
  display: flex; align-items: center; background: var(--color-ink); isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  background-image: linear-gradient(120deg, rgba(11,16,32,.92), rgba(11,16,32,.45)), url("images/stock/texture-hero-dark-1600w-548f75cf.jpg"); }
.hero[data-parallax] .hero__bg { transition: transform var(--motion-duration-cinematic) var(--motion-easing-soft); }
.hero__wipe { position: absolute; inset: 0; z-index: 2; background: var(--color-brand-primary); transform: translateX(-101%); }
.hero.is-in .hero__wipe { transform: translateX(101%); transition: transform var(--motion-duration-cinematic) var(--motion-easing-cinematic) .15s; }
.hero__inner { position: relative; z-index: 3; padding: 56px; max-width: 620px; }
.hero__eyebrow { color: var(--color-brand-primary); }
.hero h2 { font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.05; letter-spacing: -.02em; color: #fff; margin: 12px 0 0; }
.hero h2 .ln { display: block; overflow: hidden; }
.hero h2 .ln > span { display: block; transform: translateY(101%); transition: transform var(--motion-duration-reveal) var(--motion-easing-reveal); }
.hero.is-in h2 .ln:nth-child(1) > span { transition-delay: .35s; }
.hero.is-in h2 .ln:nth-child(2) > span { transition-delay: calc(.35s + var(--motion-delay-stagger-md)); }
.hero.is-in h2 .ln:nth-child(3) > span { transition-delay: calc(.35s + 2*var(--motion-delay-stagger-md)); }
.hero.is-in h2 .ln > span { transform: none; }
.hero__lead, .hero__cta { opacity: 0; transform: translateY(var(--motion-distance-small)); transition: opacity var(--motion-duration-reveal) var(--motion-easing-enter), transform var(--motion-duration-reveal) var(--motion-easing-enter); }
.hero__lead { color: #C7CEC9; font-size: 17px; line-height: 1.6; margin: 20px 0 0; max-width: 440px; }
.hero.is-in .hero__lead { opacity: 1; transform: none; transition-delay: .9s; }
.hero__cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero.is-in .hero__cta { opacity: 1; transform: none; transition-delay: 1.05s; }
.hero__dots { position: absolute; z-index: 3; right: 56px; bottom: 40px; display: flex; gap: 8px; }
.hero__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); transition: width var(--motion-duration-standard) var(--motion-easing-standard), background var(--motion-duration-standard); }
.hero__dots i.on { width: 26px; border-radius: 6px; background: var(--color-brand-primary); }
.hero__scroll { position: absolute; z-index: 3; left: 56px; bottom: 38px; display: flex; align-items: center; gap: 12px; color: #C7CEC9; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hero__scroll .ln { width: 38px; height: 1.5px; background: rgba(255,255,255,.4); position: relative; overflow: hidden; }
.hero__scroll .ln::after { content: ""; position: absolute; inset: 0; background: var(--color-brand-primary); animation: scrollLine 1.8s var(--motion-easing-standard) infinite; }
@keyframes scrollLine { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }
@media (max-width: 640px) { .hero__inner { padding: 32px; } .hero h2 { font-size: 32px; } .hero__scroll { display: none; } }

/* ---------------------------------------------------------------
   7 · SECTION-HEADING + SERVICE-GRID PATTERNS
   --------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-tile { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 26px; background: var(--color-bg-page); transition: transform var(--motion-duration-standard) var(--motion-easing-standard), box-shadow var(--motion-duration-standard) var(--motion-easing-standard), border-color var(--motion-duration-standard); }
.svc-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-tile__ic { width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--color-brand-tint); color: var(--color-text-brand); display: grid; place-items: center; transition: transform var(--motion-duration-standard) var(--motion-easing-standard); }
/* Palette distribution across service tiles: blue (default) / sky / violet,
   so the full logo palette reads across the grid instead of one color. */
.svc-tile:nth-child(3n+2) .svc-tile__ic { background: var(--color-brand-secondary-tint); color: var(--color-text-brand-secondary); }
.svc-tile:nth-child(3n) .svc-tile__ic { background: var(--wda-violet-100); color: var(--wda-violet); }
.svc-tile:hover .svc-tile__ic { transform: scale(1.08) rotate(-4deg); }
.svc-tile__ic svg { width: 24px; height: 24px; }
.svc-tile h4 { margin: 16px 0 6px; font-size: 18px; }
.svc-tile p { margin: 0 0 16px; color: var(--color-text-secondary); font-size: 14px; }

/* ---------------------------------------------------------------
   8 · PORTFOLIO HOVER CARD
   --------------------------------------------------------------- */
.pf { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--color-ink); cursor: pointer; }
.pf__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--motion-duration-cinematic) var(--motion-easing-soft), filter var(--motion-duration-emphasis) var(--motion-easing-standard); }
.pf:hover .pf__img { transform: scale(1.06); filter: brightness(.42); }
.pf__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,16,32,.85), transparent 60%); opacity: .7; transition: opacity var(--motion-duration-emphasis); }
.pf:hover .pf__veil { opacity: 1; }
.pf__body { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; }
.pf__cat { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-primary); opacity: 0; transform: translateY(10px); transition: all var(--motion-duration-standard) var(--motion-easing-enter); }
.pf__title { overflow: hidden; }
.pf__title span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #fff; transform: translateY(105%); transition: transform var(--motion-duration-emphasis) var(--motion-easing-reveal); }
.pf__meta { display: flex; gap: 10px; margin-top: 12px; opacity: 0; }
.pf__meta span { font-size: 12px; color: #C7CEC9; padding: 4px 10px; border: 1px solid var(--color-ink-border-strong); border-radius: var(--radius-pill); transform: translateY(8px); opacity: 0; transition: all var(--motion-duration-standard) var(--motion-easing-enter); }
.pf:hover .pf__cat { opacity: 1; transform: none; transition-delay: .05s; }
.pf:hover .pf__title span { transform: none; }
.pf:hover .pf__meta { opacity: 1; }
.pf:hover .pf__meta span { opacity: 1; transform: none; }
.pf:hover .pf__meta span:nth-child(1) { transition-delay: .14s; }
.pf:hover .pf__meta span:nth-child(2) { transition-delay: .2s; }
.pf__arrow { position: absolute; top: 20px; right: 20px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: var(--color-brand-primary); color: var(--color-text-on-brand); display: grid; place-items: center; opacity: 0; transform: scale(.6) rotate(-30deg); transition: all var(--motion-duration-emphasis) var(--motion-easing-standard); }
.pf:hover .pf__arrow { opacity: 1; transform: none; }
.pf__arrow svg { width: 18px; height: 18px; }
/* touch: surface content without hover */
.pf--touch .pf__veil { opacity: 1; }
.pf--touch .pf__cat, .pf--touch .pf__meta, .pf--touch .pf__meta span { opacity: 1; transform: none; }
.pf--touch .pf__title span { transform: none; }
.pf--touch .pf__img { filter: brightness(.5); }

/* ---------------------------------------------------------------
   9 · PRICING / FAQ MOTION (faq base lives in kit.css)
   --------------------------------------------------------------- */
.price-feat { display: flex; flex-direction: column; gap: 10px; }
.price-feat > * { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-duration-standard) var(--motion-easing-enter), transform var(--motion-duration-standard) var(--motion-easing-enter); transition-delay: calc(var(--i,0) * var(--motion-delay-stagger-xs)); }
.is-in .price-feat > * { opacity: 1; transform: none; }
.faq__a-inner > * { transition: opacity var(--motion-duration-emphasis) var(--motion-easing-enter); }

/* ---------------------------------------------------------------
   10 · MODAL DEMO
   --------------------------------------------------------------- */
.mdemo { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 360px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); display: grid; place-items: center; }
.mdemo__back { position: absolute; inset: 0; background: var(--color-overlay); opacity: 0; visibility: hidden; transition: opacity var(--motion-duration-emphasis) var(--motion-easing-standard), visibility var(--motion-duration-emphasis); }
.mdemo.is-open .mdemo__back { opacity: 1; visibility: visible; }
.mdemo__win { position: relative; z-index: 2; width: min(420px, 86%); background: var(--color-bg-page); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px; opacity: 0; transform: translateY(22px) scale(.98); visibility: hidden; transition: opacity var(--motion-duration-emphasis) var(--motion-easing-enter), transform var(--motion-duration-emphasis) var(--motion-easing-enter), visibility var(--motion-duration-emphasis); }
.mdemo.is-open .mdemo__win { opacity: 1; transform: none; visibility: visible; }
.mdemo__win h4 { margin: 0 0 4px; font-size: 22px; }
.mdemo__win p { margin: 0 0 18px; color: var(--color-text-muted); font-size: 14px; }
.mdemo__win .field { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-duration-standard) var(--motion-easing-enter), transform var(--motion-duration-standard) var(--motion-easing-enter); }
.mdemo.is-open .mdemo__win .field { opacity: 1; transform: none; }
.mdemo.is-open .mdemo__win .field:nth-of-type(1) { transition-delay: .18s; }
.mdemo.is-open .mdemo__win .field:nth-of-type(2) { transition-delay: .26s; }
.mdemo.is-open .mdemo__win .mbtn { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-duration-standard) var(--motion-easing-enter) .34s, transform var(--motion-duration-standard) var(--motion-easing-enter) .34s; }
.mdemo.is-open .mdemo__win .mbtn { opacity: 1; transform: none; }
.mdemo__x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--color-bg-surface); color: var(--color-text-secondary); cursor: pointer; display: grid; place-items: center; transition: background var(--motion-duration-fast), transform var(--motion-duration-fast); }
.mdemo__x:hover { background: var(--color-bg-surface-2); transform: rotate(90deg); }
.mdemo__ok { text-align: center; }
.mdemo__ok .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--color-state-success-tint); color: var(--color-state-success); display: grid; place-items: center; margin: 0 auto 14px; animation: tickPop var(--motion-duration-emphasis) var(--motion-easing-enter) both; }
.mdemo__ok .tick svg { width: 26px; height: 26px; }
@keyframes tickPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* ---------------------------------------------------------------
   11 · VIDEO PULSE
   --------------------------------------------------------------- */
.videobox { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; background-size: cover; background-position: center;
  background-image: linear-gradient(rgba(11,16,32,.35),rgba(11,16,32,.55)), url("images/stock/texture-cta-dark-1400w-18556b76.jpg"); display: grid; place-items: center; cursor: pointer; }
.playbtn { position: relative; width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--color-brand-primary); color: var(--color-text-on-brand); display: grid; place-items: center; cursor: pointer; transition: transform var(--motion-duration-standard) var(--motion-easing-standard); }
.playbtn svg { width: 26px; height: 26px; margin-left: 3px; }
.videobox:hover .playbtn { transform: scale(1.08); }
.playbtn::before, .playbtn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-brand-primary); animation: pulseRing 2.4s var(--motion-easing-soft) infinite; }
.playbtn::after { animation-delay: 1.2s; }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }

/* ---------------------------------------------------------------
   12 · PROGRESS BARS
   --------------------------------------------------------------- */
.prg { display: grid; gap: 18px; }
.prg__row .prg__top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.prg__top .pct { font-family: var(--font-display); color: var(--color-text-brand); }
.prg__track { height: 8px; border-radius: var(--radius-pill); background: var(--color-bg-surface-2); overflow: hidden; }
.section--ink .prg__track { background: var(--color-ink-elevated); }
.prg__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-primary-hover)); width: 0; transition: width var(--motion-duration-cinematic) var(--motion-easing-soft); transition-delay: calc(var(--i,0) * var(--motion-delay-stagger-sm)); }
.is-in .prg__fill { width: var(--v, 0%); }

/* ---------------------------------------------------------------
   13 · TYPEWRITER + PARTICLES
   --------------------------------------------------------------- */
.tw { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--color-text-primary); }
.tw .static { color: var(--color-text-primary); }
.tw .type { color: var(--color-text-brand); }
.tw .caret { display: inline-block; width: 3px; height: 1em; background: var(--color-brand-primary); margin-left: 3px; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw .caret { animation: none; } }

.particles-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 320px; background: var(--color-ink); display: flex; align-items: center; }
.particles-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.particles-wrap__content { position: relative; z-index: 2; padding: 48px; }
.particles-wrap h3 { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: #fff; margin: 0 0 12px; letter-spacing: -.01em; }
.particles-wrap p { color: #C7CEC9; max-width: 420px; margin: 0; }

/* ---------------------------------------------------------------
   14 · HEADER HIDE/REVEAL + FULLSCREEN NAV DEMOS
   --------------------------------------------------------------- */
.scrolldemo { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-page); }
.scrolldemo__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--color-ink); color: #fff; z-index: 5; transition: transform var(--motion-duration-emphasis) var(--motion-easing-exit); }
.scrolldemo__head.is-hidden { transform: translateY(-100%); }
.scrolldemo__head .lg { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }
.scrolldemo__scroll { height: 280px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.scrolldemo__scroll .blk { min-height: 64px; }

.burger3 { width: 30px; height: 16px; position: relative; cursor: pointer; }
.burger3 span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform var(--motion-duration-emphasis) var(--motion-easing-reveal), opacity var(--motion-duration-fast); }
.burger3 span:nth-child(1) { top: 0; } .burger3 span:nth-child(2) { top: 7px; } .burger3 span:nth-child(3) { top: 14px; }
.burger3.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger3.is-open span:nth-child(2) { opacity: 0; }
.burger3.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.navdemo { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); }
.navdemo__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background: var(--color-ink); color: #fff; position: relative; z-index: 30; }
.navdemo__panel { position: absolute; inset: 0; z-index: 20; background: var(--color-ink); transform: translateX(101%); transition: transform var(--motion-duration-page) var(--motion-easing-cinematic); display: grid; grid-template-columns: 1.1fr 1fr; }
.navdemo.is-open .navdemo__panel { transform: none; }
.navdemo__links { padding: 56px; display: flex; flex-direction: column; gap: 6px; align-self: center; }
.navdemo__links a { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #fff; text-decoration: none; opacity: 0; transform: translateY(24px); transition: opacity var(--motion-duration-emphasis) var(--motion-easing-enter), transform var(--motion-duration-emphasis) var(--motion-easing-enter), color var(--motion-duration-fast); }
.navdemo.is-open .navdemo__links a { opacity: 1; transform: none; }
.navdemo.is-open .navdemo__links a:nth-child(1) { transition-delay: .25s; }
.navdemo.is-open .navdemo__links a:nth-child(2) { transition-delay: calc(.25s + var(--motion-delay-stagger-sm)); }
.navdemo.is-open .navdemo__links a:nth-child(3) { transition-delay: calc(.25s + 2*var(--motion-delay-stagger-sm)); }
.navdemo.is-open .navdemo__links a:nth-child(4) { transition-delay: calc(.25s + 3*var(--motion-delay-stagger-sm)); }
.navdemo.is-open .navdemo__links a:nth-child(5) { transition-delay: calc(.25s + 4*var(--motion-delay-stagger-sm)); }
.navdemo__links a:hover { color: var(--color-brand-primary); }
.navdemo__media { position: relative; overflow: hidden; }
.navdemo__media .img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity var(--motion-duration-emphasis) var(--motion-easing-standard), transform var(--motion-duration-cinematic) var(--motion-easing-soft); }
.navdemo__media .img.on { opacity: .9; transform: none; }
.navdemo__close { width: 36px; height: 16px; }
@media (max-width: 640px) { .navdemo__panel { grid-template-columns: 1fr; } .navdemo__media { display: none; } .navdemo__links a { font-size: 24px; } }

/* ---------------------------------------------------------------
   15 · PAGE-TRANSITION OVERLAY DEMO
   --------------------------------------------------------------- */
.pagedemo { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 300px; border: 1px solid var(--color-border-default); background: var(--color-bg-page); }
.pagedemo__screen { position: absolute; inset: 0; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pagedemo__overlay { position: absolute; inset: 0; z-index: 10; background: var(--color-ink); transform: translateX(-101%); }
.pagedemo.run .pagedemo__overlay { animation: pageWipe var(--motion-duration-page) var(--motion-easing-cinematic) forwards; }
@keyframes pageWipe { 0% { transform: translateX(-101%); } 45% { transform: translateX(0); } 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }
.pagedemo__loader { position: absolute; z-index: 11; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.pagedemo.run .pagedemo__loader { animation: loaderShow var(--motion-duration-page) linear forwards; }
@keyframes loaderShow { 0%,12% { opacity: 0; } 20%,40% { opacity: 1; } 55%,100% { opacity: 0; } }
.ring { width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-left-color: #fff; animation: ringSpin 1.2s var(--motion-easing-reveal) infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   16 · FLOW TIMELINE
   --------------------------------------------------------------- */
.flow { display: grid; gap: 14px; }
.flow__step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.flow__n { width: 40px; height: 40px; border-radius: 50%; background: var(--color-ink); color: #fff; font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; }
.flow__step.brand .flow__n { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.flow__c { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 16px 18px; background: var(--color-bg-page); }
.flow__c h5 { margin: 0 0 4px; font-size: 15px; }
.flow__c p { margin: 0; font-size: 13.5px; color: var(--color-text-muted); }

/* ---------------------------------------------------------------
   17 · HANDOFF TABLE + CATEGORY CARDS
   --------------------------------------------------------------- */
.handoff { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-page); }
.handoff__row { display: grid; grid-template-columns: 200px 1fr; gap: 0; border-top: 1px solid var(--color-border-default); }
.handoff__row:first-child { border-top: 0; }
.handoff__k { padding: 12px 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-bg-surface); }
.handoff__v { padding: 12px 16px; font-size: 13.5px; color: var(--color-text-secondary); }
.handoff__v code, .handoff__k + .handoff__v .mono { font-family: var(--font-display); font-size: 12.5px; color: var(--color-text-primary); }
.handoff__v .mono { font-family: var(--font-display); font-size: 12.5px; color: var(--color-text-brand); }

.catgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.catcard { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 24px; background: var(--color-bg-page); }
.catcard__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 14px; }
.catcard--core .catcard__tag { background: var(--color-brand-tint); color: var(--color-text-brand); }
.catcard--opt  .catcard__tag { background: var(--color-state-info-tint); color: var(--color-state-info); }
.catcard--rst  .catcard__tag { background: var(--color-state-warning-tint); color: var(--color-state-warning); }
.catcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.catcard li { font-size: 13.5px; color: var(--color-text-secondary); display: flex; gap: 9px; align-items: flex-start; }
.catcard li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-primary); margin-top: 7px; }

/* ---------------------------------------------------------------
   18 · SHOWCASE FRAMES (phone mock)
   --------------------------------------------------------------- */
.phone { width: 280px; border-radius: 34px; background: var(--color-ink); padding: 12px; box-shadow: var(--shadow-lg); flex: none; }
.phone__screen { border-radius: 24px; overflow: hidden; background: var(--color-bg-page); aspect-ratio: 9/19; position: relative; }
.showcase-rail { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; }

/* matrix legend */
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 13px; color: var(--color-text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; }

/* ---------------------------------------------------------------
   GLOBAL REDUCED-MOTION GUARD for doc-only loops
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dircard:hover .dircard__viz [class^="axis"],
  .hero__scroll .ln::after,
  .playbtn::before, .playbtn::after,
  .tok-run .tok__dot { animation: none !important; }
  .ring { animation-duration: 2.4s; }
  [data-reveal], [data-stagger] > *, .hero h2 .ln > span,
  .hero__lead, .hero__cta { transition-duration: 160ms !important; transition-delay: 0ms !important; }
  [data-reveal="wipe"]::after, [data-reveal="mask"]::after, .hero__wipe { display: none; }
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 860px) {
  .curveboard, .cursorboard { grid-template-columns: repeat(2,1fr); }
  .svc-grid, .dirgrid, .catgrid { grid-template-columns: 1fr; }
  .tok__row { grid-template-columns: 1fr; gap: 8px; }
  .hero h2 { font-size: 34px; }
  .handoff__row { grid-template-columns: 1fr; }
  .handoff__k { background: var(--color-bg-surface); }
}