/* Geisoleerde filmische laadrit; raakt uitsluitend #loading-section. */
#loading-section.loading-section {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--nav-h, 72px) + 18px) 0 36px;
  overflow: clip;
  background:
    radial-gradient(circle at 18% 12%, rgb(78 158 255 / 16%), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 88%, #071525 12%), var(--bg-primary));
}

#loading-section .search-journey-shell {
  min-height: calc(100dvh - var(--nav-h, 72px) - 54px);
  display: grid;
  padding-block: clamp(24px, 5vh, 56px);
  align-content: center;
  gap: 26px;
}

#loading-section .search-journey {
  position: relative;
  min-height: clamp(390px, 58vh, 610px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(148 190 231 / 28%);
  border-radius: clamp(24px, 3vw, 42px);
  background: #071a2d;
  box-shadow: 0 42px 120px rgb(0 13 30 / 28%), inset 0 1px 0 rgb(255 255 255 / 12%);
  perspective: 900px;
}

#loading-section .search-journey::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 24%, rgb(0 10 24 / 24%));
  box-shadow: inset 0 0 90px rgb(1 12 28 / 32%);
}

#loading-section .journey-environments,
#loading-section .journey-environment {
  position: absolute;
  inset: 0;
}

#loading-section .journey-environment {
  opacity: 0;
  will-change: opacity, transform;
}

#loading-section .journey-scene-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
  transform: scale(1.025);
  filter: saturate(.94) contrast(1.02);
}

#loading-section .journey-environment-open {
  opacity: 1;
  background:
    radial-gradient(circle at 72% 20%, rgb(255 224 151 / 72%) 0 3%, transparent 3.5%),
    linear-gradient(180deg, #5da8e9 0%, #9ed1ef 48%, #d8c99f 49%, #335d45 68%, #142d2c 100%);
  animation: loading-journey-scene-cycle 6s linear infinite;
}

#loading-section .journey-environment-open span {
  position: absolute;
  bottom: 31%;
  width: 46%;
  height: 28%;
  border-radius: 52% 48% 0 0;
  background: linear-gradient(150deg, #355e52, #183b36);
  filter: saturate(.8);
  animation: loading-journey-land-drift 5.4s linear infinite;
}

#loading-section .journey-environment-open span:nth-child(1) { left: -8%; transform: scale(.72); opacity: .8; }
#loading-section .journey-environment-open span:nth-child(2) { left: 28%; bottom: 29%; transform: scale(.9); }
#loading-section .journey-environment-open span:nth-child(3) { right: -12%; transform: scale(.66); opacity: .76; }

#loading-section .journey-environment-city {
  z-index: 4;
  overflow: hidden;
  background: #071424;
  animation: loading-journey-scene-cycle 6s -4s linear infinite;
}

#loading-section .journey-environment-city::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgb(2 11 24 / 4%), transparent 42%, rgb(2 8 16 / 20%));
  pointer-events: none;
}

#loading-section .journey-environment-tunnel {
  z-index: 4;
  overflow: hidden;
  background: #05090f;
  animation: loading-journey-scene-cycle 6s -2s linear infinite;
}

#loading-section .journey-environment-tunnel::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 0 42%, rgb(0 3 8 / 22%) 82%);
  pointer-events: none;
}

#loading-section .journey-horizon {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 30%;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(225 244 255 / 72%), transparent);
  box-shadow: 0 0 32px rgb(130 204 255 / 38%);
}

#loading-section .search-road {
  position: absolute;
  z-index: 3;
  right: -19%;
  bottom: -15%;
  left: -19%;
  height: 56%;
  overflow: hidden;
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, transparent 49.7%, rgb(255 255 255 / 16%) 50%, transparent 50.3%),
    linear-gradient(180deg, #2c3c49, #111b25);
  transform-origin: 50% 0;
}

#loading-section .search-road::before {
  content: "";
  position: absolute;
  inset: -100% 0 0;
  opacity: .62;
  background: repeating-linear-gradient(180deg, transparent 0 72px, rgb(240 247 255 / 42%) 74px 102px, transparent 104px 170px);
  animation: loading-journey-road-flow .78s linear infinite;
}

#loading-section .road-line {
  position: absolute;
  z-index: 1;
  top: -75%;
  bottom: 0;
  width: 8px;
  opacity: .86;
  background: repeating-linear-gradient(180deg, #f9fcff 0 54px, transparent 54px 114px);
  animation: loading-journey-road-flow .62s linear infinite;
}

#loading-section .road-line-left { left: 39%; transform: rotate(9deg); }
#loading-section .road-line-right { right: 39%; transform: rotate(-9deg); }

