/* fx/route-morph.css - prechody medzi pohľadmi (View Transitions API, len ako vylepšenie)
   Zdieľaný prvok = fotka (.tile__media s gradientom, inak <img>) -> fotka kurzu alebo profilu a späť.
   Text sa nikdy nemorfuje, popis dlaždice sa len stratí / objaví. Bez API: krátky crossfade v route-morph.js, pri traversal nič. */

@supports (view-transition-name: none) {

  /* hlavička počas prechodu: vlastná skupina, plná biela (snímka nemá backdrop-filter);
     stará snímka skrytá, skupina sa len presunie (keď bola hlavička schovaná, vysunie sa) */
  html.vt-run .top { view-transition-name: topbar; background: #fff; }
  ::view-transition-group(topbar) {
    animation-duration: .32s;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
    z-index: 10;
  }
  ::view-transition-old(topbar) { display: none; }
  ::view-transition-new(topbar) { animation: none; }
  /* po prechode sa plná biela plynulo vráti do priesvitnej (prechody hlavičky z menu-header ostávajú) */
  /* transform + box-shadow MUSIA zrkadliť menu-header.css (.js .top) - pri zmene tam zmeniť aj tu */
  html.vt-end .top {
    transition: transform .35s var(--ease), box-shadow .3s var(--ease), background-color .2s linear;
  }

  /* mobil: prilepená lišta kategórií ostáva nad letiacou fotkou a mizne / objaví sa s pohľadom */
  @media (max-width: 760px) {
    html.vt-run .chipbar.cr.is-stuck { view-transition-name: chips; }
  }
  ::view-transition-group(chips) { animation: none; z-index: 8; }
  ::view-transition-old(chips) { animation: rmOut .18s linear both; }
  ::view-transition-new(chips) { animation: rmFade .24s .09s linear both; }

  /* dlaždica počas prechodu: gradient patrí do snímky fotky (.tile__media), nie do koreňa */
  html.vt-run .tile.vt-src::after { display: none; }
  html.vt-run .tile.vt-src .tile__media::after {
    content: ""; position: absolute; inset: 0;
    background: var(--tile-grad);          /* ten istý token ako .tile::after v site.css */
  }

  /* popis dlaždice (a odznak videa lektora): zmizne skôr, než sa fotka zdvihne; pri návrate sa objaví, keď dosadá */
  ::view-transition-group(cap),
  ::view-transition-group(cap2) { animation: none; z-index: 6; }
  ::view-transition-old(cap),
  ::view-transition-old(cap2) { animation: rmOut .14s linear both; }
  ::view-transition-new(cap),
  ::view-transition-new(cap2) { animation: rmFade .2s .26s linear both; }

  /* koreň: starý pohľad rýchlo zmizne, nový jemne vystúpi */
  ::view-transition-old(root) { animation: rmOut .18s linear both; }
  ::view-transition-new(root) { animation: rmIn .32s .09s cubic-bezier(.2,.7,.2,1) both; }

  /* fotka: skupina kĺže a rastie, orezaná zaoblením cez clip-path (nie border-radius + overflow,
     ktoré sa prekresľujú na hlavnom vlákne); rozdielny polomer zdroja a cieľa dolaďuje JS tiež cez clip-path */
  ::view-transition-group(media) {
    animation-duration: .52s;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
    z-index: 5;
  }
  html.vt-back::view-transition-group(media) { animation-duration: .46s; }

  ::view-transition-image-pair(media) { isolation: auto; clip-path: inset(0 round 26px); }
  ::view-transition-old(media),
  ::view-transition-new(media) {
    width: 100%; height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
  }
  /* bez prepadu jasu: stará snímka ostáva plná, nová sa cez ňu vyjasní */
  ::view-transition-old(media) { animation: none; opacity: 1; }
  ::view-transition-new(media) { animation: rmFade .4s cubic-bezier(.2,.7,.2,1) both; }
  html.vt-back::view-transition-new(media) { animation-duration: .34s; }
  /* portréty lektorov: orez od hlavy, nie od stredu */
  html.vt-top::view-transition-old(media),
  html.vt-top::view-transition-new(media) { object-position: 50% 0; }
  /* cieľ nie je na obrazovke: zdrojová fotka len zmizne spolu s koreňom */
  html.vt-solo::view-transition-old(media) { animation: rmOut .18s linear both; }

  @keyframes rmOut { to { opacity: 0; } }
  @keyframes rmIn { from { opacity: 0; transform: translateY(12px); } }
  @keyframes rmFade { from { opacity: 0; } }

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