/* ------------------------------------------------------------------
   Big Sound Studio, header : mise au point et derive de la piece
   Le fond arrive floute (image de 368 octets integree, affichage
   immediat) puis la photo nette s'y substitue en fondu, comme une
   mise au point qui se fait. Au passage de la souris, le fond derive
   doucement, amorti, comme si l'on bougeait la tete dans le studio.
   ------------------------------------------------------------------ */

/* isolation + z-index : sans contexte d'empilement, les couches en
   z-index -1 remontent a la racine et passent SOUS le fond opaque. */
#g-page-surround {
  background-image: none !important;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

#g-page-surround::before,
#g-page-surround::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 76.15%;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: top center;
  transform: translate3d(var(--bss-x, 0px), var(--bss-y, 0px), 0) scale(1.035);
  will-change: transform;
}

/* couche 1 : l'image floutee, presente des le premier octet de CSS */
#g-page-surround::before {
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAAAAAAD/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAAYACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgMG/8QAHhAAAgICAwEBAAAAAAAAAAAAAAECEQMEEhNBUYH/xAAYAQACAwAAAAAAAAAAAAAAAAAAAgEDBP/EABgRAQEBAQEAAAAAAAAAAAAAAAARASFh/9oADAMBAAIRAxEAPwDlsSSwtv6EOLy2o/hSFvG4jetqSUOxySNG7k4TPSOZLm/Cg3m1pNOdoX669KwmLpmy2pJUAEU0RLYk00Y2ABRH/9k=");
  background-size: 100% 100%;
  filter: blur(24px) saturate(1.15);
  opacity: 1;
  transition: opacity 1.1s ease 0.35s;
}

/* couche 2 : la photo nette, revelee quand elle est chargee */
#g-page-surround::after {
  background-image: url("../images/Photo-header.jpg");
  /* voile cale sur la bande de texte du hero, pour que le blanc porte */
  background-image:
    linear-gradient(
      to bottom,
      rgba(12, 13, 22, 0) 0%,
      rgba(12, 13, 22, 0.26) 26%,
      rgba(12, 13, 22, 0.44) 46%,
      rgba(12, 13, 22, 0.34) 64%,
      rgba(12, 13, 22, 0) 80%
    ),
    image-set(
      url("../images/Photo-header.webp") type("image/webp"),
      url("../images/Photo-header.jpg") type("image/jpeg")
    );
  background-size: 100% 100%;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.bss-ready #g-page-surround::after { opacity: 1; }
.bss-ready #g-page-surround::before { opacity: 0; }

/* repli sans JavaScript : la photo apparait quand meme, en fondu */
.no-js #g-page-surround::after,
html:not(.bss-js) #g-page-surround::after {
  animation: bssReveal 1.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.2s both;
}
@keyframes bssReveal { from { opacity: 0; } to { opacity: 1; } }

/* repli CSS pour le mouvement : survol de la zone d'en-tete */
#g-page-surround:has(#g-slideshow:hover)::before,
#g-page-surround:has(#g-slideshow:hover)::after {
  transition: transform 1.4s cubic-bezier(0.16, 0.84, 0.44, 1),
              opacity 1.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* Petits ecrans : le bandeau plein cadre reduit le visage a rien et le
   logo passe dessus. On monte la hauteur et on recadre sur le regard. */
@media (max-width: 48rem) {
  #g-page-surround::before,
  #g-page-surround::after {
    padding-top: 125%;
    background-position: 56% 16%;
  }
  #g-page-surround::before {
    background-size: cover;
  }
  #g-page-surround::after {
    background-image:
      linear-gradient(
        to bottom,
        rgba(12, 13, 22, 0.74) 0%,
        rgba(12, 13, 22, 0.28) 20%,
        rgba(12, 13, 22, 0.46) 54%,
        rgba(20, 21, 30, 0.99) 100%
      ),
      image-set(
        url("../images/Photo-header.webp") type("image/webp"),
        url("../images/Photo-header.jpg") type("image/jpeg")
      );
    background-size: cover, cover;
    background-position: center, 56% 16%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #g-page-surround::before,
  #g-page-surround::after {
    transform: none;
    transition: opacity 0.4s linear;
    will-change: auto;
  }
}