/* --------------------- */
/* --------------------- */
/* -- EFFETS SPÉCIAUX -- */
/* --------------------- */
/* --------------------- */

/*
DESCRIPTION :

Les styles responsables des animations et des effets visuels purement esthétiques.
*/

/* ----------------------- */
/* ----------------------- */
/* -- Styles d'éléments -- */

*::selection,
.clair *.surligne::selection {
   text-shadow: var(--couleur-claire) 0 0 var(--espacement-XL);
}

button {
   text-shadow: inherit;
}

button.clair,
*.bouton.clair,
button:not(.clair):hover,
*.bouton:not(.clair):hover,
button:focus-visible,
*.bouton:focus-visible,
/* ------------------ */
.cv .portrait {
   box-shadow: var(--couleur-brillance-moyenne) 0 0 var(--espacement-XL);
}

button:focus-visible:hover,
*.bouton:focus-visible:hover,
button.clair:hover,
*.bouton.clair:hover,
button.clair:focus-visible,
*.bouton.clair:focus-visible {
   box-shadow: none;
}

a:not(.bouton):focus-visible,
a:not(.bouton):hover,
/* ------------------ */
.surligne:not(.clair .surligne),
/* ------------------ */
.clair .contenu_bloc {
   box-shadow: var(--couleur-brillance-faible) 0 0 var(--espacement-XL);
}

.clair *::selection,
*.surligne::selection {
   text-shadow: none;
}

input {
   text-shadow: var(--couleur-brillance-forte) 0 0 var(--espacement-L);
}

/* ------------------------ */
/* ------------------------ */
/* -- Styles de sections -- */

html {
   text-shadow: var(--couleur-brillance-forte) 0 0 var(--espacement-L);
}

html::before {
   content: "";
   z-index: 3000;
   pointer-events: none;
   /**/
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 25vmin;
   /**/
   background:
      linear-gradient(180deg,
         transparent 0%,
         var(--couleur-balayage) 90% 97%,
         transparent 100%);
   background-size: 100%;
   /**/
   animation-name: --balayage;
   animation-duration: 5s;
   animation-delay: 1.6s;
   animation-fill-mode: backwards;
   animation-iteration-count: infinite;
}

html::after {
   content: "";
   z-index: 9999;
   pointer-events: none;
   /**/
   overflow: hidden;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   /**/
   background:
      linear-gradient(0deg,
         var(--couleur-effet-lignesH-sombre) 25%,
         var(--couleur-effet-lignesH-claire) 25% 50%,
         var(--couleur-effet-lignesH-sombre) 50% 75%,
         var(--couleur-effet-lignesH-claire) 75%),
      linear-gradient(90deg,
         var(--couleur-effet-lignesV-sombre) 33.33%,
         var(--couleur-effet-lignesV-claire) 33.33% 66.66%,
         var(--couleur-effet-lignesV-sombre) 66.66%);
   background-size: 100% 6px, 3px 100%;
   box-shadow: var(--couleur-vignette) inset 0 0 33svmin;
   mix-blend-mode: hard-light;
}

html:not(#passer_chargement:target):has(#chargement)::after {
   animation-name: --apparaitre;
   animation-delay: 0.65s;
   animation-iteration-count: 1;
   animation-fill-mode: backwards;
}

/* ----------------------------- */
body {
   animation-name: --scintiller-leger;
   animation-duration: 2.5s;
   animation-timing-function: steps(2);
   animation-iteration-count: infinite;
}

body:has(#chargement):not(:has(.conteneur_defilement)) {
   animation-name: --verrouiller-defilement;
   animation-duration: 6.5s;
   animation-fill-mode: backwards;
}

/* ----------------------------- */
body > *:not(#chargement) {
   animation-name: --apparaitre;
   animation-duration: 0.1s;
   animation-timing-function: steps(2);
   animation-fill-mode: both;
}

/* ----------------------------- */
[aria-label="Réponse du système"] {
   animation-name: --apparaitre;
   animation-duration: 0.2s;
   animation-timing-function: steps(2);
   animation-fill-mode: both;
}

/* -------------------------- */
/* -- Encart de chargement -- */
#passer_chargement:target #chargement {
   display: none;
}

#chargement {
   z-index: 5000;
   overscroll-behavior: contain;
   position: fixed;
   left: 0;
   top: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: 100%;
   padding: var(--espacement-4XL);
   /**/
   animation-name: --allumer, --dissimuler;
   animation-delay: 0s, 6.5s;
   animation-duration: 1.5s, 0s;
   animation-fill-mode: both, forwards;
   animation-timing-function: ease-out;
}

/* ----------------------------- */
#chargement > * {
   width: 100%;
   /**/
   filter: drop-shadow(var(--couleur-brillance-faible) 0 0 var(--espacement-L));
   /**/
   animation-name: --apparaitre, --scintiller-fort, --dissimuler;
   animation-delay: 1.75s, 1.75s, 6s;
   animation-duration: 0s, 0.1s, 0s;
   animation-fill-mode: both, none, forwards;
   animation-timing-function: steps(2);
}

#chargement .logo {
   align-self: center;
   display: flex;
   align-items: end;
   gap: var(--espacement-S);
   margin-top: auto;
   max-width: calc(12 * var(--espacement-M));
}

#chargement .logo svg {
   aspect-ratio: 1/1.5;
   margin-top: auto;
   max-width: calc(16 * var(--espacement-M));
}

#chargement .logo * {
   line-height: 1;
}

/* ----------------------------- */
#progression {
   display: flex;
   flex-direction: row;
   align-items: center;
   max-width: calc(48 * var(--espacement-M));
   margin-top: auto;
}

/* ----------------------------- */
#progression .barre {
   flex: 1;
   height: var(--espacement-M);
}

#progression .barre::before {
   content: "";
   display: block;
   height: 100%;
   /**/
   background: var(--couleur-claire);
   /**/
   animation-name: --progression-barre-chargement;
   animation-delay: 2s;
   animation-duration: 3s;
   animation-fill-mode: both;
   animation-timing-function: steps(2);
}

/* ----------------------------- */
#progression svg {
   aspect-ratio: 2/5;
   width: var(--espacement-M);
}

/* ----------------------------------- */
/* -- Champ de saisie des commandes -- */
#zone_saisie .curseur::after {
   content: "█" / "";
   /* Le contenu vide après le slash est celui qui est interprété par les lecteurs d'écran, l'avoir vide permet d'éviter que les lecteurs ne lisent le contenu du pseudoélément */
   position: relative;
   left: var(--espacement-M);
   width: 0;
   /**/
   animation-name: --dissimuler;
   animation-duration: 1s;
   animation-iteration-count: infinite;
}

#zone_saisie:focus-within .curseur::after,
#zone_saisie:not(:has(#saisie:placeholder-shown)) .curseur::after {
   display: none;
}

#zone_saisie:focus-within #saisie::placeholder {
   opacity: 0;
}

#saisie:not(:placeholder-shown) {
   text-shadow: var(--couleur-claire) 0 0 var(--espacement-L);
}