/* Notre carte — animations « amour » (love.js), carte postale (postcard.js) et page de connexion. */

/* ---------- Cœurs qui jaillissent ---------- */

/* Calque décoratif : au-dessus des modales et des surimpressions, sous les toasts, jamais cliquable. */
.love-layer {
  position: fixed;
  inset: 0;
  z-index: 2700;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.love-heart {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}
.love-heart path {
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 1.6;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* ---------- Surimpressions (match, fête) : se ferment au clic ---------- */

/* Jamais bloquantes : seul le message capte les appuis (un clic dessus ferme) ; autour, la carte
   et l'interface restent utilisables pendant que les cœurs tombent. */
.love-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: calc(16px + var(--safe-top, 0px)) 16px calc(16px + var(--safe-bottom, 0px));
  overflow: hidden;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  animation: love-fade-in .22s ease both;
}
.love-match-card,
.love-banner {
  cursor: pointer;
  pointer-events: auto;
}
.love-overlay.is-closing .love-match-card,
.love-overlay.is-closing .love-banner { pointer-events: none; }

/* « C'est un match ! » */
.love-match {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 250, 247, .94) 0, rgba(255, 241, 244, .86) 34%, rgba(76, 24, 40, .34) 100%);
}
.love-match-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  text-align: center;
}
.love-match-stage {
  position: relative;
  width: 200px;
  height: 168px;
}
.love-match-side {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(76, 24, 40, .25));
}
.love-match-left { animation: love-match-left .74s cubic-bezier(.22, .9, .3, 1) both; }
.love-match-right { animation: love-match-right .74s cubic-bezier(.22, .9, .3, 1) both; }
.love-match-merged {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: love-match-pop .56s .6s cubic-bezier(.3, 1.5, .5, 1) both;
}
.love-match-heart-svg {
  display: block;
  width: 124px;
  height: 124px;
  filter: drop-shadow(0 10px 16px rgba(76, 24, 40, .28));
  animation: love-beat 1.05s 1.2s ease-in-out infinite;
}
.love-match-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 3px solid var(--ring, #e11d48);
  border-radius: 50%;
  opacity: 0;
  animation: love-ring .9s .62s ease-out forwards;
}
.love-match-title {
  margin-top: 4px;
  color: var(--text, #2b2024);
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  animation: love-rise .45s .78s cubic-bezier(.2, .8, .2, 1) both;
}
.love-match-subtitle {
  max-width: 30ch;
  margin-top: 8px;
  color: var(--muted, #7a6a70);
  font-size: 1.02rem;
  line-height: 1.4;
  animation: love-rise .45s .92s cubic-bezier(.2, .8, .2, 1) both;
}

/* Fête : pluie de cœurs et bannière */
.love-celebrate {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 250, 247, .7) 0, rgba(255, 241, 244, .55) 40%, rgba(76, 24, 40, .26) 100%);
}
.love-celebrate-content {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.love-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.love-banner {
  position: relative;
  width: min(420px, 100%);
  padding: 30px 28px 26px;
  border: 1px solid var(--border, #eedde2);
  border-radius: 26px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 60px rgba(76, 24, 40, .28);
  text-align: center;
  animation: love-banner-in .5s .08s cubic-bezier(.3, 1.35, .5, 1) both;
}
.love-banner-close {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--muted, #7a6a70);
}
.love-banner-heart {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
}
.love-banner-heart-svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 10px rgba(76, 24, 40, .25));
  animation: love-beat 1.1s .6s ease-in-out infinite;
}
.love-banner-title {
  color: var(--text, #2b2024);
  font-family: var(--font-title);
  font-size: clamp(1.45rem, 5.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.love-banner-subtitle {
  margin-top: 8px;
  color: var(--muted, #7a6a70);
  font-size: 1rem;
  line-height: 1.45;
}

/* ---------- Cœur voyageur (travelHeart) ---------- */

.love-traveler {
  background: none;
  border: 0;
  pointer-events: none;
}
.love-traveler-inner {
  display: block;
  width: 28px;
  height: 28px;
  animation: love-bob .48s ease-in-out infinite alternate;
}
.love-traveler-heart {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(60, 20, 30, .4));
}
.love-traveler-heart path {
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* Véhicule de « Notre histoire » (travelVehicle) : silhouette à la couleur du couple, liseré blanc. */
.love-vehicle {
  background: none;
  border: 0;
  pointer-events: none;
}
.love-vehicle-wrap {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
}
.love-vehicle-inner,
.love-vehicle-shadow {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}
.love-vehicle-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.love-vehicle-inner .love-vehicle-svg {
  filter: drop-shadow(0 2px 3px rgba(60, 20, 30, .45));
}
.love-vehicle-inner .love-vehicle-body {
  fill: var(--vehicle-color, #e11d48);
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  paint-order: stroke;
}
/* L'ombre de l'avion, au sol : elle s'éloigne quand il prend de l'altitude. */
.love-vehicle-shadow { opacity: .3; }
.love-vehicle-shadow .love-vehicle-svg * {
  fill: #1c0d14;
  stroke: none;
}
.love-vehicle-shadow .love-vehicle-svg { filter: blur(1.5px); }
.love-vehicle-car .love-vehicle-wrap,
.love-vehicle-train .love-vehicle-wrap { animation: love-rumble .18s ease-in-out infinite alternate; }

@keyframes love-rumble {
  from { translate: 0 0; }
  to { translate: 0 -1px; }
}

/* ---------- Carte postale ---------- */

.postcard {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.postcard-frame {
  position: relative;
  width: min(100%, calc(58vh * 1080 / 1350));
  aspect-ratio: 1080 / 1350;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--surface-2, #fdf2f4), var(--surface-3, #f7e8ec));
  box-shadow: 0 10px 28px rgba(76, 24, 40, .18), 0 0 0 1px rgba(76, 24, 40, .06);
}
.postcard-frame img {
  display: block;
  width: 100%;
  height: 100%;
  animation: love-postcard-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
/* Fond d'écran de téléphone (wallpaper.js) : aperçu dans un cadre de téléphone */
.wallpaper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wallpaper-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
@media (max-width: 420px) {
  .wallpaper-settings { grid-template-columns: 1fr; }
}
.wallpaper-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, calc(56vh * 1170 / 2532));
  aspect-ratio: 1170 / 2532;
  overflow: hidden;
  border: 7px solid #1a0a13;
  border-radius: 34px;
  background: linear-gradient(150deg, var(--surface-2, #fdf2f4), var(--surface-3, #f7e8ec));
  box-shadow: 0 12px 30px rgba(76, 24, 40, .22);
  transition: opacity .2s ease;
}
.wallpaper-frame.is-busy { opacity: .55; }
.wallpaper-frame img {
  display: block;
  width: 100%;
  height: 100%;
  animation: love-postcard-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.wallpaper-frame.is-busy img { animation: none; }
.wallpaper-wait {
  margin: 0;
  padding: 16px;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
.wallpaper-hint {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}

.postcard-wait {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: var(--muted, #7a6a70);
  font-size: .95rem;
  text-align: center;
}
.postcard-wait .love-postcard-heart {
  width: 40px;
  height: 40px;
  animation: love-beat 1.1s ease-in-out infinite;
}

/* ---------- Page de connexion : cœurs qui montent, logo qui bat ---------- */

.login-hearts {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
body.login-page > .login-card {
  position: relative;
  z-index: 1;
}
.login-hearts > span {
  position: absolute;
  bottom: -48px;
  left: 50%;
  width: 26px;
  height: 26px;
  opacity: 0;
  animation: login-heart-rise 18s linear infinite;
  will-change: transform, opacity;
}
.login-hearts > span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(244, 63, 94, .32);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3s-7.4-4.5-9.1-9.2C1.7 7.6 3.9 4.6 7.1 4.6c2 0 3.6 1.1 4.9 2.9 1.3-1.8 2.9-2.9 4.9-2.9 3.2 0 5.4 3 4.2 6.5-1.7 4.7-9.1 9.2-9.1 9.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3s-7.4-4.5-9.1-9.2C1.7 7.6 3.9 4.6 7.1 4.6c2 0 3.6 1.1 4.9 2.9 1.3-1.8 2.9-2.9 4.9-2.9 3.2 0 5.4 3 4.2 6.5-1.7 4.7-9.1 9.2-9.1 9.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: login-heart-sway 3.6s ease-in-out infinite alternate;
}
/* Douze cœurs : positions, tailles, teintes (rose → corail) et rythmes tous différents ;
   délais négatifs pour que la page s'ouvre sur des cœurs déjà en route. */
.login-hearts > span:nth-child(1) { left: 5%; width: 22px; height: 22px; animation-duration: 19s; animation-delay: -3s; }
.login-hearts > span:nth-child(2) { left: 14%; width: 34px; height: 34px; animation-duration: 24s; animation-delay: -15s; }
.login-hearts > span:nth-child(3) { left: 23%; width: 18px; height: 18px; animation-duration: 16s; animation-delay: -8s; }
.login-hearts > span:nth-child(4) { left: 31%; width: 28px; height: 28px; animation-duration: 21s; animation-delay: -18s; }
.login-hearts > span:nth-child(5) { left: 40%; width: 20px; height: 20px; animation-duration: 17s; animation-delay: -1s; }
.login-hearts > span:nth-child(6) { left: 49%; width: 38px; height: 38px; animation-duration: 26s; animation-delay: -11s; }
.login-hearts > span:nth-child(7) { left: 57%; width: 24px; height: 24px; animation-duration: 20s; animation-delay: -6s; }
.login-hearts > span:nth-child(8) { left: 66%; width: 16px; height: 16px; animation-duration: 15s; animation-delay: -12s; }
.login-hearts > span:nth-child(9) { left: 74%; width: 30px; height: 30px; animation-duration: 23s; animation-delay: -20s; }
.login-hearts > span:nth-child(10) { left: 82%; width: 22px; height: 22px; animation-duration: 18s; animation-delay: -4s; }
.login-hearts > span:nth-child(11) { left: 89%; width: 36px; height: 36px; animation-duration: 25s; animation-delay: -9s; }
.login-hearts > span:nth-child(12) { left: 95%; width: 18px; height: 18px; animation-duration: 17s; animation-delay: -14s; }
.login-hearts > span:nth-child(3n + 2)::before { background: rgba(251, 138, 107, .4); animation-duration: 4.4s; }
.login-hearts > span:nth-child(3n)::before { background: rgba(225, 29, 72, .24); animation-duration: 3.1s; }
.login-hearts > span:nth-child(even)::before { animation-direction: alternate-reverse; }

.login-logo {
  transform-origin: 50% 58%;
  animation: login-logo-beat 2.8s .8s ease-in-out infinite;
}

/* ---------- Images clés ---------- */

@keyframes love-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes love-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes love-beat {
  0%, 70%, 100% { transform: scale(1); }
  14% { transform: scale(1.12); }
  28% { transform: scale(.98); }
  42% { transform: scale(1.07); }
}
@keyframes love-match-left {
  0% { opacity: 0; transform: translate(-50vw, 14px) rotate(-30deg) scale(.7); }
  22% { opacity: 1; }
  80% { opacity: 1; transform: translate(-18px, 0) rotate(-10deg) scale(1); }
  100% { opacity: 0; transform: translate(-6px, 0) rotate(-4deg) scale(.92); }
}
@keyframes love-match-right {
  0% { opacity: 0; transform: translate(50vw, 14px) rotate(30deg) scale(.7); }
  22% { opacity: 1; }
  80% { opacity: 1; transform: translate(18px, 0) rotate(10deg) scale(1); }
  100% { opacity: 0; transform: translate(6px, 0) rotate(4deg) scale(.92); }
}
@keyframes love-match-pop {
  from { opacity: 0; transform: scale(.35); }
  to { opacity: 1; transform: none; }
}
@keyframes love-ring {
  from { opacity: .7; transform: scale(.45); }
  to { opacity: 0; transform: scale(2.1); }
}
@keyframes love-banner-in {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes love-bob {
  from { transform: translateY(1px) rotate(-6deg); }
  to { transform: translateY(-3px) rotate(6deg); }
}
@keyframes love-postcard-in {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes login-heart-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, calc(-100vh - 96px), 0) scale(1.1); }
}
@keyframes login-heart-sway {
  from { transform: translateX(-16px) rotate(-12deg); }
  to { transform: translateX(16px) rotate(10deg); }
}
@keyframes login-logo-beat {
  0%, 36%, 100% { transform: scale(1); }
  8% { transform: scale(1.09); }
  16% { transform: scale(.98); }
  24% { transform: scale(1.06); }
}

/* ---------- Mouvement réduit : affichage direct, les messages restent ---------- */

@media (prefers-reduced-motion: reduce) {
  .love-overlay,
  .love-match-merged,
  .love-match-heart-svg,
  .love-match-title,
  .love-match-subtitle,
  .love-banner,
  .love-banner-heart-svg,
  .love-traveler-inner,
  .love-vehicle-car .love-vehicle-wrap,
  .love-vehicle-train .love-vehicle-wrap,
  .postcard-frame img,
  .wallpaper-frame img,
  .postcard-wait .love-postcard-heart,
  .login-logo {
    animation: none;
  }
  .love-match-side,
  .love-match-ring,
  .love-rain,
  .login-hearts {
    display: none;
  }
}