/*
 * Scroll/viewport reveal — lives in /public so Tailwind/Vite never processes it.
 *
 * The animation is declared directly on .motion-reveal with play-state: paused.
 * JS flips it to `running` (via a data attribute) when the element enters the viewport.
 * Because fill-mode is `both`, the browser paints the `from` keyframe on first render
 * (opacity 0, blurred, shifted) and holds there until unpaused.
 */
@keyframes motion-reveal-in {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    filter: none;
    transform: translateY(0);
  }
}

.motion-reveal {
  animation: motion-reveal-in 1.5s cubic-bezier(0.33, 0, 0.2, 1) both paused;
  transition: none !important;
}

.motion-reveal[data-revealed] {
  animation-play-state: running;
}

.motion-reveal[data-revealed].motion-reveal--hoverable {
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out !important;
}

.motion-reveal--delay-sm {
  animation-delay: 0.28s;
}

.motion-reveal--delay-1 {
  animation-delay: 0.2s;
}

.motion-reveal--delay-2 {
  animation-delay: 0.4s;
}

.motion-reveal--delay-3 {
  animation-delay: 0.6s;
}

/* Hero button: starts after inner panel animation finishes (~3.65s). */
.motion-reveal--delay-after-panel {
  animation-delay: 3.7s;
}

/* Horizontal line — grows left to right, no blur/shift. */
@keyframes motion-reveal-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.motion-reveal-line {
  transform-origin: left;
  transform: scaleX(0);
  animation: motion-reveal-line 1.2s cubic-bezier(0.33, 0, 0.2, 1) both paused;
  transition: none !important;
}

.motion-reveal-line[data-revealed] {
  animation-play-state: running;
}

/*
 * `.link-underline` is defined once in `src/styles/base.css` (imported via global.css).
 * Do not duplicate it here — a second definition + ::after caused two underlines.
 */