/* ponchi-view-transitions.css
 * Cross-document View Transitions for ponchi.us.
 *
 * WHAT THIS BUYS
 * Without it, every navigation is a white flash and a hard repaint: the header
 * blinks out and redraws identically one frame later, which is the single most
 * "cheap website" moment a site has. With it, the browser keeps the chrome in
 * place and morphs the content between pages. No framework, no router, no JS
 * for the base effect.
 *
 * WHY IT IS SAFE TO SHIP
 * Browsers without support simply navigate the old way. There is no polyfill,
 * no fallback branch, and nothing to break — the worst case is exactly the
 * site you have today.
 *
 * THE ONE RULE THAT MATTERS
 * A view-transition-name must be UNIQUE within a document at capture time.
 * Two elements sharing a name silently kills the whole transition, so every
 * name below is on an element that appears exactly once per page. Dynamic
 * pairs are assigned in ponchi-view-transitions.js and cleaned up after.
 */

@view-transition { navigation: auto; }

/* ---- persistent chrome -------------------------------------------------
   Named elements are lifted out of the page snapshot and animated on their
   own. Because the header, logo, cart and footer exist on both the old and
   new page under the same name, the browser MORPHS them instead of
   cross-fading — so they appear to simply stay put while the page changes
   underneath. That continuity is the whole effect. */
.site-header  { view-transition-name: ponchi-header; }
.site-footer  { view-transition-name: ponchi-footer; }
.brand img    { view-transition-name: ponchi-logo; }
.cart-link    { view-transition-name: ponchi-cart; }

/* ---- the page body itself ---- */
::view-transition-old(root),
::view-transition-new(root) {
  /* Stop the browser's default cross-fade so the custom pair below owns it. */
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  animation: 260ms cubic-bezier(.4, 0, 1, 1) both ponchi-out;
}
::view-transition-new(root) {
  animation: 400ms cubic-bezier(.22, .61, .36, 1) 60ms both ponchi-in;
}
@keyframes ponchi-out {
  to { opacity: 0; transform: translateY(-8px) scale(.995); }
}
@keyframes ponchi-in {
  from { opacity: 0; transform: translateY(14px) scale(.995); }
}

/* Chrome elements move rather than fade, and slightly slower than the content
   so the eye reads them as the stable frame the content moves inside. */
::view-transition-group(ponchi-header),
::view-transition-group(ponchi-footer),
::view-transition-group(ponchi-logo),
::view-transition-group(ponchi-cart) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
::view-transition-old(ponchi-header),
::view-transition-new(ponchi-header),
::view-transition-old(ponchi-footer),
::view-transition-new(ponchi-footer) {
  /* Identical on both pages — fading them would only introduce a flicker. */
  animation: none;
}

/* ---- the edition hand-off ---------------------------------------------
   Assigned at navigation time by the JS: the edition card you click on
   how-it-works.html and the matching edition on create.html briefly share
   this name, so the browser flies one into the other. The product promise is
   "your drawing becomes this object" — the navigation should behave like a
   continuation, not a page swap. */
::view-transition-group(ponchi-edition) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
::view-transition-old(ponchi-edition),
::view-transition-new(ponchi-edition) {
  /* Let the group's geometry morph carry it; cross-fading the contents on top
     produces a muddy double image mid-flight. */
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  height: 100%;
  object-fit: cover;
}

/* ---- accessibility -----------------------------------------------------
   Motion sickness and vestibular disorders are real, and a full-page slide is
   exactly the trigger. Honour the OS setting: navigation still works, it just
   stops moving. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}