/* ===== Transitions entre pages =====
   Navigateurs récents (Chrome, Edge, Safari 18.2+) : View Transitions natives.
   Les autres : rideau en JavaScript (transitions.js). */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .75s cubic-bezier(.7,0,.3,1) both; }
::view-transition-new(root) { animation: vt-in 1.05s cubic-bezier(.76,0,.18,1) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.965); filter: blur(8px) brightness(.6); } }
@keyframes vt-in  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* éléments partagés : le logo glisse d'une page à l'autre, la photo du soin s'agrandit */
body > header > .wrap > a:first-child > img, .logo-img { view-transition-name: site-logo; }
::view-transition-group(site-logo) { animation-duration: .9s; animation-timing-function: cubic-bezier(.7,0,.2,1); }
::view-transition-group(*) { animation-timing-function: cubic-bezier(.7,0,.2,1); }

/* rideau de secours */
#pt{position:fixed;inset:0;z-index:9999;background:radial-gradient(60% 50% at 50% 50%,#0d1d33 0%,#05070b 70%);display:grid;place-items:center;pointer-events:none;transform:translateY(100%);transition:transform .75s cubic-bezier(.76,0,.24,1)}
#pt img{width:120px;height:auto;opacity:0;transform:translateY(12px);transition:opacity .5s ease .2s,transform .7s cubic-bezier(.2,.7,.1,1) .2s}
#pt.cover{transform:none;pointer-events:auto}
#pt.cover img{opacity:1;transform:none}
#pt.leave{transform:translateY(-100%)}
#pt.leave img{opacity:0}

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