/* =============================================================================
 * Aotea Energy page transition — FADE-ONLY variant
 * Same 1s timing + eases as the live site, but a straight cross-fade
 * (slide/translate removed).
 *
 * TRIGGER (pick one):
 *   • Multi-page site:  the @view-transition line below (pure CSS, no JS)
 *   • Single-page app:  wrap your DOM swap in document.startViewTransition(...)
 * ============================================================================= */

/* --- trigger for multi-page (cross-document) navigations --- */
@view-transition { navigation: auto; }

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

::view-transition-old(*),
::view-transition-new(*) {
  mix-blend-mode: normal;
  backface-visibility: hidden;
}

/* --- OLD page: fade out --- */
@keyframes view-transition-exit {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
::view-transition-old(root) {
  animation-name: view-transition-exit;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.85, 0.09, 0.4, 0.77);
  animation-fill-mode: both;
}

/* --- NEW page: fade in --- */
@keyframes view-transition-enter {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
::view-transition-new(root) {
  animation-name: view-transition-enter;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.75, 0.22, 0.4, 0.77);
  animation-fill-mode: both;
}