/* © 2026 Dennis Andres */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: cc-page-out var(--cc-dur) var(--cc-ease) both; }
::view-transition-new(root) { animation: cc-page-in var(--cc-dur-slow) var(--cc-ease) both; }
@keyframes cc-page-out { to { opacity: 0; } }
@keyframes cc-page-in { from { opacity: 0; translate: 0 14px; } }
@keyframes cc-rise { from { opacity: 0; translate: 0 32px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.rise, .reveal), :is(.rise-grid, .timeline, .symbol-stage, .team-grid) > * { animation: cc-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 72%; }
    :is(.rise-grid, .timeline, .symbol-stage, .team-grid) > :nth-child(3n + 2) { animation-range: entry 6% entry 82%; }
    :is(.rise-grid, .timeline, .symbol-stage, .team-grid) > :nth-child(3n) { animation-range: entry 12% entry 92%; }
  }
}

.js-io :is(.rise, .reveal).is-waiting, .js-io :is(.rise-grid, .timeline, .symbol-stage, .team-grid).is-waiting > * { opacity: 0; translate: 0 32px; }
.js-io :is(.rise, .reveal).is-in, .js-io :is(.rise-grid, .timeline, .symbol-stage, .team-grid).is-in > * { opacity: 1; translate: 0 0; transition: opacity var(--cc-dur-slow) var(--cc-ease), translate var(--cc-dur-slow) var(--cc-ease); }
.js-io :is(.rise-grid, .timeline, .symbol-stage, .team-grid).is-in > :nth-child(3n + 2) { transition-delay: 90ms; }
.js-io :is(.rise-grid, .timeline, .symbol-stage, .team-grid).is-in > :nth-child(3n) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  :is(.rise, .reveal), :is(.rise-grid, .timeline, .symbol-stage, .team-grid) > * { animation: none !important; opacity: 1 !important; translate: none !important; scale: none !important; }
}