/*
 * Page Transition CSS – smooth navigation between pages.
 *
 * Layer 1: View Transitions API (Chrome 111+, Safari 18+)
 * Layer 2: JS fallback fade classes (.page-leaving / .page-entering)
 * Layer 3: Top progress bar
 */

/* ── Layer 1: View Transitions API (MPA cross-document) ── */

@view-transition {
  navigation: auto;
}

/* Default root transition: crossfade */
::view-transition-old(root) {
  animation: vt-fade-out 180ms ease-out both;
}

::view-transition-new(root) {
  animation: vt-fade-in 220ms ease-in both;
}

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

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

/* Persistent elements: topbar and footer stay in place */
.topbar,
.uk-navbar-container.topbar {
  view-transition-name: topbar;
}

.site-footer {
  view-transition-name: site-footer;
}

/* Persistent elements don't animate – they remain stable */
::view-transition-old(topbar),
::view-transition-new(topbar),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
}

/* Admin sidebar stays stable */
.qr-sidebar {
  view-transition-name: admin-sidebar;
}

::view-transition-old(admin-sidebar),
::view-transition-new(admin-sidebar) {
  animation: none;
}

/* ── Layer 2: JS fallback fade (browsers without View Transitions) ── */

.content {
  transition: opacity 180ms ease, transform 180ms ease;
}

.content.page-leaving {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.content.page-entering {
  animation: page-enter 250ms ease both;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Layer 3: Top progress bar ── */

.page-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--brand-primary, #1e87f0);
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.page-progress-bar.active {
  opacity: 1;
}

.page-progress-bar.growing {
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease;
}

.page-progress-bar.crawling {
  transition: width 2500ms cubic-bezier(0.1, 0.05, 0.1, 1), opacity 150ms ease;
}

.page-progress-bar.finishing {
  transition: width 150ms ease, opacity 200ms ease 180ms;
}

/* ── Minimal preset: fade only, no transform ── */

[data-transition-preset="minimal"] .content.page-leaving {
  transform: none;
}

[data-transition-preset="minimal"] .content.page-entering {
  animation-name: page-enter-minimal;
  animation-duration: 150ms;
}

@keyframes page-enter-minimal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Minimal view-transition variant */
[data-transition-preset="minimal"]::view-transition-old(root) {
  animation-duration: 120ms;
}

[data-transition-preset="minimal"]::view-transition-new(root) {
  animation-duration: 150ms;
  animation-name: vt-fade-in;
}

/* ── Accessibility: respect reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }

  .content {
    transition: none !important;
  }

  .content.page-leaving {
    opacity: 0;
    transform: none;
  }

  .content.page-entering {
    animation: none !important;
    opacity: 1;
  }

  .page-progress-bar {
    transition: none !important;
  }

  .page-progress-bar.growing,
  .page-progress-bar.crawling,
  .page-progress-bar.finishing {
    transition: none !important;
  }
}