[data-anim] {
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    filter var(--dur-3) var(--ease-out),
    clip-path var(--dur-3) var(--ease-out);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
[data-anim].in-view {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

[data-anim="fade"] { opacity: 0; }
[data-anim="fade-up"] { opacity: 0; transform: translateY(var(--anim-distance)); }
[data-anim="fade-down"] { opacity: 0; transform: translateY(calc(var(--anim-distance) * -1)); }
[data-anim="fade-left"] { opacity: 0; transform: translateX(var(--anim-distance)); }
[data-anim="fade-right"] { opacity: 0; transform: translateX(calc(var(--anim-distance) * -1)); }
[data-anim="scale-in"] { opacity: 0; transform: scale(var(--anim-scale-from)); }
[data-anim="blur-in"] { opacity: 0; filter: blur(var(--anim-blur-from)); }
[data-anim="clip-up"] { clip-path: inset(100% 0 0 0); }
[data-anim="clip-down"] { clip-path: inset(0 0 100% 0); }
[data-anim="clip-right"] { clip-path: inset(0 100% 0 0); }

.line-mask { display: block; overflow: clip; }
[data-anim="line-up"] { display: block; transform: translateY(110%); }
[data-anim="line-up"].in-view { transform: none; }

[data-stagger] > * {
  --anim-delay: calc(var(--i, 0) * var(--stagger-step));
}

.hov-lift {
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.hov-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.hov-scale { transition: transform var(--dur-2) var(--ease-out); }
.hov-scale:hover { transform: scale(1.02); }

.hov-glow { transition: box-shadow var(--dur-2) var(--ease-out); }
.hov-glow:hover {
  box-shadow: 0 0 0 1px var(--color-primary),
    0 0 24px color-mix(in oklab, var(--color-primary) 25%, transparent);
}

.hov-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left calc(100% - 0.05em);
  transition: background-size var(--dur-2) var(--ease-out);
  text-decoration: none;
  padding-bottom: 0.1em;
}
.hov-underline:hover, .hov-underline:focus-visible { background-size: 100% 1.5px; }

.hov-fill {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.hov-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary-hover);
  transform: translateX(-101%);
  transition: transform var(--dur-3) var(--ease-out);
}
.hov-fill:hover::before { transform: translateX(0); }

.hov-text-slide {
  position: relative;
  overflow: clip;
  display: inline-block;
}
.hov-text-slide > span {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out);
}
.hov-text-slide::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translateY(110%);
  transition: transform var(--dur-2) var(--ease-out);
}
.hov-text-slide:hover > span { transform: translateY(-110%); }
.hov-text-slide:hover::after { transform: translateY(0); }

.hov-border-draw {
  position: relative;
}
.hov-border-draw::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--border-thick) solid var(--color-primary);
  opacity: 0;
  scale: 1.02;
  transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.hov-border-draw:hover::after { opacity: 1; scale: 1; }

@keyframes kw-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.anim-float { animation: kw-float 5s var(--ease-in-out) infinite; }

@keyframes kw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.anim-pulse { animation: kw-pulse 2.4s var(--ease-in-out) infinite; }

@keyframes kw-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.anim-shimmer {
  background: linear-gradient(100deg,
    var(--color-bg-3) 40%, var(--color-bg-4) 50%, var(--color-bg-3) 60%);
  background-size: 200% 100%;
  animation: kw-shimmer 1.6s linear infinite;
}

@keyframes kw-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  overflow: clip;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-l);
  animation: kw-marquee var(--marquee-duration, 30s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    transition: opacity var(--dur-2) ease;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  [data-anim="line-up"] { transform: none; }
  .anim-float, .anim-pulse { animation: none; }
  .marquee-track { animation-duration: 90s; } 
  .hov-lift:hover, .hov-scale:hover { transform: none; }
}