@view-transition { navigation: auto; }

:root {
  --fw-motion-fast: 180ms;
  --fw-motion-page: 440ms;
  --fw-motion-deep: 500ms;
  --fw-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --fw-motion-ease-in: cubic-bezier(.4, 0, 1, 1);
}

/* Shared pieces keep their identity while Felwyn changes route. */
.felwyn-topbar,
.explorer-pathbar,
.watch-party-pathbar { view-transition-name: fw-topbar; }

.felwyn-page-toolbar,
.explorer-toolbar,
.watch-party-toolbar { view-transition-name: fw-toolbar; }

.felwyn-page-surface,
.explorer-content-layout,
.watch-party-workspace,
.auth-window { view-transition-name: fw-stage; }

.felwyn-main-nav-link.is-current { view-transition-name: fw-main-current; }
.admin-tab.is-current { view-transition-name: fw-admin-current; }

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(fw-topbar),
::view-transition-new(fw-topbar),
::view-transition-old(fw-toolbar),
::view-transition-new(fw-toolbar),
::view-transition-old(fw-stage),
::view-transition-new(fw-stage),
::view-transition-old(fw-main-current),
::view-transition-new(fw-main-current),
::view-transition-old(fw-admin-current),
::view-transition-new(fw-admin-current) {
  animation-duration: var(--fw-motion-page);
  animation-timing-function: var(--fw-motion-ease);
  animation-fill-mode: both;
}

::view-transition-group(fw-topbar),
::view-transition-group(fw-toolbar),
::view-transition-group(fw-main-current),
::view-transition-group(fw-admin-current) {
  animation-duration: var(--fw-motion-page);
  animation-timing-function: var(--fw-motion-ease);
}

::view-transition-group(fw-stage) {
  animation-duration: var(--fw-motion-deep);
  animation-timing-function: var(--fw-motion-ease);
}

/* The browser normally crossfades the full page. We keep the page itself quiet
   and let the shared Felwyn layers do the movement. */
::view-transition-old(root) { animation-name: fwRootOld; }
::view-transition-new(root) { animation-name: fwRootNew; }
@keyframes fwRootOld { to { opacity: .985; } }
@keyframes fwRootNew { from { opacity: .985; } }

/* Folder navigation already has its own layered Explorer motion. Keep the
   global stage quiet there so the existing plane animation remains the hero. */
html:active-view-transition-type(fw-forward)::view-transition-old(fw-stage),
html:active-view-transition-type(fw-forward)::view-transition-new(fw-stage),
html:active-view-transition-type(fw-back)::view-transition-old(fw-stage),
html:active-view-transition-type(fw-back)::view-transition-new(fw-stage) { animation: none; }

/* Main navigation: Explorer -> Konto -> Verwaltung behaves like one horizontal
   workspace. The chrome stays put while the working plane moves underneath. */
html:active-view-transition-type(fw-main-forward)::view-transition-old(fw-stage),
html:active-view-transition-type(fw-lateral-forward)::view-transition-old(fw-stage) {
  animation-name: fwPlaneMainOldForward;
}
html:active-view-transition-type(fw-main-forward)::view-transition-new(fw-stage),
html:active-view-transition-type(fw-lateral-forward)::view-transition-new(fw-stage) {
  animation-name: fwPlaneMainNewForward;
}
html:active-view-transition-type(fw-main-back)::view-transition-old(fw-stage),
html:active-view-transition-type(fw-lateral-back)::view-transition-old(fw-stage) {
  animation-name: fwPlaneMainOldBack;
}
html:active-view-transition-type(fw-main-back)::view-transition-new(fw-stage),
html:active-view-transition-type(fw-lateral-back)::view-transition-new(fw-stage) {
  animation-name: fwPlaneMainNewBack;
}
@keyframes fwPlaneMainOldForward {
  to { opacity: .18; transform: translateX(-4.2%) scale(.992); }
}
@keyframes fwPlaneMainNewForward {
  from { opacity: .18; transform: translateX(5.5%) scale(.994); }
}
@keyframes fwPlaneMainOldBack {
  to { opacity: .18; transform: translateX(4.2%) scale(.992); }
}
@keyframes fwPlaneMainNewBack {
  from { opacity: .18; transform: translateX(-5.5%) scale(.994); }
}

