/* ── Float : photos Elisa ────────────────────────────────────────────────── */
@keyframes float {
  0%   { transform: translateY(0px) rotate(-2deg); }
  33%  { transform: translateY(-18px) rotate(1.5deg); }
  66%  { transform: translateY(-8px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(-2deg); }
}

@keyframes floatReverse {
  0%   { transform: translateY(0px) rotate(2deg); }
  33%  { transform: translateY(-14px) rotate(-1deg); }
  66%  { transform: translateY(-6px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(2deg); }
}

.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: floatReverse 7s ease-in-out infinite 1s; }
.float-3 { animation: float 8s ease-in-out infinite 2s; }
.float-4 { animation: floatReverse 5.5s ease-in-out infinite 0.5s; }
.float-5 { animation: float 9s ease-in-out infinite 3s; }
.float-6 { animation: floatReverse 6.5s ease-in-out infinite 1.5s; }

/* ── Pulsation du titre ──────────────────────────────────────────────────── */
@keyframes titlePulse {
  0%, 100% { text-shadow: 0 0 30px rgba(255,20,147,0.4), 0 2px 0 rgba(255,215,0,0.5); }
  50%       { text-shadow: 0 0 50px rgba(255,20,147,0.7), 0 2px 0 rgba(255,215,0,0.8); }
}

/* ── Cœur qui monte au clic ──────────────────────────────────────────────── */
@keyframes heartFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(-10deg); }
  50%  { transform: translateY(-60px) scale(1.3) rotate(10deg); }
  100% { opacity: 0; transform: translateY(-120px) scale(0.8) rotate(-5deg); }
}

.click-heart {
  position: fixed;
  pointer-events: none;
  font-size: 1.5rem;
  z-index: 9998;
  animation: heartFloat 1s ease-out forwards;
  user-select: none;
}

/* ── BounceIn pour les jours du calendrier ───────────────────────────────── */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.4); }
  50%  { transform: scale(1.1); }
  70%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.bounce-in {
  animation: bounceIn 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
  opacity: 0;
}

/* ── Fade in page ────────────────────────────────────────────────────────── */
@keyframes fadeInPage {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-content {
  animation: fadeInPage 0.5s ease forwards;
}

/* ── Entrée glissante ────────────────────────────────────────────────────── */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-in {
  animation: slideInUp 0.4s ease forwards;
}

/* ── Shimmer bouton ──────────────────────────────────────────────────────── */
@keyframes shimmer {
  from { left: -100%; }
  to   { left: 200%; }
}

/* ── Spin ────────────────────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Wiggle (hover fun) ──────────────────────────────────────────────────── */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-5deg); }
  75%       { transform: rotate(5deg); }
}

/* ── Apparition d'entrée de journal ──────────────────────────────────────── */
@keyframes entryAppear {
  0%   { opacity: 0; transform: scale(0.9) translateY(20px); }
  60%  { transform: scale(1.02) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.entry-appear {
  animation: entryAppear 0.5s ease forwards;
  opacity: 0;
}

/* ── Transitions de page (fondu rose) ────────────────────────────────────── */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--pink-light);
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.page-transition-overlay.active {
  opacity: 1;
}

/* ── Moins d'animations si l'utilisateur le demande ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Ces classes posent opacity:0 en attendant leur animation d'entrée :
     sans animation, il faut les rendre visibles directement */
  .bounce-in, .entry-appear, .slide-in { opacity: 1 !important; }

  /* Paillettes et fondu de page coupés (les scripts se coupent aussi d'eux-mêmes) */
  #glitter-canvas, .page-transition-overlay { display: none !important; }
}

/* ── 🎂 Anniversaire d'Elisa (13 septembre) ──────────────────────────────── */
.calendar-day.anniversaire {
  background: linear-gradient(135deg, #FFF3B8, var(--pink-light));
  border-color: var(--gold) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}

.anniv-banniere {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: linear-gradient(90deg, var(--pink-hot), var(--gold), var(--pink-hot));
  background-size: 200% 100%;
  color: #fff;
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 1.35rem;
  padding: 0.5rem 1.6rem;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 4px 18px rgba(255, 20, 147, 0.35);
  white-space: nowrap;
  max-width: 95vw;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: annivBrillance 3s linear infinite;
  pointer-events: none;
}

.anniv-banniere.dans-page {
  position: static;
  transform: none;
  display: block;
  width: fit-content;
  margin: 1rem auto -0.5rem;
  border-radius: 18px;
}

@keyframes annivBrillance {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.anniv-ballon {
  position: fixed;
  bottom: -3rem;
  z-index: 400;
  pointer-events: none;
  animation: annivMontee linear forwards;
}

@keyframes annivMontee {
  0%   { transform: translateY(0) rotate(-4deg); opacity: 0.95; }
  50%  { transform: translateY(-55vh) rotate(5deg); }
  100% { transform: translateY(-115vh) rotate(-4deg); opacity: 0.9; }
}

.anniv-etoile {
  position: fixed;
  z-index: 390;
  pointer-events: none;
  transform: scale(0);
  animation: annivScintille ease-in-out forwards;
}

@keyframes annivScintille {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  50%  { transform: scale(1) rotate(8deg); opacity: 1; }
  100% { transform: scale(0) rotate(-15deg); opacity: 0; }
}