/* Écran d'ouverture : la basilique se dessine (2026-10-10) */
html.intro-on, html.intro-on body { overflow: hidden; }
#intro {
  position: fixed; inset: 0; z-index: 9999; background: #F5F3EF; color: #5B4B37;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  cursor: pointer; transition: transform .8s cubic-bezier(.7,0,.2,1), opacity .8s;
}
#intro.out { transform: translateY(-100%); opacity: .6; pointer-events: none; }
#intro svg { width: clamp(120px, 34vw, 170px); height: auto; overflow: visible; }
#intro svg path { fill: none; stroke: #9B8663; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
#intro.go svg path { animation: introDraw .85s ease-out forwards; animation-delay: calc(var(--o) * .5s); }
#intro .i-kick { font: 300 .7rem/1 'Jost', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #8A7C64; margin-top: 26px; opacity: 0; }
#intro .i-name { font: italic 500 clamp(1.7rem, 6vw, 2.3rem)/1.15 'Cormorant Garamond', serif; margin-top: 10px; opacity: 0; }
#intro .i-rule { height: 1px; width: 0; background: #9B8663; margin-top: 14px; }
#intro .i-welcome { font: 300 clamp(.95rem, 3.4vw, 1.1rem)/1.5 'Jost', sans-serif; letter-spacing: .04em; color: #6E5C44; max-width: 28ch; margin-top: 22px; opacity: 0; transform: translateY(8px); }
#intro.go .i-welcome { animation: introWelcome .9s 2.9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes introWelcome { to { opacity: 1; transform: none; } }
#intro.go .i-kick { animation: introFade .6s 2.2s forwards; }
#intro.go .i-name { animation: introFade .7s 2.4s forwards; }
#intro.go .i-rule { animation: introRule .9s 2.7s forwards; }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introFade { to { opacity: 1; } }
@keyframes introRule { to { width: 90px; } }
@media print { #intro { display: none !important; } }