/* ─────────────────────────────────────────────
     Lab · Dictionary of motion
     98 entries · 13 categories · CSS-keyframe driven.
     Each word's animation embodies its definition.
     Hover (or scroll into view) to play one-shots.
     A handful breathe / pulse / sway continuously.

     Restyled for ivojerkovic.com — warm-dark editorial.
     Page-scoped: only loaded on /lab/dictionary-of-motion.
     ───────────────────────────────────────────── */

  /* Aliases over the site's tokens so we can keep the demo's local names. */
  .dom {
    --line:        var(--rule);
    --line-strong: var(--rule);
    --ink-soft:    var(--ink-dim);
    --paper-2:     var(--bg-elevated);
    color: var(--ink);
  }

  .dom { padding-block: 2.5rem 6rem; }

  /* ───── Header ───── */
  .dom header.top{
    border-bottom:1px solid var(--rule);
    padding-bottom:2.5rem;margin-bottom:1.5rem;
    display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end;
  }
  .dom header.top h1{
    font:700 clamp(2.5rem,6vw,4.5rem)/0.95 var(--font-serif);
    letter-spacing:-.02em;margin:0;color:var(--ink);
  }
  .dom header.top h1 em{font-style:italic;color:var(--accent);font-weight:500}
  .dom header.top .meta{
    text-align:right;
    font:600 0.6875rem/1.6 var(--font-sans);letter-spacing:.28em;text-transform:uppercase;
    color:var(--ink-mute);
  }
  .dom header.top .meta b{color:var(--accent);font-weight:600;font-size:0.875rem;letter-spacing:.08em}
  .dom header.top .meta .meta__cats{display:block}
  .dom header.top p.lede{
    grid-column:1/-1;
    font:italic 1.125rem/1.55 var(--font-serif);
    color:var(--ink-dim);max-width:62ch;margin:1.25rem 0 0;
  }

  /* ───── Sticky toolbar (sits below site header) ───── */
  .dom .toolbar{
    position:sticky;top:0;z-index:30;
    background:rgba(22, 20, 18, 0.88);
    backdrop-filter:blur(10px) saturate(1.2);
    -webkit-backdrop-filter:blur(10px) saturate(1.2);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    margin:0 -1.5rem 2.5rem;padding:0.875rem 1.5rem;
    display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;
  }
  .dom .toolbar .filter{
    flex:1;min-width:180px;display:flex;align-items:center;gap:0.625rem;
    border:1px solid var(--rule);
    background:var(--bg-elevated);border-radius:4px;padding:0.5rem 0.75rem;
  }
  .dom .toolbar .filter input{
    flex:1;border:0;background:transparent;outline:none;
    font:500 0.8125rem/1 var(--font-sans);
    letter-spacing:.04em;color:var(--ink);
  }
  .dom .toolbar .filter input::placeholder{color:var(--ink-mute)}
  .dom .toolbar .filter .icon{font:600 0.6875rem/1 var(--font-sans);color:var(--ink-mute);
    letter-spacing:.2em;text-transform:uppercase}
  .dom .toolbar .count{
    font:600 0.6875rem/1 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-mute);font-variant-numeric:tabular-nums;
  }
  .dom .toolbar .count b{color:var(--accent);font-size:0.8125rem;letter-spacing:.06em}
  .dom .toolbar nav{
    display:flex;gap:0.875rem;flex-wrap:wrap;
    font:600 0.625rem/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;
  }
  .dom .toolbar nav a{
    color:var(--ink-mute);text-decoration:none;border:0;border-bottom:1px solid transparent;
    padding-bottom:2px;transition:color .2s, border-color .2s;
  }
  .dom .toolbar nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}

  /* ───── Sections ───── */
  .dom .section{margin-top:56px}
  .dom .section.hidden{display:none}
  .dom .section-head{
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:0;
  }
  .dom .section-head h2{
    font:700 22px/1 ui-serif,Georgia,serif;
    letter-spacing:-.01em;margin:0;color:var(--ink);
  }
  .dom .section-head .count{
    font:600 10px/1 ui-sans-serif,system-ui;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-dim);
  }
  .dom .section-head .count b{color:var(--accent);font-weight:700}

  /* ───── Grid ───── */
  .dom .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    border-left:1px solid var(--line);
  }
  .dom .entry{
    position:relative;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:34px 22px 20px;
    min-height:220px;
    display:flex;flex-direction:column;justify-content:space-between;
    cursor:default;
    transition:background .25s ease;
    overflow:hidden;
  }
  .dom .entry.hidden{display:none}
  .dom .entry:hover{background:var(--paper-2)}
  .dom .entry .num{
    position:absolute;top:12px;right:14px;
    font:600 10px/1 ui-sans-serif,system-ui;letter-spacing:.18em;
    color:var(--ink-dim);
    font-variant-numeric:tabular-nums;
  }
  .dom .entry .num::before{
    content:"";display:inline-block;
    width:5px;height:5px;border-radius:50%;
    background:var(--accent);margin-right:8px;
    transform:translateY(-1px);
  }
  .dom .word-wrap{
    flex:1;display:grid;place-items:center;padding:6px 0 12px;
    overflow:visible;
  }
  .dom .def{
    border-top:1px solid var(--line);
    padding-top:12px;
    display:flex;gap:10px;align-items:baseline;
    font:400 12px/1.4 ui-serif,Georgia,serif;
    color:var(--ink-soft);
  }
  .dom .def .pos{
    font:italic 600 10px/1 ui-serif,Georgia,serif;
    color:var(--accent);
    flex:none;
    letter-spacing:.04em;
  }

  /* ───── The word ───── */
  .dom .word{
    display:inline-flex;
    font:700 clamp(36px,4.4vw,48px)/1 ui-serif,Georgia,"New York",serif;
    letter-spacing:-.025em;
    color:var(--ink);
    user-select:none;
    position:relative;
  }
  .dom .word .char{
    display:inline-block;
    white-space:pre;
    transform-origin:center bottom;
    will-change:transform,opacity,filter;
    position:relative;
  }

  /* Shared default for all hover / playing rules — we use the longhand per-rule
     below so each animation can have its own duration / easing. */

  /* ─────────────────────────────────────────────
     A · APPEAR & REVEAL
     ───────────────────────────────────────────── */
  /* Word is visible at rest. On hover / play, each char re-types in.
     We use a tiny linear duration so each character flips on instantly when
     its staggered delay expires. (Previously used steps(1,end) which had a
     Chromium quirk where chars with larger delays stayed stuck at opacity 0.) */
  .dom .word[data-v="type"]:hover .char,
  .dom .word[data-v="type"].playing .char{
    animation:typeIn .01s linear calc(var(--i)*120ms) both;
  }
  @keyframes typeIn{
    0%   { opacity:0; }
    100% { opacity:1; }
  }

  .dom .word[data-v="bloom"]:hover .char,
  .dom .word[data-v="bloom"].playing .char{
    animation:bloom 1.2s cubic-bezier(.16,.87,.34,1) calc(var(--i)*60ms) both;
    transform-origin:center;
  }
  @keyframes bloom{
    0%   { transform:scale(0); opacity:0; filter:blur(8px); }
    60%  { transform:scale(1.15); opacity:1; filter:blur(0); }
    100% { transform:scale(1); }
  }

  .dom .word[data-v="glide"]:hover .char,
  .dom .word[data-v="glide"].playing .char{
    animation:glide 1.3s cubic-bezier(.16,.84,.44,1) calc(var(--i)*60ms) both;
  }
  @keyframes glide{
    0%   { transform:translateX(-80px); opacity:0; filter:blur(6px); }
    100% { transform:translateX(0); opacity:1; filter:blur(0); }
  }

  .dom .word[data-v="materialize"]:hover .char,
  .dom .word[data-v="materialize"].playing .char{
    animation:materialize 1.2s ease-out calc(var(--i)*50ms) both;
  }
  @keyframes materialize{
    0%   { opacity:0; filter:blur(20px); transform:scale(1.2); }
    100% { opacity:1; filter:blur(0); transform:scale(1); }
  }

  .dom .word[data-v="emerge"]{ overflow:hidden; }
  .dom .word[data-v="emerge"]:hover .char,
  .dom .word[data-v="emerge"].playing .char{
    animation:emerge 1s cubic-bezier(.34,1.2,.5,1) calc(var(--i)*80ms) both;
  }
  @keyframes emerge{
    0%   { transform:translateY(110%); opacity:0; }
    100% { transform:translateY(0); opacity:1; }
  }

  .dom .word[data-v="precipitate"]:hover .char,
  .dom .word[data-v="precipitate"].playing .char{
    animation:precipitate 1.1s cubic-bezier(.5,0,.7,.6) calc(var(--i)*70ms) both;
  }
  @keyframes precipitate{
    0%   { transform:translateY(-100px); opacity:0; }
    65%  { transform:translateY(8px); opacity:1; }
    80%  { transform:translateY(-2px); }
    100% { transform:translateY(0); }
  }

  .dom .word[data-v="assemble"]:hover .char,
  .dom .word[data-v="assemble"].playing .char{
    animation:assemble 1.6s cubic-bezier(.16,1,.3,1) calc(var(--rand)*200ms) both;
  }
  @keyframes assemble{
    0%   { transform:translate(calc((var(--rand) - .5) * 400px),
                              calc((var(--rand) - .5) * 200px))
                    rotate(calc((var(--rand) - .5) * 360deg));
           opacity:0; }
    100% { transform:translate(0,0) rotate(0); opacity:1; }
  }

  .dom .word[data-v="compose"]:hover .char,
  .dom .word[data-v="compose"].playing .char{
    animation:compose 1.2s cubic-bezier(.22,1,.36,1) calc(var(--rand)*300ms) both;
  }
  @keyframes compose{
    0%   { transform:translate(calc((var(--rand) - .5) * 60px),
                              calc((var(--rand) - .5) * 60px));
           opacity:0; filter:blur(4px); }
    100% { transform:translate(0,0); opacity:1; filter:blur(0); }
  }

  .dom .word[data-v="crystallize"]:hover .char,
  .dom .word[data-v="crystallize"].playing .char{
    animation:crystallize 1.2s cubic-bezier(.34,1.56,.64,1) calc(var(--i)*60ms) both;
  }
  @keyframes crystallize{
    0%   { transform:scale(0) rotate(180deg); opacity:0; }
    60%  { transform:scale(1.2) rotate(-10deg); opacity:1; }
    100% { transform:scale(1) rotate(0); opacity:1; }
  }

  .dom .word[data-v="develop"]:hover .char,
  .dom .word[data-v="develop"].playing .char{
    animation:develop 1.6s ease-out calc(var(--i)*50ms) both;
  }
  @keyframes develop{
    0%   { opacity:0; filter:contrast(0) sepia(.9) brightness(1.4); }
    50%  { opacity:.5; filter:contrast(.5) sepia(.6) brightness(1.1); }
    100% { opacity:1; filter:contrast(1) sepia(0) brightness(1); }
  }

  /* ─────────────────────────────────────────────
     B · DECAY & DISAPPEAR
     ───────────────────────────────────────────── */
  .dom .word[data-v="dissolve"]:hover .char,
  .dom .word[data-v="dissolve"].playing .char{
    animation:dissolve 1.4s ease-in calc(var(--rand)*500ms) both;
  }
  @keyframes dissolve{
    0%   { opacity:1; filter:blur(0); transform:translateY(0); }
    100% { opacity:0; filter:blur(10px); transform:translateY(-16px) scale(.9); }
  }

  .dom .word[data-v="vanish"]:hover .char,
  .dom .word[data-v="vanish"].playing .char{
    animation:vanish .8s linear calc(var(--i)*40ms) both;
  }
  @keyframes vanish{ to{ opacity:0; } }

  .dom .word[data-v="evaporate"]:hover .char,
  .dom .word[data-v="evaporate"].playing .char{
    animation:evaporate 1.4s ease-in calc(var(--rand)*400ms) both;
  }
  @keyframes evaporate{
    0%   { transform:translateY(0) scale(1); opacity:1; filter:blur(0); }
    100% { transform:translateY(-50px) scale(.7); opacity:0; filter:blur(6px); }
  }

  .dom .word[data-v="fade"]:hover .char,
  .dom .word[data-v="fade"].playing .char{
    animation:fade 1.6s ease-in calc(var(--i)*40ms) both;
  }
  @keyframes fade{ to{ opacity:0; } }

  .dom .word[data-v="erase"]:hover .char,
  .dom .word[data-v="erase"].playing .char{
    animation:erase 1.2s cubic-bezier(.5,0,.5,1) calc(var(--i)*60ms) both;
  }
  @keyframes erase{
    0%   { clip-path:inset(0 0 0 0); }
    100% { clip-path:inset(0 100% 0 0); }
  }

  .dom .word[data-v="delete"] .char{ position:relative; }
  .dom .word[data-v="delete"] .char::after{
    content:""; position:absolute; left:-2px; right:100%; top:50%;
    height:3px; background:var(--accent);
    opacity:0; /* hidden until the deleteLine animation fades it in */
  }
  .dom .word[data-v="delete"]:hover .char,
  .dom .word[data-v="delete"].playing .char{
    animation:deleteFade 1.4s ease-out forwards;
  }
  @keyframes deleteFade{
    0%, 60% { opacity:1; }
    100%    { opacity:0; transform:translateX(8px); }
  }
  .dom .word[data-v="delete"]:hover .char::after,
  .dom .word[data-v="delete"].playing .char::after{
    animation:deleteLine 1.4s cubic-bezier(.7,0,.3,1) forwards;
  }
  @keyframes deleteLine{
    0%   { right:100%; opacity:1; }
    50%  { right:-2px; opacity:1; }
    100% { right:-2px; opacity:0; }
  }

  .dom .word[data-v="crumble"]:hover .char,
  .dom .word[data-v="crumble"].playing .char{
    animation:crumble 1.5s cubic-bezier(.5,0,.7,.5) calc(var(--rand)*200ms) both;
  }
  @keyframes crumble{
    0%   { transform:translateY(0) rotate(0); opacity:1; }
    50%  { transform:translateY(20px) rotate(calc((var(--rand) - .5) * 80deg)); opacity:.7; }
    100% { transform:translateY(140px) rotate(calc((var(--rand) - .5) * 200deg));
           opacity:0; filter:blur(2px); }
  }

  .dom .word[data-v="ash"]:hover .char,
  .dom .word[data-v="ash"].playing .char{
    animation:ash 1.6s ease-out calc(var(--rand)*300ms) both;
  }
  @keyframes ash{
    0%   { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
    100% { opacity:0; transform:scale(.3) translateY(-30px); filter:blur(10px); }
  }

  .dom .word[data-v="expire"]:hover .char,
  .dom .word[data-v="expire"].playing .char{
    animation:expire 1.4s cubic-bezier(.55,0,.7,.5) calc(var(--i)*70ms) both;
  }
  @keyframes expire{
    0%   { transform:translateY(0); opacity:1; }
    100% { transform:translateY(60px); opacity:0; filter:blur(2px); }
  }

  .dom .word[data-v="shrink"]:hover .char,
  .dom .word[data-v="shrink"].playing .char{
    animation:shrink 1.2s cubic-bezier(.5,0,.75,0) calc(var(--i)*40ms) both;
  }
  @keyframes shrink{
    0%   { transform:scale(1); opacity:1; }
    100% { transform:scale(0); opacity:0; }
  }

  /* ─────────────────────────────────────────────
     C · SPRING & ELASTIC
     ───────────────────────────────────────────── */
  .dom .word[data-v="bounce"]:hover .char,
  .dom .word[data-v="bounce"].playing .char{
    animation:bounce 1.1s cubic-bezier(.34,1.56,.64,1) calc(var(--i)*70ms) both;
  }
  @keyframes bounce{
    0%,100% { transform:translateY(0); }
    35%     { transform:translateY(-34px); }
    60%     { transform:translateY(0); }
    72%     { transform:translateY(-12px); }
    86%     { transform:translateY(0); }
  }

  .dom .word[data-v="elastic"]:hover .char,
  .dom .word[data-v="elastic"].playing .char{
    animation:elastic 1.2s cubic-bezier(.5,-0.6,.4,1.6) calc(var(--i)*50ms) both;
  }
  @keyframes elastic{
    0%   { transform:scaleY(.4) scaleX(1.4); }
    40%  { transform:scaleY(1.3) scaleX(.85); }
    70%  { transform:scaleY(.9) scaleX(1.05); }
    100% { transform:scaleY(1) scaleX(1); }
  }

  .dom .word[data-v="spring"]:hover .char,
  .dom .word[data-v="spring"].playing .char{
    animation:spring 1.2s cubic-bezier(.16,1.4,.3,1) calc(var(--i)*70ms) both;
  }
  @keyframes spring{
    0%   { transform:translateY(80px); opacity:0; }
    60%  { transform:translateY(-12px); opacity:1; }
    80%  { transform:translateY(4px); }
    100% { transform:translateY(0); }
  }

  .dom .word[data-v="jiggle"]:hover .char,
  .dom .word[data-v="jiggle"].playing .char{
    animation:jiggle .6s ease-in-out calc(var(--i)*30ms) both;
  }
  @keyframes jiggle{
    0%,100% { transform:translateX(0) rotate(0); }
    20%     { transform:translateX(-3px) rotate(-3deg); }
    40%     { transform:translateX(3px) rotate(3deg); }
    60%     { transform:translateX(-2px) rotate(-2deg); }
    80%     { transform:translateX(2px) rotate(2deg); }
  }

  .dom .word[data-v="wobble"]:hover .char,
  .dom .word[data-v="wobble"].playing .char{
    animation:wobble 1.4s ease-in-out calc(var(--i)*40ms) both;
  }
  @keyframes wobble{
    0%   { transform:translateX(0) rotate(0); }
    15%  { transform:translateX(-25px) rotate(-5deg); }
    30%  { transform:translateX(20px) rotate(3deg); }
    45%  { transform:translateX(-15px) rotate(-3deg); }
    60%  { transform:translateX(10px) rotate(2deg); }
    75%  { transform:translateX(-5px) rotate(-1deg); }
    100% { transform:translateX(0) rotate(0); }
  }

  .dom .word[data-v="recoil"]:hover .char,
  .dom .word[data-v="recoil"].playing .char{
    animation:recoil 1.2s cubic-bezier(.7,0,.3,1) calc(var(--i)*50ms) both;
  }
  @keyframes recoil{
    0%   { transform:translateX(0); }
    25%  { transform:translateX(-30px); }
    100% { transform:translateX(120px); opacity:0; }
  }

  .dom .word[data-v="snap"]:hover .char,
  .dom .word[data-v="snap"].playing .char{
    animation:snap .9s cubic-bezier(.9,0,.1,1) calc(var(--i)*40ms) both;
  }
  @keyframes snap{
    0%   { transform:translateY(-50px) scale(.6); opacity:0; }
    60%  { transform:translateY(0) scale(1); opacity:1; }
    70%  { transform:translateY(0) scale(1.1); }
    100% { transform:translateY(0) scale(1); }
  }

  .dom .word[data-v="rubber"]:hover .char,
  .dom .word[data-v="rubber"].playing .char{
    animation:rubber 1.4s cubic-bezier(.5,-.3,.4,1.5) calc(var(--i)*60ms) both;
  }
  @keyframes rubber{
    0%   { transform:scale(1,1); }
    25%  { transform:scale(1.6,.5); }
    55%  { transform:scale(.6,1.5); }
    75%  { transform:scale(1.15,.85); }
    100% { transform:scale(1,1); }
  }

  /* ─────────────────────────────────────────────
     D · CONTINUOUS
     ───────────────────────────────────────────── */
  .dom .word[data-v="breathe"] .char{
    animation:breathe 3.6s ease-in-out infinite calc(var(--i)*60ms);
  }
  @keyframes breathe{
    0%,100% { transform:scale(1);     opacity:.78; }
    50%     { transform:scale(1.07);  opacity:1;   }
  }

  .dom .word[data-v="pulse"] .char{
    animation:pulse 1.6s ease-in-out infinite calc(var(--i)*40ms);
  }
  @keyframes pulse{
    0%,100% { transform:scale(1);    color:var(--ink); }
    50%     { transform:scale(1.12); color:var(--accent); }
  }

  .dom .word[data-v="whisper"] .char{
    animation:whisper 4s ease-in-out infinite calc(var(--i)*120ms);
  }
  @keyframes whisper{
    0%,100% { opacity:.18; filter:blur(1px); }
    50%     { opacity:.65; filter:blur(0);   }
  }

  .dom .word[data-v="flicker"] .char:nth-child(odd){
    animation:flickerA 2.4s steps(1,end) infinite;
  }
  .dom .word[data-v="flicker"] .char:nth-child(even){
    animation:flickerB 3.1s steps(1,end) infinite;
  }
  @keyframes flickerA{
    0%,100%{opacity:1} 8%{opacity:.3} 9%{opacity:1} 60%{opacity:.4} 62%{opacity:1}
  }
  @keyframes flickerB{
    0%,100%{opacity:1} 30%{opacity:.5} 32%{opacity:1} 80%{opacity:.2} 82%{opacity:1}
  }

  .dom .word[data-v="swing"] .char{
    animation:swing 2.2s ease-in-out infinite calc(var(--i)*100ms);
    transform-origin:center top;
  }
  @keyframes swing{
    0%,100% { transform:rotate(0); }
    25%     { transform:rotate(8deg); }
    75%     { transform:rotate(-8deg); }
  }

  .dom .word[data-v="sway"] .char{
    animation:sway 3.6s ease-in-out infinite calc(var(--i)*140ms);
  }
  @keyframes sway{
    0%,100% { transform:translateX(-5px); }
    50%     { transform:translateX(5px); }
  }

  .dom .word[data-v="bob"] .char{
    animation:bob 2.4s ease-in-out infinite calc(var(--i)*80ms);
  }
  @keyframes bob{
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-9px); }
  }

  .dom .word[data-v="drift"] .char{
    animation:drift 5s ease-in-out infinite calc(var(--rand)*1500ms);
  }
  @keyframes drift{
    0%,100% { transform:translate(-4px,-2px); }
    33%     { transform:translate(4px,3px);   }
    66%     { transform:translate(-3px,4px);  }
  }

  .dom .word[data-v="twinkle"] .char{
    animation:twinkle 2.6s ease-in-out infinite calc(var(--rand)*2000ms);
  }
  @keyframes twinkle{
    0%,100% { opacity:1; text-shadow:none; }
    50%     { opacity:.5; text-shadow:0 0 12px var(--gold); }
  }

  .dom .word[data-v="throb"] .char{
    animation:throb 2.4s ease-in-out infinite calc(var(--i)*30ms);
  }
  @keyframes throb{
    0%,100% { transform:scale(.95); opacity:.85; color:var(--ink); }
    50%     { transform:scale(1.18); opacity:1; color:var(--accent); }
  }

  /* ─────────────────────────────────────────────
     E · FORCE & IMPACT
     ───────────────────────────────────────────── */
  .dom .word[data-v="shake"]:hover .char,
  .dom .word[data-v="shake"].playing .char{
    animation:shake .5s ease-in-out 0s 1 both;
  }
  @keyframes shake{
    0%,100% { transform:translateX(0); }
    10%,30%,50%,70%,90% { transform:translateX(-5px); }
    20%,40%,60%,80%     { transform:translateX(5px); }
  }

  .dom .word[data-v="shatter"] .char{ transition:transform .3s, opacity .3s; }
  .dom .word[data-v="shatter"]:hover .char,
  .dom .word[data-v="shatter"].playing .char{
    animation:shatter 1.2s cubic-bezier(.32,.06,.56,.98) calc(var(--rand)*180ms) both;
  }
  @keyframes shatter{
    0%   { transform:translate(0,0) rotate(0); opacity:1; }
    100% { transform:translate(calc((var(--rand) - .5) * 280px),
                              calc(40px + var(--rand) * 120px))
                    rotate(calc((var(--rand) - .5) * 200deg));
           opacity:0; filter:blur(2px); }
  }

  .dom .word[data-v="erupt"]:hover .char,
  .dom .word[data-v="erupt"].playing .char{
    animation:erupt 1.2s cubic-bezier(.22,1,.36,1) calc(var(--i)*30ms) both;
  }
  @keyframes erupt{
    0%   { transform:translateY(0) scale(1); }
    20%  { transform:translateY(-50px) scale(1.4); }
    100% { transform:translateY(0) scale(1); }
  }

  .dom .word[data-v="collapse"]:hover .char,
  .dom .word[data-v="collapse"].playing .char{
    animation:collapse 1.3s cubic-bezier(.4,.0,.2,1) calc(var(--i)*60ms) both;
    transform-origin:bottom center;
  }
  @keyframes collapse{
    0%   { transform:translateY(0) scaleY(1); }
    60%  { transform:translateY(8px) scaleY(.2); opacity:.6; }
    100% { transform:translateY(40px) scaleY(.05); opacity:0; }
  }

  .dom .word[data-v="explode"]:hover .char,
  .dom .word[data-v="explode"].playing .char{
    animation:explode 1.4s cubic-bezier(.16,1,.36,1) calc(var(--rand)*150ms) both;
  }
  @keyframes explode{
    0%   { transform:translate(0,0) scale(1); opacity:1; }
    100% { transform:translate(calc((var(--rand) - .5) * 500px),
                              calc((var(--rand) - .5) * 500px))
                    scale(.3) rotate(calc((var(--rand) - .5) * 360deg));
           opacity:0; }
  }

  .dom .word[data-v="crash"]:hover .char,
  .dom .word[data-v="crash"].playing .char{
    animation:crash 1.2s cubic-bezier(.65,0,.35,1) calc(var(--i)*50ms) both;
    transform-origin:center bottom;
  }
  @keyframes crash{
    0%   { transform:translateY(-200px) scaleY(1.3); opacity:0; }
    55%  { transform:translateY(0) scaleY(.6); opacity:1; }
    70%  { transform:translateY(0) scaleY(1.15); }
    100% { transform:translateY(0) scaleY(1); }
  }

  .dom .word[data-v="slam"]:hover .char,
  .dom .word[data-v="slam"].playing .char{
    animation:slam 1s cubic-bezier(.65,0,.35,1) calc(var(--i)*40ms) both;
  }
  @keyframes slam{
    0%   { transform:translateX(-300px) scaleX(.4); opacity:0; }
    65%  { transform:translateX(0) scaleX(1); opacity:1; }
    78%  { transform:translateX(0) scaleX(1.4); }
    100% { transform:translateX(0) scaleX(1); }
  }

  .dom .word[data-v="jolt"]:hover .char,
  .dom .word[data-v="jolt"].playing .char{
    animation:jolt .25s ease-out 0s 2 both;
  }
  @keyframes jolt{
    0%,100% { transform:translate(0,0); }
    25%     { transform:translate(-7px,4px); }
    50%     { transform:translate(7px,-4px); }
    75%     { transform:translate(-3px,2px); }
  }

  /* ─────────────────────────────────────────────
     F · DISTORT
     ───────────────────────────────────────────── */
  .dom .word[data-v="stretch"]:hover .char,
  .dom .word[data-v="stretch"].playing .char{
    animation:stretch 1.2s cubic-bezier(.7,.05,.35,1) calc(var(--i)*40ms) both;
    transform-origin:center;
  }
  @keyframes stretch{
    0%,100% { transform:scaleX(1) scaleY(1); }
    50%     { transform:scaleX(1.6) scaleY(.7); }
  }

  .dom .word[data-v="squash"]:hover .char,
  .dom .word[data-v="squash"].playing .char{
    animation:squash 1s ease-in-out calc(var(--i)*40ms) both;
    transform-origin:center bottom;
  }
  @keyframes squash{
    0%,100% { transform:scaleY(1) scaleX(1); }
    50%     { transform:scaleY(.45) scaleX(1.3); }
  }

  .dom .word[data-v="twist"]{ perspective:600px; }
  .dom .word[data-v="twist"]:hover .char,
  .dom .word[data-v="twist"].playing .char{
    animation:twist 1.4s ease-in-out calc(var(--i)*60ms) both;
  }
  @keyframes twist{
    0%,100% { transform:rotateY(0); }
    50%     { transform:rotateY(360deg); }
  }

  .dom .word[data-v="skew"]:hover .char,
  .dom .word[data-v="skew"].playing .char{
    animation:skew 1.2s ease-in-out calc(var(--i)*40ms) both;
  }
  @keyframes skew{
    0%,100% { transform:skewX(0) skewY(0); }
    50%     { transform:skewX(-22deg) skewY(4deg); }
  }

  .dom .word[data-v="warp"]:hover .char,
  .dom .word[data-v="warp"].playing .char{
    animation:warp 1.4s ease-in-out calc(var(--i)*30ms) both;
  }
  @keyframes warp{
    0%,100% { transform:skew(0,0) scale(1); }
    25%     { transform:skew(-15deg,5deg) scale(1.15,.9); }
    50%     { transform:skew(10deg,-8deg) scale(.85,1.15); }
    75%     { transform:skew(-5deg,3deg) scale(1.05,.95); }
  }

  .dom .word[data-v="pinch"]:hover .char,
  .dom .word[data-v="pinch"].playing .char{
    animation:pinch 1.2s ease-in-out calc(var(--i)*30ms) both;
    transform-origin:center;
  }
  @keyframes pinch{
    0%,100% { transform:scaleX(1); filter:blur(0); }
    50%     { transform:scaleX(.3); filter:blur(1px); }
  }

  .dom .word[data-v="flex"] .char{
    animation:flex 1.4s ease-in-out infinite calc(var(--i)*70ms);
  }
  @keyframes flex{
    0%,100% { transform:scaleY(1) scaleX(1); }
    25%     { transform:scaleY(1.18) scaleX(.92); }
    50%     { transform:scaleY(.85) scaleX(1.15); }
    75%     { transform:scaleY(1.08) scaleX(.96); }
  }

  /* ─────────────────────────────────────────────
     G · TRAVEL
     ───────────────────────────────────────────── */
  .dom .word[data-v="ascend"]:hover .char,
  .dom .word[data-v="ascend"].playing .char{
    animation:ascend 1.5s cubic-bezier(.22,1,.36,1) calc(var(--i)*70ms) both;
  }
  @keyframes ascend{
    0%   { transform:translateY(0); opacity:1; }
    100% { transform:translateY(-90px); opacity:0; filter:blur(2px); }
  }

  .dom .word[data-v="descend"]:hover .char,
  .dom .word[data-v="descend"].playing .char{
    animation:descend 1.5s cubic-bezier(.22,1,.36,1) calc(var(--i)*70ms) both;
  }
  @keyframes descend{
    0%   { transform:translateY(0); opacity:1; }
    100% { transform:translateY(90px); opacity:0; filter:blur(2px); }
  }

  .dom .word[data-v="soar"]:hover .char,
  .dom .word[data-v="soar"].playing .char{
    animation:soar 2s cubic-bezier(.16,.84,.44,1) calc(var(--i)*120ms) both;
  }
  @keyframes soar{
    0%   { transform:translate(-40px,40px); opacity:0; }
    50%  { transform:translate(0, -20px); opacity:1; }
    100% { transform:translate(40px,-90px); opacity:0; filter:blur(3px); }
  }

  .dom .word[data-v="plunge"]:hover .char,
  .dom .word[data-v="plunge"].playing .char{
    animation:plunge 1s cubic-bezier(.55,0,.85,.6) calc(var(--i)*40ms) both;
  }
  @keyframes plunge{
    0%   { transform:translateY(-20px); opacity:1; }
    100% { transform:translateY(140px); opacity:0; }
  }

  .dom .word[data-v="float"] .char{
    animation:float 4s ease-in-out infinite calc(var(--rand)*1500ms);
  }
  @keyframes float{
    0%,100% { transform:translate(0,0); }
    33%     { transform:translate(3px,-6px); }
    66%     { transform:translate(-2px,4px); }
  }

  .dom .word[data-v="orbit"]:hover .char,
  .dom .word[data-v="orbit"].playing .char{
    animation:orbit 1.6s linear calc(var(--i)*40ms) both;
    transform-origin:center;
  }
  @keyframes orbit{
    0%   { transform:rotate(0) translateX(20px) rotate(0); }
    100% { transform:rotate(360deg) translateX(20px) rotate(-360deg); }
  }

  .dom .word[data-v="spiral"]:hover .char,
  .dom .word[data-v="spiral"].playing .char{
    animation:spiral 1.6s cubic-bezier(.22,1,.36,1) calc(var(--i)*50ms) both;
  }
  @keyframes spiral{
    0%   { transform:rotate(720deg) scale(0); opacity:0; }
    100% { transform:rotate(0) scale(1); opacity:1; }
  }

  .dom .word[data-v="roll"]:hover .char,
  .dom .word[data-v="roll"].playing .char{
    animation:roll 1.4s cubic-bezier(.34,1.2,.5,1) calc(var(--i)*60ms) both;
  }
  @keyframes roll{
    0%   { transform:translateX(-120px) rotate(-360deg); opacity:0; }
    100% { transform:translateX(0) rotate(0); opacity:1; }
  }

  /* ─────────────────────────────────────────────
     H · STATE CHANGE
     ───────────────────────────────────────────── */
  .dom .word[data-v="melt"]:hover .char,
  .dom .word[data-v="melt"].playing .char{
    animation:melt 1.6s cubic-bezier(.5,0,.6,1) calc(var(--i)*60ms) both;
    transform-origin:top center;
  }
  @keyframes melt{
    0%   { transform:scaleY(1) skewY(0); }
    50%  { transform:scaleY(1.3) skewY(-3deg); }
    100% { transform:scaleY(2.6) skewY(2deg); opacity:0; filter:blur(3px); }
  }

  .dom .word[data-v="freeze"]:hover .char,
  .dom .word[data-v="freeze"].playing .char{
    animation:freeze 1.6s ease-out calc(var(--i)*50ms) both;
  }
  @keyframes freeze{
    0%   { color:var(--ink); text-shadow:none; transform:translateX(0); }
    20%  { transform:translateX(-2px); }
    40%  { transform:translateX(2px); }
    60%  { transform:translateX(0); }
    100% { color:var(--cyan); text-shadow:0 0 14px rgba(58,168,195,.6),
                              0 1px 0 #fff; }
  }

  .dom .word[data-v="petrify"]:hover .char,
  .dom .word[data-v="petrify"].playing .char{
    animation:petrify 1.6s ease-out calc(var(--i)*60ms) both;
  }
  @keyframes petrify{
    0%   { color:var(--ink); filter:saturate(1); }
    100% { color:#7d756a; filter:saturate(0) brightness(.85); }
  }

  .dom .word[data-v="wither"]:hover .char,
  .dom .word[data-v="wither"].playing .char{
    animation:wither 1.6s cubic-bezier(.55,0,.4,1) calc(var(--i)*70ms) both;
    transform-origin:center bottom;
  }
  @keyframes wither{
    0%   { transform:scale(1) rotate(0); opacity:1; color:var(--ink); }
    50%  { transform:scale(.9) rotate(-3deg); opacity:.7; color:#9a7a4a; }
    100% { transform:scale(.7) rotate(-8deg); opacity:.3; color:#6a5a3a; filter:blur(1px); }
  }

  .dom .word[data-v="solidify"]:hover .char,
  .dom .word[data-v="solidify"].playing .char{
    animation:solidify 1.4s cubic-bezier(.34,1.4,.5,1) calc(var(--rand)*200ms) both;
  }
  @keyframes solidify{
    0%   { transform:translate(calc((var(--rand) - .5) * 100px),
                              calc((var(--rand) - .5) * 60px));
           opacity:.4; filter:blur(8px); }
    100% { transform:translate(0,0); opacity:1; filter:blur(0); }
  }

  .dom .word[data-v="liquify"]:hover .char,
  .dom .word[data-v="liquify"].playing .char{
    animation:liquify 1.6s ease-in-out calc(var(--i)*40ms) both;
  }
  @keyframes liquify{
    0%,100% { transform:scaleY(1) skewX(0); filter:blur(0); }
    50%     { transform:scaleY(.7) skewX(-15deg); filter:blur(2px); }
  }

  /* ─────────────────────────────────────────────
     I · LIGHT & ENERGY
     ───────────────────────────────────────────── */
  .dom .word[data-v="shimmer"]:hover .char,
  .dom .word[data-v="shimmer"].playing .char{
    animation:shimmer 1s ease-in-out calc(var(--i)*70ms) both;
  }
  @keyframes shimmer{
    0%,100% { color:var(--ink); text-shadow:none; }
    50%     { color:var(--gold); text-shadow:0 0 14px rgba(198,154,60,.55); }
  }

  .dom .word[data-v="glow"]:hover .char,
  .dom .word[data-v="glow"].playing .char{
    animation:glow 1.6s ease-in-out calc(var(--i)*50ms) both;
  }
  @keyframes glow{
    0%,100% { text-shadow:none; color:var(--ink); }
    50%     { text-shadow:0 0 8px var(--gold), 0 0 16px var(--gold), 0 0 32px rgba(198,154,60,.6);
              color:var(--gold); }
  }

  .dom .word[data-v="spark"]:hover .char,
  .dom .word[data-v="spark"].playing .char{
    animation:spark .5s steps(4,end) calc(var(--rand)*400ms) both;
  }
  @keyframes spark{
    0%,100% { color:var(--ink); text-shadow:none; }
    25%     { color:#fff; text-shadow:0 0 16px var(--gold); }
    50%     { color:var(--ink); text-shadow:none; }
    75%     { color:#fff; text-shadow:0 0 12px var(--accent); }
  }

  .dom .word[data-v="gleam"]:hover .char,
  .dom .word[data-v="gleam"].playing .char{
    animation:gleam 1.4s linear calc(var(--i)*80ms) both;
    background:linear-gradient(110deg,
      var(--ink) 0%, var(--ink) 35%,
      var(--gold) 50%, #fff 52%, var(--gold) 54%,
      var(--ink) 65%, var(--ink) 100%);
    background-size:300% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
  @keyframes gleam{
    to { background-position:-100% 0; }
  }

  .dom .word[data-v="dazzle"]:hover .char,
  .dom .word[data-v="dazzle"].playing .char{
    animation:dazzle 1.4s ease-in-out calc(var(--rand)*400ms) both;
  }
  @keyframes dazzle{
    0%,100% { text-shadow:none; transform:scale(1); }
    20%     { text-shadow:0 0 12px var(--gold); transform:scale(1.1); }
    40%     { text-shadow:0 0 12px var(--accent); transform:scale(.95); }
    60%     { text-shadow:0 0 12px var(--cyan); transform:scale(1.08); }
    80%     { text-shadow:0 0 12px var(--gold); transform:scale(1); }
  }

  .dom .word[data-v="radiate"] .char{
    animation:radiate 2.4s ease-in-out infinite calc(var(--i)*50ms);
  }
  @keyframes radiate{
    0%,100% { text-shadow:0 0 0 transparent; }
    50%     { text-shadow:0 0 20px rgba(198,154,60,.5); }
  }

  .dom .word[data-v="ignite"]:hover .char,
  .dom .word[data-v="ignite"].playing .char{
    animation:ignite 1.4s ease-out calc(var(--i)*70ms) both;
  }
  @keyframes ignite{
    0%   { color:var(--ink); text-shadow:none; }
    30%  { color:var(--gold); text-shadow:0 0 4px var(--gold); }
    60%  { color:#ff6a2a; text-shadow:0 0 14px #ff6a2a, 0 -4px 6px var(--gold); }
    100% { color:var(--accent); text-shadow:0 -2px 8px #ff6a2a, 0 0 20px var(--accent); }
  }

  .dom .word[data-v="flare"]:hover .char,
  .dom .word[data-v="flare"].playing .char{
    animation:flare 1.2s cubic-bezier(.16,1,.36,1) calc(var(--i)*50ms) both;
  }
  @keyframes flare{
    0%   { transform:scale(1); text-shadow:none; }
    30%  { transform:scale(1.4); text-shadow:0 0 30px var(--gold), 0 0 60px var(--accent); }
    100% { transform:scale(1); text-shadow:none; }
  }

  /* ─────────────────────────────────────────────
     J · SOUND-FEEL
     ───────────────────────────────────────────── */
  .dom .word[data-v="shout"]:hover .char,
  .dom .word[data-v="shout"].playing .char{
    animation:shout .9s cubic-bezier(.34,1.56,.64,1) calc(var(--i)*30ms) both;
  }
  @keyframes shout{
    0%   { transform:scale(1); font-weight:700; color:var(--ink); }
    30%  { transform:scale(1.4); font-weight:900; color:var(--accent); }
    100% { transform:scale(1); font-weight:700; color:var(--ink); }
  }

  .dom .word[data-v="mumble"] .char{
    animation:mumble 2.6s ease-in-out infinite calc(var(--rand)*1500ms);
  }
  @keyframes mumble{
    0%,100% { transform:translateY(0) skewX(0); opacity:.6; filter:blur(1px); }
    50%     { transform:translateY(2px) skewX(-3deg); opacity:.8; filter:blur(.5px); }
  }

  .dom .word[data-v="crescendo"]:hover .char,
  .dom .word[data-v="crescendo"].playing .char{
    animation:crescendo 1.6s cubic-bezier(.22,1,.36,1) calc(var(--i)*100ms) both;
    transform-origin:center bottom;
  }
  @keyframes crescendo{
    0%   { transform:scale(.6); opacity:.4; }
    100% { transform:scale(1.3); opacity:1; }
  }

  .dom .word[data-v="diminuendo"]:hover .char,
  .dom .word[data-v="diminuendo"].playing .char{
    animation:diminuendo 1.6s cubic-bezier(.22,1,.36,1) calc(var(--i)*100ms) both;
    transform-origin:center bottom;
  }
  @keyframes diminuendo{
    0%   { transform:scale(1.3); opacity:1; }
    100% { transform:scale(.6); opacity:.4; }
  }

  .dom .word[data-v="hush"]:hover .char,
  .dom .word[data-v="hush"].playing .char{
    animation:hush 1.4s ease-out calc(var(--i)*60ms) both;
  }
  @keyframes hush{
    0%   { opacity:1; filter:blur(0); }
    100% { opacity:.15; filter:blur(2px); }
  }

  /* ─────────────────────────────────────────────
     K · MECHANICAL
     ───────────────────────────────────────────── */
  .dom .word[data-v="fold"]{ perspective:600px; }
  .dom .word[data-v="fold"]:hover .char,
  .dom .word[data-v="fold"].playing .char{
    animation:fold 1.2s cubic-bezier(.65,.0,.35,1) calc(var(--i)*70ms) both;
    transform-origin:center bottom;
  }
  @keyframes fold{
    0%,100% { transform:rotateX(0); }
    50%     { transform:rotateX(85deg); }
  }

  .dom .word[data-v="unfold"]{ perspective:600px; }
  .dom .word[data-v="unfold"]:hover .char,
  .dom .word[data-v="unfold"].playing .char{
    animation:unfold 1.2s cubic-bezier(.34,1.2,.5,1) calc(var(--i)*70ms) both;
    transform-origin:center bottom;
  }
  @keyframes unfold{
    0%   { transform:rotateX(90deg); opacity:0; }
    100% { transform:rotateX(0); opacity:1; }
  }

  .dom .word[data-v="inflate"]:hover .char,
  .dom .word[data-v="inflate"].playing .char{
    animation:inflate 1.2s cubic-bezier(.34,1.4,.5,1) calc(var(--i)*40ms) both;
  }
  @keyframes inflate{
    0%   { transform:scale(.6); }
    60%  { transform:scale(1.3); }
    100% { transform:scale(1.15); }
  }

  .dom .word[data-v="deflate"]:hover .char,
  .dom .word[data-v="deflate"].playing .char{
    animation:deflate 1.2s cubic-bezier(.7,0,.4,1) calc(var(--i)*40ms) both;
  }
  @keyframes deflate{
    0%   { transform:scale(1.15); }
    100% { transform:scale(.7); opacity:.6; }
  }

  .dom .word[data-v="tumble"]:hover .char,
  .dom .word[data-v="tumble"].playing .char{
    animation:tumble 1.4s cubic-bezier(.55,.06,.68,.19) calc(var(--i)*60ms) both;
  }
  @keyframes tumble{
    0%   { transform:translateY(0) rotate(0); opacity:1; }
    100% { transform:translateY(140px) rotate(540deg); opacity:0; }
  }

  .dom .word[data-v="hover"]:hover .char,
  .dom .word[data-v="hover"].playing .char{
    animation:hoverAnim 1.6s ease-in-out calc(var(--i)*50ms) both;
  }
  @keyframes hoverAnim{
    0%,100% { transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    50%     { transform:translateY(-12px); filter:drop-shadow(0 16px 6px rgba(0,0,0,.18)); }
  }

  .dom .word[data-v="rotate"]:hover .char,
  .dom .word[data-v="rotate"].playing .char{
    animation:rotate 1.4s linear calc(var(--i)*60ms) both;
  }
  @keyframes rotate{
    0%   { transform:rotate(0); }
    100% { transform:rotate(360deg); }
  }

  .dom .word[data-v="pivot"]:hover .char,
  .dom .word[data-v="pivot"].playing .char{
    animation:pivot 1.4s cubic-bezier(.34,1.2,.5,1) calc(var(--i)*70ms) both;
    transform-origin:bottom left;
  }
  @keyframes pivot{
    0%,100% { transform:rotate(0); }
    50%     { transform:rotate(45deg); }
  }

  /* ─────────────────────────────────────────────
     L · TRAIL & DOUBLE
     ───────────────────────────────────────────── */
  .dom .word[data-v="echo"]:hover .char,
  .dom .word[data-v="echo"].playing .char{
    animation:echo 1.4s ease-out calc(var(--i)*40ms) both;
  }
  @keyframes echo{
    0%   { text-shadow:none; }
    50%  { text-shadow:8px 0 rgba(195,74,54,.5), 16px 0 rgba(195,74,54,.3),
                      24px 0 rgba(195,74,54,.15); }
    100% { text-shadow:none; }
  }

  .dom .word[data-v="trail"]:hover .char,
  .dom .word[data-v="trail"].playing .char{
    animation:trail 1.2s cubic-bezier(.16,.84,.44,1) calc(var(--i)*40ms) both;
  }
  @keyframes trail{
    0%   { transform:translateX(-60px); text-shadow:none; opacity:0; }
    50%  { transform:translateX(0); text-shadow:-10px 0 rgba(0,0,0,.25),
                                                -22px 0 rgba(0,0,0,.12);
           opacity:1; }
    100% { transform:translateX(0); text-shadow:none; opacity:1; }
  }

  .dom .word[data-v="afterimage"]:hover .char,
  .dom .word[data-v="afterimage"].playing .char{
    animation:afterimage 1.4s ease-in-out calc(var(--i)*30ms) both;
  }
  @keyframes afterimage{
    0%,100% { text-shadow:none; }
    50%     { text-shadow:6px 4px 0 rgba(195,74,54,.5),
                          -6px -4px 0 rgba(58,168,195,.5); }
  }

  .dom .word[data-v="ripple"]:hover .char,
  .dom .word[data-v="ripple"].playing .char{
    animation:ripple 1.4s ease-out calc(var(--i)*100ms) both;
  }
  @keyframes ripple{
    0%   { transform:translateY(0) scaleY(1); }
    50%  { transform:translateY(-18px) scaleY(1.15); }
    100% { transform:translateY(0) scaleY(1); }
  }

  .dom .word[data-v="ghost"]:hover .char,
  .dom .word[data-v="ghost"].playing .char{
    animation:ghost 1.6s ease-in-out calc(var(--i)*60ms) both;
  }
  @keyframes ghost{
    0%,100% { opacity:1; transform:translateX(0); }
    50%     { opacity:.3; transform:translateX(8px); }
  }

  /* ─────────────────────────────────────────────
     M · GLITCH
     ───────────────────────────────────────────── */
  .dom .word[data-v="glitch"]:hover .char,
  .dom .word[data-v="glitch"].playing .char{
    animation:glitch .8s steps(8,end) calc(var(--i)*30ms) both;
  }
  @keyframes glitch{
    0%   { transform:translate(0,0); text-shadow:none; }
    15%  { transform:translate(-3px,1px); text-shadow:3px 0 var(--accent),-3px 0 var(--cyan); }
    30%  { transform:translate(3px,-1px); text-shadow:-3px 0 var(--accent),3px 0 var(--cyan); }
    45%  { transform:translate(-2px,2px); text-shadow:2px 0 var(--accent),-2px 0 var(--cyan); }
    60%  { transform:translate(2px,-2px); text-shadow:-2px 0 var(--accent),2px 0 var(--cyan); }
    75%  { transform:translate(-1px,1px); text-shadow:1px 0 var(--accent),-1px 0 var(--cyan); }
    100% { transform:translate(0,0); text-shadow:none; }
  }

  .dom .word[data-v="corrupt"]:hover .char,
  .dom .word[data-v="corrupt"].playing .char{
    animation:corrupt 1.2s steps(6,end) calc(var(--rand)*200ms) both;
  }
  @keyframes corrupt{
    0%,100% { transform:translateY(0); opacity:1; color:var(--ink); }
    20%     { transform:translateY(-8px); opacity:.5; color:var(--accent); }
    40%     { transform:translateY(4px); opacity:.7; color:var(--cyan); }
    60%     { transform:translateY(-3px); opacity:1; color:var(--ink); }
    80%     { transform:translateY(2px); opacity:.6; color:var(--accent); }
  }

  .dom .word[data-v="scramble"]:hover .char,
  .dom .word[data-v="scramble"].playing .char{
    animation:scramble 1.6s ease-in-out calc(var(--rand)*300ms) both;
  }
  @keyframes scramble{
    0%,100% { transform:translate(0,0); }
    20%     { transform:translate(calc((var(--rand) - .5) * 30px),
                                  calc((var(--rand) - .5) * 20px)); }
    40%     { transform:translate(calc((var(--rand) - .5) * 30px),
                                  calc((var(--rand) - .5) * 20px)); }
    60%     { transform:translate(calc((var(--rand) - .5) * 30px),
                                  calc((var(--rand) - .5) * 20px)); }
    80%     { transform:translate(calc((var(--rand) - .5) * 30px),
                                  calc((var(--rand) - .5) * 20px)); }
  }

  .dom .word[data-v="pixelate"]:hover .char,
  .dom .word[data-v="pixelate"].playing .char{
    animation:pixelate 1.4s steps(6,end) calc(var(--i)*40ms) both;
  }
  @keyframes pixelate{
    0%   { filter:blur(0); transform:scale(1); }
    50%  { filter:blur(3px) contrast(1.5); transform:scale(.9); }
    100% { filter:blur(0); transform:scale(1); }
  }

  .dom .word[data-v="static"] .char{
    animation:staticAnim 0.3s steps(2,end) infinite calc(var(--rand)*200ms);
  }
  @keyframes staticAnim{
    0%   { transform:translate(0,0); opacity:1; }
    50%  { transform:translate(calc((var(--rand) - .5) * 4px),
                              calc((var(--rand) - .5) * 4px));
           opacity:.85; }
  }

  /* ───── How to use / How it's built ───── */
  .dom .dom-howto{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
    margin:1rem 0 3rem;
    padding:1.75rem 0;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
  }
  .dom .dom-howto h3{
    font:600 0.6875rem/1 var(--font-sans);
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-mute);margin:0 0 0.875rem;
  }
  .dom .dom-howto ul{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:0.5rem;
    font:400 0.9375rem/1.5 var(--font-serif);
    color:var(--ink-dim);
  }
  .dom .dom-howto code{
    font-family:var(--font-mono);font-size:0.85em;
    background:var(--bg-elevated);
    padding:0.05em 0.35em;border-radius:3px;
    color:var(--ink);
  }
  .dom .dom-howto b{color:var(--ink)}
  @media (max-width:720px){
    .dom .dom-howto{grid-template-columns:1fr;gap:1.5rem}
  }

  /* ───── Take it home (code recipe) ───── */
  .dom .dom-takeaway{
    margin-top:5rem;
    padding-top:3rem;
    border-top:1px solid var(--rule);
  }
  .dom .dom-takeaway h2{
    font:700 clamp(1.5rem,2vw,2rem)/1.1 var(--font-serif);
    letter-spacing:-.015em;margin:0 0 0.75rem;color:var(--ink);
  }
  .dom .dom-takeaway__lede{
    font:italic 1.0625rem/1.55 var(--font-serif);
    color:var(--ink-dim);max-width:62ch;margin:0 0 2rem;
  }
  .dom .dom-takeaway h3{
    font:600 0.6875rem/1 var(--font-sans);
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-mute);margin:2rem 0 0.875rem;
  }
  .dom .dom-takeaway pre{
    font-family:var(--font-mono);
    font-size:0.8125rem;line-height:1.6;
    background:var(--bg-sunken);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    padding:1.25rem 1.5rem;
    overflow-x:auto;
    margin:0;
    color:var(--ink);
  }
  .dom .dom-takeaway code{font-family:inherit}
  .dom .dom-takeaway__note{
    margin-top:2rem;
    font:400 0.875rem/1.5 var(--font-serif);
    color:var(--ink-mute);max-width:62ch;
  }
  .dom .dom-takeaway__note code{
    font-family:var(--font-mono);font-size:0.85em;
    background:var(--bg-elevated);
    padding:0.05em 0.35em;border-radius:3px;color:var(--ink);
  }

  /* ───── Demo footer ───── */
  .dom .demo-footer{
    margin-top:5rem;
    display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;
    border-top:1px solid var(--rule);padding-top:1.5rem;
    font:400 0.8125rem/1.55 var(--font-serif);color:var(--ink-dim);
    font-style:italic;
  }
  .dom .demo-footer .right{
    font-style:normal;font-family:var(--font-sans);
    font-size:0.6875rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-mute);
  }

  @media (max-width:600px){
    .dom{padding-block:1.5rem 4rem}
    .dom .grid{grid-template-columns:1fr}
    .dom .entry{padding:1.625rem 1.125rem 1.125rem;min-height:180px}
    .dom header.top{
      grid-template-columns:1fr;gap:0.5rem;
      padding-bottom:1.75rem;margin-bottom:1rem;
    }
    .dom header.top h1{
      font-size:clamp(2.25rem,11vw,2.75rem);
    }
    .dom header.top .meta{text-align:left}
    .dom header.top .meta .meta__cats{display:inline}
    .dom header.top .meta .meta__cats::before{
      content:"·";margin:0 0.5em;color:var(--ink-mute);font-weight:400;
    }
    .dom header.top p.lede{
      font:400 1rem/1.55 var(--font-serif);font-style:normal;
      color:var(--ink-dim);margin:1rem 0 0;
      padding-left:0.875rem;border-left:2px solid var(--rule);
    }
    .dom .word{font-size:2.25rem}
    .dom .toolbar{margin:0 -1rem 1.5rem;padding:0.75rem 1rem}
    .dom .toolbar nav{font-size:0.5625rem;gap:0.625rem}
  }