/* ══════════════════════════════════════════════
   TCM PRELOADER — "Gate Scanner" boot sequence
   Plays once per session. Skipped on repeat pages.
   ══════════════════════════════════════════════ */

#tcm-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--navy, #060e1f);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}

/* Repeat page views: loader never shown */
html.tcm-skip-loader #tcm-loader { display: none !important; }

#tcm-loader.tcm-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Ambient map grid ── */
#tcm-loader::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(26,111,232,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,111,232,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(600px) rotateX(28deg);
  animation: tcm-grid-drift 6s linear infinite;
}
@keyframes tcm-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 112px; }
}

/* Radial vignette so grid fades at edges */
#tcm-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 25%, var(--navy, #060e1f) 78%);
}

.tcm-loader-stage {
  position: relative;
  z-index: 2;
  width: min(420px, 82vw);
  text-align: center;
}

/* ── Logo + scanner beam ── */
.tcm-loader-logo-wrap {
  position: relative;
  margin: 0 auto 34px;
  width: 100%;
}
.tcm-loader-logo {
  width: 100%;
  height: auto;
  display: block;
  /* dark blue logo → white, with electric glow */
  filter: brightness(0) invert(1)
          drop-shadow(0 0 14px rgba(0,198,255,.45))
          drop-shadow(0 0 22px rgba(26,111,232,.18));
  clip-path: inset(0 100% 0 0);
  animation: tcm-logo-reveal 1.15s cubic-bezier(.7,0,.2,1) .25s forwards;
}
@keyframes tcm-logo-reveal {
  to { clip-path: inset(0 0 0 0); }
}

/* the scan beam that sweeps across the logo */
.tcm-scan-beam {
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg,
    transparent, var(--cyan, #00c6ff) 30%, #fff 50%,
    var(--cyan, #00c6ff) 70%, transparent);
  box-shadow:
    0 0 18px 3px rgba(0,198,255,.75),
    0 0 60px 12px rgba(26,111,232,.35);
  animation: tcm-beam-sweep 1.15s cubic-bezier(.7,0,.2,1) .25s forwards;
  opacity: 0;
}
@keyframes tcm-beam-sweep {
  0%   { left: 0;    opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ── Route progress bar ── */
.tcm-route {
  position: relative;
  height: 2px;
  background: rgba(255,255,255,.10);
  border-radius: 2px;
  margin: 0 6px 22px;
}
.tcm-route-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--blue, #1a6fe8), var(--cyan, #00c6ff));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(0,198,255,.6);
  transition: width .3s ease;
}
/* amber cargo marker riding the route head */
.tcm-route-marker {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--accent, #f0a500);
  box-shadow: 0 0 14px 2px var(--accent-glow, rgba(240,165,0,.55));
  transition: left .3s ease;
}
/* waypoints */
.tcm-route i {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.22);
  transition: background .25s, box-shadow .25s;
}
.tcm-route i:nth-child(3) { left: 25%; }
.tcm-route i:nth-child(4) { left: 50%; }
.tcm-route i:nth-child(5) { left: 75%; }
.tcm-route i:nth-child(6) { left: 100%; }
.tcm-route i.tcm-hit {
  background: var(--cyan, #00c6ff);
  box-shadow: 0 0 10px rgba(0,198,255,.9);
}

/* ── Status readout ── */
.tcm-loader-status {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  min-height: 18px;
}
.tcm-loader-status .tcm-cursor {
  display: inline-block;
  width: 8px;
  height: 12px;
  margin-left: 4px;
  background: var(--cyan, #00c6ff);
  vertical-align: -1px;
  animation: tcm-blink .7s steps(1) infinite;
}
@keyframes tcm-blink { 50% { opacity: 0; } }

/* corner brackets — HUD frame */
.tcm-hud-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(0,198,255,.5);
  z-index: 2;
}
.tcm-hud-corner.tl { top: 24px; left: 24px; border-right: 0; border-bottom: 0; }
.tcm-hud-corner.tr { top: 24px; right: 24px; border-left: 0; border-bottom: 0; }
.tcm-hud-corner.bl { bottom: 24px; left: 24px; border-right: 0; border-top: 0; }
.tcm-hud-corner.br { bottom: 24px; right: 24px; border-left: 0; border-top: 0; }

/* ── Accessibility: reduced motion → simple quick fade ── */
@media (prefers-reduced-motion: reduce) {
  #tcm-loader::before { animation: none; }
  .tcm-loader-logo { animation: none; clip-path: none; }
  .tcm-scan-beam, .tcm-cursor { display: none; }
}