/* Admin tabs are another plane inside Verwaltung. */
html:active-view-transition-type(fw-sub-forward)::view-transition-old(fw-stage) { animation-name: fwSubOldForward; }
html:active-view-transition-type(fw-sub-forward)::view-transition-new(fw-stage) { animation-name: fwSubNewForward; }
html:active-view-transition-type(fw-sub-back)::view-transition-old(fw-stage) { animation-name: fwSubOldBack; }
html:active-view-transition-type(fw-sub-back)::view-transition-new(fw-stage) { animation-name: fwSubNewBack; }
@keyframes fwSubOldForward { to { opacity: .22; transform: translateX(-2.4%) scale(.996); } }
@keyframes fwSubNewForward { from { opacity: .22; transform: translateX(3.2%) scale(.997); } }
@keyframes fwSubOldBack { to { opacity: .22; transform: translateX(2.4%) scale(.996); } }
@keyframes fwSubNewBack { from { opacity: .22; transform: translateX(-3.2%) scale(.997); } }

/* Detail routes feel like opening another sheet above the current one. */
html:active-view-transition-type(fw-deeper)::view-transition-old(fw-stage),
html:active-view-transition-type(fw-layer-enter)::view-transition-old(fw-stage) {
  animation-name: fwDepthOld;
}
html:active-view-transition-type(fw-deeper)::view-transition-new(fw-stage),
html:active-view-transition-type(fw-layer-enter)::view-transition-new(fw-stage) {
  animation-name: fwDepthNew;
}
html:active-view-transition-type(fw-shallower)::view-transition-old(fw-stage),
html:active-view-transition-type(fw-layer-exit)::view-transition-old(fw-stage) {
  animation-name: fwDepthOldBack;
}
html:active-view-transition-type(fw-shallower)::view-transition-new(fw-stage),
html:active-view-transition-type(fw-layer-exit)::view-transition-new(fw-stage) {
  animation-name: fwDepthNewBack;
}
@keyframes fwDepthOld {
  to { opacity: .34; transform: translateY(-10px) scale(.978); }
}
@keyframes fwDepthNew {
  from { opacity: 0; transform: translateY(24px) scale(1.012); }
  to { opacity: 1; transform: none; }
}
@keyframes fwDepthOldBack {
  to { opacity: 0; transform: translateY(24px) scale(1.012); }
}
@keyframes fwDepthNewBack {
  from { opacity: .34; transform: translateY(-10px) scale(.978); }
}


html:active-view-transition-type(fw-auth-switch-forward)::view-transition-old(fw-stage) { animation-name: fwAuthSwitchOldForward; }
html:active-view-transition-type(fw-auth-switch-forward)::view-transition-new(fw-stage) { animation-name: fwAuthSwitchNewForward; }
html:active-view-transition-type(fw-auth-switch-back)::view-transition-old(fw-stage) { animation-name: fwAuthSwitchOldBack; }
html:active-view-transition-type(fw-auth-switch-back)::view-transition-new(fw-stage) { animation-name: fwAuthSwitchNewBack; }
@keyframes fwAuthSwitchOldForward { to { opacity: 0; transform: translateX(-22px) scale(.985); } }
@keyframes fwAuthSwitchNewForward { from { opacity: 0; transform: translateX(26px) scale(.985); } }
@keyframes fwAuthSwitchOldBack { to { opacity: 0; transform: translateX(22px) scale(.985); } }
@keyframes fwAuthSwitchNewBack { from { opacity: 0; transform: translateX(-26px) scale(.985); } }

