/* Composite the destination over the intact homepage, never an empty canvas.
   Only on arriving from the homepage - the hand-off to Explore Canonis or
   any link clicked there (html[data-intro-arrival], set by
   js/intro-transition.js); every other navigation takes the shorter
   crossfade in css/page-transition.css. */
@view-transition { navigation: auto; }
html[data-intro-arrival]::view-transition-group(root) { animation-duration: 1800ms; }
html[data-intro-arrival]::view-transition-old(root) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}
html[data-intro-arrival]::view-transition-new(root) {
  animation: intro-crossfade 1800ms cubic-bezier(.4, 0, .2, 1) both;
  mix-blend-mode: normal;
}
@keyframes intro-crossfade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── PHONES AND TABLETS ───────────────────────────────────────────────
   1.5s here against 1.8s on desktop. The crossfade is only the hand-over;
   how long the homepage is on show before it starts is set in index.html
   (the mobile DELAY, and TEMPO/HOLD for the desktop sketch).

   Both the group and the new-view animation have to be set: the group
   governs how long the transition is held open, and the
   ::view-transition-new(root) rule above carries its own 1800ms in the
   `animation` shorthand, which would otherwise win.

   The outgoing frame is held on screen while Who We Are loads, so on a
   slow phone connection the crossing can feel longer than this. */
@media (max-width: 1023.98px) {
  html[data-intro-arrival]::view-transition-group(root) { animation-duration: 1500ms; }
  html[data-intro-arrival]::view-transition-new(root) {
    animation: intro-crossfade 1500ms cubic-bezier(.4, 0, .2, 1) both;
  }
}

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