/* Native same-origin navigation: no click interception, fetch or artificial delay.
   MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition
   Stable names must be unique per page; the lightbox deliberately has no name. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  .m-header { view-transition-name: site-navigation; }
  .p-card-image[data-project="doklad-ai"] img,
  .p-case-shot[data-project="doklad-ai"] img { view-transition-name: project-doklad-ai; }
  .p-card-image[data-project="cbd-svet"] img,
  .p-case-shot[data-project="cbd-svet"] img { view-transition-name: project-cbd-svet; }
  .p-card-image[data-project="agecheck"] img,
  .p-case-shot[data-project="agecheck"] img { view-transition-name: project-agecheck; }
  .p-card-image[data-project="obalka"] img,
  .p-case-shot[data-project="obalka"] img { view-transition-name: project-obalka; }
  .p-card-image[data-project="mysecret"] img,
  .p-case-shot[data-project="mysecret"] img { view-transition-name: project-mysecret; }
  .p-card-image[data-project="petr-kuban"] img,
  .p-case-shot[data-project="petr-kuban"] img { view-transition-name: project-petr-kuban; }

  /* A new sheet opens beneath the familiar navigation. The selected product
     keeps its identity and travels from the card into its case study. */
  ::view-transition { pointer-events: none; }
  ::view-transition-group(*) {
    animation-duration: 360ms;
    animation-timing-function: cubic-bezier(.22,.72,.18,1);
  }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) {
    animation: tanduva-open-page 300ms cubic-bezier(.22,.72,.18,1) both;
    mix-blend-mode: normal;
  }
  ::view-transition-group(site-navigation) { z-index: 3; }
  ::view-transition-old(site-navigation),
  ::view-transition-new(site-navigation) { animation: none; }
  ::view-transition-old(site-navigation) { display: none; }

  ::view-transition-group(project-doklad-ai),
  ::view-transition-group(project-cbd-svet),
  ::view-transition-group(project-agecheck),
  ::view-transition-group(project-obalka),
  ::view-transition-group(project-mysecret),
  ::view-transition-group(project-petr-kuban) {
    z-index: 2;
    overflow: clip;
    border-radius: 8px;
  }
}

@keyframes tanduva-open-page {
  from { clip-path: inset(0 0 100% 0); transform: translateY(12px); }
  to { clip-path: inset(0); transform: translateY(0); }
}

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