@view-transition {
  navigation: auto;
}

@layer animations {
  @keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
  }

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /**
   * @section Rail Animation Keyframes
   * Shared by rail-link patterns in styles/components/links.css.
   * Uses pulse-accent fallback variables so different link types can supply their own colour.
   */
  @keyframes pulse-glow {
    0%, 100% {
      background-color: var(--colour-border-mid);
      box-shadow:
        0 0 0 0 color-mix(in srgb, var(--pulse-accent, var(--colour-accent)) 0%, transparent),
        0 0 0 0 color-mix(in srgb, var(--pulse-accent, var(--colour-accent)) 0%, transparent);
    }
    50% {
      background-color: var(--pulse-accent, var(--colour-accent));
      box-shadow:
        0 0 8px 1px color-mix(in srgb, var(--pulse-accent, var(--colour-accent)) 70%, transparent),
        0 0 16px 2px color-mix(in srgb, var(--pulse-accent, var(--colour-accent)) 40%, transparent);
    }
  }

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

  @keyframes arrow-sway {
    0%, 100% {
      transform: translateX(1px);
    }
    50% {
      transform: translateX(4px);
    }
  }

  @keyframes vt-fade-old {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  @keyframes vt-fade-new {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes vt-drift-old {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: .02; transform: translateX(-2.25rem) scale(.985); }
  }

  @keyframes vt-drift-new {
    from { opacity: .02; transform: translateX(2.25rem) scale(1.015); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes vt-rise-old {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: .02; transform: translateY(.9rem) scale(.99); }
  }

  @keyframes vt-rise-new {
    from { opacity: .02; transform: translateY(-.9rem) scale(1.01); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes vt-tilt-old {
    from { opacity: 1; transform: perspective(1200px) rotateX(0deg) scale(1); }
    to   { opacity: .02; transform: perspective(1200px) rotateX(4deg) scale(.985); }
  }

  @keyframes vt-tilt-new {
    from { opacity: .02; transform: perspective(1200px) rotateX(-4deg) scale(1.015); }
    to   { opacity: 1; transform: perspective(1200px) rotateX(0deg) scale(1); }
  }

  /* Default transition used when no per-route variant is selected. */
  ::view-transition-old(root) {
    animation: vt-fade-old 340ms var(--ease-out) both;
  }

  ::view-transition-new(root) {
    animation: vt-fade-new 380ms var(--ease-out) both;
  }

  /* Randomised article variants supplied via data-vt-article on :root. */
  :root[data-vt-article="drift"]::view-transition-old(root) {
    animation: vt-drift-old 360ms var(--ease-out) both;
  }

  :root[data-vt-article="drift"]::view-transition-new(root) {
    animation: vt-drift-new 430ms var(--ease-out) both;
  }

  :root[data-vt-article="rise"]::view-transition-old(root) {
    animation: vt-rise-old 340ms var(--ease-out) both;
  }

  :root[data-vt-article="rise"]::view-transition-new(root) {
    animation: vt-rise-new 420ms var(--ease-out) both;
  }

  :root[data-vt-article="tilt"]::view-transition-old(root) {
    animation: vt-tilt-old 350ms var(--ease-out) both;
  }

  :root[data-vt-article="tilt"]::view-transition-new(root) {
    animation: vt-tilt-new 420ms var(--ease-out) both;
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    :root[data-vt-article="drift"]::view-transition-old(root),
    :root[data-vt-article="drift"]::view-transition-new(root),
    :root[data-vt-article="rise"]::view-transition-old(root),
    :root[data-vt-article="rise"]::view-transition-new(root),
    :root[data-vt-article="tilt"]::view-transition-old(root),
    :root[data-vt-article="tilt"]::view-transition-new(root) {
      animation-duration: 1ms;
    }
  }

  /* Hero entry - staggered. Uses --dur-slow which collapses to 0ms
     if prefers-reduced-motion: reduce is set, so no separate override needed. */
  .hero-section > .label  { animation: fade-up var(--dur-slow) var(--ease-out) 100ms  both; }
  .hero-section > .title  { animation: fade-up var(--dur-slow) var(--ease-out) 200ms  both; }
  .hero-section > .verify { animation: fade-up var(--dur-slow) var(--ease-out) 290ms  both; }
  .hero-section > .bio    { animation: fade-up var(--dur-slow) var(--ease-out) 380ms  both; }
  .hero-section > .cta    { animation: fade-up var(--dur-slow) var(--ease-out) 470ms  both; }

}