/* =================================================================
   PIXEL PROS — Scène d'ouverture (intro)
   Style "logo de studio jeu vidéo" à la Pixar/Disney mais pixel art.
   ================================================================= */

.intro-scene {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #05050f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  image-rendering: pixelated;
  cursor: pointer;
}

/* Scanlines CRT par-dessus */
.intro-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.22) 0,
    rgba(0,0,0,.22) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 10;
}

/* Étoiles pixel en fond */
.intro-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff, transparent),
    radial-gradient(2px 2px at 28% 64%, #facc15, transparent),
    radial-gradient(2px 2px at 48% 22%, #22d3ee, transparent),
    radial-gradient(2px 2px at 72% 78%, #fff, transparent),
    radial-gradient(2px 2px at 85% 34%, #22c55e, transparent),
    radial-gradient(2px 2px at 92% 60%, #facc15, transparent),
    radial-gradient(2px 2px at 8% 80%, #ef4444, transparent),
    radial-gradient(2px 2px at 60% 50%, #fff, transparent);
  background-size: 100% 100%;
  opacity: 0;
  animation: intro-stars-fade 2.2s ease-out forwards;
}
@keyframes intro-stars-fade {
  0% { opacity: 0; }
  40% { opacity: .55; }
  100% { opacity: .85; }
}

/* "PIXEL PROS PRESENTS" — petit, en haut */
.intro-presents {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  color: #22d3ee;
  font-size: 13px;
  letter-spacing: .25em;
  text-shadow: 2px 2px 0 #0a0a14;
  opacity: 0;
  animation: intro-presents 1s ease-out .25s forwards;
  white-space: nowrap;
}
@keyframes intro-presents {
  0% { opacity: 0; transform: translate(-50%, -10px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

/* Logo central avec effet "scan révélation" */
.intro-logo-wrap {
  position: relative;
  z-index: 5;
  max-width: 70vw;
  width: clamp(280px, 50vw, 560px);
}
.intro-logo {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  /* Au départ, le logo n'est pas visible. Un mask CSS le révèle progressivement
     en effet "scan" de gauche à droite, comme une cassette vidéo qui démarre. */
  clip-path: inset(0 100% 0 0);
  filter: brightness(1.2);
  animation: intro-logo-reveal 1.8s steps(20) .8s forwards;
}
@keyframes intro-logo-reveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

/* Faisceau lumineux qui suit le scan */
.intro-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #facc15 30%,
    #fff 50%,
    #facc15 70%,
    transparent 100%
  );
  box-shadow: 0 0 30px #facc15, 0 0 60px #facc15;
  left: 0;
  opacity: 0;
  z-index: 6;
  animation: intro-beam 1.8s steps(20) .8s forwards;
}
@keyframes intro-beam {
  0%   { left: 0;    opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Sparkles qui pop autour du logo une fois révélé */
.intro-sparkle {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  animation: intro-sparkle 1.4s ease-out 2.6s forwards;
}
.intro-sparkle::before,
.intro-sparkle::after {
  content: '';
  position: absolute;
  background: #facc15;
  box-shadow: 0 0 8px #facc15;
}
.intro-sparkle::before {
  top: 50%; left: 0; right: 0; height: 4px;
  transform: translateY(-50%);
}
.intro-sparkle::after {
  left: 50%; top: 0; bottom: 0; width: 4px;
  transform: translateX(-50%);
}
.intro-sparkle.green::before,
.intro-sparkle.green::after { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.intro-sparkle.blue::before,
.intro-sparkle.blue::after  { background: #22d3ee; box-shadow: 0 0 8px #22d3ee; }
.intro-sparkle.red::before,
.intro-sparkle.red::after   { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

@keyframes intro-sparkle {
  0%   { opacity: 0; transform: scale(0) rotate(0); }
  30%  { opacity: 1; transform: scale(1.4) rotate(45deg); }
  100% { opacity: 0; transform: scale(.8) rotate(180deg); }
}

/* "PRESS START" clignotant */
.intro-press {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  color: #facc15;
  font-size: 14px;
  letter-spacing: .2em;
  text-shadow: 2px 2px 0 #ef4444;
  white-space: nowrap;
  opacity: 0;
  animation:
    intro-press-show .3s ease-out 2.7s forwards,
    intro-press-blink 1s steps(2) 3s infinite;
}
@keyframes intro-press-show {
  0%   { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes intro-press-blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: .15; }
}

/* Skip button (petit, en bas à droite) */
.intro-skip {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: transparent;
  border: 2px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.6);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 11;
  letter-spacing: .1em;
  border-radius: 4px;
  transition: all .12s;
}
.intro-skip:hover {
  border-color: #facc15;
  color: #facc15;
}

/* Flash blanc final puis fade */
.intro-scene.is-flashing::before {
  background: #fff;
  background-image: none;
  opacity: 1;
  animation: none;
  transition: opacity .25s ease-out;
}

.intro-scene.is-leaving {
  animation: intro-leave .6s ease-in forwards;
  pointer-events: none;
}
@keyframes intro-leave {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* Caché côté layout pendant l'intro pour éviter le scroll */
body.intro-locked { overflow: hidden; }

/* Préfère-réduit-le-mouvement : on saute carrément l'intro */
@media (prefers-reduced-motion: reduce) {
  .intro-scene { display: none !important; }
}

/* Mobile : ajuste les tailles */
@media (max-width: 520px) {
  .intro-presents { font-size: 10px; top: 14%; }
  .intro-press { font-size: 11px; bottom: 18%; }
  .intro-logo-wrap { width: 80vw; }
}

/* Bouton "rejouer l'intro" dans le footer */
.replay-intro {
  background: transparent;
  border: 2px solid var(--line);
  color: var(--fg-muted);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: .08em;
  transition: all .12s;
}
.replay-intro:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}