/* ============================================================
   TRANSITION ENTRE PAGES : lumière prismatique (voir js/transition.js)
   Un voile blanc, traversé de couleurs diffractées, s'étend depuis le point du clic (masque radial à bord doux),
   recouvre l'écran, puis se retire sur la page suivante. Tout est piloté par 3 variables animées :
     --r    rayon du voile        --soft  largeur du bord doux        --pa  intensité des couleurs
   Le point de départ (--x, --y) et la teinte (--hue) sont posés sur <html> par le script.
   ============================================================ */
@property --r    { syntax:'<length>'; inherits:true; initial-value:0px }
@property --soft { syntax:'<length>'; inherits:true; initial-value:0px }
@property --pa   { syntax:'<number>'; inherits:true; initial-value:.9 }

.ptc{position:fixed;inset:0;z-index:10001;pointer-events:none;overflow:clip;visibility:hidden}
.ptc.active,html.pt-enter .ptc{visibility:visible}
.ptc-panel{position:absolute;inset:0;display:grid;place-items:center;background:#fff;
  -webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 var(--r),transparent calc(var(--r) + var(--soft)));
          mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 var(--r),transparent calc(var(--r) + var(--soft)))}
/* état « écran couvert » : celui de la page d'arrivée avant que le script ne démarre (pas de flash) */
html.pt-enter .ptc-panel{--r:150vmax;--soft:18vmax;--pa:.06}

/* la lumière : deux formes pleines, floutées, autour du point du clic (même système que la hero), sur un voile blanc */
.ptc-panel::before{content:"";position:absolute;inset:0;opacity:var(--pa);
  background:
    radial-gradient(circle at calc(var(--x,50%) + 11vmax) calc(var(--y,50%) - 5vmax),#3b5bff 0 13vmax,transparent 13.5vmax),
    radial-gradient(circle at calc(var(--x,50%) - 12vmax) calc(var(--y,50%) + 7vmax),#ff7a45 0 10vmax,transparent 10.5vmax);
  filter:blur(64px) hue-rotate(var(--hue,0deg))}
.ptc-panel::after{content:"";position:absolute;inset:0;background:var(--grain) 0 0 / 220px 220px;mix-blend-mode:soft-light;opacity:.9}

.ptc-logo{position:relative;z-index:1;width:clamp(88px,12vw,148px);height:auto;overflow:hidden;margin-top:-6vh}
.ptc-logo path{fill:#000;transform-box:fill-box}
.ptc-logo .b{fill-opacity:.3}
/* écran d'accueil (1re visite de la session) : le logo est caché tant que son animation n'a pas démarré */
html.pt-intro .ptc-logo path{transform:translateY(130px)}
@media (prefers-reduced-motion:reduce){.ptc{display:none}}

/* ============ Écran d'accueil « Entrer » (1re visite de la session ; classe pt-splash posée par transition.js) ============
   Quelques grandes plages de couleur très pâles, floues et séparées, un voile blanc sur les bords, un petit logo en haut et un mot « Entrer » au centre.
   Le flou ne sert qu'ici : rien d'autre sur la page n'est décoratif. */
html.pt-splash .ptc{pointer-events:auto}
html.pt-splash .ptc-panel{cursor:pointer}
html.pt-splash .ptc-panel::before{
  opacity:1;
  background:
    radial-gradient(ellipse 78% 72% at 50% 50%,transparent 36%,#fff 100%),                      /* voile blanc sur les bords */
    radial-gradient(circle at 26% 30%,rgba(112,174,216,.62) 0 17vmax,transparent 17.5vmax),    /* bleu clair */
    radial-gradient(circle at 76% 40%,rgba(122,152,178,.5) 0 15vmax,transparent 15.5vmax),     /* gris-bleu */
    radial-gradient(circle at 46% 84%,rgba(192,186,126,.55) 0 17vmax,transparent 17.5vmax);   /* olive */
  filter:blur(84px);animation:splash-drift 14s ease-in-out infinite alternate}
@keyframes splash-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.5%,1%,0)}}
html.pt-splash .ptc-logo{position:absolute;top:clamp(20px,4vh,38px);left:50%;width:30px;margin:0;transform:translateX(-50%)}
.ptc-enter{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px 26px;border:0;background:none;font:500 14px/1 var(--font);letter-spacing:.06em;
  color:rgba(0,0,0,.55);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s var(--ease),color .25s var(--ease)}
.ptc-enter.ready{opacity:1;pointer-events:auto}
.ptc-enter:hover{color:#000}
.ptc-enter:focus-visible{outline:2px solid #000;outline-offset:4px;border-radius:var(--r-pill)}
@media (prefers-reduced-motion:reduce){html.pt-splash .ptc-panel::before{animation:none}}