/* ==========================================================================
   Machine Method: living section dividers (see dividers.js)
   Loaded after styles.css. dividers.js swaps the CSS-only divider
   (.section::before/::after) for these elements, drawn to match it exactly.
   ========================================================================== */

.section.has-divider::before,
.section.has-divider::after {
  content: none;
}

.divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(70%, 36rem);
  height: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The string: dividers.js draws the path (straight at rest, curved when
   plucked) with the same gradient the CSS line used. */
.divider__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  overflow: visible;
}
.divider__line path {
  fill: none;
  stroke-width: 1;
}

/* The line's grab strip for plucking. Touch must press and hold to grab
   (dividers.js), so vertical swipes still scroll the page. */
.divider__hit {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 24px;
  margin-top: -12px;
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (pointer: coarse) {
  .divider__hit {
    height: 32px;
    margin-top: -16px;
  }
}
.divider.is-plucking .divider__hit,
.divider.is-plucking .divider__node,
html.divider-grabbing,
html.divider-grabbing * {
  cursor: grabbing !important;
}

/* Travel (transform, set from scroll) and the invisible 44px hit area.
   Tap it, or drag it to stretch the slingshot; touch grabs at once, so
   swipes starting on the node stretch rather than scroll. */
.divider__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* The slingshot's grab zone (first divider): an invisible square, centred on
   the node and bigger than its 44px box (dividers.js sets --grab-size from
   CONFIG.sling.grabSize), so a near miss still starts a pull. Only this zone
   and the node take touch-action: none; the page around it scrolls as usual. */
.divider__grab {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--grab-size, 64px);
  height: var(--grab-size, 64px);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
}

/* First-time hint (first divider): a teal ring around the dot. dividers.js
   sets the circle's radius and opacity every frame; the line stays 1px. */
.divider__hint {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  overflow: visible;
  pointer-events: none;
}
.divider__hint circle {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1px;
}

.divider__press,
.divider__halo {
  position: absolute;
  inset: 0;
}

.divider__dot,
.divider__flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
}

/* Glow: dividers.js sets the colours here and the drop-shadow on .divider__halo. */
.divider__dot {
  background: var(--bg);
  border: 1px solid var(--teal);
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.divider__halo {
  transition: filter 0.15s ease-out;
}

/* Tap flash, animated by dividers.js. */
.divider__flash {
  opacity: 0;
}

/* Gold pulse (tap and pluck): a short segment, brightest at its leading
   edge. dividers.js moves it along the string and tilts it about that edge,
   and sets --pulse-scale (width and glow) on narrow screens. */
.divider__pulse {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(3rem * var(--pulse-scale, 1));
  height: 1px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 calc(2px * var(--pulse-scale, 1)) var(--pulse-color, var(--gold)));
}
.divider__pulse--right {
  margin-left: calc(-3rem * var(--pulse-scale, 1));
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, var(--pulse-color, var(--gold)));
}
.divider__pulse--left {
  transform-origin: 0 50%;
  background: linear-gradient(270deg, transparent, var(--pulse-color, var(--gold)));
}

/* Slingshot trail and end spark. dividers.js sets their size, position,
   colour, opacity and filter every frame (no filter animations, for iOS). */
.divider__trail {
  position: absolute;
  top: -0.5px;
  left: 50%;
  width: 0;
  height: 2px;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Aim preview (first divider, while pulled): a few dots leaving the node in
   the launch direction, and in debug the computed launch vector (red) and the
   raw pull angle (grey). dividers.js places and fades them every frame. */
.divider__aim {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.divider__aim-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--aim-color, var(--gold));
  box-shadow: 0 0 3px var(--aim-color, var(--gold));
}
.divider__aim-ray {
  position: absolute;
  top: -0.5px;
  left: 0;
  height: 1px;
  transform-origin: 0 50%;
}

/* Sparks to the hero's core (first divider): one fixed layer over the page,
   under the sticky header. dividers.js draws and lights them every frame. */
.divider-sparks {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}
.divider__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0, var(--spark-color, var(--gold)) 35%, transparent 70%);
}