/* Basic View Transitions styling */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0.01ms; }
  ::view-transition-new(*) { animation-duration: 0.01ms; }
  ::view-transition-old(*) { animation-duration: 0.01ms; }
}

/* Name for the main content to animate between pages */
/* Animate only the main content. Header updates instantáneo pero sin fade. */
.vt-main { view-transition-name: page; }

/* Fade/slide for page transition - shorter duration to reduce lag */
::view-transition-old(page) {
  animation: vt-fade-out 240ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(page) {
  animation: vt-fade-in 240ms cubic-bezier(0, 0, 0.2, 1) both;
}

/* Keep the logo morphing smoothly */
img.site-logo__img { view-transition-name: logo; }
::view-transition-old(logo) { animation: vt-logo-out 300ms ease both; }
::view-transition-new(logo) { animation: vt-logo-in 300ms ease both; }

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

@keyframes vt-logo-out { from { opacity: 1; } to { opacity: 0.9; } }
@keyframes vt-logo-in { from { opacity: 0.9; } to { opacity: 1; } }

/* Performance hints */
.hero__bg-wrap { contain: paint; }
.hero__bg { will-change: transform, opacity; transform: translateZ(0); }
footer.site-footer { content-visibility: visible; contain: none; }

/* Reduced-blur helper used during transitions or on low-power devices */
.hero__bg.reduced-blur {
  -webkit-filter: blur(1px) !important;
  filter: blur(1px) !important;
  transform: scale(1.002) !important;
}

/* Turn off heavy blur on narrower viewports (mobile/tablet) */
@media (max-width: 1024px) {
  .hero__bg {
    -webkit-filter: none !important;
    filter: none !important;
    transform: none !important;
    will-change: auto;
  }
}

/* Remove content-visibility on hero subcomponents to avoid delayed paint on first interaction */

/* If the document declares reduced effects, make transitions shorter and subtler */
:root.reduced-fx ::view-transition-old(page) { animation-duration: 180ms; }
:root.reduced-fx ::view-transition-new(page) { animation-duration: 180ms; }
:root.reduced-fx ::view-transition-old(logo) { animation-duration: 140ms; }
:root.reduced-fx ::view-transition-new(logo) { animation-duration: 140ms; }

/* Fallback fade mode when we disable snapshot-based transitions */
:root.vt-fallback .vt-root {
  transition: opacity 220ms ease;
}
:root.vt-fallback .vt-root.is-fading-out {
  opacity: 0;
  pointer-events: none;
}
:root.vt-fallback .vt-root.is-fading-in {
  opacity: 1;
}