/* CORALINE V10 — transição nativa entre páginas: sem splash, sem loader. */
/* A página de destino é revelada SOBRE a anterior, em ~260 ms. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-duration: 260ms;
  animation-fill-mode: both;
}
::view-transition-old(root) {
  z-index: 1;
  animation-name: coraline-dim;
  animation-timing-function: ease-out;
}
::view-transition-new(root) {
  z-index: 2;
  animation-name: coraline-diagonal-reveal;
  animation-timing-function: cubic-bezier(.24,.78,.26,1);
  filter: drop-shadow(-5px 0 8px rgba(255,185,139,.32));
}

@keyframes coraline-dim {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: .94; transform: scale(1.008); }
}

/* A borda inclinada lembra uma passagem luminosa, sem esconder toda a tela. */
@keyframes coraline-diagonal-reveal {
  0%   { clip-path: polygon(-2% 0, -9% 0, -18% 100%, -2% 100%); opacity: 1; }
  100% { clip-path: polygon(-2% 0, 112% 0, 103% 100%, -2% 100%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms !important;
  }
}