/* =====================================================================
   BLUME — Transition entre pages (effet premium)
   ===================================================================== */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  transform: translateY(100%);
  background: linear-gradient(135deg, #0e0e0f 0%, #125490 55%, #007CC1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

/* Motif de vagues subtil sur le voile */
.page-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(65deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px);
  opacity: .6;
}

/* Marque au centre du voile */
.page-transition__mark {
  position: relative;
  z-index: 2;
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: .04em;
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease;
}
.page-transition__mark span { color: rgba(255,255,255,.55); }

/* --- Phase 1 : le voile MONTE pour couvrir (au clic) --- */
.page-transition.is-covering {
  transform: translateY(0);
  transition: transform .7s cubic-bezier(.65,0,.35,1);
  pointer-events: all;
}
.page-transition.is-covering .page-transition__mark {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease .2s, transform .5s ease .2s;
}

/* --- Phase 2 : le voile SE RETIRE vers le haut (nouvelle page) --- */
.page-transition.is-revealing {
  transform: translateY(-100%);
  transition: transform .85s cubic-bezier(.65,0,.35,1);
}
/* pendant la révélation, la marque s'estompe doucement */
.page-transition.is-revealing .page-transition__mark {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .5s ease, transform .6s ease;
}

/* Fondu doux du contenu à l'arrivée */
body.pt-ready { animation: pt-fade-in .7s ease both; }
@keyframes pt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Anti-flash : le voile part visible dès le chargement (posé par CSS),
   le JS le retire ensuite. Si JS désactivé, on ne bloque rien. */
.js-pt-loading .page-transition {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none !important; }
  body.pt-ready { animation: none; }
}