/* =========================================================================
   PIXEL PROS — ANIMATION D'OUVERTURE « STUDIO »
   4 carrés pastel fusent depuis les 4 coins, se posent dans la grille du
   logo, anneau coral qui se diffuse, puis « PIXEL PROS » apparaît.
   Durée totale ~3.0s. Skippable au clic. Une fois par session.
   ========================================================================= */

.pp-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fdf3ec;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 38px;
  cursor: pointer;
  animation: pp-intro-fadeout 0.45s cubic-bezier(.4,0,.2,1) 2.55s forwards;
  overflow: hidden;
}
body[data-theme="dim"] .pp-intro  { background: #5d4e6e; }
body[data-theme="dark"] .pp-intro { background: #1a0e25; }

/* ============== GRILLE 2x2 ============== */
.pp-intro-grid {
  position: relative;
  width: clamp(110px, 16vw, 156px);
  aspect-ratio: 1;
}
.pp-intro-sq {
  position: absolute;
  width: calc(50% - 6px);
  height: calc(50% - 6px);
  border-radius: clamp(10px, 1.4vw, 14px);
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
}

/* Anneau qui se diffuse à l'arrivée des carrés */
.pp-intro-grid::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: clamp(16px, 2vw, 22px);
  border: 3px solid #ff6b6b;
  opacity: 0;
  animation: pp-ring 1.1s cubic-bezier(.2,.8,.3,1) 1.05s forwards;
  pointer-events: none;
}
@keyframes pp-ring {
  0%   { opacity: .7; transform: scale(.82); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* ============== ENTRÉE DES 4 CARRÉS ============== */
/* Coral, haut-gauche */
.pp-intro-sq-1 {
  top: 0; left: 0;
  background: #ff6b6b;
  animation: pp-pop-tl 0.72s cubic-bezier(.34, 1.6, .55, 1) 0.0s forwards;
}
/* Menthe, haut-droite */
.pp-intro-sq-2 {
  top: 0; right: 0;
  background: #9fdec6;
  animation: pp-pop-tr 0.72s cubic-bezier(.34, 1.6, .55, 1) 0.12s forwards;
}
/* Jaune, bas-gauche */
.pp-intro-sq-3 {
  bottom: 0; left: 0;
  background: #f4d35e;
  animation: pp-pop-bl 0.72s cubic-bezier(.34, 1.6, .55, 1) 0.24s forwards;
}
/* Lavande, bas-droite */
.pp-intro-sq-4 {
  bottom: 0; right: 0;
  background: #d4baee;
  animation: pp-pop-br 0.72s cubic-bezier(.34, 1.6, .55, 1) 0.36s forwards;
}

@keyframes pp-pop-tl {
  0%   { transform: translate(-90vw, -90vh) rotate(-540deg) scale(.2); opacity: 0; }
  10%  { opacity: 1; }
  70%  { transform: translate(0, 0) rotate(0) scale(1.12); opacity: 1; }
  85%  { transform: scale(.92); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pp-pop-tr {
  0%   { transform: translate(90vw, -90vh) rotate(540deg) scale(.2); opacity: 0; }
  10%  { opacity: 1; }
  70%  { transform: translate(0, 0) rotate(0) scale(1.12); opacity: 1; }
  85%  { transform: scale(.92); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pp-pop-bl {
  0%   { transform: translate(-90vw, 90vh) rotate(-540deg) scale(.2); opacity: 0; }
  10%  { opacity: 1; }
  70%  { transform: translate(0, 0) rotate(0) scale(1.12); opacity: 1; }
  85%  { transform: scale(.92); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pp-pop-br {
  0%   { transform: translate(90vw, 90vh) rotate(540deg) scale(.2); opacity: 0; }
  10%  { opacity: 1; }
  70%  { transform: translate(0, 0) rotate(0) scale(1.12); opacity: 1; }
  85%  { transform: scale(.92); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============== WORDMARK ============== */
.pp-intro-word {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 5.5vw, 58px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: #2a1832;
  opacity: 0;
  transform: translateY(18px);
  animation: pp-word-in 0.6s cubic-bezier(.2,.8,.3,1) 1.25s forwards;
}
body[data-theme="dim"] .pp-intro-word,
body[data-theme="dark"] .pp-intro-word { color: #f5ecf5; }

@keyframes pp-word-in {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============== SKIP HINT ============== */
.pp-intro-skip {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: #5e4a6b;
  opacity: 0;
  animation: pp-skip-in 0.4s ease 1.6s forwards;
  pointer-events: none;
  white-space: nowrap;
}
body[data-theme="dim"] .pp-intro-skip,
body[data-theme="dark"] .pp-intro-skip { color: #b89dc5; }
@keyframes pp-skip-in { to { opacity: .6; } }

/* ============== FADE OUT ============== */
@keyframes pp-intro-fadeout {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.pp-intro-dismissed {
  animation: pp-intro-fadeout 0.3s ease forwards !important;
}

/* Skip animation si l'utilisateur a demandé moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .pp-intro { display: none; }
}