/* =============================================
   HANDSCHRIFT-ANIMATION (Startseite) – z. B. "Hello Bride!"
   Einstellungen: Design → Anpassen → Lady M Theme → Handschrift-Animation
   ============================================= */

.hb {
  --hb-h: clamp(4.2rem, 12vw, 7rem);       /* Hoehe pro Zeile (Groesse "Mittel") */
  display: block;
  margin: 0.25rem auto 0;
  line-height: 0;
  font-size: 1rem;
  font-weight: 400;
}

.hb--klein { --hb-h: clamp(3.2rem, 9vw, 5.2rem); }
.hb--gross { --hb-h: clamp(5rem, 15vw, 9rem); }

.hb-svg {
  display: block;
  margin: 0 auto;
  width: min(100%, calc(var(--hb-h) * var(--hb-lines, 1) * var(--hb-ratio, 4)));
  height: auto;
  overflow: visible;
}

/* Fuer Suchmaschinen und Screenreader – unsichtbar */
.hb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Buchstaben: erst die Kontur mit der "Feder" nachziehen, dann ausfuellen */
.hb-g {
  fill: var(--hb-color, #1a1a1a);
  fill-opacity: 0;
  stroke: var(--hb-color, #1a1a1a);
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation:
    hb-draw var(--hb-dur, 0.6s) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--hb-delay, 0s) forwards,
    hb-fill 0.7s ease var(--hb-fill, 0.4s) forwards;
}

/* Handgezeichnetes Herz */
.hb-heart {
  fill: none;
  stroke: var(--hb-heart, #c9a96e);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: hb-draw var(--hb-dur, 1.3s) ease-in-out var(--hb-delay, 2s) forwards;
}

.hb-heart-wrap {
  transform-box: fill-box;
  transform-origin: center;
  animation: hb-pop 0.7s ease-out var(--hb-pop, 3s) both;
}

@keyframes hb-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes hb-fill {
  to { fill-opacity: 1; }
}

@keyframes hb-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Warten, bis die Schrift im sichtbaren Bereich ist (setzt js/handwriting.js).
   Ohne JavaScript laeuft die Animation einfach sofort. */
.hb.hb-js:not(.hb-play) .hb-g,
.hb.hb-js:not(.hb-play) .hb-heart,
.hb.hb-js:not(.hb-play) .hb-heart-wrap {
  animation-play-state: paused;
}

/* Wer in seinem Geraet "Bewegung reduzieren" eingestellt hat, sieht den
   fertigen Schriftzug sofort – ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .hb-g,
  .hb-heart,
  .hb-heart-wrap {
    animation: none !important;
    stroke-dashoffset: 0;
  }
  .hb-g {
    fill-opacity: 1;
  }
}