/* « Prends ma main » (hands.js) : deux mains qui se rejoignent quand les deux personnes appuient en même temps, et des cœurs.
   Utilisé par la page d'accueil (la main d'elle) ET par la page cachée /petit-mot (la main de lui) : tout est sous .hands, avec les
   variables de couleur que les deux pages définissent (--cream, --coral, --glow, --muted, --card, --card-line, --serif). */

.hands-section { margin-top: 2rem; }
.hands-section:not([hidden]) { animation: fade-in .8s ease both; }

.hands {
  padding: 1rem .9rem 1.15rem; border-radius: 1.1rem; text-align: center;
  background: var(--card); border: 1px solid var(--card-line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .8s, box-shadow .8s;
}
/* quand les deux mains se tiennent, la carte s'allume doucement */
.hands[data-state="together"] {
  border-color: rgba(255, 179, 199, .55);
  box-shadow: 0 0 2.4rem rgba(255, 150, 180, .22), inset 0 0 1.6rem rgba(255, 179, 199, .08);
}

/* --- la scène : deux mains, de chaque côté ---------------------------------------------------------------------------- */

.hands-scene { position: relative; width: 100%; max-width: 21rem; margin: 0 auto; }
.hands-scene svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Chaque main avance vers le centre de --r-her / --r-him (0 : au repos, .55 : tendue, 1 : elles se rejoignent), sur 54 unités. */
.hands .reach-her { transform: translateX(calc(var(--r-her, 0) * 54px)); transition: transform 1s cubic-bezier(.25, .9, .3, 1); }
.hands .reach-him { transform: translateX(calc(var(--r-him, 0) * -54px)); transition: transform 1s cubic-bezier(.25, .9, .3, 1); }
/* elles flottent doucement, à contretemps */
.hands .bob-her { animation: hands-bob 3.4s ease-in-out infinite; }
.hands .bob-him { animation: hands-bob 3.4s ease-in-out -1.7s infinite; }
@keyframes hands-bob { 50% { transform: translateY(-3px); } }

.hands .palm, .hands .thumb { stroke-width: 1.6; stroke-linejoin: round; }
.hands .cuff { stroke-width: 1.4; }
.hands .knuckles { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.hands .hand-her .palm, .hands .hand-her .thumb { fill: #ffb3c7; stroke: #d97fa0; }
.hands .hand-her .cuff { fill: #fff6e6; stroke: #d9c9ab; }
.hands .hand-her .knuckles { stroke: #d97fa0; }
.hands .hand-him .palm, .hands .hand-him .thumb { fill: #ffd98a; stroke: #d6a64a; }
.hands .hand-him .cuff { fill: #8fb7cc; stroke: #6f98ae; }
.hands .hand-him .knuckles { stroke: #d6a64a; }
/* une main tendue brille un peu */
.hands .hand { transition: filter .6s; }
.hands[data-her="out"] .hand-her, .hands[data-him="out"] .hand-him { filter: drop-shadow(0 0 7px rgba(255, 217, 138, .55)); }

/* la lueur et le cœur du milieu : seulement quand elles se tiennent */
.hands .core, .hands .halo { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .8s, transform .8s; }
.hands .core { transform: scale(.4); }
.hands[data-state="together"] .halo { opacity: 1; }
.hands[data-state="together"] .core { opacity: 1; transform: scale(1); animation: hands-beat 1.3s ease-in-out .8s infinite; }
@keyframes hands-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.14); } 56% { transform: scale(1); } }

/* --- les cœurs qui montent (créés par hands.js) --------------------------------------------------------------------- */

.hands-hearts { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.hands-heart { position: absolute; left: 50%; top: 52%; line-height: 1; will-change: transform, opacity; text-shadow: 0 0 .6rem rgba(255, 140, 170, .6); }

/* --- le texte et le bouton ------------------------------------------------------------------------------------------ */

.hands-text {
  margin: .9rem auto 0; min-height: 2.8em; max-width: 24rem;
  font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.4; color: var(--cream); text-wrap: balance;
}
.hands-timer { min-height: 1.3em; margin-top: .2rem; font-size: .8rem; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.hands-button {
  margin-top: .8rem; min-height: 3rem; padding: .8rem 1.7rem; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 600; color: #3a2410; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #ffe49a, #f2b85a); box-shadow: 0 .4rem 1.2rem rgba(242, 184, 90, .25);
  transition: transform .15s, background .4s, box-shadow .4s, color .4s;
}
.hands-button:active { transform: scale(.96); }
.hands-button:focus-visible { outline: 2px solid var(--glow); outline-offset: .22rem; }
.hands-button[aria-pressed="true"] {
  color: #4a1830; background: linear-gradient(180deg, #ffc9d9, #ff9fb8);
  box-shadow: 0 .4rem 1.4rem rgba(255, 159, 184, .35), 0 0 0 .28rem rgba(255, 179, 199, .18);
}
/* l'autre main est tendue et pas la tienne : le bouton t'invite à répondre */
.hands[data-state="theirs"] .hands-button { animation: hands-nudge 1.6s ease-in-out infinite; }
@keyframes hands-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.hands-hint { min-height: 1.2em; margin-top: .55rem; font-size: .78rem; color: var(--muted); }

/* mouvement réduit : rien ne bouge ni ne monte ; quand les mains se tiennent, trois cœurs fixes le disent */
@media (prefers-reduced-motion: reduce) {
  .hands *, .hands-section { animation: none !important; transition-duration: .01s !important; }
  .hands[data-state="together"] .hands-scene::after { content: "♥ ♥ ♥"; position: absolute; left: 0; right: 0; top: 0; color: #ff9fb8; letter-spacing: .3em; font-size: 1.4rem; }
}