/**
 * Workspace page transitions — Apple-style crossfade + depth on Explore · Shortlist · Coach.
 * Uses View Transitions API (navigation: auto) with a reduced-motion fallback.
 */

@view-transition {
  navigation: auto;
}

:root {
  --workspace-vt-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --workspace-vt-duration: 0.52s;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--workspace-vt-duration);
  animation-timing-function: var(--workspace-vt-ease);
}

::view-transition-old(root) {
  animation-name: workspace-page-out;
}

::view-transition-new(root) {
  animation-name: workspace-page-in;
}

::view-transition-old(workspace-hero),
::view-transition-new(workspace-hero),
::view-transition-old(workspace-funnel),
::view-transition-new(workspace-funnel),
::view-transition-old(workspace-main),
::view-transition-new(workspace-main) {
  animation-duration: calc(var(--workspace-vt-duration) + 0.08s);
  animation-timing-function: var(--workspace-vt-ease);
}

::view-transition-old(workspace-hero) {
  animation-name: workspace-layer-out;
  z-index: 1;
}

::view-transition-new(workspace-hero) {
  animation-name: workspace-layer-in;
  z-index: 2;
}

::view-transition-old(workspace-funnel) {
  animation-name: workspace-layer-out-soft;
  z-index: 1;
}

::view-transition-new(workspace-funnel) {
  animation-name: workspace-layer-in-soft;
  z-index: 2;
}

::view-transition-old(workspace-main) {
  animation-name: workspace-main-out;
  z-index: 0;
}

::view-transition-new(workspace-main) {
  animation-name: workspace-main-in;
  z-index: 1;
}

.workspace-vt-hero {
  view-transition-name: workspace-hero;
}

.workspace-vt-funnel {
  view-transition-name: workspace-funnel;
}

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

@keyframes workspace-page-in {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(10px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes workspace-page-out {
  from {
    opacity: 1;
    transform: none;
    filter: none;
  }

  to {
    opacity: 0;
    transform: scale(0.992) translateY(-6px);
    filter: blur(4px);
  }
}

@keyframes workspace-layer-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes workspace-layer-out {
  from {
    opacity: 1;
    transform: none;
    filter: none;
  }

  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    filter: blur(6px);
  }
}

@keyframes workspace-layer-in-soft {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes workspace-layer-out-soft {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes workspace-main-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes workspace-main-out {
  from {
    opacity: 1;
    transform: none;
    filter: none;
  }

  to {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
    filter: blur(8px);
  }
}

/* First paint stagger when landing without a cross-document transition */
html.workspace-transitions-ready body:not(.workspace-page-entered) .workspace-vt-hero,
html.workspace-transitions-ready body:not(.workspace-page-entered) .workspace-vt-funnel,
html.workspace-transitions-ready body:not(.workspace-page-entered) .workspace-vt-main {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(8px);
}

html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-hero,
html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-funnel,
html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-main {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 0.65s var(--workspace-vt-ease),
    transform 0.65s var(--workspace-vt-ease),
    filter 0.65s var(--workspace-vt-ease);
}

html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-hero {
  transition-delay: 0.04s;
}

html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-funnel {
  transition-delay: 0.1s;
}

html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-main {
  transition-delay: 0.16s;
}

/* Gradient veil — reliable cross-page fade (all browsers) */
.workspace-route-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(13, 148, 136, 0.28), transparent 58%),
    radial-gradient(80% 70% at 100% 100%, rgba(79, 70, 229, 0.14), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.9) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  transition: opacity 0.46s var(--workspace-vt-ease);
}

.workspace-route-veil.is-departing {
  opacity: 1;
  pointer-events: auto;
}

.workspace-route-veil.is-arriving {
  opacity: 1;
  pointer-events: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-route-veil {
    display: none;
  }
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(workspace-hero),
  ::view-transition-new(workspace-hero),
  ::view-transition-old(workspace-funnel),
  ::view-transition-new(workspace-funnel),
  ::view-transition-old(workspace-main),
  ::view-transition-new(workspace-main) {
    animation: none !important;
  }

  html.workspace-transitions-ready body:not(.workspace-page-entered) .workspace-vt-hero,
  html.workspace-transitions-ready body:not(.workspace-page-entered) .workspace-vt-funnel,
  html.workspace-transitions-ready body:not(.workspace-page-entered) .workspace-vt-main {
    opacity: 1;
    transform: none;
    filter: none;
  }

  html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-hero,
  html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-funnel,
  html.workspace-transitions-ready body.workspace-page-entered .workspace-vt-main {
    transition: none;
  }
}