/* ============================================================
   LE CLOS DU SOLEIL, Écran de chargement « arrivée »
   Verre dépoli doré : on entrevoit le site, le logo vient au point
   net, un halo éclot, une lumière balaie le tracé doré, puis l'écran
   se dissout lentement en découvrant la page.
   Se greffe sur #preloader (accueil) et .voile-entree (autres pages)
   via la classe .ecran-logo. Les sélecteurs à deux classes l'emportent
   sur les styles inline des pages, quel que soit l'ordre.
   ============================================================ */

.ecran-logo{
  position:fixed;inset:0;z-index:96;
  display:flex;align-items:center;justify-content:center;
  background:rgba(246,240,226,.74);
  -webkit-backdrop-filter:blur(22px) saturate(1.06);
  backdrop-filter:blur(22px) saturate(1.06);
  /* SORTIE : on ne fait fondre QUE l'opacité, le flou s'efface avec elle,
     naturellement. Animer backdrop-filter le ferait « claquer » en fin de
     course (les navigateurs l'interpolent mal) = l'effet pop-up. Courbe à
     longue traîne douce pour déposer le visiteur en douceur sur le site. */
  transition:opacity 1.5s cubic-bezier(.33,0,.12,1);
  will-change:opacity;
}

/* halo doré qui éclot derrière le logo, profondeur et chaleur */
.ecran-logo::before{
  content:"";position:absolute;left:50%;top:50%;
  width:min(640px,94vw);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(.5);
  background:radial-gradient(circle,
    rgba(200,138,56,.42) 0%, rgba(200,138,56,.15) 44%, transparent 72%);
  opacity:0;pointer-events:none;
  animation:clos-aura 1.7s cubic-bezier(.19,1,.22,1) .1s forwards;
}
@keyframes clos-aura{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  45%{opacity:1}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
}

/* le logo, enveloppé dans <picture>, ce qui permet l'éclat en ::after */
.ecran-logo picture{position:relative;display:block;width:min(360px,60vw)}
.ecran-logo .logo-chargement{
  display:block;width:100%;height:auto;
  opacity:1;transform:none;
  filter:drop-shadow(0 10px 34px rgba(200,138,56,.34)) drop-shadow(0 0 16px rgba(214,168,86,.5));
  /* état de repos = valeurs finales : l'animation d'entrée n'a PAS de
     forwards, elle retombe donc proprement ici, et la transition prend
     le relais pour la sortie (aucun saut) */
  transition:transform 1.5s cubic-bezier(.33,0,.12,1), opacity 1.3s ease;
  animation:clos-logo-arrivee 1.35s cubic-bezier(.19,1,.22,1) .1s;
}
@keyframes clos-logo-arrivee{
  0%{opacity:0;transform:scale(.88);filter:blur(10px) drop-shadow(0 0 0 rgba(200,138,56,0))}
  55%{opacity:1}
  100%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 10px 34px rgba(200,138,56,.34)) drop-shadow(0 0 16px rgba(214,168,86,.5))}
}

/* l'éclat : une lumière traverse le tracé doré du logo, elle passe deux fois */
.ecran-logo picture::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 38%, rgba(255,248,232,.85) 47%, #fff 50%, rgba(255,248,232,.85) 53%, transparent 62%);
  background-size:280% 100%;background-position:140% 0;
  -webkit-mask:url(img/logo-clos-520.webp?v=2) center/contain no-repeat;
          mask:url(img/logo-clos-520.webp?v=2) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;
  animation:clos-eclat .9s cubic-bezier(.5,0,.3,1) .45s 2;
}
@keyframes clos-eclat{
  0%{background-position:140% 0;opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{background-position:-140% 0;opacity:0}
}

/* accueil : #preloader est un id (plus spécifique), on rétablit le
   verre dépoli et la même sortie fondue */
#preloader.ecran-logo{
  background:rgba(246,240,226,.74);
  z-index:96;
  transition:opacity 1.5s cubic-bezier(.33,0,.12,1);
}

/* sorties : le voile se dissout (opacité seule), et le logo « avance »
   doucement vers le visiteur en s'effaçant (effet d'ouverture) */
#preloader.ecran-logo.leve{opacity:0;pointer-events:none}
.voile-entree.ecran-logo.parti{opacity:0}
#preloader.ecran-logo.leve .logo-chargement,
.voile-entree.ecran-logo.parti .logo-chargement{
  opacity:0;transform:scale(1.08) translateY(-14px);
}

/* pages intérieures : dissolution un rien plus vive que l'arrivée (on ne
   veut pas alourdir chaque navigation), même douceur de fondu */
.voile-entree.ecran-logo{
  transition:opacity 1s cubic-bezier(.33,0,.12,1);
}

/* mode nuit : voile encre translucide, le logo doré ressort */
:root.nuit .ecran-logo,
:root.nuit #preloader.ecran-logo{background:rgba(22,18,16,.78)}
:root.nuit .ecran-logo::before{
  background:radial-gradient(circle,
    rgba(214,163,84,.26) 0%, rgba(214,163,84,.09) 42%, transparent 68%);
}

/* navigateurs sans backdrop-filter : voile un peu plus opaque */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ecran-logo{background:rgba(246,240,226,.93)}
  :root.nuit .ecran-logo{background:rgba(22,18,16,.93)}
}

/* mouvement réduit : pas de flou animé ni d'éclat, un simple fondu court */
@media (prefers-reduced-motion:reduce){
  .ecran-logo{transition:opacity .4s ease}
  .ecran-logo::before,.ecran-logo picture::after{animation:none;opacity:0}
  .ecran-logo .logo-chargement{animation:none;filter:none;transition:opacity .4s ease}
}