/* Motion is progressive enhancement: the original text stays readable without JS. */
.kinetic-word { display:inline-block; white-space:nowrap; }
.kinetic-letter { display:inline-block; transform-origin:50% 85%; }
[data-kinetic] { touch-action:pan-y; }
.kinetic-accent { position:relative; }
.kinetic-accent::after {
  content:""; position:absolute; left:0; right:0; bottom:.02em;
  height:.075em; background:var(--red); border-radius:50%;
  transform:scaleX(0) rotate(-2deg); transform-origin:left;
  transition:transform 1.5s cubic-bezier(.2,.8,.2,1) 1s;
  pointer-events:none;
}
.kinetic-seen .kinetic-accent::after { transform:scaleX(1) rotate(-2deg); }
.kinetic-seen:hover .kinetic-accent::after { transform:scaleX(1) rotate(1deg); }
/* A second layer moves words while the existing letter ripple stays independent. */
.kinetic-caption { display:inline-block; }
@keyframes kinetic-word-sway {
  0%,100% { transform:translateY(0) rotate(-.8deg); }
  50% { transform:translateY(-4px) rotate(1.2deg); }
}
@keyframes kinetic-copy-sway {
  0%,100% { transform:translateY(0) rotate(-.2deg); }
  50% { transform:translateY(-2px) rotate(.35deg); }
}
@media (hover:hover) and (pointer:fine) {
  .kinetic-on :is(.hero-copy,.about,.section-head,.closing,.ribbon):hover > :is(h1,h2,.about-lead,strong) .kinetic-word,
  .kinetic-on .card:hover h3 .kinetic-word,
  .kinetic-on .ai-note:hover h3 .kinetic-word,
  .kinetic-on [data-kinetic]:hover .kinetic-word {
    animation:kinetic-word-sway 1.5s ease-in-out infinite;
    transform-origin:50% 80%;
  }
  .kinetic-on .kinetic-word:nth-child(2n) { animation-delay:-.35s!important; }
  .kinetic-on .kinetic-word:nth-child(3n) { animation-delay:-.7s!important; }
  .kinetic-on .card:hover > :is(p,.tag),
  .kinetic-on .ai-note:hover :is(.ai-story p,.eyebrow,.note-caption),
  .kinetic-on .hero-copy:hover > .intro {
    animation:kinetic-copy-sway 1.5s ease-in-out infinite;
  }
  .kinetic-on .ai-note:hover .ai-story p:nth-child(2n) { animation-delay:-.75s; }
  .kinetic-on .card .tag { display:inline-block; }
}
.kinetic-on :is(.hero-actions a,.closing > a,header nav a) {
  rotate:0deg;
  transition:rotate .4s ease,transform .4s ease,box-shadow .4s ease;
}
@media (hover:hover) and (pointer:fine) {
  .kinetic-on :is(.hero-actions a,.closing > a,header nav a):hover { rotate:-1deg; }
}
.kinetic-on :is(.hero-actions a,.closing > a,header nav a):focus-visible { rotate:-1deg; }
@media print {
  .kinetic-on * { animation:none!important; }
  .kinetic-letter { transform:none!important; opacity:1!important; }
  .kinetic-accent::after { display:none; }
}