/* The v2 home page (templates/v2.html), loaded after the shared site.css on that page only.
   Tokens only, with the brand's own accent (--accent and its family from Drop).
   The markup holds every visual's finished state. .v2-motion (set by v2.js unless reduced motion) adds the opening
   states and the scroll-driven runs. */

/* ── page tokens ──────────────────────────────────────────────────────── */
.v2 {
  --v2-head: 72px;                         /* the sticky site header */
  --v2-ease: cubic-bezier(.65, 0, .35, 1);
  --shoe: var(--text-dim);
  --shoe-sole: var(--border-light);
  --shoe-line: var(--surface);
}

/* the trail shoe (partials/v2-art.html) */
.s-upper { fill: var(--shoe); }
.s-sole, .s-lug { fill: var(--shoe-sole); }
.s-lug { opacity: .8; }
.s-line { fill: none; stroke: var(--shoe-line); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }

/* ── the "Let's ..." titles and their one supporting line ─────────────── */
.v2-title { font-size: clamp(2.25rem, 1.25rem + 3.6vw, 4.375rem); font-weight: 760; letter-spacing: -.042em; line-height: 1.02; }
h1.v2-title { max-width: 11ch; font-size: clamp(2.875rem, 1.3rem + 6vw, 6.75rem); letter-spacing: -.05em; line-height: .96; }
h1.v2-title:lang(nl) { max-width: 9ch; }  /* the short Dutch title breaks in two like EN and FR, clear of the art */
.v2-line { margin-top: var(--space-5); max-width: 33rem; font-size: clamp(1.0625rem, .97rem + .45vw, 1.3125rem); line-height: 1.5; color: var(--text-muted); }

/* ── 1. look: the hero and its background loop ────────────────────────── */
.v2-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; min-height: calc(100svh - var(--v2-head)); padding-block: var(--space-10);
}
.look-copy { position: relative; }
.look-copy .v2-line { max-width: 32rem; }  /* wide enough for each hero sentence on its own line */
@media (min-width: 1400px) {  /* the same for the longer Dutch and French sentences, where they stay clear of the art */
  .look-copy .v2-line:lang(nl) { max-width: 39rem; }
  .look-copy .v2-line:lang(fr) { max-width: 43rem; }
}
.look-cta { margin-top: var(--space-8); }
.look-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hl { position: absolute; top: 50%; right: 0; height: 100%; max-height: 860px; width: auto; aspect-ratio: 12 / 7; overflow: visible; transform: translateY(-50%); }
@media (max-aspect-ratio: 1 / 1) {
  .v2-hero { align-items: flex-start; padding-top: var(--space-9); }
  .hl { top: auto; right: auto; bottom: 0; left: -62%; width: 170%; height: auto; max-height: none; transform: none; overflow: hidden; }
}

/* One loop of 12s. Records drift in tilted, with a broken or short value (move), straighten and line up (cleanse),
   slide into the record and fill it bar by bar (enrich), then it pulses out to the channels (activate).
   The record, its wires and the channels never leave. Without motion they show the finished state: one complete
   record, delivered to every channel. --t0 starts the loop with the record full, about to send. */
