/* (c) 2024-2026 ASSISTUK Lars Tiedemann. All Rights Reserved.
   Licensed for use exclusively on www.assistuk.net */

/* ============================================================
   dp-view-transitions.css
   ============================================================
   Cross-document View Transitions API (Chrome 126+, Safari 18+).
   On supporting browsers the navigation between same-origin pages
   is automatically wrapped in a smooth crossfade. Older browsers
   simply ignore @view-transition and fall back to dp-transition.js.

   The custom keyframes are tuned to feel CALM (matching the
   breathing transition overlay aesthetic) — slow ease-in/ease-out,
   no bounce, slight scale to give a sense of forward motion.
   ============================================================ */

@view-transition {
  navigation: auto;
}

/* Default: 280ms gentle crossfade for the whole page */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

::view-transition-old(root) {
  animation-name: dp-vt-fade-out;
}
::view-transition-new(root) {
  animation-name: dp-vt-fade-in;
}

@keyframes dp-vt-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.985); }
}
@keyframes dp-vt-fade-in {
  from { opacity: 0; transform: scale(1.012); }
  to   { opacity: 1; transform: scale(1); }
}

/* Reduce-motion respects user OS preference */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 120ms;
    animation-name: dp-vt-fade-quick;
  }
  @keyframes dp-vt-fade-quick {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ============================================================
   Tile-Morph (FLIP fallback for non-VT browsers)
   ============================================================
   When dp-transition.js detects a tile click, it can attach a
   `[data-vt-name="hero-tile"]` to the clicked element AND mirror
   the same name on the destination page's main content. The
   browser then animates ONLY that element.
   ============================================================ */

[data-vt-name="hero-tile"] {
  view-transition-name: hero-tile;
}

::view-transition-old(hero-tile),
::view-transition-new(hero-tile) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0.28, 1);
}