/* Aux Âmes Divines — voile d'introduction (direction « Solstice »)
   Toutes les valeurs viennent de la variation solstice.json.
   Aucune couleur en dur hors des dégradés déjà déclarés dans settings.custom. */

.mc-intro {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background: var(--wp--custom--fond-gabarit--accueil, linear-gradient(180deg,#FFFDF8 0%,#FBF4E7 58%,#F5E9D4 100%));
  pointer-events: none;            /* la page reste utilisable dès la première frame */
  animation: mc-voile 2.5s cubic-bezier(.4,0,.2,1) forwards;
}

/* Le voile n'existe que si le script l'a autorisé. Sans JS, il ne s'affiche jamais. */
html:not(.mc-intro-active) .mc-intro { display: none; }

/* Une fois joué, on le retire du flux : plus aucun risque de voile bloqué. */
.mc-intro.is-done { display: none; }

.mc-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--60, 24px);
  padding: var(--wp--preset--spacing--60, 24px);
  text-align: center;
}

.mc-intro__seal {
  position: relative;
  width: 132px;
  height: 132px;
  flex: none;
}

.mc-intro__halo {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138,97,20,.24) 0%, rgba(138,97,20,0) 68%);
  animation: mc-halo 2.5s cubic-bezier(.4,0,.2,1) forwards;
}

.mc-intro__disc {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--wp--preset--color--surface, #FFFFFF);
  box-shadow: 0 20px 44px -26px rgba(122,42,32,.6);
  animation: mc-sceau 2.5s cubic-bezier(.34,1.2,.4,1) forwards;
}

.mc-intro__disc img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mc-intro__name {
  display: block;
  margin: 0;
  font-family: var(--wp--preset--font-family--display, Petrona, Georgia, serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  color: var(--wp--preset--color--ink, #2A211B);
  animation: mc-nom 2.5s cubic-bezier(.4,0,.2,1) forwards;
}

.mc-intro__rule {
  display: block;
  width: 96px;
  height: 1px;
  background: rgba(122,42,32,.45);
  transform-origin: center;
  animation: mc-filet 2.5s cubic-bezier(.4,0,.2,1) forwards;
}

.mc-intro__tag {
  display: block;
  font-family: var(--wp--preset--font-family--mono, "Courier Prime", monospace);
  font-size: var(--wp--preset--font-size--xs, 12px);
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent, #8A6114);
  animation: mc-souffle 2.5s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes mc-voile   { 0%,72% { opacity: 1; visibility: visible } 100% { opacity: 0; visibility: hidden } }
@keyframes mc-sceau   { 0% { opacity: 0; transform: translateY(14px) scale(.9) } 55%,100% { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes mc-halo    { 0% { opacity: 0; transform: scale(.72) } 45% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1.35) } }
@keyframes mc-nom     { 0% { opacity: 0; letter-spacing: .3em; transform: translateY(9px) } 60%,100% { opacity: 1; letter-spacing: .005em; transform: translateY(0) } }
@keyframes mc-souffle { 0% { opacity: 0; transform: translateY(8px) } 70%,100% { opacity: 1; transform: translateY(0) } }
@keyframes mc-filet   { 0% { transform: scaleX(0) } 65%,100% { transform: scaleX(1) } }

@media (prefers-reduced-motion: reduce) {
  .mc-intro { animation: mc-voile-court .5s ease forwards; }
  .mc-intro * { animation: none; opacity: 1; transform: none; letter-spacing: .005em; }
  @keyframes mc-voile-court { to { opacity: 0; visibility: hidden } }
}