/* HYPHSWORLD global transport operation layer */
.hw-transport-overlay{
  position:fixed;
  inset:0;
  z-index:2147482000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(57,255,122,.20),transparent 24%),
    radial-gradient(circle at 12% 12%,rgba(31,252,255,.18),transparent 28%),
    radial-gradient(circle at 88% 82%,rgba(255,43,214,.18),transparent 30%),
    rgba(0,0,0,.86);
  color:#fff;
  overflow:hidden;
}
.hw-transport-overlay.is-live{display:flex;}
.hw-transport-overlay::before,
.hw-transport-overlay::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
}
.hw-transport-overlay::before{
  background:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:26px 26px;
  transform:perspective(700px) rotateX(58deg) translateY(10%);
  animation:hwTransportGrid .72s linear infinite;
  opacity:.45;
}
.hw-transport-overlay::after{
  background:conic-gradient(from 0deg,transparent,rgba(57,255,122,.32),transparent,rgba(31,252,255,.28),transparent,rgba(255,43,214,.24),transparent);
  animation:hwTransportSpin 1.6s linear infinite;
  filter:blur(6px);
  opacity:.42;
}
.hw-transport-card{
  position:relative;
  z-index:2;
  width:min(92vw,520px);
  padding:22px;
  border-radius:26px;
  border:2px solid rgba(31,252,255,.42);
  background:linear-gradient(145deg,rgba(5,7,12,.94),rgba(12,9,31,.92) 52%,rgba(4,25,30,.92));
  box-shadow:0 24px 80px rgba(0,0,0,.72),0 0 38px rgba(57,255,122,.20),inset 0 0 0 1px rgba(255,255,255,.08);
  text-align:left;
  overflow:hidden;
}
.hw-transport-card::before{
  content:"TRANSPORT OPERATION";
  display:inline-flex;
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  color:#050505;
  background:linear-gradient(100deg,#39ff7a,#ffe45c,#ff4fd8,#1ffcff);
  font:1000 10px/1 system-ui,Arial,sans-serif;
  letter-spacing:.16em;
}
.hw-transport-title{
  margin:0;
  font:1000 clamp(2rem,9vw,4rem)/.86 system-ui,Arial,sans-serif;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-shadow:0 0 24px rgba(31,252,255,.22);
}
.hw-transport-destination{
  margin:10px 0 0;
  color:#ffe45c;
  font:950 13px/1.2 system-ui,Arial,sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.hw-transport-line{
  margin:12px 0 0;
  color:#dfffea;
  font:800 14px/1.38 system-ui,Arial,sans-serif;
}
.hw-transport-bars{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-top:16px;
}
.hw-transport-bars span{
  height:9px;
  border-radius:999px;
  background:linear-gradient(90deg,#39ff7a,#1ffcff,#ff4fd8);
  animation:hwTransportPulse .8s ease-in-out infinite alternate;
  box-shadow:0 0 16px rgba(57,255,122,.18);
}
.hw-transport-bars span:nth-child(2){animation-delay:.08s}
.hw-transport-bars span:nth-child(3){animation-delay:.16s}
.hw-transport-bars span:nth-child(4){animation-delay:.24s}
.hw-transport-bars span:nth-child(5){animation-delay:.32s}
@keyframes hwTransportGrid{to{background-position:0 26px,26px 0}}
@keyframes hwTransportSpin{to{transform:rotate(360deg)}}
@keyframes hwTransportPulse{from{opacity:.35;transform:scaleX(.78)}to{opacity:1;transform:scaleX(1)}}
@media(max-width:620px){
  .hw-transport-card{padding:18px;border-radius:22px;}
  .hw-transport-line{font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
  .hw-transport-overlay::before,.hw-transport-overlay::after,.hw-transport-bars span{animation:none!important;}
}