/* Sidövergångar (cross-document View Transitions) mellan startsidan och
   tjänstesidorna. Måste länkas på BÅDA sidorna för att övergången ska köras:
   <link rel="stylesheet" href="/assets/vt.css">
   Webbläsare utan stöd ignorerar allt här och navigerar som vanligt. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Tjänstesidorna: heron tar emot kortet från startsidan, h1 tar emot kortets rubrik.
   (Startsidan sätter samma namn med JS, bara på det klickade kortet.) */
.tj-hero { view-transition-name: srv-card; }
.tj-hero h1 { view-transition-name: srv-title; }

/* Kortet sveper ut och tar över skärmen */
::view-transition-group(srv-card),
::view-transition-group(srv-title) {
  animation-duration: .55s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
::view-transition-group(srv-card) { overflow: clip; border-radius: 6px; }
::view-transition-old(srv-card),
::view-transition-new(srv-card) { height: 100%; object-fit: cover; }

/* Resten av sidan glider i sidled: framåt åt vänster, bakåt åt höger */
::view-transition-old(root) { animation: vt-ut .38s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2,.7,.2,1) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-ut-bak; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-bak; }

@keyframes vt-ut     { to   { opacity: 0; transform: translateX(-6%); } }
@keyframes vt-in     { from { opacity: 0; transform: translateX(6%); } }
@keyframes vt-ut-bak { to   { opacity: 0; transform: translateX(6%); } }
@keyframes vt-in-bak { from { opacity: 0; transform: translateX(-6%); } }