/* Smooth SPA view changes and hero image crossfades. */

:root{
  --view-fade-ms: 220ms;
  --hero-fade-ms: 280ms;
}

#home-landing,
#page-hero,
#workspace,
#word-library{
  transition: opacity var(--view-fade-ms) ease, transform var(--view-fade-ms) ease;
}

#page-hero .page-hero-media img,
#home-landing .home-hero img,
#home-landing .home-books-poster img{
  transition: opacity var(--hero-fade-ms) ease;
  will-change: opacity;
}

html.is-view-leaving #home-landing,
html.is-view-leaving #page-hero,
html.is-view-leaving #workspace,
html.is-view-leaving #word-library{
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

html.is-view-entering #home-landing,
html.is-view-entering #page-hero,
html.is-view-entering #workspace,
html.is-view-entering #word-library{
  opacity: 0;
  transform: translateY(8px);
}

/* Chromium View Transitions API — soft crossfade between pages. */
@supports (view-transition-name: none){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration: .34s;
    animation-timing-function: ease;
  }
  ::view-transition-old(root){
    animation-name: turki-view-out;
  }
  ::view-transition-new(root){
    animation-name: turki-view-in;
  }
}

@keyframes turki-view-out{
  from{opacity:1; transform:translateY(0)}
  to{opacity:0; transform:translateY(-6px)}
}
@keyframes turki-view-in{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  #home-landing,
  #page-hero,
  #workspace,
  #word-library,
  #page-hero .page-hero-media img,
  #home-landing .home-hero img,
  #home-landing .home-books-poster img{
    transition: none !important;
  }
  html.is-view-leaving #home-landing,
  html.is-view-leaving #page-hero,
  html.is-view-leaving #workspace,
  html.is-view-leaving #word-library,
  html.is-view-entering #home-landing,
  html.is-view-entering #page-hero,
  html.is-view-entering #workspace,
  html.is-view-entering #word-library{
    opacity: 1 !important;
    transform: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation: none !important;
  }
}