/* Cross-document view transitions: homepage card <-> case study hero.
   Single source: copied to public/shared/transitions.css by scripts/sync-shared.mjs.
   Browsers without support (Firefox) ignore all of this and navigate normally. */

@view-transition { navigation: auto; }

/* Card (homepage) and hero (case study) share view-transition-name cs-<slug>,
   set inline on each. The hero class is .cs-vt-hero, not .cs-hero: Nordra
   already styles its own .cs-hero. */
.k-case-card,
.cs-vt-hero { view-transition-class: case-study; }

/* Only named on case study pages. On the homepage the nav stays in the root
   snapshot, so it fades with the page and the expanding card covers it.
   The name goes on the inner .k-nav, not the <site-nav> host: a named element is
   a backdrop root, and the host's blur layers (shell.css) would then only see the
   nav itself instead of the page behind it. */
.cs-page site-nav .k-nav { view-transition-name: site-nav; }

/* Main pages: the nav has its own name so it holds still between pages, and the
   active item is named so its white pill slides from the old page's item to the
   new one's. Different from `site-nav`, so entering a case study still drops its
   nav in (:only-child) and the expanding card still covers the homepage nav. */
body:not(.cs-page) site-nav .k-nav { view-transition-name: main-nav; }
body:not(.cs-page) .k-nav__item[aria-current] { view-transition-name: nav-active; }

::view-transition-group(main-nav) { animation-duration: 0s; }
::view-transition-group(nav-active) {
  z-index: 11;
  animation-duration: 450ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
::view-transition-old(nav-active),
::view-transition-new(nav-active) {
  height: 100%;
  animation-duration: 450ms;
}

/* Main page -> main page (type added by layout.tsx): a plain, quick crossfade.
   The delayed fade above is tuned for the card morph and would leave a gap here. */
html:active-view-transition-type(page)::view-transition-old(root) { animation-duration: 250ms; }
html:active-view-transition-type(page)::view-transition-new(root) {
  animation-duration: 250ms;
  animation-delay: 0s;
}

/* ---------------------------------------------------------- Timing ---- */

/* Fast-start curve: the card moves the moment the page swaps. A slow-in curve
   (.7, 0, .2, 1) read as lag, since the first ~150ms barely moved. */
::view-transition-group(*.case-study) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(.2, .7, .1, 1);
}

/* Both snapshots fill the morphing box instead of keeping their own ratio. */
::view-transition-old(*.case-study),
::view-transition-new(*.case-study) {
  height: 100%;
  object-fit: cover;
}

::view-transition-old(root) { animation-duration: 200ms; }
::view-transition-new(root) { animation-duration: 200ms; animation-delay: 280ms; }

::view-transition-group(site-nav) { z-index: 10; }

/* Entering a case study: nav drops in once the card has nearly filled the screen. */
::view-transition-new(site-nav):only-child {
  animation: nav-drop 320ms cubic-bezier(.2, .8, .2, 1) 300ms both;
}
/* Leaving a case study: nav lifts away first. */
::view-transition-old(site-nav):only-child {
  animation: nav-lift 200ms cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes nav-drop { from { transform: translateY(-100%); } }
@keyframes nav-lift { to   { transform: translateY(-100%); } }

/* ----------------------------------------------------- Corner radius ---- */

/* Snapshots don't interpolate border-radius, so the pair is clipped instead:
   24px (card) -> 0 (hero) going in, the reverse coming back. `to-home` is added
   by the homepage's pagereveal handler when it is entered from /work/*. */
::view-transition-image-pair(*.case-study) {
  overflow: clip;
  animation: radius-open 480ms cubic-bezier(.2, .7, .1, 1) both;
}

html:active-view-transition-type(to-home)::view-transition-image-pair(*.case-study) {
  animation-name: radius-close;
  animation-delay: 120ms;
}
/* The card waits for the nav to lift before shrinking. */
html:active-view-transition-type(to-home)::view-transition-group(*.case-study) {
  animation-delay: 120ms;
}

@keyframes radius-open {
  from { clip-path: inset(0 round 24px); }
  to   { clip-path: inset(0 round 0); }
}
@keyframes radius-close {
  from { clip-path: inset(0 round 0); }
  to   { clip-path: inset(0 round 24px); }
}

/* ---------------------------------------------------- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-image-pair(*) {
    animation-duration: 150ms !important;
    animation-delay: 0s !important;
  }
  ::view-transition-new(site-nav):only-child,
  ::view-transition-old(site-nav):only-child { animation-name: none; }
}