/* ============================================================
   Styles pour les effets JS (FX)
   ============================================================ */

/* Carrousel confettis : le canvas est injecté par JS, pas de CSS propre */

/* Pour les éléments qui utilisent applyTilt, on ajoute une transition
   douce quand la souris sort (le JS remet transform: '') */
.fx-tilt { transition: transform .2s ease-out; }

/* ============================================================
   MODAL BADGE UNLOCK (style "ouverture de coffre")
   ============================================================ */
.fx-badge-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(20, 40, 60, .78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
}
.fx-badge-modal.visible { opacity: 1; }

.fx-badge-chest {
  position: relative;
  background: linear-gradient(135deg, #fff7d4 0%, #ffd23f 100%);
  padding: 48px 50px;
  border-radius: 32px;
  text-align: center;
  border: 6px double #8a6b1f;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  transform: scale(.5) rotate(-10deg);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
  max-width: 90vw;
}
.fx-badge-modal.visible .fx-badge-chest {
  transform: scale(1) rotate(0);
}

.fx-badge-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, rgba(255, 210, 63, .8), transparent 60%);
  z-index: -1;
  animation: fx-glow 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fx-glow {
  0%, 100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(1.15); opacity: .9; }
}

.fx-badge-emoji {
  font-size: 5.5rem;
  margin-bottom: 12px;
  animation: fx-bounce 1.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2));
}
@keyframes fx-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-6px) rotate(-4deg); }
  75%      { transform: translateY(-6px) rotate(4deg); }
}

.fx-badge-label {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #5c4410;
  margin-bottom: 8px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .6);
}
.fx-badge-desc {
  font-size: 1rem;
  font-weight: 600;
  color: #6b5a2a;
  margin-bottom: 22px;
  max-width: 320px;
}
.fx-badge-close {
  background: #c9a34e;
  color: #fff;
  border: 3px solid #fff;
  padding: 12px 36px;
  border-radius: 50px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .2);
  transition: transform .15s;
}
.fx-badge-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 rgba(0, 0, 0, .22);
}

@media print {
  #fx-confetti-canvas, .fx-badge-modal { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-badge-emoji, .fx-badge-glow { animation: none !important; }
}

/* ============================================================
   EASTER EGGS
   ============================================================ */

/* Mode film muet : grain + sépia + faux flicker */
body.silent-film {
  animation: silent-flicker 0.15s steps(2, end) infinite;
}
body.silent-film img,
body.silent-film .site-header,
body.silent-film .mod-header,
body.silent-film main {
  filter: grayscale(1) contrast(1.2) brightness(.95) sepia(.15);
}
@keyframes silent-flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: .97; }
  50%      { opacity: .92; }
  55%      { opacity: .97; }
}

.silent-film-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease;
}
.silent-film-overlay.fade-out { opacity: 0; }

.silent-film-card {
  background: #f4ecd8;
  padding: 36px 60px;
  border: 8px double #3a2c17;
  text-align: center;
  font-family: 'Playfair Display', serif;
  color: #3a2c17;
  max-width: 90vw;
}
.silent-film-card p {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 10px;
}
.silent-film-card small {
  font-size: .9rem;
  color: #6b5830;
}

/* Konami : usine qui vole */
.flying-factory {
  position: fixed;
  left: -80px;
  top: 20%;
  font-size: 4rem;
  z-index: 99999;
  pointer-events: none;
  animation: factory-fly 8s linear forwards;
}
@keyframes factory-fly {
  0%   { left: -80px; top: 20%; transform: rotate(0); }
  25%  { top: 10%; }
  50%  { top: 50%; transform: rotate(15deg); }
  75%  { top: 30%; transform: rotate(-15deg); }
  100% { left: calc(100vw + 80px); top: 40%; transform: rotate(360deg); }
}