/* ==========================================================
   MA CHANSON PERSO - Intro Halloween (a charger avec intro.css)
   Chronologie (secondes) :
     0.00 - 1.40  nuit, lune, volee de chauves-souris (dessin dans intro-halloween.js)
     1.35 - 3.00  la citrouille apparait et souhaite la bienvenue
     3.00 - 3.35  la scene s'efface, la porte du donjon est la
     3.15 - 4.10  la porte s'ouvre sur l'accueil
   ========================================================== */

/* ---------- Scene : nuit, chauves-souris, citrouille ---------- */
.in-go .in-scene { animation: in-scene-out 0.35s ease-in 3s forwards; }
@keyframes in-scene-out { to { opacity: 0; transform: scale(1.14); visibility: hidden; } }

.in-bg { background: #07030d; }
.in-go .in-bg { animation: in-fondre 0.35s ease-out forwards; }

.in-sky {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, #1c0b36 0%, #4b1b63 42%, #c14a1c 100%);
}
.in-go .in-sky { animation: in-fondre 0.35s ease-out forwards, in-ciel-out 0.4s ease-in 1.1s forwards; }
@keyframes in-ciel-out { to { opacity: 0; } }

.in-moon {
  position: absolute; left: 68%; top: 14%; width: min(28vmin, 230px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 66%, rgba(214, 140, 70, 0.55) 0 9%, transparent 10%),
    radial-gradient(circle at 34% 40%, rgba(214, 140, 70, 0.4) 0 12%, transparent 13%),
    radial-gradient(circle at 38% 36%, #fff3d6 0, #ffd596 55%, #f0a04b 100%);
  box-shadow: 0 0 90px 34px rgba(255, 170, 80, 0.45);
}

/* ---------- Citrouille et message ---------- */
.in-halo { background: radial-gradient(circle, rgba(255, 140, 30, 0.42) 0, rgba(255, 90, 10, 0.16) 38%, transparent 66%); }
.in-go .in-halo { animation: in-apparait 0.6s ease-out 1.35s forwards; }

.in-pumpkin {
  position: relative; width: min(58vw, 44vh, 340px); height: auto; overflow: visible;
  opacity: 0; transform: scale(0.2) rotate(-12deg);
  filter: drop-shadow(0 0 26px rgba(255, 120, 20, 0.55));
}
.in-go .in-pumpkin { animation: in-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) 1.35s forwards; }
@keyframes in-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(-12deg); }
  55% { opacity: 1; transform: scale(1.1) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.in-face { fill: #ffd43b; filter: drop-shadow(0 0 5px rgba(255, 200, 60, 0.95)); animation: in-bougie 0.9s ease-in-out infinite alternate; }
@keyframes in-bougie { from { fill: #ffd43b; } to { fill: #fff0a0; } }
.in-eye { transform-box: fill-box; transform-origin: 50% 100%; }
.in-go .in-eye { animation: in-clin 0.3s ease-in-out 2.4s 1; }
@keyframes in-clin { 50% { transform: scaleY(0.12); } }
.in-mouth { transform-box: fill-box; transform-origin: 50% 0; }
.in-go .in-mouth { animation: in-parle 0.2s ease-in-out 1.75s 4 alternate; }
@keyframes in-parle { to { transform: scaleY(1.14); } }

.in-msg { color: #fff4dc; text-shadow: 0 0 22px rgba(255, 130, 20, 0.7), 0 2px 0 rgba(0, 0, 0, 0.5); }
.in-sub { color: #ffc98a; }
.in-go .in-msg { animation: in-monte 0.45s ease-out 1.7s forwards; }
.in-go .in-sub { animation: in-monte 0.45s ease-out 1.95s forwards; }

/* ---------- Porte du donjon ---------- */
.in-door { position: absolute; inset: 0; perspective: 1500px; overflow: hidden; visibility: hidden; }
.in-go .in-door { animation: in-porte-vue 0.01s linear 0.4s forwards, in-porte-out 0.3s ease-in 3.8s forwards; }
@keyframes in-porte-vue { to { visibility: visible; } }
@keyframes in-porte-out { to { opacity: 0; visibility: hidden; } }

.in-glow {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 60% 75% at 50% 50%, rgba(255, 214, 140, 0.95) 0, rgba(255, 140, 40, 0.55) 34%, rgba(255, 100, 10, 0) 70%);
}
.in-go .in-glow { animation: in-lueur 1.1s ease-in-out 3.15s forwards; }
@keyframes in-lueur { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.55; } }

.in-leaf {
  position: absolute; top: 0; bottom: 0; width: 50.3%; backface-visibility: hidden;
  background:
    linear-gradient(180deg, transparent 12%, #1d2027 12% 19.5%, transparent 19.5% 80.5%, #1d2027 80.5% 88%, transparent 88%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0 3px, transparent 3px 20%),
    repeating-linear-gradient(90deg, #4d2e18 0 20%, #3f2411 20% 40%, #52321b 40% 60%, #3a210f 60% 80%, #482b16 80% 100%);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.75), inset 0 0 0 4px #17191f;
}
.in-leaf::before, .in-leaf::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7.5%;
  background: radial-gradient(circle, #8a919c 0 3px, #14161b 3.5px 5.5px, transparent 6px) 14px 50% / 44px 100% repeat-x;
}
.in-leaf::before { top: 12%; }
.in-leaf::after { bottom: 12%; }
.in-leaf-l { left: 0; transform-origin: 0 50%; }
.in-leaf-r { right: 0; transform-origin: 100% 50%; }
.in-go .in-leaf-l { animation: in-ouvre-g 0.95s cubic-bezier(0.55, 0, 0.35, 1) 3.15s forwards; }
.in-go .in-leaf-r { animation: in-ouvre-d 0.95s cubic-bezier(0.55, 0, 0.35, 1) 3.15s forwards; }
@keyframes in-ouvre-g { to { transform: rotateY(-84deg); filter: brightness(0.45); } }
@keyframes in-ouvre-d { to { transform: rotateY(84deg); filter: brightness(0.45); } }

.in-ring {
  position: absolute; top: 50%; width: clamp(54px, 9vmin, 92px); aspect-ratio: 1; margin-top: -4.5vmin;
  border-radius: 50%; border: clamp(7px, 1.2vmin, 12px) solid #9aa1ad;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 0 6px rgba(0, 0, 0, 0.6);
}
.in-ring::before {
  content: ""; position: absolute; left: 50%; top: -22%; width: 46%; height: 26%; transform: translateX(-50%);
  background: #5d636d; border-radius: 4px 4px 0 0;
}
.in-leaf-l .in-ring { right: 5%; }
.in-leaf-r .in-ring { left: 5%; }