/* ============================================================
   LOVEBAR — les mariés se rejoignent au fil du scroll
   Bandeau fixe en haut de page, présent sur index.html et admin.html.
   Autonome : ne dépend d'aucune variable de styles.css.
   ============================================================ */

:root {
  /* ---- Réglages principaux ---- */
  --lb-char: 90px;   /* hauteur des personnages */
  --lb-ground: 9px;  /* hauteur de la ligne dorée au-dessus du bas du bandeau */
  --lb-step: 0.65s;  /* durée d'un cycle de marche (plus petit = marche plus rapide) */
  --lb-heart: 40px;  /* taille du cœur de rencontre */

  /* Amplitude du pas. Le rebond est proportionnel à --lb-char : en pixels absolus
     il devenait imperceptible dès qu'on agrandissait les personnages. */
  --lb-sway: 4deg;                          /* balancement gauche/droite */
  --lb-bob: calc(var(--lb-char) * 0.045);   /* hauteur du rebond vertical */

  /* Hauteur totale du bandeau — dérivée, pas à modifier directement */
  --lb-h: calc(var(--lb-char) + var(--lb-ground) + 9px);

  /* Palette (reprise de styles.css, redéclarée pour rester autonome sur /admin) */
  --lb-cream: #f6f2e9;
  --lb-gold: #c19a4b;
  --lb-emerald: #0e4d3a;
}

@media (max-width: 560px) {
  :root {
    --lb-char: 45px;
    --lb-ground: 7px;
    --lb-heart: 30px;
  }
}

.lovebar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50; /* au-dessus de la topbar (40) et des feuilles (30) */
  height: var(--lb-h);
  background: rgba(246, 242, 233, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  overflow: hidden;
}

/* Piste : conteneur de positionnement, marges latérales pour l'aération */
.lovebar__track {
  position: relative;
  height: 100%;
  margin-inline: clamp(14px, 4vw, 40px);
}

/* La ligne dorée sur laquelle ils marchent */
.lovebar__track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--lb-ground);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(193, 154, 75, 0.28) 12%,
    rgba(193, 154, 75, 0.28) 88%,
    transparent
  );
}

/* Traces parcourues : deux segments dorés qui grandissent vers le centre */
.lovebar__trail {
  position: absolute;
  bottom: var(--lb-ground);
  height: 1px;
  width: 0;
  background: linear-gradient(to right, rgba(193, 154, 75, 0), var(--lb-gold));
  z-index: 1;
}
.lovebar__trail--l { left: 0; }
.lovebar__trail--r {
  right: 0;
  background: linear-gradient(to left, rgba(193, 154, 75, 0), var(--lb-gold));
}

/* ---- Personnages ---- */
.lovebar__walker {
  position: absolute;
  bottom: var(--lb-ground);
  left: 0;
  height: var(--lb-char);
  z-index: 2;
  will-change: transform; /* transform piloté par le JS (position horizontale) */
}
.lovebar__body {
  position: relative; /* passe au-dessus de l'ombre, qui est absolue */
  z-index: 1;
  height: 100%;
  transform-origin: 50% 100%;
  animation: lb-walk var(--lb-step) ease-in-out infinite;
}
.lovebar__walker img {
  display: block;
  height: 100%;
  width: auto;
  /* Aucun miroir : dans les PNG, Hamza regarde déjà vers la droite et
     Souaad vers la gauche — ils se font donc naturellement face. */
}

/* Décalage du cycle de marche : les pas ne sont pas synchronisés */
.lovebar__walker--bride .lovebar__body { animation-delay: calc(var(--lb-step) / -2.7); }

/* Ombre au sol */
.lovebar__shadow {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: calc(var(--lb-char) * 0.5);
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(14, 77, 58, 0.45), transparent 70%);
  /* Pose de repos : indispensable dès que l'animation est absente
     (arrivée au centre, ou préférence « mouvement réduit »). */
  transform: translateX(-50%);
  opacity: 0.4;
  animation: lb-shadow var(--lb-step) ease-in-out infinite;
}
.lovebar__walker--bride .lovebar__shadow { animation-delay: calc(var(--lb-step) / -2.7); }

@keyframes lb-walk {
  0%,  100% { transform: translateY(0)                 rotate(calc(-1 * var(--lb-sway))); }
  25%       { transform: translateY(calc(-1 * var(--lb-bob))) rotate(0deg); }
  50%       { transform: translateY(0)                 rotate(var(--lb-sway)); }
  75%       { transform: translateY(calc(-1 * var(--lb-bob))) rotate(0deg); }
}
@keyframes lb-shadow {
  0%,  100% { transform: translateX(-50%) scaleX(1);   opacity: 0.5; }
  25%, 75%  { transform: translateX(-50%) scaleX(0.65); opacity: 0.25; }
}

/* Marche figée quand le scroll ne bouge pas */
.lovebar:not(.is-walking) .lovebar__body,
.lovebar:not(.is-walking) .lovebar__shadow { animation-play-state: paused; }

/* Arrivés au centre : ils ne se figent pas en plein pas, ils se tiennent debout face à face */
.lovebar.is-met .lovebar__body,
.lovebar.is-met .lovebar__shadow { animation: none; }
.lovebar.is-met .lovebar__body { transform: none; }

/* ---- Cœur de rencontre ---- */
.lovebar__heart {
  position: absolute;
  left: 50%;
  bottom: calc(var(--lb-ground) + var(--lb-char) * 0.42);
  width: var(--lb-heart);
  height: var(--lb-heart);
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.2);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.lovebar.is-met .lovebar__heart {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ---- Confettis ---- */
.lovebar__confetti {
  position: absolute;
  left: 50%;
  bottom: calc(var(--lb-ground) + var(--lb-char) * 0.5);
  width: 0;
  height: 0;
  z-index: 4;
}
.lb-confetto {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  animation: lb-burst 900ms ease-out forwards;
}
@keyframes lb-burst {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.4); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.9); }
}

/* ---- Accessibilité : mouvement réduit ----
   Pas de marche ni de confettis ; les personnages sont figés à mi-chemin
   (positionnement assuré par le JS, qui n'installe alors aucun écouteur de scroll). */
@media (prefers-reduced-motion: reduce) {
  .lovebar__body,
  .lovebar__shadow { animation: none; }
  .lovebar__heart { transition: none; }
  .lb-confetto { display: none; }
}