/* Interactive landing pieces: departure board, transfer slider, scroll story, boarding pass.
   Motion animates transform and opacity only, 200ms minimum, eased with --ease. */


/* ---------- Hero: pointer tilt ---------- */
.hero-preview { perspective: 1600px; }
.preview-frame { transform-style: preserve-3d; transition: transform 500ms var(--ease); will-change: transform; }

.preview-bar-right { display: flex; align-items: center; gap: var(--spacing-75); }
.board-toggle { width: 32px; height: 32px; }

/* ---------- Hero: split flap departure board ---------- */
.preview-route { display: grid; gap: var(--spacing-75); justify-content: start; }

.preview-options { transition: opacity 300ms var(--ease); }
.preview-options.is-leaving { opacity: 0; }
.preview-options li.is-entering { opacity: 0; transform: translateY(16px); }
.preview-options li {
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.preview-options .badge { white-space: nowrap; }

/* ---------- Benefits: transfer slider ---------- */
.transfer-demo {
  display: grid; gap: var(--spacing-100);
  margin-top: var(--spacing-200);
  padding: var(--spacing-200);
  border-radius: var(--radius-8);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-secondary);
}
.td-row, .td-control { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); }
.td-row { padding-block: var(--spacing-75); }
.td-row + .td-row::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--border-primary); }
.td-control { margin-top: var(--spacing-75); }
.td-control output { color: var(--text-primary); }
.td-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-75) var(--spacing-100); min-height: 48px; }
.td-status .badge { transition: background-color 300ms var(--ease), color 300ms var(--ease); }


.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px; margin: 0;
  background: transparent; cursor: grab;
}
.range:active { cursor: grabbing; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--radius-full); background-color: var(--surface-secondary); }
.range::-moz-range-track { height: 8px; border-radius: var(--radius-full); background-color: var(--surface-secondary); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -8px;
  border-radius: var(--radius-full);
  background-color: var(--action-primary);
  border: 4px solid var(--surface-primary);
  box-shadow: 0 0 0 1px var(--border-action-primary);
  transition: transform 300ms var(--ease);
}
.range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--action-primary);
  border: 4px solid var(--surface-primary);
  box-shadow: 0 0 0 1px var(--border-action-primary);
  transition: transform 300ms var(--ease);
}
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:hover::-moz-range-thumb, .range:active::-moz-range-thumb { transform: scale(1.12); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--border-focus); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--border-focus); }

/* ---------- How it works: scroll story ---------- */
.story { display: grid; grid-template-columns: 5fr 7fr; gap: var(--spacing-700); align-items: start; margin-top: var(--spacing-600); }
.story-steps { display: grid; }
.story-step {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--spacing-300);
  align-content: center; min-height: 56vh;
}
.story-step > div { display: grid; gap: var(--spacing-75); }
.story-step h3 { color: var(--text-tertiary); transition: color 300ms var(--ease); }
.story-step .step-num { transition: border-color 300ms var(--ease), color 300ms var(--ease), background-color 300ms var(--ease); }
.story[data-active="0"] [data-step="0"] h3, .story[data-active="1"] [data-step="1"] h3, .story[data-active="2"] [data-step="2"] h3 { color: var(--text-primary); }
.story[data-active="0"] [data-step="0"] .step-num, .story[data-active="1"] [data-step="1"] .step-num, .story[data-active="2"] [data-step="2"] .step-num {
  border-color: var(--border-action-primary); background-color: var(--action-primary); color: var(--text-on-action);
}

.story-stage { position: sticky; top: var(--spacing-900); display: grid; gap: var(--spacing-200); }
.stage-frame {
  position: relative; height: 400px; overflow: hidden;
  background-color: var(--surface-primary-subtle);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-16);
}
.stage {
  position: absolute; inset: var(--spacing-400);
  display: grid; align-content: center; gap: var(--spacing-200);
  opacity: 0; transform: translateY(24px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.story[data-active="0"] [data-stage="0"], .story[data-active="1"] [data-stage="1"], .story[data-active="2"] [data-stage="2"] { opacity: 1; transform: none; }
.stage-dots { display: flex; justify-content: center; gap: var(--spacing-75); }
.stage-dots span { width: 8px; height: 8px; border-radius: var(--radius-full); background-color: var(--border-primary-light); transform: scale(0.75); transition: transform 300ms var(--ease), background-color 300ms var(--ease); }
.story[data-active="0"] .stage-dots span:nth-child(1), .story[data-active="1"] .stage-dots span:nth-child(2), .story[data-active="2"] .stage-dots span:nth-child(3) { background-color: var(--action-primary); transform: scale(1); }

/* Stage 1: wallet */
.stage-list { display: grid; }
.stage-list li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-200); padding-block: var(--spacing-100); }
.stage-list li + li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--border-primary); }
.stage-list li { opacity: 0; transform: translateX(-16px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.stage-list li:nth-child(2) { transition-delay: 80ms; }
.stage-list li:nth-child(3) { transition-delay: 160ms; }
.stage-list li:nth-child(4) { transition-delay: 240ms; }
.story[data-active="0"] .stage-list li { opacity: 1; transform: none; }

/* Stage 2: route arc. A mask in the frame colour shrinks to reveal the dashed path, then a plane flies it. */
.route-map { width: 100%; height: auto; max-height: 240px; overflow: visible; }
.route-mask { transform-box: fill-box; transform-origin: right center; transform: scaleX(0); transition: transform 1200ms var(--ease) 200ms; }
.story[data-active="1"] .route-mask { transform: scaleX(1); }
.route-dot-end { opacity: 0; transition: opacity 300ms var(--ease) 1200ms; }
.story[data-active="1"] .route-dot-end { opacity: 1; }
.route-map .route-plane { offset-path: path('M330 160 Q 200 -10 70 90'); }
.story[data-active="1"] .route-plane { animation: fly 1400ms var(--ease) 200ms both; }

.stage-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-75); }
.stage-chips li {
  display: inline-flex; align-items: center; gap: var(--spacing-50);
  padding: var(--spacing-50) var(--spacing-100);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}