.hl { --t0: -7.4s; }
.hl-rec { fill: var(--surface); stroke: var(--border-light); stroke-width: 1.25; }
.hl-th, .hl-bar { fill: var(--surface-3); }
.hl-fill { fill: var(--accent); opacity: .45; transform-box: fill-box; transform-origin: 0 50%; }
.deck1 { opacity: .7; }
.deck2 { opacity: .4; }
.mc-b { transform-box: fill-box; transform-origin: center; }
.mc-th { fill: var(--accent-soft); }
.mc-shoe { --shoe: var(--accent); opacity: .7; }
.hl-wire { fill: none; stroke: var(--border-light); stroke-width: 1.25; }
.hl-pulse { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 110; stroke-dashoffset: 10; opacity: 0; }
.ch-ring { fill: var(--accent-soft); stroke: var(--border-light); stroke-width: 1.25; }
.ch-ping { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ch-ic { color: var(--accent-ink); }
.ch-ic .chan { width: 100%; height: 100%; }
.lr { --mx: 760px; --my: 350px; opacity: 0; transform: translate(var(--mx), var(--my)); }

/* move and cleanse: each record has its own start, mess and stagger (--d) */
.lr { animation: lr 12s var(--v2-ease) calc(var(--d) + var(--t0)) infinite; }
/* they come in from above and below, right of the headline, so they never cross the copy */
.lr1 { --d: 0s; --sx: -230px; --sy: -440px; --r: -11deg; --cx: -150px; --cy: -140px; }
.lr2 { --d: .55s; --sx: -110px; --sy: 450px; --r: 8deg; --cx: -140px; --cy: 130px; }
.lr3 { --d: 1.1s; --sx: -330px; --sy: -420px; --r: -6deg; --cx: -165px; --cy: -60px; }
.lr4 { --d: 1.65s; --sx: -170px; --sy: 440px; --r: 13deg; --cx: -150px; --cy: 60px; }
.lr5 { --d: 2.2s; --sx: -380px; --sy: 430px; --r: -9deg; --cx: -170px; --cy: 150px; }
.lr-b { animation: bob 3.2s ease-in-out infinite alternate; }
.lr2 .lr-b { animation-duration: 2.7s; }
.lr3 .lr-b { animation-duration: 3.7s; }
.lr4 .lr-b { animation-duration: 2.9s; }
.lr5 .lr-b { animation-duration: 3.4s; }
.rb-bad { animation: bad 12s ease-out calc(var(--d) + var(--t0)) infinite; }
.rb-short { transform-box: fill-box; transform-origin: 0 50%; animation: even 12s var(--v2-ease) calc(var(--d) + var(--t0)) infinite; }
@keyframes lr {
  0% { opacity: 0; transform: translate(calc(var(--mx) + var(--sx)), calc(var(--my) + var(--sy))) rotate(var(--r)); }
  6% { opacity: 1; }
  26% { transform: translate(calc(var(--mx) + var(--cx)), calc(var(--my) + var(--cy))) rotate(var(--r)); }
  34% { opacity: 1; transform: translate(calc(var(--mx) - 160px), var(--my)) rotate(0deg); }
  40% { opacity: .9; transform: translate(calc(var(--mx) - 24px), calc(var(--my) - 12px)) scale(.94); }
  43%, 100% { opacity: 0; transform: translate(calc(var(--mx) - 12px), calc(var(--my) - 12px)) scale(.9); }
}
@keyframes bob { to { transform: translateY(-7px); } }
@keyframes bad { 0%, 25% { fill: var(--error); opacity: .5; } 32%, 100% { fill: var(--surface-3); opacity: 1; } }
@keyframes even { 0%, 25% { transform: scaleX(.4); } 32%, 100% { transform: scaleX(1); } }

/* enrich: a bar fills as each record slides in, the photo last, and the record nudges on every arrival */
.mc .hl-fill { animation: fill 12s var(--v2-ease) calc(var(--d) + var(--t0)) infinite; }
.f1 { --d: 0s; } .f2 { --d: .55s; } .f3 { --d: 1.1s; } .f4 { --d: 1.65s; }
.mc-th { --d: 2.2s; animation: thumb 12s ease-out calc(var(--d) + var(--t0)) infinite; }
.mc-shoe { --d: 2.2s; animation: shoe-in 12s ease-out calc(var(--d) + var(--t0)) infinite; }
.mc-b { animation: bump 12s ease-out var(--t0) infinite; }
.mc-rec { animation: send 12s ease-out var(--t0) infinite; }
@keyframes fill { 0%, 40% { transform: scaleX(0); opacity: .45; } 44%, 86% { transform: scaleX(1); opacity: .45; } 93%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes thumb { 0%, 40% { fill: var(--surface-3); } 44%, 86% { fill: var(--accent-soft); } 93%, 100% { fill: var(--surface-3); } }
@keyframes shoe-in { 0%, 40% { opacity: 0; } 44%, 86% { opacity: .7; } 93%, 100% { opacity: 0; } }
@keyframes bump {
  0%, 40%, 43%, 44.6%, 47.6%, 49.2%, 52.2%, 53.8%, 56.8%, 58.3%, 61.3%, 100% { transform: scale(1); }
  41.2%, 45.8%, 50.4%, 55%, 59.5% { transform: scale(1.025); }
}
@keyframes send { 0%, 61% { stroke: var(--border-light); } 63% { stroke: var(--accent); } 70%, 100% { stroke: var(--border-light); } }

/* activate: a pulse runs down each wire and the channel lights up as it lands */
.hl-pulse { animation: out 12s ease-in calc(var(--d) + var(--t0)) infinite; }
.p1, .ch1 { --d: 0s; } .p2, .ch2 { --d: .12s; } .p3, .ch3 { --d: .24s; } .p4, .ch4 { --d: .36s; }
.ch-ring { animation: ch-ring 12s ease-out calc(var(--d) + var(--t0)) infinite; }
.ch-ic { animation: ch-ic 12s ease-out calc(var(--d) + var(--t0)) infinite; }
.ch-ping { animation: ch-ping 12s ease-out calc(var(--d) + var(--t0)) infinite; }
@keyframes out { 0%, 62% { opacity: 0; stroke-dashoffset: 10; } 63% { opacity: 1; } 71% { opacity: 1; stroke-dashoffset: -100; } 72%, 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes ch-ring { 0%, 70% { fill: var(--bg); stroke: var(--border-light); } 72.5%, 88% { fill: var(--accent-soft); stroke: var(--accent); } 97%, 100% { fill: var(--bg); stroke: var(--border-light); } }
@keyframes ch-ic { 0%, 70% { color: var(--text-dim); } 72.5%, 88% { color: var(--accent-ink); } 97%, 100% { color: var(--text-dim); } }
@keyframes ch-ping { 0%, 71% { opacity: 0; transform: scale(1); } 72% { opacity: .8; } 84%, 100% { opacity: 0; transform: scale(1.6); } }
.v2-hero.is-off .hl * { animation-play-state: paused; }

/* ── scenes: a pinned stage that scroll plays (move, cleanse, enrich) ─── */
.v2-scene { position: relative; }
.v2-pin { display: flex; flex-direction: column; justify-content: center; gap: var(--space-7); padding-block: var(--space-10); }
/* each scene pins for a short stretch only: the length beyond one screen is the scroll it plays over */
.v2-motion .v2-scene { height: var(--len, 165vh); }
.v2-motion .v2-move { --len: 165vh; }
.v2-motion .v2-cleanse { --len: 175vh; }
.v2-motion .v2-enrich { --len: 155vh; }
.v2-motion .v2-pin { position: sticky; top: var(--v2-head); min-height: calc(100svh - var(--v2-head)); padding-block: var(--space-7); }
.v2-motion .v2-scene.no-pin { height: auto; }
.v2-motion .no-pin .v2-pin { position: static; min-height: 0; padding-block: var(--space-10); }
@media (max-width: 760px) { .v2-pin { gap: var(--space-6); } }

/* ── 2. move: rows lift out of the old window and land as PIM cards ───── */
.v2-move { --p: 1; }
.mv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: center; }
.k1 { --s: .02; --tilt: -6deg; } .k2 { --s: .12; --tilt: 4deg; } .k3 { --s: .22; --tilt: -3deg; }
.k4 { --s: .32; --tilt: 6deg; } .k5 { --s: .42; --tilt: -5deg; } .k6 { --s: .52; --tilt: 3deg; }

.old {
  background: var(--surface-3); border: 1px solid var(--border-light); border-radius: 3px; box-shadow: var(--shadow-1);
  font-size: .8125rem; color: var(--text-muted); overflow: hidden;
}
.old-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 5px 6px 5px 10px; background: var(--border-light); color: var(--text); font-size: .75rem; font-weight: 600; }
.old-ctl { display: flex; gap: 3px; }
.old-ctl i { width: 14px; height: 12px; border: 1px solid var(--text-dim); border-radius: 1px; }
.old-menu { display: flex; gap: var(--space-4); padding: 4px 10px; border-bottom: 1px solid var(--border-light); font-size: .75rem; color: var(--text-dim); }
.old-rows { list-style: none; padding: 4px 0; font-family: var(--font-mono); }
.old-row {
  display: grid; grid-template-columns: 5ch minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-3); align-items: center;
  min-height: 34px; padding-inline: 10px; border-bottom: 1px dotted var(--border-light); white-space: nowrap;
  --q: clamp(0, (var(--p) - var(--s)) / .3, 1);
  opacity: calc(1 - .72 * min(1, var(--q) * 5));
}
.old-row:nth-child(even) { background: var(--surface-2); }
.old-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.old-row .oc, .old-row .of { color: var(--text-dim); }

