html.magic-hat-intro-pending,
html.magic-hat-intro-pending body {
  overflow: hidden;
  background: #000;
}

html.magic-hat-intro-pending body > :not(.magic-intro) {
  visibility: hidden !important;
}

.magic-intro[hidden] {
  display: none;
}

.magic-intro {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background-color: #000;
  isolation: isolate;
  opacity: 1;
  transition: background-color .6s ease, opacity .56s ease;
}

.magic-intro::before,
.magic-intro::after {
  position: absolute;
  z-index: -1;
  content: "";
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.58);
}

.magic-intro::before {
  width: min(66vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(166, 104, 242, .08);
  background: radial-gradient(
    circle,
    rgba(113, 54, 184, .08),
    rgba(48, 21, 82, .025) 42%,
    transparent 70%
  );
  box-shadow:
    0 0 110px rgba(91, 38, 156, .08),
    inset 0 0 90px rgba(119, 66, 186, .035);
}

.magic-intro::after {
  width: min(42vw, 430px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(152, 92, 226, .09), transparent 68%);
  filter: blur(28px);
}

.magic-intro.is-outlined::before {
  animation: magic-intro-ambient 1.7s cubic-bezier(.22, .8, .3, 1) both;
}

.magic-intro.is-outlined::after {
  animation: magic-intro-ambient-glow 1.45s ease-out both;
}

.magic-intro__scene {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(94vw, 760px);
  transform: translateY(-2vh);
}

.magic-intro__character {
  position: relative;
  z-index: 2;
  width: clamp(340px, 45vw, 430px);
  aspect-ratio: 1;
  transform-origin: center;
  will-change: transform, opacity;
}

.magic-intro.is-awake .magic-intro__character {
  animation: magic-intro-presence 3.2s ease-in-out infinite;
}

.magic-intro__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.magic-intro__face-glow {
  position: absolute;
  z-index: 0;
  top: 51%;
  left: 50%;
  width: 32%;
  aspect-ratio: 1.45;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(139, 92, 246, .12),
    rgba(91, 33, 182, .04) 46%,
    transparent 72%
  );
  filter: blur(16px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.65);
  transition: opacity .7s ease, transform 1.25s cubic-bezier(.22, .8, .3, 1);
}

.magic-intro.is-smiling .magic-intro__face-glow {
  opacity: .58;
  transform: translate(-50%, -50%) scale(1);
}

.magic-intro.is-outlined .magic-intro__face-glow {
  opacity: .84;
  transform: translate(-50%, -50%) scale(1.32);
}

/* Les trois images ne contiennent que les yeux : aucun contour ne peut fuiter. */
.magic-intro__eyes-frame {
  z-index: 3;
  opacity: 0;
  transform: scale(.988);
  transition:
    opacity .09s ease-in-out,
    transform .16s cubic-bezier(.22, .8, .32, 1);
}

.magic-intro__eyes-frame.is-current {
  opacity: 1;
  transform: scale(1);
}

.magic-intro__mouth {
  z-index: 4;
  opacity: 0;
  clip-path: inset(0 49.4% 0 49.4%);
  transform: translateY(3px) scaleX(.05) scaleY(.52);
  /* Calé sur le centre réel du sourire dans mouth.png (mesuré à 50,9% / 68%
     du cadre 700x700, pas 50%/61%) : un pivot de scale décalé de sa position
     réelle faisait apparaître le sourire décentré et disproportionné pendant
     qu'il se dessine, surtout visible en petit format (mobile). */
  transform-origin: 50.9% 68%;
}

.magic-intro.is-smiling .magic-intro__mouth {
  animation: magic-intro-smile-grow .72s cubic-bezier(.18, 1.1, .28, 1) both;
}

.magic-intro__border {
  z-index: 2;
  opacity: 0;
  filter:
    blur(2.2px)
    brightness(.86)
    drop-shadow(0 0 6px rgba(185, 125, 255, .24));
  transform: scale(.982);
  -webkit-mask-image: radial-gradient(
    circle at 50% 55%,
    #000 0 35%,
    rgba(0, 0, 0, .96) 43%,
    rgba(0, 0, 0, .62) 49%,
    rgba(0, 0, 0, .2) 57%,
    transparent 66%
  );
  mask-image: radial-gradient(
    circle at 50% 55%,
    #000 0 35%,
    rgba(0, 0, 0, .96) 43%,
    rgba(0, 0, 0, .62) 49%,
    rgba(0, 0, 0, .2) 57%,
    transparent 66%
  );
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 8% 8%;
  mask-size: 8% 8%;
}

.magic-intro.is-outlined .magic-intro__border {
  animation: magic-intro-border-dissolve 1.08s cubic-bezier(.2, .72, .2, 1) both;
}

.magic-intro.is-outline-complete .magic-intro__border {
  opacity: 1;
  filter:
    blur(0)
    brightness(1.05)
    drop-shadow(0 0 5px rgba(205, 159, 255, .48))
    drop-shadow(0 0 20px rgba(124, 58, 237, .17));
  transform: scale(1);
  -webkit-mask-image: none;
  mask-image: none;
}