.stage-chips li.is-active { border-color: var(--border-action-primary); color: var(--text-primary); }

/* Stage 3: a boarding pass prints out of a slot */
.stage-pass { align-content: center; justify-items: center; gap: 0; }
.printer-slot { width: 100%; max-width: 480px; height: 12px; border-radius: var(--radius-full); background-color: var(--surface-tertiary); }
.pass-window { width: calc(100% - var(--spacing-400)); max-width: 448px; overflow: hidden; margin-top: calc(-1 * var(--spacing-75)); padding-top: var(--spacing-75); }
.pass {
  display: grid; grid-template-columns: 1fr 160px;
  border-radius: 0 0 var(--radius-12) var(--radius-12);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  transform: translateY(-100%);
  transition: transform 900ms var(--ease) 200ms;
}
.story[data-active="2"] .pass { transform: none; }
.pass-main { display: grid; gap: var(--spacing-50); padding: var(--spacing-200); }
.pass-main .heading-4 { display: flex; align-items: center; gap: var(--spacing-75); }
.pass-main .heading-4 i { font-size: 1.25rem; color: var(--icon-subtle); }
.pass-stub { position: relative; display: grid; align-content: center; gap: var(--spacing-75); padding: var(--spacing-200) var(--spacing-100); }
.pass-stub::before { content: ''; position: absolute; left: 0; top: var(--spacing-100); bottom: var(--spacing-100); width: 1px; background-color: var(--border-primary-light);
  -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; }
.pass-stub .badge { justify-self: start; }

/* ---------- Final CTA: boarding pass ---------- */
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.ticket-main, .ticket-stub {
  background-color: var(--surface-primary-subtle);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-24);
}
.ticket-main { display: grid; gap: var(--spacing-200); align-content: center; justify-items: start; padding: var(--spacing-700) var(--spacing-600); }
.ticket-main .btn { margin-top: var(--spacing-75); }
.ticket-stub {
  position: relative;
  display: grid; gap: var(--spacing-200); align-content: center;
  padding: var(--spacing-400);
  transform-origin: left bottom;
  transition: transform 500ms var(--ease);
}
.ticket-stub .heading-5 { display: flex; align-items: center; gap: var(--spacing-75); }
.ticket-stub .heading-5 i { color: var(--icon-subtle); }
.perforation { position: absolute; top: var(--spacing-300); bottom: var(--spacing-300); right: 320px; width: 1px; z-index: 1; }
.perforation .dash-v { top: 0; bottom: 0; left: 0; }
.stub-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-100); }
.stub-meta div { display: grid; gap: var(--spacing-25); }
.barcode { width: 100%; height: 40px; fill: var(--text-primary); opacity: 0.85; }
@media (hover: hover) and (pointer: fine) {
  .ticket:hover .ticket-stub { transform: translate(8px, -8px) rotate(3deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .story { grid-template-columns: 1fr; gap: 0; margin-top: var(--spacing-400); }
  .story-stage {
    order: -1; top: var(--spacing-900); z-index: 2;
    padding-bottom: var(--spacing-200);
    background-color: var(--surface-primary);
  }
  .stage-frame { height: 280px; }
  .stage { inset: var(--spacing-300); }
  .route-map { max-height: 150px; }
  .story-step { min-height: 44vh; }
  .ticket { grid-template-columns: 1fr; }
  .perforation { display: none; }
  .ticket-main { padding: var(--spacing-600) var(--spacing-300); }
}
@media (max-width: 640px) {
  .stage-frame { height: 260px; }
  .stage-list li { padding-block: var(--spacing-75); }
  .pass { grid-template-columns: 1fr; }
  .pass-stub { padding-top: 0; }
  .pass-stub::before { display: none; }
  .pass-main .heading-4 { font-size: 1.25rem; line-height: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-frame, .preview-options, .preview-options li, .stage, .stage-list li, .route-mask, .route-dot-end, .pass, .ticket-stub { transition: none !important; animation: none !important; }
  .route-mask { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) { .story-step .step-num { transition: none; } }