/* ==========================================================================
   EMBRACE ART - the line drawing on the right of the Sex Games hero.
   Markup: app/Views/partials/embrace_art.php
   Motion: draw-in, then a light sliding along the lines (SMIL in the markup),
   a heartbeat glow between the bodies, and a slow drift like breathing.
   ========================================================================== */
.fp-gh-hero { position: relative; }
.fp-embrace {
  position: absolute; z-index: 0; right: 6%; top: 50%; height: min(94%, 520px); aspect-ratio: 430 / 648;
  transform: translateY(-50%); pointer-events: none; color: var(--rose-2, #ff5c86);
}
.fp-embrace__svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; opacity: .82; animation: fpe-float 9s ease-in-out 4s infinite alternate; }

/* Draw-in: each stroke draws itself, left to right. Longer strokes take a little longer. */
.fp-embrace__svg path {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: fpe-draw calc(.6s + min(var(--l, 120), 300) * .005s) cubic-bezier(.4, 0, .2, 1) calc(.25s + var(--i, 0) * 30ms) both;
}
@keyframes fpe-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 5% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fpe-float { from { transform: translateY(0) rotate(0); } to { transform: translateY(-7px) rotate(.35deg); } }

/* A glow that beats between the two bodies (lub-dub), starting once the drawing is in. */
.fp-embrace__glow {
  position: absolute; left: 26%; top: 18%; width: 62%; height: 44%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 46, 99, .55), rgba(255, 46, 99, .18) 55%, transparent 100%);
  filter: blur(22px); opacity: .28; animation: fpe-beat 3s ease-in-out 4s infinite;
}
@keyframes fpe-beat {
  0%, 60%, 100% { opacity: .26; transform: scale(.92); }
  10% { opacity: .78; transform: scale(1.07); }
  22% { opacity: .38; transform: scale(.98); }
  34% { opacity: .64; transform: scale(1.04); }
}

/* Reduced motion: the finished drawing, still. The shimmer is paused by the page script. */
@media (prefers-reduced-motion: reduce) {
  .fp-embrace__svg, .fp-embrace__svg path, .fp-embrace__glow { animation: none !important; }
}

/* Text keeps the left; the drawing has the right. */
@media (min-width: 900px) { .fp-gh-hero .v-container > * { max-width: 600px; } }
@media (max-width: 899px) {
  /* Phone: behind the text on the right, quiet enough to read over. */
  .fp-embrace { right: -12%; top: 48%; height: 92%; }
  .fp-embrace__svg { opacity: .3; }
  .fp-embrace__glow { opacity: .16; }
}