/* ═══════════════════════════════════════════════
   VIEW TRANSITIONS - dimafedorov.ru
   Нативный MPA View Transitions API
   Chromium 126+, Safari 18.2+, Firefox 144+
   ═══════════════════════════════════════════════ */

/* Включаем cross-document view transitions */
@view-transition {
  navigation: auto;
}

/* ─── SHARED ELEMENTS ─── */
.logo {
  view-transition-name: logo;
}

footer {
  view-transition-name: site-footer;
}

/* ─── PAGE CONTENT ─── */
.hero,
.blog-hero,
.article-wrap {
  view-transition-name: page-content;
}

/* ─── DEFAULT TRANSITION: crossfade ─── */
::view-transition-old(root) {
  animation: vt-fade-out 0.25s ease-out;
}

::view-transition-new(root) {
  animation: vt-fade-in 0.3s ease-out;
}

/* ─── PAGE CONTENT: slide + fade ─── */
::view-transition-old(page-content) {
  animation: vt-slide-out 0.25s ease-in forwards;
}

::view-transition-new(page-content) {
  animation: vt-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── LOGO: stays in place (morph) ─── */
::view-transition-group(logo) {
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
}

::view-transition-old(logo),
::view-transition-new(logo) {
  animation: none;
  mix-blend-mode: normal;
}

/* ─── FOOTER: subtle crossfade ─── */
::view-transition-old(site-footer) {
  animation: vt-fade-out 0.2s ease-out;
}

::view-transition-new(site-footer) {
  animation: vt-fade-in 0.3s ease-out 0.1s both;
}

/* ─── BLOG POST IMAGE → ARTICLE COVER (shared element morph) ─── */
::view-transition-group(post-hero) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  border-radius: 12px;
}

::view-transition-old(post-hero) {
  animation: none;
}

::view-transition-new(post-hero) {
  animation: none;
}

/* ─── KEYFRAMES ─── */
@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vt-slide-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vt-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01s !important;
  }
}