/* Directional cross-document View Transition between index.html <-> motion.html
   only (this stylesheet is loaded on just those two pages, not site-wide, so
   navigating to/from About/Contact/Shop is unaffected). Degrades silently to a
   normal instant navigation in browsers that don't support this yet. */
@view-transition {
  navigation: auto;
  types: forwards, backwards;
}

/* Without a name of its own, .hero-panel gets baked into the single flat
   "root" snapshot along with everything else, so it slides off with the
   rest of the page — breaking the sticky sidebar illusion mid-transition.
   Naming it pulls it into its own independent transition group (a plain
   cross-fade, since old/new occupy the same rect) so only the content
   area actually slides. */
.hero-panel { view-transition-name: hero-panel; }

/* Same reasoning for the Illustration/Motion toggle: if it's part of the
   sliding root snapshot, the pill's own GSAP animation (which plays just
   before navigation, see view-toggle.js) gets swept away as part of the
   whole-page slide the instant navigation starts, so its movement barely
   registers as distinct. Keeping the toggle static during the transition
   lets the pill's own motion actually be seen. */
.view-toggle { view-transition-name: view-toggle; }

html:active-view-transition-type(forwards)::view-transition-old(root) {
  animation-name: vt-slide-out-left; animation-duration:0.45s;
  animation-timing-function:cubic-bezier(0.4,0,0.2,1); animation-fill-mode:both;
}
html:active-view-transition-type(forwards)::view-transition-new(root) {
  animation-name: vt-slide-in-right; animation-duration:0.45s;
  animation-timing-function:cubic-bezier(0.4,0,0.2,1); animation-fill-mode:both;
}
html:active-view-transition-type(backwards)::view-transition-old(root) {
  animation-name: vt-slide-out-right; animation-duration:0.45s;
  animation-timing-function:cubic-bezier(0.4,0,0.2,1); animation-fill-mode:both;
}
html:active-view-transition-type(backwards)::view-transition-new(root) {
  animation-name: vt-slide-in-left; animation-duration:0.45s;
  animation-timing-function:cubic-bezier(0.4,0,0.2,1); animation-fill-mode:both;
}

@keyframes vt-slide-out-left  { to   { transform:translateX(-100%); } }
@keyframes vt-slide-in-right  { from { transform:translateX(100%); }  to { transform:translateX(0); } }
@keyframes vt-slide-out-right { to   { transform:translateX(100%); } }
@keyframes vt-slide-in-left   { from { transform:translateX(-100%); } to { transform:translateX(0); } }

@media (prefers-reduced-motion:reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}