/* ===== Intro « 3D » — index.html : le logo dans une nuit étoilée ===== */
body.intro {
  display: block;
  min-height: 0;
  background: #030611;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  /* Taille du logo au repos */
  --logo: min(62vw, 58vh);
  /* Centre du cœur dans l'image (la traînée arc-en-ciel décale le cœur vers la droite) */
  --heart-x: 0.58;
  --heart-y: 0.5;
}
@supports (height: 1svh) { body.intro { --logo: min(62vw, 58svh); } }

/* Piste de défilement : sa hauteur fournit la « course » de la caméra */
.intro-track { position: relative; height: 420vh; }
.intro-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  /* Nuit : bleu très sombre, légèrement plus clair au centre */
  background:
    radial-gradient(ellipse 75% 65% at 50% 52%, #0e1a36 0%, #091229 38%, #050a1a 70%, #02040c 100%);
}

/* Ciel étoilé (dessiné en JS) */
.intro-sky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

.intro-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(170, 40, 70, 0.20) 0%, rgba(120, 40, 90, 0.06) 22%, transparent 46%);
  opacity: 0.5;
  pointer-events: none;
  will-change: opacity, transform;
}
.intro-world {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
/* Le logo est placé pour que le CENTRE DU CŒUR soit au centre de l'écran :
   la caméra avance vers ce point. */
.intro-logo {
  position: absolute; left: 50%; top: 50%;
  width: var(--logo); aspect-ratio: 1;
  margin: calc(var(--logo) * -1 * var(--heart-y)) 0 0 calc(var(--logo) * -1 * var(--heart-x));
  display: grid; place-items: center;
  backface-visibility: hidden;
}
.intro-logo img {
  width: 100%; height: 100%; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.6));
  user-select: none; -webkit-user-drag: none;
}
.intro-logo-fallback {
  display: none;
  font-size: min(30vmin, 220px); line-height: 1; color: var(--text);
  letter-spacing: -0.04em;
}
.intro-logo.no-logo img { display: none; }
.intro-logo.no-logo .intro-logo-fallback { display: block; }

/* Bouton passer : discret */
.intro-skip {
  position: fixed; z-index: 20;
  top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  background: rgba(8, 14, 32, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(242, 239, 234, 0.72); font-size: 14px; font-weight: 500;
}
.intro-skip:hover, .intro-skip:focus-visible { background: rgba(24, 34, 64, 0.8); color: var(--text); }

/* Indication de défilement : uniquement la flèche */
.intro-hint {
  position: fixed; z-index: 10; left: 0; right: 0;
  bottom: calc(30px + env(safe-area-inset-bottom));
  margin: 0; display: flex; justify-content: center;
  color: rgba(242, 239, 234, 0.75);
  pointer-events: none;
  will-change: opacity;
}
.intro-hint svg { animation: intro-nudge 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(160, 190, 255, 0.35)); }
@keyframes intro-nudge { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(6px); opacity: 1; } }

.intro-enter[hidden] { display: none; }
.intro-enter {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: calc(48px + env(safe-area-inset-bottom));
  min-width: 160px;
}

/* ---------- Barre de progression arc-en-ciel ---------- */
.intro-progress {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  height: 4px; background: rgba(255, 255, 255, 0.05);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
}
.intro-progress-fill {
  display: flex; height: 4px;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.intro-progress-fill span { flex: 1; }
.intro-progress-fill span:nth-child(1) { background: var(--rb-1); }
.intro-progress-fill span:nth-child(2) { background: var(--rb-2); }
.intro-progress-fill span:nth-child(3) { background: var(--rb-3); }
.intro-progress-fill span:nth-child(4) { background: var(--rb-4); }
.intro-progress-fill span:nth-child(5) { background: var(--rb-5); }
.intro-progress-fill span:nth-child(6) { background: var(--rb-6); }

/* ---------- Voile final ---------- */
.intro-fade {
  position: fixed; inset: 0; z-index: 30;
  background: #02040c; opacity: 0; pointer-events: none;
}
.intro-fade.on { pointer-events: auto; }

.intro-noscript {
  position: fixed; inset: auto 0 64px; text-align: center; z-index: 40; margin: 0;
}

/* Mouvement réduit : pas de course, simple fondu (piloté en JS via l'API Web Animations) */
body.intro.reduced { overflow: hidden; }
body.intro.reduced .intro-track { height: 100vh; height: 100svh; }
body.intro.reduced .intro-hint { display: none; }

@media (max-width: 600px) {
  body.intro { --logo: min(80vw, 52vh); }
  @supports (height: 1svh) { body.intro { --logo: min(80vw, 52svh); } }
  .intro-skip { font-size: 13px; padding: 8px 14px; min-height: 44px; }
  .intro-enter { bottom: calc(56px + env(safe-area-inset-bottom)); min-height: 48px; }
  .intro-hint { bottom: calc(18px + env(safe-area-inset-bottom)); }
}