#loading-section .search-car-wrap {
  position: absolute;
  z-index: 7;
  bottom: 3%;
  left: 50%;
  width: clamp(300px, 43vw, 550px);
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 78%;
  will-change: transform, opacity, filter;
  animation: loading-journey-car-cruise 1.08s ease-in-out infinite alternate;
}

#loading-section .search-car-wrap::after {
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: 4%;
  left: 8%;
  height: 12%;
  border-radius: 50%;
  background: rgb(0 4 12 / 55%);
  filter: blur(18px);
  content: "";
}

#loading-section .search-car-picture { position: relative; z-index: 1; display: block; width: 100%; }
#loading-section .search-car { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 18px rgb(0 5 14 / 34%)); }

#loading-section .car-light-glow {
  position: absolute;
  z-index: 2;
  top: 40.4%;
  width: 17.8%;
  height: 7.4%;
  border-radius: 48% 48% 34% 34%;
  background: radial-gradient(ellipse at center, rgb(255 72 84 / 24%), rgb(255 31 48 / 8%) 46%, transparent 74%);
  opacity: .28;
  pointer-events: none;
  mix-blend-mode: screen;
}

#loading-section .car-light-left { left: 14.1%; transform: rotate(1.5deg); }
#loading-section .car-light-right { right: 14.1%; transform: rotate(-1.5deg); }

#loading-section .search-car-plate {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28.7%;
  width: 24%;
  min-width: 106px;
  max-width: 144px;
  height: clamp(29px, 3.1vw, 38px);
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  overflow: hidden;
  border: 3px solid var(--plate-border, #111820);
  border-radius: 7px;
  background: var(--plate-yellow, #f0b504);
  color: #111820;
  box-shadow: 0 6px 15px rgb(0 0 0 / 30%);
  transform: translateX(-50%);
  opacity: 0;
}

#loading-section .search-car-plate-eu {
  align-self: stretch;
  display: grid;
  place-items: center;
  background: var(--plate-blue, #0757a6);
  color: white;
  font-size: .58rem;
  font-weight: 800;
}

#loading-section .search-car-plate strong {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(.72rem, 1.5vw, 1.1rem);
  letter-spacing: .07em;
  text-align: center;
}

#loading-section [data-journey-state="driving"] .search-car-plate { animation: loading-journey-plate-reveal 720ms ease-out forwards; }
#loading-section [data-search-journey][data-plate-docked] .search-car-plate,
#loading-section [data-journey-state="success"] .search-car-plate,
#loading-section [data-journey-state="error"] .search-car-plate { opacity: 1; transform: translateX(-50%) scale(1); }

#loading-section .visual-horn-wave {
  position: absolute;
  z-index: -1;
  top: 45%;
  left: 50%;
  width: 72%;
  aspect-ratio: 2;
  border: 4px solid rgb(158 221 255 / 72%);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.42);
}

#loading-section .search-journey-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

#loading-section .search-journey-copy h2 { margin-bottom: 8px; color: var(--text-primary); }
#loading-section .search-journey-copy .section-kicker { margin-bottom: 8px; color: var(--accent-primary); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
#loading-section .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#loading-section .journey-status-cycle { position: relative; height: 30px; overflow: hidden; color: var(--text-secondary); font-weight: 700; }
#loading-section .journey-status-cycle span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: loading-journey-status 6s ease-in-out infinite;
}
#loading-section .journey-status-cycle span:nth-child(2) { animation-delay: 2s; }
#loading-section .journey-status-cycle span:nth-child(3) { animation-delay: 4s; }

#loading-section [data-journey-state="success"] .search-car-wrap { animation: loading-journey-car-exit 760ms cubic-bezier(.55,.08,.78,.44) forwards; }
#loading-section [data-journey-state="success"] ~ .search-journey-copy .journey-status-cycle,
#loading-section [data-journey-state="error"] ~ .search-journey-copy .journey-status-cycle { display: none; }
#loading-section [data-journey-state="success"] .visual-horn-wave-one { animation: loading-journey-horn-wave 520ms ease-out forwards; }
#loading-section [data-journey-state="success"] .visual-horn-wave-two { animation: loading-journey-horn-wave 520ms 150ms ease-out forwards; }
#loading-section [data-journey-state="success"] .car-light { animation: loading-journey-light-success 180ms 2 alternate; }
#loading-section [data-journey-state="success"] .search-road::before,
#loading-section [data-journey-state="success"] .road-line { animation-duration: .28s; }

