/*
 * KU Alumni design system — the stage. Loaded last.
 *
 * Home sits above everything: leaving it pushes the page up while the next
 * rises from below, and returning to it does the reverse. Between top tabs the
 * motion is horizontal, in tab order: Employment, Unemployment, Further
 * education and Alumni intelligence. Moving to a later tab pushes the
 * current page out to the left while the next one slides in from the right;
 * moving to an earlier tab does the reverse. Once a page has arrived nothing ties it to Home: Home is hidden,
 * pages are light, and only the dark top bar and tool rail are shared. The
 * rail pages (imports, quality, AI activity, enrichment history, settings)
 * stack vertically below the tab pages, in rail order. stage.js sets
 * the modes:
 *
 *   body[data-stage]      home | panel — what is in front
 *   body[data-home-mode]  live      Home is showing
 *                         hidden    a page is showing
 *   :root[data-vt]        set while a view transition runs (its kind)
 */

@layer ku {
  /* --------------------------------------------------------- the pages */

  body[data-home-mode="hidden"] #home {
    display: none !important;
  }

  /* The sheet the pages sit on. Outside transitions it matches the page
     background; during one it slides with the page so no gap ever shows. */
  .stage-paper {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: none;
    background: var(--page);
    pointer-events: none;
  }

  body[data-home-mode="hidden"] .stage-paper {
    display: block;
  }

  /* Positioned so pages paint above the fixed sheet that precedes them. */
  main > .view:not(.home-view),
  #filterBandHome {
    position: relative;
  }

  /* ------------------------------------------------- view transitions */

  /* Capture page content and its background together in the viewport-sized
     root snapshot. Individual page snapshots can include offscreen content
     that remains visible after sliding by one viewport. */
  :root[data-vt] .topbar { view-transition-name: stage-topbar; }
  :root[data-vt] .sidebar { view-transition-name: stage-rail; }
  :root[data-vt] #assistantDock { view-transition-name: stage-dock; }

  /* A snapshot would bake the blurred backdrop into these translucent bars;
     plain fills capture clean. */
  :root[data-vt] #fieldScopeBar,
  :root[data-vt] #filterBand {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* The shell — top bar, tool rail and assistant dock — holds still while the
   pages move beneath it. Only the live new image is shown, so the dock's own
   transitions (its map controls folding away) keep playing during a page
   change. Pages that exist only in the new state (the paper, the page) would
   otherwise stack above the shell, because the transition orders groups
   that are new after those captured from the old state; the explicit
   z-index keeps the shell on top. */
::view-transition-group(stage-topbar),
::view-transition-group(stage-rail),
::view-transition-group(stage-dock),
::view-transition-new(stage-topbar),
::view-transition-new(stage-rail),
::view-transition-new(stage-dock) {
  animation: none;
}

::view-transition-group(stage-topbar),
::view-transition-group(stage-rail),
::view-transition-group(stage-dock) {
  z-index: 100;
}

::view-transition-group(stage-topbar) {
  z-index: 102;
}

::view-transition-old(stage-topbar),
::view-transition-old(stage-rail),
::view-transition-old(stage-dock) {
  display: none;
}

/* Move the whole captured viewport as one sheet. Keep old and new images
   opaque: the browser's default blend would ghost the outgoing page. */
:root[data-vt]::view-transition-group(root) {
  animation: none;
}

:root[data-vt]::view-transition-image-pair(root) {
  isolation: isolate;
}

:root[data-vt]::view-transition-old(root),
:root[data-vt]::view-transition-new(root) {
  mix-blend-mode: normal;
}

:root[data-vt="forward"]::view-transition-old(root) {
  animation: stage-push-left-out var(--stage-slide) var(--stage-slide-ease) both;
}

:root[data-vt="forward"]::view-transition-new(root) {
  animation: stage-push-left-in var(--stage-slide) var(--stage-slide-ease) both;
}

:root[data-vt="back"]::view-transition-old(root) {
  animation: stage-push-right-out var(--stage-slide) var(--stage-slide-ease) both;
}

:root[data-vt="back"]::view-transition-new(root) {
  animation: stage-push-right-in var(--stage-slide) var(--stage-slide-ease) both;
}

:root[data-vt="down"]::view-transition-old(root) {
  animation: stage-push-up-out var(--stage-slide) var(--stage-slide-ease) both;
}

:root[data-vt="down"]::view-transition-new(root) {
  animation: stage-push-up-in var(--stage-slide) var(--stage-slide-ease) both;
}

:root[data-vt="up"]::view-transition-old(root) {
  animation: stage-push-down-out var(--stage-slide) var(--stage-slide-ease) both;
}

:root[data-vt="up"]::view-transition-new(root) {
  animation: stage-push-down-in var(--stage-slide) var(--stage-slide-ease) both;
}

:root {
  --stage-slide: 680ms;
  --stage-slide-ease: cubic-bezier(.65, 0, .25, 1);
}

/* Within one level (a profile, an employer detail): a short cross-fade. */
:root[data-vt="fade"]::view-transition-group(*),
:root[data-vt="fade"]::view-transition-old(*),
:root[data-vt="fade"]::view-transition-new(*) {
  animation-duration: 260ms;
}

@keyframes stage-push-up-out {
  to { transform: translateY(-100vh); }
}

@keyframes stage-push-up-in {
  from { transform: translateY(100vh); }
}

@keyframes stage-push-down-out {
  to { transform: translateY(100vh); }
}

@keyframes stage-push-down-in {
  from { transform: translateY(-100vh); }
}

@keyframes stage-push-left-out {
  to { transform: translateX(-100vw); }
}

@keyframes stage-push-left-in {
  from { transform: translateX(100vw); }
}

@keyframes stage-push-right-out {
  to { transform: translateX(100vw); }
}

@keyframes stage-push-right-in {
  from { transform: translateX(-100vw); }
}

/* With view transitions the stage carries the motion; the old per-page
   entrance would play a second time inside it. */
@supports (view-transition-name: none) {
  .view.active {
    animation: none;
  }
}