:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.25, 1, 0.35, 1);
  --ease-spring:   cubic-bezier(0.22, 1.2, 0.36, 1);   /* subtle overshoot */
  --dur-fast:   500ms;
  --dur-base:   750ms;
  --dur-slow:   1000ms;
  --dur-crawl:  1500ms;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}

.search-card {
  animation: bpt-slide-up var(--dur-slow) var(--ease-out-expo) both;
  animation-delay: 350ms;
}

.hero-copy {
  animation: bpt-slide-up var(--dur-slow) var(--ease-out-expo) both;
  animation-delay: 250ms;
}

.hero-logo {
  animation: bpt-slide-left var(--dur-crawl) var(--ease-out-soft) both;
  animation-delay: 500ms;
}

.search-card h2 {
  animation: bpt-slide-left var(--dur-base) var(--ease-out-expo) both;
  animation-delay: 1000ms;
}

.form {
  animation: bpt-slide-left var(--dur-base) var(--ease-out-soft) both;
  animation-delay: 750ms;
}

.hero-sub {
  animation: bpt-slide-left var(--dur-base) var(--ease-out-expo) both;
  animation-delay: 1000ms;
}

.hero-grid .mini:nth-child(1) {
  animation: bpt-card-pop var(--dur-slow) var(--ease-spring) both;
  animation-delay: 460ms;
}

.hero-grid .mini:nth-child(2) {
  animation: bpt-card-pop var(--dur-slow) var(--ease-spring) both;
  animation-delay: 600ms;
}

.hero-grid .mini:nth-child(3) {
  animation: bpt-card-pop var(--dur-slow) var(--ease-spring) both;
  animation-delay: 740ms;
}

.hero-grid .mini:nth-child(4) {
  animation: bpt-card-pop var(--dur-slow) var(--ease-spring) both;
  animation-delay: 880ms;
}

.note {
  animation: bpt-slide-up var(--dur-base) var(--ease-out-soft) both;
  animation-delay: 1020ms;
}

.legend {
  animation: bpt-slide-up var(--dur-base) var(--ease-out-expo) both;
  animation-delay: 180ms;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}

@supports not (animation-timeline: view()) {
  .legend {
    animation: bpt-slide-up var(--dur-base) var(--ease-out-expo) both;
    animation-delay: 180ms;
  }
}

.legend-drawer.open {
  animation: bpt-drawer-open var(--dur-base) var(--ease-out-expo) both;
}

.legend-carrier {
  animation: bpt-fade var(--dur-fast) var(--ease-out-soft) both;
}

.legend-carrier:nth-child(1)  { animation-delay:  100ms }
.legend-carrier:nth-child(2)  { animation-delay:  200ms }
.legend-carrier:nth-child(3)  { animation-delay:  300ms }
.legend-carrier:nth-child(4)  { animation-delay: 400ms }
.legend-carrier:nth-child(5)  { animation-delay: 500ms }
.legend-carrier:nth-child(6)  { animation-delay: 600ms }
.legend-carrier:nth-child(7)  { animation-delay: 700ms }
.legend-carrier:nth-child(8)  { animation-delay: 800ms }
.legend-carrier:nth-child(9)  { animation-delay: 900ms }
.legend-carrier:nth-child(10) { animation-delay: 1000ms }
.legend-carrier:nth-child(n+11) { animation-delay: 1100ms }

.controls {
  animation: bpt-fade var(--dur-base) var(--ease-out-soft) both;
  animation-delay: 80ms;
}

.route-list .route {
  animation: bpt-route-enter var(--dur-slow) var(--ease-out-expo) both;
}

.route-list .route:nth-child(1)  { animation-delay:  0ms   }
.route-list .route:nth-child(2)  { animation-delay:  70ms  }
.route-list .route:nth-child(3)  { animation-delay: 140ms  }
.route-list .route:nth-child(4)  { animation-delay: 210ms  }
.route-list .route:nth-child(5)  { animation-delay: 280ms  }
.route-list .route:nth-child(6)  { animation-delay: 350ms  }
.route-list .route:nth-child(7)  { animation-delay: 420ms  }
.route-list .route:nth-child(8)  { animation-delay: 490ms  }
.route-list .route:nth-child(n+9) { animation-delay: 550ms }

.route[open] .route-body {
  animation: bpt-expand var(--dur-base) var(--ease-out-expo) both;
}

.route[open] .segment-card {
  animation: bpt-slide-up var(--dur-base) var(--ease-out-expo) both;
}

.route[open] .segment-card:nth-child(1) { animation-delay:  40ms }
.route[open] .segment-card:nth-child(2) { animation-delay: 100ms }
.route[open] .segment-card:nth-child(3) { animation-delay: 160ms }
.route[open] .segment-card:nth-child(n+4) { animation-delay: 220ms }

.transfer-strip .transfer-pill {
  animation: bpt-fade var(--dur-fast) var(--ease-out-soft) both;
}

.transfer-strip .transfer-pill:nth-child(1) { animation-delay:  30ms }
.transfer-strip .transfer-pill:nth-child(2) { animation-delay:  80ms }
.transfer-strip .transfer-pill:nth-child(3) { animation-delay: 130ms }
.transfer-strip .transfer-pill:nth-child(n+4) { animation-delay: 180ms }

.empty {
  animation: bpt-fade var(--dur-base) var(--ease-out-soft) both;
  animation-delay: 60ms;
}

.search-card {
  transition:
    transform     400ms var(--ease-out-soft),
    box-shadow    400ms var(--ease-out-soft),
    border-color  240ms var(--ease-out-soft);
}

.search-card:hover {
  transform:   translateY(-3px);
  box-shadow:  0 24px 56px rgba(24, 50, 76, 0.12);
  border-color: #c4d7f4;
}