.pim { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.pim-bar { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.pim-ttl { font-weight: 750; letter-spacing: -.01em; }
.pim-search { flex: 1; max-width: 15rem; height: 30px; margin-left: auto; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.pim-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.pim-slot { border: 1px dashed var(--border-light); border-radius: var(--radius); }
.pim-card {
  position: relative; z-index: 2; display: grid; gap: 6px; margin: -1px; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1);
  will-change: transform, opacity;
  --q: clamp(0, (var(--p) - var(--s)) / .3, 1);
  transform:
    translate(calc(var(--dx, 0px) * (1 - var(--q))), calc(var(--dy, 0px) * (1 - var(--q)) - var(--q) * (1 - var(--q)) * 200px))
    scale(calc(.42 + .58 * var(--q))) rotate(calc((1 - var(--q)) * var(--tilt)));
  opacity: clamp(0, var(--q) * 7, 1);
}
.pim-th { display: grid; place-items: center; aspect-ratio: 2 / 1; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--accent-ink); }
.pim-th .glyph { width: 32px; height: 32px; }
.pim-name {  /* up to two lines, for the longer Dutch and French names */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word;
  font-size: .9375rem; font-weight: 650; line-height: 1.25;
}
.pim-type { justify-self: start; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: .75rem; color: var(--text-muted); }
@media (max-width: 860px) {
  .mv { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .old-row { grid-template-columns: 5ch minmax(0, 1fr); min-height: 28px; }
  .old-row .of { display: none; }
}
@media (max-width: 560px) {
  .pim { padding: var(--space-3); }
  .pim-bar { margin-bottom: var(--space-3); }
  .pim-grid { gap: var(--space-2); }
  .pim-card { padding: var(--space-2); gap: 4px; }
  .pim-th { aspect-ratio: 16 / 10; }
  .pim-th .glyph { width: 24px; height: 24px; }
  .pim-name { font-size: .8125rem; }
  .pim-type { display: none; }
}

/* ── 3. cleanse: the table fixes itself, one [data-fix] at a time ─────── */
.gt {
  padding: var(--space-2) var(--space-5) var(--space-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  font-size: clamp(.875rem, .78rem + .45vw, 1.125rem); font-variant-numeric: tabular-nums;
}
.gt-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: var(--space-5);
  align-items: center; border-bottom: 1px solid var(--border);
}
.gt-c { min-width: 0; margin: 9px -8px; padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-c.c3 { text-align: right; }
.gt-head .gt-c { margin-block: 8px; font-size: .8125rem; font-weight: 600; color: var(--text-dim); }
.gt-rw { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease-out) .5s, opacity .3s ease .6s; }
.gt-rw > .gt-row { min-height: 0; overflow: hidden; }
.gt-rw:last-child > .gt-row { border-bottom: 0; }
.gt .raw { display: none; }
.gt .ok { display: inline-block; }
.gt-rw.is-dup { grid-template-rows: 0fr; opacity: 0; }
.gt-rw.is-dup > .gt-row { border-bottom-color: transparent; }

/* opening state: raw values with a wavy underline, misaligned weights, the duplicates still in */
.v2-motion .gt [data-fix]:not(.done) .raw { display: inline-block; text-decoration: underline wavy var(--error-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.v2-motion .gt [data-fix]:not(.done) .ok { display: none; }
.v2-motion .gt .c3[data-fix]:not(.done) { text-align: left; }
.v2-motion .gt-rw.is-dup:not(.done) { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s; }
.v2-motion .gt-rw.is-dup:not(.done) > .gt-row { border-bottom-color: var(--border); color: var(--text-muted); }
.v2-motion .gt-rw.is-dup:not(.done) .c1 { text-decoration: underline wavy var(--error-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* each fix lights up in the accent, then settles */
.v2-motion .gt [data-fix].done:not(.gt-rw) { animation: fixed 1.6s var(--ease-out); }
.v2-motion .gt [data-fix].done .ok { animation: snap-in .4s var(--ease-out); }
.v2-motion .gt-rw.done > .gt-row { animation: dup-out .9s var(--ease-out) both; }
@keyframes fixed {
  0%, 35% { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
  100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
}
@keyframes snap-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes dup-out { 0%, 55% { background: var(--accent-soft); color: var(--accent-ink); } 100% { background: transparent; } }
@media (max-width: 560px) {
  .gt { padding-inline: var(--space-3); }
  .gt-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .9fr); gap: var(--space-3); }
  .gt-c { margin: 10px -6px; padding: 2px 6px; white-space: normal; overflow-wrap: break-word; }  /* a long name wraps here */
  .gt-c.c4 { display: none; }
}

/* ── 4. enrich: one product card fills field by field ─────────────────── */
.pc {
  position: relative; width: min(100%, 40rem); padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden;
}
.pc-meter { position: absolute; inset: 0 0 auto; height: 4px; background: var(--surface-3); }
.pc-meter i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--k, 1)); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.pc-top { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.pc-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid transparent; border-radius: var(--radius); background: var(--surface-2); }
.pc-media > * { grid-area: 1 / 1; }
.pc-ph { display: none; color: var(--text-dim); }
.pc-ph svg { width: 28px; height: 28px; }
.pc-shoe { width: 84%; height: auto; }
.pc-id { display: grid; gap: var(--space-1); }
.pc-code { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-dim); }
.pc-name { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.1; }
.pc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); margin: var(--space-6) 0 0; }
.pf.is-wide { grid-column: 1 / -1; }
.pf dt { margin-bottom: 3px; font-size: .75rem; font-weight: 600; color: var(--text-dim); }
.pf dd { margin: 0 -6px; padding: 2px 6px; border-radius: var(--radius-sm); font-size: .9375rem; line-height: 1.45; }
.pf-gap { display: none; width: 70%; height: 1.45em; border: 1px dashed var(--border-light); border-radius: var(--radius-sm); }
.pf.is-wide .pf-gap { width: 88%; }
.pf-val { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border: 1px solid var(--border-light); border-radius: 50%; }
.sw1 { background: var(--text-dim); }
.sw2 { background: var(--terminal-bg); }

