/* ==========================================================================
   Frankenstein — What You Get: Ring + spine reveal animation
   One-shot arrival choreography for Section 6 deliverables list
   ========================================================================== */

/* --- Spine (SVG, JS-measured from ring 1 center to ring 5 center) --- */
.spine {
  position: absolute;
  left: 38px;
  top: 0;
  width: 1px;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  transform: translateX(-0.5px);
}
.spine-line {
  fill: none;
  stroke: var(--color-text);
  stroke-opacity: 0.35;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.get-section.get-visible .spine-line {
  animation: spine-draw 2600ms cubic-bezier(0.3, 0.1, 0.2, 1) 500ms forwards;
}
@keyframes spine-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* --- Ring circle animation --- */
.deliverable-num .ring-circle {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transform: rotate(-90deg);
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes ring-draw {
  from { stroke-dashoffset: 160; }
  to   { stroke-dashoffset: 0; }
}

/* --- Numeral fade --- */
@keyframes numeral-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Copy fade --- */
@keyframes get-copy-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Pre-animation state: everything hidden until .row-in --- */
.get-section .deliverable-num .numeral {
  opacity: 0;
}
.get-section .deliverable-title {
  opacity: 0;
  transform: translateY(2px);
}
.get-section .deliverable-desc {
  opacity: 0;
  transform: translateY(2px);
}

/* Block all animations until .row-in is applied per row */
.deliverable-item .ring-circle,
.deliverable-item .numeral,
.deliverable-item .deliverable-title,
.deliverable-item .deliverable-desc {
  animation: none !important;
}

/* --- Row revealed (.row-in) --- */
.deliverable-item.row-in .ring-circle {
  animation: ring-draw 700ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards !important;
}
.deliverable-item.row-in .numeral {
  animation: numeral-fade 340ms linear 360ms forwards !important;
}
.deliverable-item.row-in .deliverable-title {
  animation: get-copy-fade 400ms ease-out 700ms forwards !important;
}
.deliverable-item.row-in .deliverable-desc {
  animation: get-copy-fade 400ms ease-out 840ms forwards !important;
}

/* --- Closing line fade --- */
.get-section .closing-line,
.get-section .closing-callout {
  opacity: 0;
}
.get-section.get-visible .closing-line,
.get-section.get-visible .closing-callout {
  animation: get-copy-fade 500ms ease-out 3500ms forwards;
}

/* --- Reduced motion: instant final state --- */
@media (prefers-reduced-motion: reduce) {
  .spine-line,
  .deliverable-num .ring-circle,
  .deliverable-num .numeral,
  .deliverable-title,
  .deliverable-desc,
  .get-section .closing-line,
  .get-section .closing-callout {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}