/* knot.css — gathbandhan: drag his end of the thread to hers.
 *
 * js/knot.js owns the geometry: the two thread paths (anchor → end, with a hanging
 * sag), the ends' transforms, and the tie. The stage spans the full column so the
 * groom's thread continues the page's kalava at --thread-x.
 */

.knot {
  padding-left: var(--pad);
  text-align: center;
}

.knot__howto {
  max-width: 30ch;
  margin: 0 auto;
  font-size: 15.5px;
  color: var(--ink-2);
}

.knot__stage {
  position: relative;
  height: 300px;
  margin: 12px calc(-1 * var(--pad)) 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.knot__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.knot__thread {
  fill: none;
  stroke: var(--sindoor);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.knot__tie {
  fill: none;
  stroke: var(--sindoor);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.knot.is-tied .knot__tie {
  opacity: 1;
}

/* once tied, one thread carries on out of the knot and down the page */
.knot__onward {
  opacity: 0;
}

.knot.is-tied .knot__onward {
  opacity: 1;
}

.knot__end {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--sindoor);
  border-radius: 50%;
  background: var(--paper);
  color: var(--sindoor);
  font: italic 400 26px/1 var(--font-display);
  cursor: grab;
  touch-action: none;
  box-shadow: 0 8px 20px rgba(165, 47, 24, 0.18);
  transition: opacity 400ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.knot__end:active {
  cursor: grabbing;
  box-shadow: 0 12px 26px rgba(165, 47, 24, 0.3);
}

/* a breathing ring says "drag me" */
.knot__end::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1.5px solid rgba(207, 63, 36, 0.45);
  border-radius: 50%;
  animation: end-pulse 2.2s var(--ease-out) infinite;
}

.knot__end--bride::before {
  animation-delay: 1.1s;
}

@keyframes end-pulse {
  0%   { transform: scale(0.8); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

.knot.is-dragging .knot__end::before,
.knot.is-tied .knot__end::before {
  animation: none;
  opacity: 0;
}

.knot.is-tied .knot__end {
  opacity: 0;
  pointer-events: none;
}

.knot__confetti {
  position: absolute;
  left: 0;
  top: -120px;
  width: 100%;
  height: calc(100% + 240px);
  pointer-events: none;
}

.knot__auto {
  margin-top: 4px;
}

.knot.is-tied .knot__auto {
  display: none;
}

/* ---- rsvp, revealed once the knot is tied --------------------------------------------- */
.rsvp {
  margin-top: 6px;
}

.rsvp[hidden] {
  display: none;
}

.rsvp.is-in {
  animation: fade-up 800ms var(--ease-out) both;
}

.rsvp__tied {
  font: italic 400 44px/1.05 var(--font-display);
  font-variation-settings: "opsz" 96;
  color: var(--sindoor);
}

.rsvp__ask {
  margin: 8px 0 18px;
  font-size: 16px;
  color: var(--ink-2);
}

.rsvp__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.rsvp__by {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-3);
}