/* Motion design : neige de fond, inclinaison, éclats, révélation du contenu (voir js/motion.js). */
.neige-fond {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.entete,
main,
.pied {
  position: relative;
  z-index: 1;
}

.case {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.case.survolee {
  transition: transform 0.08s linear;
}

/* Reflet qui suit le pointeur */
.case .battant::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.case.survolee .battant::before {
  opacity: 1;
}

.case.survolee:not(.verrouillee) .numero {
  transform: translateZ(20px) scale(1.08);
}

.case .numero {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Case du jour : un éclat de lumière balaie la porte */
.case.disponible .numero {
  animation: flotte 2.6s ease-in-out infinite;
}

.case.disponible .battant {
  background-image:
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%);
  background-size: 250% 100%, auto;
  background-repeat: no-repeat;
  animation:
    appel 2.2s ease-in-out infinite,
    balayage 3.2s ease-in-out infinite;
}

@keyframes flotte {
  50% {
    transform: translateY(-4px);
  }
}

@keyframes balayage {
  0%,
  40% {
    background-position: 150% 0, 0 0;
  }
  100% {
    background-position: -60% 0, 0 0;
  }
}

/* Vignette révélée : léger zoom quand la porte s'ouvre */
.case.ouverte .interieur canvas {
  animation: devoile 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes devoile {
  from {
    transform: scale(1.25);
    filter: brightness(1.8) blur(2px);
  }
}

/* Éclat à l'ouverture */
.calque-eclat {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.etincelle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.onde {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid rgba(242, 184, 75, 0.9);
}

/* Fenêtre : révélation échelonnée du contenu */
.revele .jour-etiquette,
.revele h2,
.revele .astuce,
.revele .fenetre-nav {
  animation: monte 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.revele .jour-etiquette {
  animation-delay: 0.15s;
}

.revele h2 {
  animation-delay: 0.22s;
}

.revele .fenetre-nav {
  animation-delay: 0.9s;
}

.revele .mot {
  display: inline-block;
  animation: mot 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--i) * 22ms);
}

.revele .signature {
  animation: ecrit 1.1s steps(22, end) both;
  animation-delay: 0.9s;
}

.revele .scene canvas {
  animation: scene 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes monte {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes mot {
  from {
    opacity: 0;
    transform: translateY(0.6em);
    filter: blur(3px);
  }
}

@keyframes ecrit {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes scene {
  from {
    opacity: 0;
    transform: scale(0.94);
    filter: saturate(0.3);
  }
}

.bulle:not([hidden]) {
  animation: bulle 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}

@keyframes bulle {
  from {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.9);
  }
}