/**
 * Page header morph (Miguel 2026-11-06): every page opens with the same header (home included), so when the
 * visitor changes page the header stays on screen and morphs: it resizes to the new page's height, the photo
 * glides into the new one, the title and line swap in place, and the rest of the page rises in softly.
 * Uses cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+); other browsers just load the page.
 */
@view-transition { navigation: auto; }

/* What persists between pages. */
.skin-e .topbar { view-transition-name: wave-topbar; }
.skin-e .site-header { view-transition-name: wave-header; }
.skin-e .page-hero { view-transition-name: wave-hero; }

/* Timing: quick and fluid. */
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.22, .8, .2, 1); }
::view-transition-group(wave-header), ::view-transition-group(wave-topbar) { animation: none; }
::view-transition-old(wave-header), ::view-transition-new(wave-header),
::view-transition-old(wave-topbar), ::view-transition-new(wave-topbar) { animation: none; }
::view-transition-old(wave-header) { display: none; }
::view-transition-old(wave-topbar) { display: none; }

/* The header band (photo + veil + wave, without its texts): the box morphs to the new height while the two
   photos blend, kept at their real proportions (no stretching). */
::view-transition-old(wave-hero), ::view-transition-new(wave-hero) { height: 100%; object-fit: cover; object-position: center top; }
/* Three ways to change the header, chosen in the local preview with ?anim=1|2|3 (Miguel 2026-11-06).
   1 "Respiro": the old photo drifts back and blurs away while the new one comes into focus.
   2 "Abre do meio": the new header opens from the middle line up and down, soft wavy edges, like a sound wave.
   3 "Suave": the plain cross-fade from the first version. */
::view-transition-group(wave-hero) { overflow: clip; animation-duration: .8s; animation-timing-function: cubic-bezier(.25, .8, .25, 1); }

/* 1 Respiro (default) */
::view-transition-old(wave-hero) { animation: wave-breathe-out .7s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(wave-hero) { animation: wave-breathe-in .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wave-breathe-out { to { opacity: 0; filter: blur(10px); transform: scale(1.04); } }
@keyframes wave-breathe-in { from { opacity: 0; filter: blur(14px); transform: scale(1.06); } }

/* 2 Abre do meio */
html.wave-anim-2::view-transition-old(wave-hero) { animation: wave-dim .9s ease both; }
html.wave-anim-2::view-transition-new(wave-hero) {
  -webkit-mask-image: url("../../img/wave-band.svg"); mask-image: url("../../img/wave-band.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  animation: wave-open .9s cubic-bezier(.5, 0, .2, 1) both;
}
@keyframes wave-open {
  from { -webkit-mask-size: 100% 0%; mask-size: 100% 0%; }
  to { -webkit-mask-size: 100% 380%; mask-size: 100% 380%; }
}
@keyframes wave-dim { to { opacity: .6; } }

/* 3 Suave */
html.wave-anim-3::view-transition-old(wave-hero) { animation: wave-fade-out .45s ease both; }
html.wave-anim-3::view-transition-new(wave-hero) { animation: wave-fade-in .5s ease both; filter: none; transform: none; }

/* The rest of the page: a calm cross-fade, the new content lifting a little. */
::view-transition-old(root) { animation: wave-fade-out .5s ease both; }
::view-transition-new(root) { animation: wave-rise-in .7s .1s cubic-bezier(.25, .8, .25, 1) both; }

@keyframes wave-fade-out { to { opacity: 0; } }
@keyframes wave-fade-in { from { opacity: 0; } }
@keyframes wave-text-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes wave-text-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes wave-rise-in { from { opacity: 0; transform: translateY(14px); } }

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