.magic-intro__dust {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.magic-intro__dust span {
  position: absolute;
  top: 54%;
  left: 50%;
  width: var(--dust-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(225, 199, 255, .95);
  box-shadow:
    0 0 5px rgba(255, 255, 255, .9),
    0 0 12px rgba(180, 120, 255, .76);
  opacity: 0;
  transform: translate(-50%, -50%) translate(
    calc(var(--dust-x) * .28),
    calc(var(--dust-y) * .28)
  ) scale(.2);
}

.magic-intro.is-outlined .magic-intro__dust span {
  animation: magic-intro-dust 1.02s cubic-bezier(.2, .7, .25, 1) var(--dust-delay) both;
}

.magic-intro__handoff {
  z-index: 6;
  opacity: 0;
  filter:
    drop-shadow(0 9px 14px rgba(0, 0, 0, .62))
    drop-shadow(0 0 9px rgba(139, 92, 246, .18));
  transform: scale(.985);
  transition: opacity .24s ease, transform .34s cubic-bezier(.22, .8, .32, 1);
}

.magic-intro.is-ready-to-fly .magic-intro__eyes-frame,
.magic-intro.is-ready-to-fly .magic-intro__mouth,
.magic-intro.is-ready-to-fly .magic-intro__border,
.magic-intro.is-ready-to-fly .magic-intro__face-glow {
  opacity: 0;
  transition: opacity .2s ease;
}

.magic-intro.is-ready-to-fly .magic-intro__handoff {
  opacity: 1;
  transform: scale(1);
}

.magic-intro__wordmark {
  position: relative;
  z-index: 1;
  width: clamp(158px, 22vw, 226px);
  margin-top: clamp(-72px, -7.2vw, -54px);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 0 14px rgba(160, 111, 231, .22));
}

.magic-intro__wordmark img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
}

.magic-intro__wordmark::after {
  position: absolute;
  content: "";
  inset: -14% auto -14% 0;
  width: 26px;
  background: linear-gradient(90deg, transparent, rgba(242, 234, 255, .9), transparent);
  filter: blur(4px);
  opacity: 0;
  transform: translateX(-150%);
}

.magic-intro.is-wordmark-visible .magic-intro__wordmark {
  animation: magic-intro-wordmark .88s cubic-bezier(.22, .72, .22, 1) both;
}

.magic-intro.is-wordmark-visible .magic-intro__wordmark::after {
  animation: magic-intro-wordmark-light .88s ease-out both;
}

.magic-intro.is-flying .magic-intro__character {
  animation: none;
}

.magic-intro.is-flying .magic-intro__wordmark {
  opacity: 0;
  transform: translateY(9px) scale(.97);
  transition: opacity .28s ease, transform .36s ease;
}

.magic-intro.is-revealing {
  background-color: transparent;
  pointer-events: none;
}

.magic-intro.is-revealing::before,
.magic-intro.is-revealing::after {
  opacity: 0;
  transition: opacity .3s ease;
}

.magic-intro.is-revealing .magic-intro__scene {
  opacity: 0;
  transition: opacity .32s ease;
}

html.magic-hat-intro-revealing .navbar,
html.magic-hat-intro-revealing .scroll-container {
  animation: magic-intro-site-reveal .64s cubic-bezier(.22, .78, .28, 1) both;
}

@keyframes magic-intro-presence {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.004); }
}

@keyframes magic-intro-smile-grow {
  0% {
    opacity: 0;
    clip-path: inset(0 49.4% 0 49.4%);
    transform: translateY(4px) scaleX(.05) scaleY(.48);
  }
  28% {
    opacity: .72;
  }
  72% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(-1px) scaleX(1.055) scaleY(1.035);
  }
  86% {
    transform: translateY(0) scaleX(.982) scaleY(.99);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}

@keyframes magic-intro-border-dissolve {
  0% {
    opacity: 0;
    filter: blur(2.4px) brightness(.7);
    transform: scale(.978);
    -webkit-mask-size: 8% 8%;
    mask-size: 8% 8%;
  }
  18% {
    opacity: .34;
  }
  52% {
    opacity: .86;
    filter: blur(.9px) brightness(1.22);
  }
  82% {
    opacity: 1;
    filter:
      blur(.2px)
      brightness(1.15)
      drop-shadow(0 0 10px rgba(197, 146, 255, .56));
  }
  100% {
    opacity: 1;
    filter:
      blur(0)
      brightness(1.05)
      drop-shadow(0 0 5px rgba(205, 159, 255, .48))
      drop-shadow(0 0 20px rgba(124, 58, 237, .17));
    transform: scale(1);
    -webkit-mask-size: 188% 188%;
    mask-size: 188% 188%;
  }
}

@keyframes magic-intro-dust {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(
      calc(var(--dust-x) * .28),
      calc(var(--dust-y) * .28)
    ) scale(.15);
  }
  24% {
    opacity: .92;
  }
  62% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(
      var(--dust-x),
      var(--dust-y)
    ) scale(1.1);
  }
}

@keyframes magic-intro-ambient {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.58); }
  48% { opacity: .72; }
  100% { opacity: .22; transform: translate(-50%, -50%) scale(1); }
}

@keyframes magic-intro-ambient-glow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  55% { opacity: .78; }
  100% { opacity: .24; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes magic-intro-wordmark {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(5px);
  }
  14% { opacity: 1; }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes magic-intro-wordmark-light {
  0% { opacity: 0; transform: translateX(-150%); }
  16% { opacity: .9; }
  82% { opacity: .75; }
  100% { opacity: 0; transform: translateX(760%); }
}

@keyframes magic-intro-site-reveal {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.006);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@media (max-width: 600px) {
  .magic-intro__scene {
    transform: translateY(-4vh);
  }

  .magic-intro__character {
    width: min(96vw, 390px);
  }

  .magic-intro__wordmark {
    width: clamp(154px, 48vw, 204px);
    margin-top: -58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .magic-intro {
    display: none !important;
  }
}