/**
 * Loader: zigzag progress bar + exit wash (navy → soft aqua radial)
 */

/* ---- Exit wash (random radial navy → mizu-iro) ---- */
.tx_boot {
  overflow: hidden;
}

.tx_boot_wash {
  --wash-x: 50%;
  --wash-y: 50%;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-color: #00317e;
  opacity: 0;
  overflow: hidden;
}

.tx_boot_wash.tx_-flash {
  opacity: 1;
}

.tx_boot_wash_burst {
  position: absolute;
  left: var(--wash-x);
  top: var(--wash-y);
  width: 28vmax;
  height: 28vmax;
  margin: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.05);
  opacity: 0.75;
  background: radial-gradient(
    circle closest-side,
    #c5e6f2 0%,
    #9ecfe3 30%,
    #7eb8d4 55%,
    rgba(0, 49, 126, 0) 74%
  );
  will-change: transform, opacity;
}

.tx_boot_wash.tx_-expand {
  transition: background-color 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.tx_boot_wash.tx_-expand .tx_boot_wash_burst {
  transform: translate(-50%, -50%) scale(14);
  opacity: 1;
  transition:
    transform 0.42s cubic-bezier(0.15, 0.9, 0.25, 1),
    opacity 0.18s ease-out;
}

.tx_boot.tx_-theta-exit-fade {
  opacity: 0;
  transition: opacity 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}

.tx_boot_content {
  position: relative;
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .tx_boot_wash.tx_-expand,
  .tx_boot_wash.tx_-expand .tx_boot_wash_burst,
  .tx_boot.tx_-theta-exit-fade {
    transition-duration: 0.01ms !important;
  }
}

/* ---- Progress bar ---- */
.tx_boot_foot {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: end !important;
  width: 100%;
}

.tx_boot_progress {
  position: relative;
  width: 100% !important;
  max-width: none !important;
}

.tx_boot_number[data-tx-boot="number"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.tx_boot_circle[data-tx-boot="circle"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.tx_theta_bootBar {
  width: 100%;
  height: 2.4rem;
}

@media screen and (min-width: 48em) {
  .tx_theta_bootBar {
    height: 3.2rem;
  }
}

.tx_theta_bootBar_svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tx_theta_bootBar_track,
.tx_theta_bootBar_fill {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.tx_theta_bootBar_track {
  stroke: rgba(250, 250, 242, 0.22);
}

.tx_theta_bootBar_fill {
  stroke: #fafaf2;
  transition: stroke-dashoffset 0.05s linear;
}

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