/*
 * Base style A's pen: the styles of variant A's PageThread.astro renamed to `skl-a-thread*` (fine coral
 * line, grey rails, the tip dot), plus what the pen hangs off the line in any section: A's rules (knots,
 * underlines, wrap arms), the origin and end dots, ride milestones and the rocket. Tokens from
 * src/styles/tokens.css only.
 */
.skl-a-thread,
.skl-a-rockets {
  /* Variant A's spring (--a-ease-spring), for the rocket and the dots. */
  --skl-a-spring: linear(0, 0.25 8%, 0.72 18%, 1.06 30%, 1.1 36%, 1.04 48%, 0.99 62%, 1);
}
.skl-a-thread {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.skl-a-thread__svg {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  overflow: visible;
}
.skl-a-thread__rail,
.skl-a-thread__line {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skl-a-thread__rail {
  stroke: var(--color-line);
}
.skl-a-thread__line {
  stroke: var(--color-coral);
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}
:root[data-motion='full'] .skl-a-thread.is-intro .skl-a-thread__line {
  /* Starts once the start has settled (A's hero underline: 560 ms delay + 900 ms), then hands over to scroll. */
  transition: stroke-dashoffset 1100ms var(--ease-out-soft) var(--skl-a-intro-delay, 1300ms);
}
.skl-a-thread__tip {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-coral-strong);
  box-shadow: 0 0 0 4px var(--color-paper);
  opacity: 0;
  transition: opacity 240ms var(--ease-standard);
}
:root[data-motion='full'] .skl-a-thread.is-live .skl-a-thread__tip {
  opacity: 1;
}
:root[data-motion='full'] .skl-a-thread.is-intro .skl-a-thread__tip {
  opacity: 0;
}

/* A's gutter line (where A's eyebrow rules start under html.pthread-ready): the left edge of A's container
 * pulled back by half a gutter. The pen's left lane. */
.skl-a-thread__gauge {
  position: absolute;
  top: 0;
  left: calc(max(var(--gutter), (100% - var(--container-wide)) / 2) - var(--gutter) / 2 + 1px);
  width: 0;
  height: 0;
}

/* Rules hanging off the line, like A's eyebrow rule: knots into heads of other designs, underlines under a
 * target, the arms of a wrap. Each draws from the line's side when the tip passes. */
.skl-a-thread__knot {
  position: absolute;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
  transform-origin: left center;
}
.skl-a-thread__knot--from-right {
  transform-origin: right center;
}
:root[data-motion='full'] .skl-a-thread__knot {
  transform: scaleX(0);
  transition: transform 560ms var(--ease-out-soft);
}
:root[data-motion='full'] .skl-a-thread__knot--underline {
  transition-duration: 700ms;
}
:root[data-motion='full'] .skl-a-thread__knot--arm {
  transition-duration: 420ms;
}
:root[data-motion='full'] .skl-a-thread__knot.is-on {
  transform: none;
}

/* Where the line begins (not out of A's underline) and where it ends in a head of another design. */
.skl-a-thread__dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-coral-strong);
  box-shadow: 0 0 0 4px var(--color-paper);
}
:root[data-motion='full'] .skl-a-thread__dot {
  scale: 0;
  transition: scale 520ms var(--skl-a-spring);
}
:root[data-motion='full'] .skl-a-thread__dot.is-on {
  scale: 1;
}

/* Milestones on a ride through a timeline of another design: A's step node, small. */
.skl-a-thread__node {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-coral-strong);
  box-shadow: 0 0 0 4px var(--color-paper);
  transition:
    background-color 360ms var(--ease-out-soft),
    scale 520ms var(--skl-a-spring);
}
:root[data-motion='full'] .skl-a-thread__node:not(.is-on) {
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-paper), inset 0 0 0 2px var(--color-coral);
  scale: 0.86;
}

/* The rocket on rides through other designs' timelines: variant A's process rocket, flying above the content
 * only while it rides. */
.skl-a-rockets {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.skl-a-rocket {
  --rk: 56px;
  position: absolute;
  left: calc(var(--rk) / -2);
  top: calc(var(--rk) / -2);
  width: var(--rk);
  height: var(--rk);
}
@media (max-width: 719px) {
  .skl-a-rocket {
    --rk: 40px;
  }
}
.skl-a-rocket__tilt {
  display: block;
  width: 100%;
  height: 100%;
  rotate: calc(146deg + var(--tilt, 0deg));
  scale: 0;
  transition:
    rotate 520ms var(--skl-a-spring),
    scale 520ms var(--skl-a-spring);
}
.skl-a-rocket.is-flying .skl-a-rocket__tilt {
  scale: 1;
}
.skl-a-rocket.is-up .skl-a-rocket__tilt {
  rotate: calc(-34deg + var(--tilt, 0deg));
}
.skl-a-rocket img {
  display: block;
  width: 100%;
  height: auto;
}
:root:not([data-motion='full']) .skl-a-rocket {
  display: none;
}