/* Auth is not another app: it collapses into / grows out of the Felwyn stage. */
html:active-view-transition-type(fw-auth-out)::view-transition-old(fw-stage) { animation-name: fwAuthOldOut; }
html:active-view-transition-type(fw-auth-out)::view-transition-new(fw-stage) { animation-name: fwAuthNewOut; }
html:active-view-transition-type(fw-auth-in)::view-transition-old(fw-stage) { animation-name: fwAuthOldIn; }
html:active-view-transition-type(fw-auth-in)::view-transition-new(fw-stage) { animation-name: fwAuthNewIn; }
@keyframes fwAuthOldOut { to { opacity: 0; transform: translateY(-12px) scale(.94); } }
@keyframes fwAuthNewOut { from { opacity: 0; transform: translateY(22px) scale(.985); } }
@keyframes fwAuthOldIn { to { opacity: .08; transform: translateY(16px) scale(.985); } }
@keyframes fwAuthNewIn { from { opacity: 0; transform: translateY(-12px) scale(.94); } }

/* Player already has its own row-to-screen motion. The page transition only
   dissolves the final frame into / out of the player so both effects connect. */
html:active-view-transition-type(fw-player-open)::view-transition-old(root) { animation: none; }
html:active-view-transition-type(fw-player-open)::view-transition-new(root) { animation-name: fwPlayerRouteIn; animation-duration: 300ms; }
html:active-view-transition-type(fw-player-close)::view-transition-old(root) { animation-name: fwPlayerRouteOut; animation-duration: 260ms; }
html:active-view-transition-type(fw-player-close)::view-transition-new(root) { animation-name: fwPlayerRouteBack; animation-duration: 330ms; }
@keyframes fwPlayerRouteIn { from { opacity: 0; } }
@keyframes fwPlayerRouteOut { to { opacity: 0; transform: scale(1.008); } }
@keyframes fwPlayerRouteBack { from { opacity: 0; transform: scale(.992); } }

/* Unknown internal routes still feel connected, never like a hard page load. */
html:active-view-transition-type(fw-cross)::view-transition-old(fw-stage) { animation-name: fwCrossOld; }
html:active-view-transition-type(fw-cross)::view-transition-new(fw-stage) { animation-name: fwCrossNew; }
@keyframes fwCrossOld { to { opacity: 0; transform: translateY(-8px) scale(.995); } }
@keyframes fwCrossNew { from { opacity: 0; transform: translateY(10px) scale(.995); } }

/* Fallback for browsers without cross-document View Transitions. */
@media (prefers-reduced-motion: no-preference) {
  body.fw-route-leave .felwyn-page-shell,
  body.fw-route-leave .explorer,
  body.fw-route-leave .watch-party-shell,
  body.fw-route-leave .auth-window,
  body.fw-route-leave .player-access-shell {
    pointer-events: none;
    animation: fwFallbackLeave var(--fw-motion-fast) ease-in both;
  }
  body.fw-route-enter .felwyn-page-shell,
  body.fw-route-enter .explorer,
  body.fw-route-enter .watch-party-shell,
  body.fw-route-enter .auth-window,
  body.fw-route-enter .player-access-shell {
    animation: fwFallbackEnter 320ms var(--fw-motion-ease) both;
  }
  body.fw-route-leave-back .felwyn-page-shell,
  body.fw-route-leave-back .explorer { animation-name: fwFallbackLeaveBack; }
  body.fw-route-enter-back .felwyn-page-shell,
  body.fw-route-enter-back .explorer { animation-name: fwFallbackEnterBack; }
  @keyframes fwFallbackLeave { to { opacity: 0; transform: translateX(-16px) scale(.995); } }
  @keyframes fwFallbackEnter { from { opacity: 0; transform: translateX(18px) scale(.995); } }
  @keyframes fwFallbackLeaveBack { to { opacity: 0; transform: translateX(16px) scale(.995); } }
  @keyframes fwFallbackEnterBack { from { opacity: 0; transform: translateX(-18px) scale(.995); } }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(fw-topbar), ::view-transition-new(fw-topbar),
  ::view-transition-old(fw-toolbar), ::view-transition-new(fw-toolbar),
  ::view-transition-old(fw-stage), ::view-transition-new(fw-stage),
  ::view-transition-old(fw-main-current), ::view-transition-new(fw-main-current),
  ::view-transition-old(fw-admin-current), ::view-transition-new(fw-admin-current) {
    animation-duration: 1ms !important;
  }
}