/* ===========================================================
   Deltech — entry-gate preloader
   Car pulls up to the kiosk, takes a ticket, the barrier lifts,
   the car drives through, the barrier drops, the screen opens.
   =========================================================== */

.dt-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #17408f 0%, #0e2e6d 45%, #ffffff 100%);
  overflow: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.dt-preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.dt-loading,
html.dt-loading body {
  overflow: hidden;
}

.dt-pre-inner {
  width: min(760px, 90vw);
  text-align: center;
  color: #fff;
}

.dt-pre-logo {
  width: 74px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
  animation: dt-pre-pop 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.dt-pre-word {
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  margin: 0 0 4px;
  animation: dt-pre-pop 0.45s 0.05s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.dt-pre-sub {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 26px;
  animation: dt-pre-pop 0.45s 0.1s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

/* ---- the stage -------------------------------------------------- */

.dt-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 260;
  max-height: 44vh;
  margin: 0 auto;
}

.dt-stage svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* road surface markings scroll subtly */
.dt-lane-dash {
  stroke-dasharray: 26 22;
  animation: dt-lane 1.1s linear infinite;
}

@keyframes dt-lane {
  to {
    stroke-dashoffset: -48;
  }
}

/* kiosk screen blinks while it reads the plate */
.dt-kiosk-screen {
  animation: dt-screen 1.1s steps(1, end) infinite;
}

@keyframes dt-screen {
  0%,
  60% {
    fill: #ffc629;
  }
  61%,
  100% {
    fill: #7a5c10;
  }
}

/* LPR scan beam from the kiosk camera */
.dt-scan {
  opacity: 0;
}

.dt-preloader.step-scan .dt-scan {
  animation: dt-scan 0.32s ease-in-out 2;
}

@keyframes dt-scan {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  35% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ticket pops out of the kiosk */
.dt-ticket {
  opacity: 0;
}

.dt-preloader.step-scan .dt-ticket {
  animation: dt-ticket 0.5s 0.15s ease-out both;
}

@keyframes dt-ticket {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: translate(6px, -4px) rotate(-6deg);
  }
  100% {
    opacity: 0;
    transform: translate(26px, -18px) rotate(-22deg);
  }
}

/* barrier arm */
.dt-arm {
  transform-box: fill-box;
  transform-origin: 4px 8px;
  transition: transform 0.42s cubic-bezier(0.3, 0.9, 0.3, 1);
}

.dt-preloader.step-open .dt-arm,
.dt-preloader.step-pass .dt-arm {
  transform: rotate(-82deg);
}

.dt-preloader.step-close .dt-arm,
.dt-preloader.step-out .dt-arm {
  transform: rotate(0deg);
}

/* gate light: red -> green -> red */
.dt-light {
  fill: #e01f26;
  transition: fill 0.3s ease;
}

.dt-preloader.step-open .dt-light,
.dt-preloader.step-pass .dt-light {
  fill: #34d17a;
}

/* car travel */
.dt-car {
  transform: translateX(-560px);
  transition: transform 0.6s cubic-bezier(0.35, 0, 0.25, 1);
}

.dt-preloader.step-approach .dt-car,
.dt-preloader.step-scan .dt-car,
.dt-preloader.step-open .dt-car {
  transform: translateX(-26px);
}

.dt-preloader.step-pass .dt-car,
.dt-preloader.step-close .dt-car,
.dt-preloader.step-out .dt-car {
  transform: translateX(380px);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
}

.dt-wheel {
  transform-box: fill-box;
  transform-origin: center;
}

.dt-preloader.step-approach .dt-wheel,
.dt-preloader.step-pass .dt-wheel,
.dt-preloader.step-close .dt-wheel {
  animation: dt-spin 0.45s linear infinite;
}

@keyframes dt-spin {
  to {
    transform: rotate(360deg);
  }
}

.dt-headlight {
  opacity: 0.25;
  transition: opacity 0.4s ease;
}

.dt-preloader.step-open .dt-headlight,
.dt-preloader.step-pass .dt-headlight {
  opacity: 0.75;
}

/* ---- status line + progress ------------------------------------- */

.dt-pre-status {
  margin-top: 14px;
  min-height: 1.2em;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.dt-pre-bar {
  margin: 14px auto 0;
  width: min(260px, 60vw);
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.dt-pre-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffc629, #e01f26);
  transition: width 0.25s ease;
}

@keyframes dt-pre-pop {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- reduced motion / no JS ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dt-preloader * {
    animation: none !important;
    transition: none !important;
  }
  .dt-car {
    transform: translateX(0);
  }
  .dt-arm {
    transform: rotate(-82deg);
  }
}

html.no-js .dt-preloader {
  display: none;
}