/* ============================================================================
   View Transitions API - Progressive Enhancement
   Browsers without support simply ignore these rules
   ============================================================================ */

/* Enable cross-document view transitions for MPA navigation */
@view-transition {
  navigation: auto;
}

/* ---- Element-Level Transition Names ---- */

/* Header stays fixed during transitions */
header.header-area {
  view-transition-name: site-header;
}

/* Logo persists across pages */
.header-logo img,
.header-logo svg {
  view-transition-name: site-logo;
}

/* Footer persists across pages */
.footer-area {
  view-transition-name: site-footer;
}

/* Main content area transitions independently */
#smooth-content {
  view-transition-name: page-content;
}

/* ---- Default Root Transition (fallback) ---- */

::view-transition-old(root) {
  animation: vt-fade-out 0.15s ease-out both;
}

::view-transition-new(root) {
  animation: vt-fade-in 0.25s ease-in both;
  animation-delay: 0.05s;
}

/* ---- Header/Footer: No animation (stay in place) ---- */

::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
}

::view-transition-old(site-logo),
::view-transition-new(site-logo) {
  animation: none;
}

::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
}

/* ---- Content Area Transition ---- */

::view-transition-old(page-content) {
  animation: vt-content-out 0.2s ease-out both;
}

::view-transition-new(page-content) {
  animation: vt-content-in 0.25s ease-in both;
  animation-delay: 0.05s;
}

/* ---- Page-Specific Transitions ---- */

/* Blog pages: horizontal slide */
body.blog-page ~ ::view-transition-old(page-content) {
  animation-name: vt-slide-out-left;
}
body.blog-page ~ ::view-transition-new(page-content) {
  animation-name: vt-slide-in-right;
}

/* Service pages: vertical slide up */
body[class*="servicio"] ~ ::view-transition-old(page-content) {
  animation-name: vt-slide-out-up;
}
body[class*="servicio"] ~ ::view-transition-new(page-content) {
  animation-name: vt-slide-in-up;
}

/* ---- Keyframes ---- */

@keyframes vt-fade-out {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(2px); }
}

@keyframes vt-fade-in {
  from { opacity: 0; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}

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

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

@keyframes vt-slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-20px); }
}

@keyframes vt-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

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

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

/* ---- Reduced Motion ---- */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(page-content),
  ::view-transition-new(page-content),
  ::view-transition-old(site-header),
  ::view-transition-new(site-header),
  ::view-transition-old(site-footer),
  ::view-transition-new(site-footer),
  ::view-transition-old(site-logo),
  ::view-transition-new(site-logo) {
    animation-duration: 0.01s;
  }
}