/* ============================================================
   animations.css — keyframes & reveal utilities
   ============================================================ */

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c2) 70%, transparent); }
  70% { box-shadow: 0 0 0 14px color-mix(in oklab, var(--c2) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c2) 0%, transparent); }
}

@keyframes draw-line {
  from { width: 0; }
  to   { width: 40px; }
}

@keyframes scrollCue {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes loaderLetter {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; color: var(--c1); }
}

@keyframes checkmark {
  0%   { transform: scale(0) rotate(-45deg); }
  50%  { transform: scale(1.4) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes glitchAnim {
  0%, 100% { transform: translate(0); filter: none; }
  10% { transform: translate(-2px, 1px); }
  20% { transform: translate(2px, -1px); filter: hue-rotate(60deg); }
  30% { transform: translate(-1px, 2px); }
  40% { transform: translate(1px, -2px); filter: hue-rotate(-60deg); }
  50% { transform: translate(0); filter: none; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* -------- Reveal utilities -------- */

[data-split] { display: inline-block; }
.reveal-line { display: block; overflow: clip; padding-bottom: 0.08em; }
.reveal-word, .reveal-char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
.is-revealed .reveal-word,
.is-revealed .reveal-char {
  transform: translateY(0);
  opacity: 1;
  transition: transform 1s var(--ease-out), opacity 1s var(--ease-out);
}
.is-revealed .reveal-word { transition-delay: calc(var(--i, 0) * 50ms); }
.is-revealed .reveal-char { transition-delay: calc(var(--i, 0) * 22ms); }

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

[data-chip] {
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.is-revealed [data-chip],
[data-chip].is-revealed { opacity: 1; transform: translateY(0) scale(1); }

/* Card stagger reveal */
[data-card] {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
[data-card].is-revealed { opacity: 1; transform: translateY(0) scale(1); }

/* Glitch word effect */
[data-glitch].is-glitching {
  animation: glitchAnim .4s steps(4, end) 1;
  text-shadow:
    2px 0 0 var(--c1),
    -2px 0 0 var(--c2);
}

/* Shimmer text */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--fg) 0%,
    var(--c1) 50%,
    var(--fg) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}