/* opening state: empty fields show a dashed gap, the photo is missing */
.v2-motion .pc [data-fix]:not(.done) .pf-val { display: none; }
.v2-motion .pc [data-fix]:not(.done) .pf-gap { display: block; }
.v2-motion .pc [data-fix]:not(.done) dt { color: var(--text-dim); }
.v2-motion .pc-media:not(.done) { border-style: dashed; border-color: var(--border-light); background: transparent; }
.v2-motion .pc-media:not(.done) .pc-ph { display: block; }
.v2-motion .pc-media:not(.done) .pc-shoe { opacity: 0; transform: scale(.85); }
.pc-shoe { transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.v2-motion .pc .pf.done dd { animation: field-in 1.4s var(--ease-out); }
.v2-motion .pc .pf.done .pf-val { animation: type-in .55s steps(18, end); }
.v2-motion .pc-media.done { animation: media-in 1.4s var(--ease-out); }
@keyframes field-in { 0%, 35% { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } 100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; } }
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes media-in { 0%, 35% { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (max-width: 560px) {
  .pc { padding: var(--space-6) var(--space-4) var(--space-5); }
  .pc-top { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--space-4); }
  .pc-fields { gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }
  .pf dd { font-size: .875rem; }
}

/* ── 5. activate: one asset update runs from the DAM through the PIM to every channel ── */
.v2-act { padding-block: var(--space-11); }
.flow-wrap { position: relative; margin-top: var(--space-10); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 96px minmax(0, 1.4fr); align-items: center; }
.fn { position: relative; }
.fn-lbl { position: absolute; bottom: 100%; left: 0; display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: .8125rem; font-weight: 600; color: var(--text-dim); }
.fn-lbl svg { width: 16px; height: 16px; }
.fn-card { position: relative; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.asset { display: grid; gap: var(--space-3); }
.asset .ph { aspect-ratio: 4 / 3; }
.asset-name { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-muted); }
.badge { position: absolute; top: calc(var(--space-4) + 8px); right: calc(var(--space-4) + 8px); padding: 2px 9px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; }
.rec { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.rec .ph { aspect-ratio: 1; }
.rec-txt { display: grid; gap: 7px; min-width: 0; }
.rec-txt b { font-weight: 650; overflow-wrap: break-word; }
.rec-txt i { height: 7px; border-radius: 4px; background: var(--surface-3); }
.rec-txt i + i { width: 60%; }

/* a photo that swaps from the old shot to the new one */
.ph { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.ph > span { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; }
.ph .shoe { width: 80%; height: auto; }
.ph-new { --shoe: var(--accent); --shoe-sole: var(--text-dim); }
.ph-old { opacity: 0; }

.wire { position: relative; align-self: stretch; }
.wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.w-base { fill: none; stroke: var(--border-light); stroke-width: 1.5; }
.w-pulse { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 200; stroke-dashoffset: 14; opacity: 0; }
.w-v { display: none; }

.outs { list-style: none; display: grid; grid-template-rows: repeat(4, 76px); gap: 12px; }
.out {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: var(--space-3); align-items: center;
  padding: 0 var(--space-4) 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.out .ph { width: 52px; height: 52px; }
.out-txt { display: grid; gap: 1px; min-width: 0; }
.out-lbl { font-size: .75rem; font-weight: 600; color: var(--text-dim); }
.out-val { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.out-val.mono { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; }
.out-ic { color: var(--text-dim); }
.out-ic .chan { width: 20px; height: 20px; }
.out-ai { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px; }
.out-say { display: grid; }
.out-say > * { grid-area: 1 / 1; }
.say { font-size: .875rem; line-height: 1.3; }
.dots { display: inline-flex; gap: 4px; align-items: center; opacity: 0; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }

.flow-replay { display: none; position: absolute; top: calc(-40px - var(--space-6)); right: 0; }
.v2-motion .flow-replay { display: inline-grid; }

/* opening state, before the flow has played */
.v2-motion .flow[data-state='idle'] .ph-old { opacity: 1; }
.v2-motion .flow[data-state='idle'] .ph-new { opacity: 0; }
.v2-motion .flow[data-state='idle'] .badge { opacity: 0; }
.v2-motion .flow[data-state='idle'] .say { opacity: 0; }
/* the run: DAM 0s, pulse to the PIM, then out to the channels */
.flow[data-state='run'] .fn-src .ph-old { animation: ph-out .5s var(--ease-out) .15s both; }
.flow[data-state='run'] .fn-src .ph-new { animation: ph-in .5s var(--ease-out) .15s both; }
.flow[data-state='run'] .fn-src .fn-card { animation: lit 1.1s var(--ease-out) .15s; }
.flow[data-state='run'] .badge { animation: pop .45s var(--ease-out) .5s both; }
.flow[data-state='run'] .wire-a .w-pulse { animation: pulse .55s ease-in .7s both; }
.flow[data-state='run'] .fn-hub .ph-old { animation: ph-out .4s var(--ease-out) 1.25s both; }
.flow[data-state='run'] .fn-hub .ph-new { animation: ph-in .4s var(--ease-out) 1.25s both; }
.flow[data-state='run'] .fn-hub .fn-card { animation: lit 1.1s var(--ease-out) 1.25s; }
.flow[data-state='run'] .wire-b .w-pulse { animation: pulse .6s ease-in 1.45s both; }
.flow[data-state='run'] .wire-b .p2 { animation-delay: 1.53s; }
.flow[data-state='run'] .wire-b .p3 { animation-delay: 1.61s; }
.flow[data-state='run'] .wire-b .p4 { animation-delay: 1.69s; }
.flow[data-state='run'] .out .ph-old { animation: ph-out .4s var(--ease-out) var(--at) both; }
.flow[data-state='run'] .out .ph-new { animation: ph-in .4s var(--ease-out) var(--at) both; }
.flow[data-state='run'] .out { animation: lit 1.1s var(--ease-out) var(--at); }
.o1 { --at: 2.05s; } .o2 { --at: 2.13s; } .o3 { --at: 2.21s; } .o4 { --at: 2.29s; }
.flow[data-state='run'] .dots { animation: dots 1.1s ease-in-out 2.29s both; }
.flow[data-state='run'] .dots i:nth-child(2) { animation: blink .5s ease-in-out 2.4s 2 alternate; }
.flow[data-state='run'] .say { animation: ph-in .45s var(--ease-out) 3.3s both; }
@keyframes ph-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ph-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes pulse { 0% { opacity: 1; stroke-dashoffset: 14; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes lit { 0% { border-color: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow), var(--shadow-1); } 100% { box-shadow: 0 0 0 14px transparent, var(--shadow-1); } }
@keyframes dots { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blink { to { opacity: .3; } }

@media (min-width: 900px) and (hover: hover) {
  .flow-wrap:hover .fn-card, .flow-wrap:hover .out { border-color: var(--border-light); }
}
@media (max-width: 899px) {
  .flow { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
  .fn { padding-top: 28px; }
  .fn-lbl { top: 0; bottom: auto; margin: 0; }
  .wire { height: 48px; }
  .wire svg { display: none; }
  .wire::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 1.5px; background: var(--border-light); }
  .wire::after { content: ''; position: absolute; top: 0; left: 50%; width: 9px; height: 9px; margin-left: -3.75px; border-radius: 50%; background: var(--accent); opacity: 0; }
  .flow[data-state='run'] .wire-a::after { animation: drop .5s ease-in .7s both; }
  .flow[data-state='run'] .wire-b::after { animation: drop .5s ease-in 1.45s both; }
  .outs { grid-template-rows: none; grid-auto-rows: minmax(72px, auto); gap: var(--space-3); }
  .asset { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--space-4); }
  .asset .ph { aspect-ratio: 1; }
  .badge { position: static; justify-self: start; grid-column: 2; grid-row: 1; align-self: start; margin-top: 4px; }
  .asset-name { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 6px; }
  .flow-replay { top: calc(-40px - var(--space-5)); }
}
@keyframes drop { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }

/* ── 6. talk ──────────────────────────────────────────────────────────── */
.v2-talk { padding-block: var(--space-11); }
.v2-talk .mail { margin-top: var(--space-7); }
@media (max-width: 860px) { .v2-act, .v2-talk { padding-block: var(--space-10); } }