#loading-section [data-journey-state="error"] .search-car-wrap { animation: loading-journey-car-brake 620ms cubic-bezier(.18,.8,.22,1) forwards; }
#loading-section [data-journey-state="error"] .car-light {
  background: radial-gradient(ellipse at center, rgb(255 190 57 / 78%), rgb(255 145 21 / 20%) 46%, transparent 74%);
  filter: drop-shadow(0 0 12px rgb(255 176 32 / 72%));
  animation: loading-journey-hazard 180ms 3 alternate;
}
#loading-section [data-journey-state="error"] .search-road::before,
#loading-section [data-journey-state="error"] .road-line { animation-play-state: paused; }

.journey-plate-transfer {
  position: fixed;
  z-index: 700;
  margin: 0;
  transform-origin: top left;
  will-change: transform, opacity;
  contain: paint;
  box-shadow: 0 22px 60px rgb(0 14 35 / 30%);
}

@keyframes loading-journey-scene-cycle { 0%, 27% { opacity: 1; transform: scale(1.035); } 35%, 91% { opacity: 0; transform: scale(1.075); } 100% { opacity: 1; transform: scale(1.035); } }
@keyframes loading-journey-land-drift { to { transform: translate3d(-8vw, 0, 0) scale(.9); } }
@keyframes loading-journey-road-flow { to { transform: translate3d(0, 170px, 0); } }
@keyframes loading-journey-car-cruise { to { transform: translate3d(-50%, 3px, 0) rotate(.25deg); } }
@keyframes loading-journey-plate-reveal { 0%, 48% { opacity: 0; transform: translateX(-50%) scale(.94); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes loading-journey-status { 0% { opacity: 0; transform: translate3d(0, 14px, 0); } 8%, 27% { opacity: 1; transform: translate3d(0, 0, 0); } 34%, 100% { opacity: 0; transform: translate3d(0, -12px, 0); } }
@keyframes loading-journey-horn-wave { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.42); } 18% { opacity: .86; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); } }
@keyframes loading-journey-light-success { to { background: radial-gradient(ellipse at center, rgb(255 124 132 / 72%), rgb(255 36 53 / 26%) 44%, transparent 74%); filter: drop-shadow(0 0 14px rgb(255 46 63 / 72%)); opacity: .86; } }
@keyframes loading-journey-car-exit { 0% { transform: translate3d(-50%, 0, 0); } 18% { transform: translate3d(calc(-50% - 18px), 2px, 0) scale(1.015); } 100% { transform: translate3d(92vw, -18px, 0) scale(.82) rotate(2deg); opacity: .22; } }
@keyframes loading-journey-car-brake { 0% { transform: translate3d(-50%, 0, 0); } 46% { transform: translate3d(-50%, 12px, 0) scale(1.035) rotate(-.45deg); } 100% { transform: translate3d(-50%, 5px, 0) scale(1); } }
@keyframes loading-journey-hazard { to { opacity: .2; } }

@media (max-width: 760px) {
  #loading-section.loading-section { padding-top: calc(var(--nav-h, 72px) + 10px); }
  #loading-section .search-journey-shell { min-height: calc(100dvh - var(--nav-h, 72px) - 36px); padding-block: 12px 30px; gap: 20px; }
  #loading-section .search-journey { min-height: min(56dvh, 500px); border-radius: 24px; }
  #loading-section .search-car-wrap { bottom: 7%; width: min(98vw, 430px); }
  #loading-section .search-road { right: -48%; left: -48%; height: 58%; }
  #loading-section .road-line-left { left: 42%; }
  #loading-section .road-line-right { right: 42%; }
  #loading-section .search-journey-copy h2 { font-size: clamp(1.55rem, 8vw, 2.3rem); }
  #loading-section .journey-status-cycle { height: 48px; }
  #loading-section [data-journey-state="success"] .search-car-wrap { animation-duration: 570ms; }
  #loading-section [data-journey-state="error"] .search-car-wrap { animation-duration: 465ms; }
}

@media (prefers-reduced-motion: reduce) {
  #loading-section .search-journey *,
  #loading-section .journey-status-cycle span { animation: none !important; }
  #loading-section .journey-environment-open { opacity: 1; transform: none; }
  #loading-section .journey-environment-city,
  #loading-section .journey-environment-tunnel { display: none; }
  #loading-section .search-car-wrap { transform: translate3d(-50%, 0, 0); opacity: 1; }
  #loading-section .search-car-plate { opacity: 1; transform: translateX(-50%); }
  #loading-section .journey-status-cycle span { display: none; opacity: 1; transform: none; }
  #loading-section .journey-status-cycle span:first-child { display: block; }
}

@media print {
  #loading-section.loading-section,
  .journey-plate-transfer { display: none !important; }
}