/*
 * Link tree → website page transition (design: Design/Page Transitions/Link Tree to Website Transition.html).
 * Clicking "Visit our website" on the link tree: the link tree slides out to the LEFT, the home page slides in
 * from the right, and the IZYTECH logo flies from the link tree into the home page hero. The menu bar and the
 * hero text follow a moment later.
 *
 * Browser feature: cross-document View Transitions (Chrome / Edge 126+, Safari 18.2+). Other browsers ignore
 * all of this and open the page as before.
 *
 * Loaded ONLY on the home page and the link tree (this file opts those pages in; style.css must not contain
 * @view-transition, or every page of the site would cross-fade). assets/js/page-transition.js skips every
 * transition except link tree → home (language switches, back, home → home stay instant).
 */
@view-transition {
  navigation: auto;
}

/* The logo is the same element on both pages. */
.linktree-logo,
body.home .hero .hero-logo { view-transition-name: izy-logo; }

/* Home only: these arrive a little after the page. */
body.home > nav               { view-transition-name: izy-nav; }
body.home .hero-tagline       { view-transition-name: izy-hero-1; }
body.home .hero-headline      { view-transition-name: izy-hero-2; }
body.home .hero-sub           { view-transition-name: izy-hero-3; }
body.home .hero-cta-group     { view-transition-name: izy-hero-4; }

/* Pages: link tree out to the left, home in from the right. */
::view-transition-old(root) {
  animation: izy-page-out 1.1s cubic-bezier(.65, 0, .35, 1) both;
}
::view-transition-new(root) {
  animation: izy-page-in 1.1s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes izy-page-out { to   { transform: translateX(-100%); opacity: 0.35; } }
@keyframes izy-page-in  { from { transform: translateX(100%); } }

/* The logo flies (position and size), on top of everything. */
::view-transition-group(izy-logo) {
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  z-index: 10;
}
::view-transition-old(izy-logo),
::view-transition-new(izy-logo) {
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  height: 100%;
}

/* Menu bar and hero text: slide in from the right, slightly after the page. */
::view-transition-new(izy-nav),
::view-transition-new(izy-hero-1),
::view-transition-new(izy-hero-2),
::view-transition-new(izy-hero-3),
::view-transition-new(izy-hero-4) {
  animation: izy-follow 0.66s cubic-bezier(.22, .8, .28, 1) both;
}
::view-transition-new(izy-nav)    { animation-delay: 0.46s; }
::view-transition-new(izy-hero-1) { animation-delay: 0.515s; }
::view-transition-new(izy-hero-2) { animation-delay: 0.57s; }
::view-transition-new(izy-hero-3) { animation-delay: 0.625s; }
::view-transition-new(izy-hero-4) { animation-delay: 0.68s; }
::view-transition-group(izy-nav),
::view-transition-group(izy-hero-1),
::view-transition-group(izy-hero-2),
::view-transition-group(izy-hero-3),
::view-transition-group(izy-hero-4) { animation-duration: 1.36s; }   /* keep the groups until the last one is done */
@keyframes izy-follow { from { opacity: 0; transform: translateX(48px); } }

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