/**
 * Apple-style soft navigation — View Transitions API
 * 320ms exit / 380ms enter · cubic-bezier(0.32, 0.72, 0, 1)
 */

:root {
  --vt-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --vt-exit: 320ms;
  --vt-enter: 380ms;
}

.vt-header {
  view-transition-name: vt-header;
}

.vt-main {
  view-transition-name: vt-main;
}

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

.vt-root {
  view-transition-name: vt-root;
}

/* Marketing same-family: main slides ~12px with fade + 2px max blur */
::view-transition-old(vt-header),
::view-transition-new(vt-header),
::view-transition-old(vt-footer),
::view-transition-new(vt-footer) {
  animation: none;
}

::view-transition-old(vt-main) {
  animation: vt-main-exit var(--vt-exit) var(--vt-ease) both;
}

::view-transition-new(vt-main) {
  animation: vt-main-enter var(--vt-enter) var(--vt-ease) both;
}

@keyframes vt-main-exit {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(2px);
  }
}

@keyframes vt-main-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Cross-family: full-page crossfade + scale 0.98 → 1 */
::view-transition-old(vt-root) {
  animation: vt-root-exit var(--vt-exit) var(--vt-ease) both;
}

::view-transition-new(vt-root) {
  animation: vt-root-enter var(--vt-enter) var(--vt-ease) both;
}

@keyframes vt-root-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes vt-root-enter {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Optional loading dip during fetch (no spinner) */
main.vt-loading,
.vt-root.vt-loading {
  opacity: 0.92;
  transition: opacity 120ms ease;
}

/* Fallback when View Transitions API unsupported */
body.vt-fallback-fade main,
body.vt-fallback-fade .vt-root {
  animation: vt-fallback-fade 120ms ease both;
}

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

/* Reduced motion: opacity-only ~120ms */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vt-exit: 120ms;
    --vt-enter: 120ms;
  }

  ::view-transition-old(vt-main),
  ::view-transition-new(vt-main),
  ::view-transition-old(vt-root),
  ::view-transition-new(vt-root) {
    animation: vt-reduced-fade var(--vt-enter) ease both !important;
  }

  @keyframes vt-main-exit,
  @keyframes vt-main-enter,
  @keyframes vt-root-exit,
  @keyframes vt-root-enter {
    from,
    to {
      opacity: 1;
      transform: none;
      filter: none;
    }
  }

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