/**
 * Climber Rappel Animation — Styles
 * ==================================
 *
 * Companion stylesheet for climber-animation.js.
 * Include this CSS on any page that uses the climber animation.
 *
 * Required: The parent element (e.g. the form) must have `position: relative`.
 *
 * DOM elements styled:
 *   #climber-container   — absolutely positioned wrapper, hidden by default
 *   #climb-rope-left     — entry rope (extends upward from climber)
 *   #climb-rope-right    — exit rope (extends upward from climber's feet)
 *   #climb-bouncer       — wrapper for figure + envelope
 *   .climber-figure      — the SVG stick figure
 *   #climb-envelope      — the SVG envelope icon
 */

/* ── Container ───────────────────────────────────────────────── */
#climber-container {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  width: 40px;
  height: 52px;
}

/* ── Ropes ───────────────────────────────────────────────────── */
#climb-rope-left {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #e67e22;
  opacity: 0;
  border-radius: 1px;
  height: 0;
}

#climb-rope-right {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #e67e22;
  opacity: 0;
  border-radius: 1px;
  height: 0;
  /* Anchored at the climber's feet (y=47 in the 52px SVG).
     The rope grows upward from this point toward the button above.
     bottom: 5px = 52px container height - 47px feet position. */
  bottom: 5px;
}

/* ── Figure & envelope ───────────────────────────────────────── */
#climb-bouncer {
  position: relative;
}

#climb-envelope {
  position: absolute;
  top: 18px;
  right: -14px;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.climber-figure {
  color: var(--content);
  display: block;
  transform-origin: 50% 0%;
}

/* ── Accessibility ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #climber-container {
    display: none !important;
  }
}