html.intro-on:not(.intro-done) {
  overflow: hidden
}

html:not(.intro-on) #intro,
html.intro-done #intro {
  display: none
}

#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden
}

.intro-curtain {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #FAF6EE;
  transition: transform .9s cubic-bezier(.7, 0, .2, 1)
}

.intro-curtain--top {
  top: 0
}

.intro-curtain--bottom {
  bottom: 0
}

html.intro-open .intro-curtain--top {
  transform: translateY(-101%)
}

html.intro-open .intro-curtain--bottom {
  transform: translateY(101%)
}

.intro-stage {
  position: relative;
  display: grid;
  place-items: center
}

.intro-halo {
  grid-area: 1/1;
  display: grid;
  place-items: center;
  transition: opacity .6s ease
}

html.intro-open .intro-halo {
  opacity: 0
}

.intro-glow {
  grid-area: 1/1;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 143, 30, .38), transparent 62%);
  scale: 0;
  animation: intro-glow 1.8s ease-out .3s forwards
}

.intro-ring {
  grid-area: 1/1;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed #AD090E40;
  opacity: 0;
  animation: intro-ring-in 1.2s ease-out .3s forwards, intro-spin 16s linear infinite
}

.intro-ring--1 {
  width: 140%
}

.intro-ring--2 {
  width: 200%;
  border-color: #0F63223D;
  animation-direction: normal, reverse
}

@keyframes intro-glow {
  60% {
    opacity: 1
  }

  to {
    scale: 1;
    opacity: 0
  }
}

@keyframes intro-ring-in {
  from {
    opacity: 0;
    scale: .4
  }

  to {
    opacity: 1;
    scale: 1
  }
}

@keyframes intro-spin {
  to {
    transform: rotate(360deg)
  }
}

#intro-logo {
  grid-area: 1/1;
  position: relative;
  width: min(70vw, 420px);
  height: auto;
  overflow: visible;
  animation: intro-pulse 2.4s ease-in-out .9s both
}

@keyframes intro-pulse {
  50% {
    filter: drop-shadow(0 0 22px rgba(221, 143, 30, .75))
  }
}

.intro-p {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0
}

.intro-p1 {
  animation: intro-from-right 1.1s cubic-bezier(.2, 1.4, .3, 1) .2s forwards
}

.intro-p2 {
  animation: intro-from-top 1.1s cubic-bezier(.2, 1.4, .3, 1) .4s forwards
}

.intro-p3 {
  animation: intro-from-left 1.1s cubic-bezier(.2, 1.4, .3, 1) .6s forwards
}

.intro-p4 {
  animation: intro-from-bottom .9s cubic-bezier(.2, .8, .2, 1) 1.2s forwards
}

@keyframes intro-from-right {
  from {
    opacity: 0;
    transform: translateX(280px) rotate(90deg) scale(.2)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes intro-from-top {
  from {
    opacity: 0;
    transform: translateY(-280px) rotate(-120deg) scale(.2)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes intro-from-left {
  from {
    opacity: 0;
    transform: translateX(-280px) rotate(120deg) scale(.2)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes intro-from-bottom {
  from {
    opacity: 0;
    transform: translateY(40px) scaleX(.85);
    filter: blur(14px)
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0)
  }
}

html.intro-on .header .logo img {
  transition: opacity .2s
}

html.intro-on:not(.intro-logo-visible) .Logo img {
  opacity: 0;
  transition: opacity .3s ease;
}

html.intro-logo-visible .Logo img {
  opacity: 1;
}

html:not(.intro-on) .Logo img {
  opacity: 1;
}

html.intro-on:not(.intro-logo-visible) .header .logo img {
  opacity: 0;
}

html.intro-on:not(.intro-open) .header .navbar {
  opacity: 0
}

html.intro-open .header .navbar {
  animation: intro-down .8s cubic-bezier(.2, .8, .2, 1) 1s both
}

@keyframes intro-down {
  from {
    opacity: 0;
    translate: 0 -14px
  }

  to {
    opacity: 1;
    translate: 0 0
  }
}

html.intro-on :is(.icon-soleil, .accueil-hero--overlay__content__title, .accueil-hero--overlay__content__text, .BTn, .defiler, .porte) {
  opacity: 0
}

html.intro-open :is(.icon-soleil, .accueil-hero--overlay__content__title, .accueil-hero--overlay__content__text, .BTn, .defiler) {
  animation: intro-up .9s cubic-bezier(.2, .8, .2, 1) both
}

html.intro-open .icon-soleil {
  animation-delay: .5s
}

html.intro-open .accueil-hero--overlay__content__title {
  animation-delay: .65s
}

html.intro-open .accueil-hero--overlay__content__text {
  animation-delay: .85s
}

html.intro-open .BTn {
  animation-delay: 1s
}

html.intro-open .defiler {
  animation-delay: 1.5s
}

@keyframes intro-up {
  from {
    opacity: 0;
    translate: 0 30px;
    filter: blur(6px)
  }

  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0)
  }
}

html.intro-open .porte {
  animation: intro-door 1.6s cubic-bezier(.2, .8, .2, 1) .2s both
}

html.intro-open .grande-porte {
  animation-name: intro-door-big
}

@keyframes intro-door {
  from {
    opacity: 0;
    scale: 1.12
  }

  to {
    opacity: 1;
    scale: 1
  }
}

@keyframes intro-door-big {
  from {
    opacity: 0;
    scale: 1.18
  }

  to {
    opacity: .5;
    scale: 1
  }
}

html.intro-open .mot-enracine {
  animation: intro-gold 1.2s ease 1.5s both
}

@keyframes intro-gold {
  from {
    color: #FAF6EE
  }

  to {
    color: #F0B95A
  }
}