.hero-copy {
  transition:
    transform     400ms var(--ease-out-soft),
    box-shadow    400ms var(--ease-out-soft);
}

.hero-copy:hover {
  transform:  translateY(-2px);
  box-shadow: 0 20px 48px rgba(24, 50, 76, 0.10);
}

.route {
  transition:
    transform     360ms var(--ease-out-soft),
    box-shadow    360ms var(--ease-out-soft),
    border-color  240ms var(--ease-out-soft) !important;
}

.route:hover {
  transform:   translateY(-3px) !important;
  box-shadow:  0 20px 44px rgba(24, 50, 76, 0.11) !important;
  border-color: #b8d0ee !important;
}

button.search-btn {
  transition:
    transform     280ms var(--ease-spring),
    filter        280ms var(--ease-out-soft),
    box-shadow    280ms var(--ease-out-soft);
}

button.search-btn:hover:not(:disabled) {
  transform:   translateY(-2px) scale(1.01);
  filter:      brightness(1.06);
  box-shadow:  0 18px 34px rgba(37, 99, 235, 0.28);
}

button.search-btn:active:not(:disabled) {
  transform:  translateY(0) scale(0.985);
  filter:     brightness(0.97);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16);
  transition-duration: 100ms;
}

.side-tab {
  transition:
    background     260ms var(--ease-out-soft),
    color          260ms var(--ease-out-soft),
    border-color   260ms var(--ease-out-soft),
    transform      260ms var(--ease-spring),
    box-shadow     260ms var(--ease-out-soft);
}

.side-tab:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(24, 50, 76, 0.08);
}

.legend-item[data-expandable] {
  transition:
    background    240ms var(--ease-out-soft),
    border-color  240ms var(--ease-out-soft),
    transform     240ms var(--ease-spring),
    color         240ms var(--ease-out-soft);
}

.legend-item[data-expandable]:hover {
  transform: translateY(-2px);
}

input[type="text"]:focus,
select:focus {
  transition:
    border-color  300ms var(--ease-out-soft),
    box-shadow    300ms var(--ease-out-soft),
    transform     300ms var(--ease-out-soft);
  transform: translateY(-1px);
}

@keyframes bpt-slide-up {
  from {
    opacity:   0;
    transform: translateY(18px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

@keyframes bpt-slide-left {
  from {
    opacity:   0;
    transform: translateX(18px);
  }
  to {
    opacity:   1;
    transform: translateX(0);
  }
}

@keyframes bpt-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bpt-card-pop {
  from {
    opacity:   0;
    transform: translateY(22px) scale(0.96);
  }
  to {
    opacity:   1;
    transform: translateY(0)    scale(1);
  }
}

@keyframes bpt-route-enter {
  from {
    opacity:   0;
    transform: translateY(28px) scale(0.98);
  }
  to {
    opacity:   1;
    transform: translateY(0)    scale(1);
  }
}

@keyframes bpt-drawer-open {
  from {
    opacity:    0;
    clip-path:  inset(8px 0 0 0 round 16px);
  }
  to {
    opacity:    1;
    clip-path:  inset(0px 0 0 0 round 16px);
  }
}

@keyframes bpt-expand {
  from {
    opacity:    0;
    clip-path:  inset(0 0 100% 0);
  }
  to {
    opacity:    1;
    clip-path:  inset(0 0 0 0);
  }
}

.bpt-progress-wrap {
  display:         grid;
  gap:             6px;
  overflow:        hidden;
  max-height:      0;
  opacity:         0;
  transition:
    max-height  320ms var(--ease-out-soft),
    opacity     280ms var(--ease-out-soft);
}

.bpt-progress-wrap.bpt-progress-visible {
  max-height: 40px;
  opacity:    1;
}

.bpt-progress-track {
  position:      relative;
  height:        6px;
  border-radius: var(--radius-full, 9999px);
  background:    rgba(37, 99, 235, 0.12);
  overflow:      hidden;
}

.bpt-progress-fill {
  position:      absolute;
  inset:         0 auto 0 0;
  height:        100%;
  width:         0%;
  border-radius: var(--radius-full, 9999px);
  background:    linear-gradient(135deg, #3b82f6, #2563eb 55%, #7c3aed);
  box-shadow:    0 0 10px rgba(37, 99, 235, 0.40);
  transition:    width 600ms var(--ease-out-soft);
  will-change:   width;
}

.bpt-progress-fill::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    transparent       0%,
    rgba(255,255,255,0.28) 50%,
    transparent       100%
  );
  background-size: 200% 100%;
  animation:  bpt-shimmer-sweep 1.6s var(--ease-out-soft) infinite;
}

.bpt-progress-label {
  font-size:   0.78rem;
  font-weight: 700;
  color:       var(--brand, #2563eb);
  text-align:  right;
  line-height: 1;
  min-height:  1em;
  transition:  opacity 200ms ease;
}

.bpt-progress-fill.bpt-progress-done {
  background:  linear-gradient(135deg, #10b981, #059669);
  box-shadow:  0 0 10px rgba(16, 185, 129, 0.40);
  transition:  width 300ms var(--ease-out-expo),
               background 300ms var(--ease-out-soft),
               box-shadow  300ms var(--ease-out-soft);
}

.bpt-progress-fill.bpt-progress-done::after {
  animation: none;
  opacity:   0;
}

.bpt-progress-wrap.bpt-progress-hiding {
  max-height: 0;
  opacity:    0;
  transition:
    max-height  400ms 200ms var(--ease-out-soft),
    opacity     350ms 100ms var(--ease-out-soft);
}

@keyframes bpt-shimmer-sweep {
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}