/* Shared motion pieces used by the landing page and the planner: perforations, split flap board,
   progress bars, flight path. Motion animates transform and opacity only, 200ms minimum. */

/* Dashed perforation line drawn with a mask, so no gradients and no one sided borders. */
.dash-v, .dash-h { position: absolute; background-color: var(--border-primary-light); pointer-events: none; }
.dash-v {
  width: 1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='8'%3E%3Crect width='1' height='4'/%3E%3C/svg%3E") repeat-y;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='8'%3E%3Crect width='1' height='4'/%3E%3C/svg%3E") repeat-y;
}
.dash-h {
  height: 1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='1'%3E%3Crect width='4' height='1'/%3E%3C/svg%3E") repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='1'%3E%3Crect width='4' height='1'/%3E%3C/svg%3E") repeat-x;
}

/* ---------- Split flap board ---------- */
.flap-board { display: flex; align-items: center; gap: var(--spacing-50); perspective: 400px; }
.flap-board .flap-gap { width: var(--spacing-400); display: grid; place-items: center; color: var(--icon-subtle); font-size: 1.25rem; }
.flap {
  position: relative;
  display: grid; place-items: center;
  width: 32px; height: 40px;
  border-radius: var(--radius-4);
  background-color: var(--surface-secondary);
  color: var(--text-primary);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 500;
  backface-visibility: hidden;
}
/* The hinge line across the middle of each flap */
.flap::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background-color: var(--surface-primary);
}
.flap.is-out { animation: flap-out 200ms var(--ease) both; }
.flap.is-in { animation: flap-in 300ms var(--ease) both; }
@keyframes flap-out { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
@keyframes flap-in { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }

/* ---------- Progress bar: set --p from 0 to 1 ---------- */
.progress { height: 8px; overflow: hidden; border-radius: var(--radius-full); background-color: var(--surface-secondary); }
.progress span {
  display: block; height: 100%; width: 100%;
  background-color: var(--surface-info);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 500ms var(--ease), background-color 300ms var(--ease);
}
.progress.is-full span { background-color: var(--surface-success); }

/* ---------- Flight path ---------- */
.route-arc { fill: none; stroke: var(--icon-info); stroke-width: 2; stroke-dasharray: 6 6; }
.route-dot { fill: var(--icon-default); }
.route-label { fill: var(--text-secondary); font-size: 14px; }
.route-plane { fill: var(--text-primary); offset-rotate: auto 90deg; offset-distance: 0%; opacity: 0; }
@keyframes fly {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}

/* Status badge pops when an answer changes */
.badge.is-changed { animation: badge-pop 300ms var(--ease); }
@keyframes badge-pop { from { transform: scale(0.88); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 640px) {
  .flap { width: 28px; height: 36px; font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flap, .progress span, .badge.is-changed { transition: none !important; animation: none !important; }
  .route-plane { animation: none !important; offset-distance: 100%; opacity: 1; }
}