/* ============================================================
   Hôtel La Miséricorde — moteur d'animations (global)
   Chargé sur le site, la réception et le PMS. Additif et sûr :
   n'altère pas la mise en page, respecte prefers-reduced-motion.
   ============================================================ */

/* --- Révélation au scroll (cascade) --- */
.hm-reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1);
}
.hm-reveal.hm-in { opacity: 1; transform: none; }

/* --- Transition d'entrée de vue (changement d'écran React) --- */
.hm-viewfade { animation: hmViewIn .55s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hmViewIn {
  from { opacity: 0; transform: translateY(10px) scale(.994); }
  to { opacity: 1; transform: none; }
}

/* --- Ken Burns très subtil sur la vidéo hero --- */
#root video { animation: hmKen 26s ease-in-out infinite alternate; }
@keyframes hmKen {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}

/* --- Micro-interactions boutons (partout) --- */
#root button, .hm-cta, #hm-pro-btn {
  transition: transform .16s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
#root button:active { transform: scale(.965); }

/* --- Utilitaire lift au survol (opt-in) --- */
[data-hm-lift] { transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease; will-change: transform; }
[data-hm-lift]:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(8, 6, 4, .28); }

/* --- Shimmer doré (opt-in .hm-shimmer) --- */
.hm-shimmer {
  background: linear-gradient(100deg, currentColor 35%, #FBE8C4 50%, currentColor 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: hmShimmer 5.5s ease-in-out infinite;
}
@keyframes hmShimmer { 0%,100% { background-position: 180% 0; } 50% { background-position: -40% 0; } }

/* --- Pastille / point pulsé --- */
.hm-pulse { position: relative; }
.hm-pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(212, 162, 76, .5); animation: hmPulse 2.1s ease-out infinite;
}
@keyframes hmPulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 162, 76, .45); }
  70% { box-shadow: 0 0 0 14px rgba(212, 162, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 162, 76, 0); }
}

/* --- Compteur animé : évite le "saut" de largeur --- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* --- Entrée du logo/nav au premier rendu --- */
body.hm-ready #root header, body.hm-ready #hm-pro { animation: hmDropIn .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hmDropIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* --- Barre de progression de chargement en haut de page --- */
#hm-loadbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2147483600;
  background: linear-gradient(90deg, #F3D9A4, #D4A24C, #B8863A);
  box-shadow: 0 0 12px rgba(212, 162, 76, .6);
  transition: width .3s ease, opacity .4s ease .2s;
}

/* --- Skeleton shimmer (utilitaire) --- */
.hm-skeleton {
  background: linear-gradient(90deg, rgba(150,130,100,.10) 25%, rgba(150,130,100,.20) 37%, rgba(150,130,100,.10) 63%);
  background-size: 400% 100%; animation: hmSkeleton 1.4s ease infinite; border-radius: 8px;
}
@keyframes hmSkeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- Respect de l'accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  .hm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  #root video, .hm-shimmer, .hm-pulse::after, .hm-viewfade,
  body.hm-ready #root header, body.hm-ready #hm-pro { animation: none !important; }
  #root button:active { transform: none; }
}