:root {
  --drive-depart-duration: 540ms;
  --drive-navigation-delay: 540ms;
  --drive-logo-visible: 380ms;
  --drive-label-visible: 210ms;
  --drive-arrival-duration: 420ms;
  --drive-travel-loop-duration: 420ms;
  --drive-failsafe-duration: 900ms;
  --drive-transition-duration: var(--drive-depart-duration);
  --drive-logo-start: 104ms;
  --drive-logo-duration: var(--drive-logo-visible);
  --drive-page-reveal-delay: 0ms;
  --cds-drive-enter-duration: var(--drive-arrival-duration);
  --cds-drive-student-departure: 1080ms;
  --cds-drive-student-arrival: 650ms;
  --cds-drive-travel-loop: 420ms;
  --cds-drive-emergency-timeout: 5000ms;
  --cds-drive-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cds-drive-sky-start: #eaf3ff;
  --cds-drive-sky-end: #cbdcf2;
  --cds-drive-road: #27364a;
  --cds-drive-road-deep: #111a27;
  --cds-drive-blue: #1769e8;
  --cds-drive-blue-glow: rgba(23, 105, 232, 0.56);
  --cds-drive-yellow: #f6ca3d;
  --cds-drive-headlight: rgba(255, 255, 238, 0.82);
  --cds-drive-copy: #071b3a;
}

html[data-theme="dark"] {
  --cds-drive-sky-start: #020817;
  --cds-drive-sky-end: #061936;
  --cds-drive-road: #07111f;
  --cds-drive-road-deep: #01050d;
  --cds-drive-blue: #4b9cff;
  --cds-drive-blue-glow: rgba(49, 134, 255, 0.68);
  --cds-drive-yellow: #ffd147;
  --cds-drive-headlight: rgba(244, 248, 255, 0.92);
  --cds-drive-copy: #f8fbff;
}

html.cds-page-enter-pending .cds-drive-transition {
  opacity: 1;
  visibility: visible;
  animation: cds-drive-overlay-failsafe var(--cds-drive-emergency-timeout) step-end forwards;
}

html.cds-page-enter-pending body > :not(.cds-drive-transition):not(script) {
  animation: cds-drive-content-failsafe var(--cds-drive-emergency-timeout) step-end forwards;
}

/* Incoming pages settle by route personality without moving the transition overlay. */
html.cds-page-enter-pending body > :not(.cds-drive-transition):not(script),
body.cds-page-entering > :not(.cds-drive-transition):not(script) {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.992);
}

html.cds-page-enter-pending.cds-page-enter-forward body > :not(.cds-drive-transition):not(script),
html.cds-page-enter-pending.cds-page-enter-checkpoint body > :not(.cds-drive-transition):not(script),
html.cds-page-enter-pending.cds-page-enter-message body > :not(.cds-drive-transition):not(script) {
  transform: translate3d(14px, 0, 0) scale(0.992);
}

html.cds-page-enter-pending.cds-page-enter-back body > :not(.cds-drive-transition):not(script) {
  transform: translate3d(-14px, 0, 0) scale(0.994);
}

html.cds-page-enter-pending.cds-page-enter-uphill body > :not(.cds-drive-transition):not(script) {
  transform: translate3d(0, 14px, 0) scale(0.99);
}

html.cds-page-enter-pending.cds-page-enter-theory body > :not(.cds-drive-transition):not(script) {
  clip-path: circle(18% at 50% 48%);
  transform: scale(0.996);
}

body.cds-page-entering > :not(.cds-drive-transition):not(script) {
  transition:
    opacity 320ms ease,
    transform var(--cds-drive-enter-duration) var(--cds-drive-ease),
    clip-path var(--cds-drive-enter-duration) var(--cds-drive-ease);
}

body.cds-page-entering.cds-page-entered > :not(.cds-drive-transition):not(script) {
  opacity: 1;
  clip-path: circle(150% at 50% 48%);
  transform: none;
}

body.cds-page-entering main > :is(header, section, article, .card, .container > *) {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

body.cds-page-entering.cds-page-entered main > :is(header, section, article, .card, .container > *) {
  opacity: 1;
  transform: none;
  transition: opacity 280ms ease, transform 360ms var(--cds-drive-ease);
}

body.cds-page-entering.cds-page-entered main > :is(header, section, article, .card, .container > *):nth-child(2) {
  transition-delay: 34ms;
}

body.cds-page-entering.cds-page-entered main > :is(header, section, article, .card, .container > *):nth-child(3) {
  transition-delay: 66ms;
}

body.cds-page-entering.cds-page-entered main > :is(header, section, article, .card, .container > *):nth-child(n + 4) {
  transition-delay: 96ms;
}

body.cds-page-leaving > :not(.cds-drive-transition):not(script) {
  opacity: 0.14;
  transform: translate3d(-20px, 0, 0) scale(0.985);
  transition: opacity 230ms ease, transform 430ms var(--cds-drive-ease), filter 170ms ease;
}

body.cds-page-leaving,
body.cds-page-reduced-leaving {
  overflow-x: hidden;
}

body.cds-page-leaving-back > :not(.cds-drive-transition):not(script) {
  transform: scale(0.988);
}

body.cds-page-leaving-uphill > :not(.cds-drive-transition):not(script) {
  transform: translate3d(0, -18px, 0) scale(0.985);
}

body.cds-page-leaving-message > :not(.cds-drive-transition):not(script) {
  transform: translate3d(-14px, 0, 0) scale(0.99);
}

.cds-transition-origin {
  transform: scale(0.975) !important;
  transition: transform 90ms ease !important;
}

.cds-drive-transition {
  --cds-ignition-x: 50vw;
  --cds-ignition-y: 50vh;
  --drive-speed-duration: 310ms;
  --drive-speed-start: 92ms;
  --drive-road-duration: 520ms;
  --drive-road-start: 42ms;
  --drive-marking-duration: 430ms;
  --drive-marking-start: 74ms;
  --drive-headlight-duration: 440ms;
  --drive-headlight-start: 112ms;
  --drive-car-duration: 470ms;
  --drive-car-start: 72ms;
  --drive-checkpoint-duration: 250ms;
  --drive-checkpoint-start: 188ms;
  --drive-label-duration: 210ms;
  --drive-label-start: 252ms;
  --drive-bridge-duration: 300ms;
  --drive-bridge-start: 45ms;
  --drive-theory-duration: 360ms;
  --drive-theory-start: 92ms;
  --drive-message-duration: 360ms;
  --drive-message-start: 82ms;
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  overflow: hidden;
  color: var(--cds-drive-copy);
  background: var(--cds-drive-sky-start);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  transition: opacity 95ms ease, visibility 95ms ease;
}

.cds-drive-transition.is-student-transition {
  --drive-depart-duration: 1080ms;
  --drive-navigation-delay: 1080ms;
  --drive-logo-visible: 650ms;
  --drive-label-visible: 700ms;
  --drive-arrival-duration: 650ms;
  --drive-travel-loop-duration: 420ms;
  --drive-transition-duration: var(--cds-drive-student-departure);
  --drive-logo-start: 430ms;
  --drive-logo-duration: var(--drive-logo-visible);
  --drive-failsafe-duration: var(--cds-drive-emergency-timeout);
  --drive-speed-duration: 600ms;
  --drive-speed-start: 120ms;
  --drive-road-duration: 950ms;
  --drive-road-start: 120ms;
  --drive-marking-duration: 760ms;
  --drive-marking-start: 150ms;
  --drive-headlight-duration: 560ms;
  --drive-headlight-start: 560ms;
  --drive-car-duration: 760ms;
  --drive-car-start: 160ms;
  --drive-checkpoint-duration: 520ms;
  --drive-checkpoint-start: 300ms;
  --drive-label-duration: var(--drive-label-visible);
  --drive-label-start: 310ms;
  --drive-bridge-duration: 520ms;
  --drive-bridge-start: 60ms;
  --drive-theory-duration: 440ms;
  --drive-theory-start: 300ms;
  --drive-message-duration: 500ms;
  --drive-message-start: 260ms;
}

.cds-drive-transition.is-visible {
  opacity: 1;
  visibility: visible;
  animation: none;
}

.cds-drive-transition.is-complete {
  opacity: 0;
  visibility: hidden;
  transition: opacity 110ms ease, visibility 110ms ease;
}

.cds-drive-sky {
  position: absolute;
  z-index: -4;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.34) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 16%, rgba(255, 255, 255, 0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 34%, rgba(255, 255, 255, 0.22) 0 1.5px, transparent 2.5px),
    radial-gradient(ellipse at 50% 72%, rgba(65, 135, 238, 0.26), transparent 38%),
    linear-gradient(180deg, var(--cds-drive-sky-start), var(--cds-drive-sky-end));
  background-size: 19rem 14rem, 24rem 18rem, 28rem 20rem, auto, auto;
  transform: scale(1.03);
}

.cds-drive-transition.is-visible .cds-drive-sky {
  animation: cds-drive-sky-in var(--drive-transition-duration) ease both;
}

.cds-drive-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center bottom, transparent 12%, rgba(0, 8, 25, 0.24) 70%, rgba(0, 5, 18, 0.5));
}

html:not([data-theme="dark"]) .cds-drive-sky::after,
html[data-theme="light"] .cds-drive-sky::after {
  background: radial-gradient(ellipse at center bottom, rgba(255, 255, 255, 0.22), rgba(15, 54, 103, 0.12) 72%, rgba(8, 36, 74, 0.22));
}

.cds-drive-speed-lines {
  position: absolute;
  z-index: -1;
  inset: 5% 0;
  opacity: 0;
  background:
    repeating-linear-gradient(168deg, transparent 0 27px, rgba(72, 151, 255, 0.62) 28px 29px, transparent 30px 55px) left / 17% 100% no-repeat,
    repeating-linear-gradient(12deg, transparent 0 27px, rgba(72, 151, 255, 0.62) 28px 29px, transparent 30px 55px) right / 17% 100% no-repeat;
  transform: scaleX(0.88);
}

.cds-drive-transition.is-visible .cds-drive-speed-lines {
  animation: cds-drive-speed-lines var(--drive-speed-duration) ease var(--drive-speed-start) both;
}

.cds-drive-road {
  position: absolute;
  z-index: -2;
  top: 30%;
  left: 50%;
  width: min(86vw, 68rem);
  height: 92vh;
  overflow: hidden;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(255, 255, 255, 0.025) 20%, transparent 36% 64%, rgba(255, 255, 255, 0.025) 80%, transparent 93%),
    linear-gradient(180deg, var(--cds-drive-road) 0%, var(--cds-drive-road-deep) 76%);
  box-shadow: 0 0 4rem rgba(0, 8, 25, 0.72);
  transform: translateX(-50%) perspective(700px) rotateX(62deg) scaleY(0.7);
  transform-origin: 50% 0;
  opacity: 0;
}

.cds-drive-road-edge,
.cds-drive-road-centre {
  position: absolute;
  top: 0;
  bottom: 0;
}

.cds-drive-road-edge {
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--cds-drive-blue) 18%, #d8ebff 92%);
  box-shadow: 0 0 0.8rem var(--cds-drive-blue-glow);
}

.cds-drive-road-edge-left {
  left: 16%;
  transform: rotate(-11deg);
  transform-origin: top;
}

.cds-drive-road-edge-right {
  right: 16%;
  transform: rotate(11deg);
  transform-origin: top;
}

.cds-drive-road-centre {
  left: calc(50% - 3px);
  width: 6px;
  background: repeating-linear-gradient(180deg, var(--cds-drive-yellow) 0 34px, transparent 34px 72px);
  filter: drop-shadow(0 0 5px rgba(255, 207, 64, 0.55));
}

.cds-drive-transition.is-visible .cds-drive-road {
  animation: cds-drive-road-enter var(--drive-road-duration) var(--cds-drive-ease) var(--drive-road-start) both;
}

.cds-drive-transition.is-visible .cds-drive-road-centre {
  animation: cds-drive-markings var(--drive-marking-duration) linear var(--drive-marking-start) both;
}

.cds-drive-headlights {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.cds-drive-headlight {
  position: absolute;
  bottom: -18vh;
  width: 52vw;
  height: 82vh;
  opacity: 0;
  background: linear-gradient(0deg, var(--cds-drive-headlight), rgba(174, 211, 255, 0.34) 54%, transparent 92%);
  filter: drop-shadow(0 0 1.4rem rgba(212, 232, 255, 0.5));
  transform: scaleX(0.08) scaleY(0.22);
  transform-origin: 50% 100%;
}

.cds-drive-headlight-left {
  left: 4%;
  clip-path: polygon(86% 100%, 100% 100%, 72% 0, 0 0);
}

.cds-drive-headlight-right {
  right: 4%;
  clip-path: polygon(0 100%, 14% 100%, 100% 0, 28% 0);
}

.cds-drive-transition.is-visible .cds-drive-headlight-left {
  animation: cds-drive-headlight-left var(--drive-headlight-duration) var(--cds-drive-ease) var(--drive-headlight-start) both;
}

.cds-drive-transition.is-visible .cds-drive-headlight-right {
  animation: cds-drive-headlight-right var(--drive-headlight-duration) var(--cds-drive-ease) var(--drive-headlight-start) both;
}

.cds-drive-car {
  position: absolute;
  z-index: 4;
  bottom: 12%;
  left: calc(50% - 2.4rem);
  width: 4.8rem;
  height: 2.3rem;
  color: rgba(223, 234, 250, 0.9);
  opacity: 0;
  transform: translate3d(-9rem, 0.8rem, 0) scale(0.82);
}

.cds-drive-car svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #071426;
  stroke: currentColor;
  stroke-width: 1.25;
}

.cds-drive-car-glow {
  position: absolute;
  inset: 46% -22% -24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(79, 155, 255, 0.62), transparent 68%);
  filter: blur(7px);
}

.cds-drive-transition.is-visible .cds-drive-car {
  animation: cds-drive-car-forward var(--drive-car-duration) var(--cds-drive-ease) var(--drive-car-start) both;
}

.cds-drive-gear-indicator {
  position: absolute;
  z-index: 6;
  right: 12%;
  bottom: 16%;
  display: grid;
  width: 2.25rem;
  aspect-ratio: 1;
  place-items: center;
  color: #d8eaff;
  border: 1px solid rgba(132, 189, 255, 0.48);
  border-radius: 50%;
  background: rgba(5, 20, 42, 0.72);
  box-shadow: 0 0 1rem rgba(64, 141, 255, 0.25);
  font-size: 0.78rem;
  font-weight: 850;
  opacity: 0;
}

.cds-drive-transition.is-back.is-visible .cds-drive-gear-indicator {
  animation: cds-drive-gear-reverse 430ms var(--cds-drive-ease) 250ms both;
}

.cds-drive-checkpoint {
  position: absolute;
  z-index: 6;
  top: 34%;
  left: 50%;
  width: min(34rem, 84vw);
  text-align: center;
  transform: translate(-50%, -50%);
}

.cds-drive-checkpoint-line {
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: 0.85rem;
  background: linear-gradient(90deg, transparent, var(--cds-drive-yellow) 18% 82%, transparent);
  box-shadow: 0 0 1rem rgba(255, 207, 64, 0.5);
  transform: scaleX(0);
}

.cds-drive-checkpoint-kicker,
.cds-drive-checkpoint strong {
  display: block;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(6px);
}

.cds-drive-checkpoint-kicker {
  color: var(--cds-drive-yellow);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.cds-drive-checkpoint strong {
  margin-top: 0.28rem;
  color: var(--cds-drive-copy);
  font-size: clamp(1.1rem, 3.2vw, 1.55rem);
  font-weight: 800;
}

.cds-drive-transition.is-visible .cds-drive-checkpoint-line {
  animation: cds-drive-checkpoint-line var(--drive-checkpoint-duration) var(--cds-drive-ease) var(--drive-checkpoint-start) both;
}

.cds-drive-transition.is-visible .cds-drive-checkpoint-kicker,
.cds-drive-transition.is-visible .cds-drive-checkpoint strong {
  animation: cds-drive-label var(--drive-label-duration) var(--cds-drive-ease) var(--drive-label-start) both;
}

.cds-drive-transition.is-visible .cds-drive-checkpoint strong {
  animation-delay: calc(var(--drive-label-start) + 24ms);
}

.cds-drive-ignition {
  position: absolute;
  z-index: 8;
  top: var(--cds-ignition-y);
  left: var(--cds-ignition-x);
  width: 7rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 209, 71, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 218, 88, 0.32), rgba(255, 209, 71, 0.06) 42%, transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.12);
}

.cds-drive-transition.is-visible.has-ignition .cds-drive-ignition {
  animation: cds-drive-ignition 230ms ease-out both;
}

.cds-drive-logo-moment {
  position: absolute;
  z-index: 7;
  top: 57%;
  left: 50%;
  width: clamp(6.4rem, 9.2vw, 8.5rem);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.78) rotate(-5deg);
}

.cds-drive-logo-moment::before,
.cds-drive-logo-halo {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cds-drive-logo-moment::before {
  z-index: -2;
  inset: -16%;
  border: 1px solid rgba(255, 211, 73, 0.62);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(20, 92, 194, 0.2) 52%, rgba(2, 13, 31, 0.72) 72%);
  box-shadow:
    0 0 0 5px rgba(29, 105, 221, 0.1),
    0 0 1.5rem var(--cds-drive-blue-glow),
    0 0 2.8rem rgba(244, 248, 255, 0.18);
}

.cds-drive-logo-halo {
  z-index: -1;
  inset: -32%;
  border: 1px solid rgba(125, 190, 255, 0.28);
  background: conic-gradient(from 210deg, transparent 0 28%, rgba(255, 211, 73, 0.62) 36%, rgba(69, 148, 255, 0.72) 52%, transparent 65% 100%);
  opacity: 0.72;
}

.cds-drive-logo-moment .cds-theme-logo,
.cds-drive-logo-moment .cds-theme-logo-image {
  width: 100%;
  height: 100%;
}

.cds-drive-logo-moment .cds-theme-logo-dark {
  filter: brightness(1.28) contrast(1.1) saturate(1.06);
}

.cds-drive-logo-moment .cds-theme-logo {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(4, 17, 39, 0.72);
  box-shadow: 0 0 1.15rem rgba(227, 240, 255, 0.26);
}

html[data-theme="light"] .cds-drive-logo-moment::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(189, 219, 255, 0.74) 55%, rgba(48, 99, 167, 0.28) 78%);
  box-shadow:
    0 0 0 5px rgba(27, 92, 193, 0.1),
    0 0 1.35rem rgba(29, 104, 219, 0.34),
    0 0 2.6rem rgba(255, 255, 255, 0.52);
}

.cds-drive-transition.is-visible.show-logo .cds-drive-logo-moment {
  animation: cds-drive-logo-moment var(--drive-logo-duration) var(--cds-drive-ease) var(--drive-logo-start) both;
}

.cds-drive-dashboard-bridge {
  position: fixed;
  z-index: 5;
  top: var(--cds-bridge-y);
  left: var(--cds-bridge-x);
  width: var(--cds-bridge-length, 0);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cds-drive-yellow), var(--cds-drive-blue), transparent);
  box-shadow: 0 0 0.8rem var(--cds-drive-blue-glow);
  opacity: 0;
  transform: rotate(var(--cds-bridge-angle, 0rad)) scaleX(0);
  transform-origin: left center;
}

.cds-drive-transition.is-visible.from-journey-home .cds-drive-dashboard-bridge {
  animation: cds-drive-bridge var(--drive-bridge-duration) var(--cds-drive-ease) var(--drive-bridge-start) both;
}

.cds-drive-theory-sign,
.cds-drive-message-wave {
  position: absolute;
  z-index: 6;
  opacity: 0;
}

.cds-drive-theory-sign {
  top: 17%;
  right: 15%;
  display: grid;
  width: 3.2rem;
  aspect-ratio: 1;
  place-items: center;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 0.65rem;
  background: var(--cds-drive-blue);
  box-shadow: 0 0 0 4px rgba(255, 209, 71, 0.8), 0 0 1.4rem var(--cds-drive-blue-glow);
  font-size: 1.35rem;
  font-weight: 850;
  transform: rotate(-8deg) scale(0.7);
}

.cds-drive-transition.is-theory.is-visible .cds-drive-theory-sign {
  animation: cds-drive-theory-sign var(--drive-theory-duration) var(--cds-drive-ease) var(--drive-theory-start) both;
}

.cds-drive-message-wave {
  top: 26%;
  left: 13%;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cds-drive-message-wave span {
  display: block;
  width: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cds-drive-yellow), var(--cds-drive-blue));
  box-shadow: 0 0 0.65rem var(--cds-drive-blue-glow);
}

.cds-drive-message-wave span:nth-child(1) { height: 0.8rem; }
.cds-drive-message-wave span:nth-child(2) { height: 1.5rem; }
.cds-drive-message-wave span:nth-child(3) { height: 1rem; }

.cds-drive-transition.is-message.is-visible .cds-drive-message-wave {
  animation: cds-drive-message-wave var(--drive-message-duration) var(--cds-drive-ease) var(--drive-message-start) both;
}

/* Transition personalities reuse the same road rather than starting competing systems. */
.cds-drive-transition.is-back .cds-drive-road-centre {
  animation-direction: reverse;
}

.cds-drive-transition.is-back.is-visible .cds-drive-car {
  animation-name: cds-drive-car-back;
}

.cds-drive-transition.is-back .cds-drive-checkpoint-line {
  transform-origin: right;
}

.cds-drive-transition.is-uphill .cds-drive-road {
  transform-origin: 50% 100%;
}

.cds-drive-transition.is-uphill.is-visible .cds-drive-road {
  animation-name: cds-drive-road-uphill;
}

.cds-drive-transition.is-uphill.is-visible .cds-drive-car {
  animation-name: cds-drive-car-uphill;
}

.cds-drive-transition.is-checkpoint.is-visible .cds-drive-checkpoint-line {
  animation-name: cds-drive-barrier;
}

.cds-drive-transition.is-theory .cds-drive-headlights {
  clip-path: circle(18% at 50% 50%);
}

.cds-drive-transition.is-theory.is-visible .cds-drive-headlights {
  animation: cds-drive-theory-reveal var(--drive-headlight-duration) var(--cds-drive-ease) var(--drive-headlight-start) both;
}

.cds-drive-transition.is-message .cds-drive-checkpoint {
  transform: translate(-46%, -50%);
}

@media (max-width: 640px) {
  .cds-drive-road {
    top: 34%;
    width: 118vw;
  }

  .cds-drive-checkpoint {
    top: 39%;
    width: min(21rem, 82vw);
  }

  .cds-drive-car {
    bottom: 15%;
  }

  .cds-drive-theory-sign {
    top: 13%;
    right: 9%;
  }

  .cds-drive-message-wave {
    top: 20%;
    left: 8%;
  }

  .cds-drive-logo-moment {
    top: 55%;
    width: clamp(5.5rem, 24vw, 6.6rem);
  }

  .cds-drive-speed-lines {
    background-size: 11% 100%, 11% 100%;
  }
}

@supports not (clip-path: circle(20% at 50% 50%)) {
  html.cds-page-enter-pending.cds-page-enter-theory body > :not(.cds-drive-transition):not(script),
  body.cds-page-entering.cds-page-entered > :not(.cds-drive-transition):not(script),
  .cds-drive-transition.is-theory .cds-drive-headlights {
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.cds-page-enter-pending body > :not(.cds-drive-transition):not(script),
  body.cds-page-entering > :not(.cds-drive-transition):not(script),
  body.cds-page-entering.cds-page-entered > :not(.cds-drive-transition):not(script),
  body.cds-page-leaving > :not(.cds-drive-transition):not(script) {
    transform: none;
    clip-path: none;
    filter: none;
  }

  html.cds-page-enter-pending body > :not(.cds-drive-transition):not(script),
  body.cds-page-entering-reduced > :not(.cds-drive-transition):not(script) {
    opacity: 0;
  }

  body.cds-page-entering-reduced > :not(.cds-drive-transition):not(script),
  body.cds-page-entered-reduced > :not(.cds-drive-transition):not(script) {
    transition: opacity 120ms ease;
  }

  body.cds-page-entered-reduced > :not(.cds-drive-transition):not(script) {
    opacity: 1;
  }

  body.cds-page-reduced-leaving > :not(.cds-drive-transition):not(script) {
    opacity: 0.74;
    transition: opacity 110ms ease;
  }

  .cds-drive-transition.is-reduced {
    background: linear-gradient(145deg, var(--cds-drive-sky-start), var(--cds-drive-sky-end));
    transition: opacity 100ms ease;
  }

  .cds-drive-transition.is-reduced > * {
    display: none;
    animation: none !important;
  }
}

/* Real-road motion: photographic asphalt is isolated from the nearly static horizon. */
.cds-drive-real-road-motion,
.cds-drive-real-road-band,
.cds-tunnel-real-road-motion,
.cds-tunnel-real-road-band,
.cds-journey-parking-road-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cds-drive-real-road-motion {
  z-index: 1;
  display: none;
  clip-path: polygon(49.25% 49.2%, 50.75% 49.2%, 99% 100%, 1% 100%);
  isolation: isolate;
  opacity: 0;
  will-change: opacity;
}

.cds-drive-transition.is-student-transition:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
) .cds-drive-real-road-motion {
  display: block;
}

.cds-drive-transition.is-student-transition:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
) .cds-drive-road {
  display: none;
}

.cds-drive-real-road-band {
  isolation: isolate;
}

.cds-drive-real-road-mid {
  clip-path: polygon(49.15% 49%, 50.85% 49%, 88% 82%, 12% 82%);
}

.cds-drive-real-road-near {
  clip-path: polygon(11% 77.5%, 89% 77.5%, 100% 100%, 0 100%);
}

.cds-drive-real-road-surface,
.cds-tunnel-real-road-surface,
.cds-journey-parking-road-surface {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: translate3d(0, -0.3%, 0) scale(0.96);
  transform-origin: 50% 50.6%;
  user-select: none;
  will-change: opacity, transform;
}

.cds-drive-real-road-night,
.cds-journey-parking-road-night {
  display: none;
}

html[data-theme="dark"] .cds-drive-real-road-day,
html[data-theme="dark"] .cds-journey-parking-road-day {
  display: none;
}

html[data-theme="dark"] .cds-drive-real-road-night,
html[data-theme="dark"] .cds-journey-parking-road-night {
  display: block;
}

.cds-drive-real-road-reflections {
  position: absolute;
  z-index: 4;
  inset: 50% 2% -4%;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(177, 216, 247, 0.08), transparent 42%),
    linear-gradient(90deg, transparent 33%, rgba(231, 242, 251, 0.08) 48%, rgba(231, 242, 251, 0.025) 53%, transparent 68%);
  clip-path: polygon(49% 0, 51% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: 0.42;
  transform-origin: 50% 0;
}

html[data-theme="dark"] .cds-drive-real-road-reflections {
  background:
    radial-gradient(ellipse at 50% 10%, rgba(101, 164, 224, 0.13), transparent 44%),
    linear-gradient(90deg, transparent 28%, rgba(127, 184, 235, 0.08) 48%, rgba(246, 94, 67, 0.045) 53%, transparent 72%);
  opacity: 0.58;
}

.cds-drive-transition.is-visible.is-student-transition:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
):not(.is-incoming) .cds-drive-real-road-motion {
  animation: cds-real-road-start 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cds-drive-transition.is-visible.is-student-transition:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
).is-incoming .cds-drive-real-road-motion {
  animation: cds-real-road-slow 650ms cubic-bezier(0.12, 0.72, 0.16, 1) both;
}

.cds-drive-transition.is-visible.is-student-transition:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
) .cds-drive-real-road-mid .cds-drive-real-road-surface {
  animation: cds-real-road-mid-loop 1380ms linear infinite;
}

.cds-drive-transition.is-visible.is-student-transition:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
) .cds-drive-real-road-near .cds-drive-real-road-surface {
  animation: cds-real-road-near-loop 760ms linear infinite;
}

.cds-drive-transition.is-visible.is-student-transition.is-incoming:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
) .cds-drive-real-road-mid .cds-drive-real-road-surface {
  animation-duration: 2200ms;
}

.cds-drive-transition.is-visible.is-student-transition.is-incoming:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
) .cds-drive-real-road-near .cds-drive-real-road-surface {
  animation-duration: 1500ms;
}

.cds-drive-real-road-band .cds-drive-real-road-b,
.cds-tunnel-real-road-band .cds-tunnel-real-road-b {
  animation-delay: var(--cds-road-layer-delay, -690ms) !important;
}

.cds-drive-real-road-near .cds-drive-real-road-b {
  --cds-road-layer-delay: -380ms;
}

.cds-drive-transition.is-visible.is-student-transition.is-incoming .cds-drive-real-road-mid .cds-drive-real-road-b {
  --cds-road-layer-delay: -1100ms;
}

.cds-drive-transition.is-visible.is-student-transition.is-incoming .cds-drive-real-road-near .cds-drive-real-road-b {
  --cds-road-layer-delay: -750ms;
}

.cds-drive-transition.is-visible.is-student-transition:is(
  .is-route-journey-home,
  .is-route-timetable,
  .is-route-progress,
  .is-route-practice-videos
) .cds-drive-real-road-reflections {
  animation: cds-real-road-reflection-flow 820ms linear infinite;
}

/* The source plate now supplies only distant parallax; it no longer carries the driving motion. */
@keyframes cds-drive-photo-scene-departure {
  0% { transform: translate3d(0, 0.08%, 0) scale(1.018); }
  52% { transform: translate3d(-0.04%, 0, 0) scale(1.022); }
  100% { transform: translate3d(0.04%, -0.08%, 0) scale(1.026); }
}

@keyframes cds-drive-photo-scene-arrival {
  0% { transform: translate3d(0.04%, -0.08%, 0) scale(1.026); }
  100% { transform: translate3d(0, -0.12%, 0) scale(1.03); }
}

@keyframes cds-real-road-start {
  0% { opacity: 0; }
  38% { opacity: 0.58; }
  100% { opacity: 1; }
}

@keyframes cds-real-road-slow {
  0%, 58% { opacity: 1; }
  100% { opacity: 0.24; }
}

@keyframes cds-real-road-mid-loop {
  0% { opacity: 0; transform: translate3d(0, -0.4%, 0) scale(0.94); }
  12% { opacity: 0.88; }
  62% { opacity: 0.92; }
  88% { opacity: 0.34; }
  100% { opacity: 0; transform: translate3d(0, 8%, 0) scale(1.78); }
}

@keyframes cds-real-road-near-loop {
  0% { opacity: 0; transform: translate3d(0, -1%, 0) scale(0.9); }
  10% { opacity: 0.86; }
  60% { opacity: 0.94; }
  86% { opacity: 0.32; }
  100% { opacity: 0; transform: translate3d(0, 16%, 0) scale(2.18); }
}

@keyframes cds-real-road-reflection-flow {
  0% { opacity: 0.14; transform: translate3d(0, -4%, 0) scaleY(0.78); }
  45% { opacity: 0.48; }
  100% { opacity: 0.08; transform: translate3d(0, 20%, 0) scaleY(1.42); }
}

/* Journey Home receives a second photographic plane as the road becomes parking asphalt. */
.cds-journey-parking-road-motion {
  z-index: 1;
  clip-path: polygon(45.5% 38%, 54.5% 38%, 99% 100%, 1% 100%);
  opacity: 0;
  isolation: isolate;
  will-change: opacity;
}

.cds-journey-parking-road-surface {
  transform-origin: 50% 39%;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-parking-road-motion {
  animation: cds-journey-parking-road-handoff var(--cds-drive-student-departure) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-parking-road-a {
  animation: cds-journey-parking-road-a var(--cds-drive-student-departure) cubic-bezier(0.12, 0.72, 0.16, 1) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-parking-road-b {
  animation: cds-journey-parking-road-b var(--cds-drive-student-departure) cubic-bezier(0.12, 0.72, 0.16, 1) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-parking-road-motion {
  animation: cds-journey-parking-road-stop var(--cds-drive-student-arrival) cubic-bezier(0.12, 0.72, 0.16, 1) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-parking-road-a {
  animation: cds-journey-parking-road-stop-a var(--cds-drive-student-arrival) cubic-bezier(0.12, 0.72, 0.16, 1) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-parking-road-b {
  animation: cds-journey-parking-road-stop-b var(--cds-drive-student-arrival) cubic-bezier(0.12, 0.72, 0.16, 1) both;
}

@keyframes cds-journey-parking-road-handoff {
  0%, 48% { opacity: 0; }
  66% { opacity: 0.46; }
  100% { opacity: 1; }
}

@keyframes cds-journey-parking-road-a {
  0%, 48% { opacity: 0; transform: translate3d(0, -1%, 0) scale(0.94); }
  61% { opacity: 0.92; }
  82% { opacity: 0.72; }
  100% { opacity: 0; transform: translate3d(0, 9%, 0) scale(1.48); }
}

@keyframes cds-journey-parking-road-b {
  0%, 58% { opacity: 0; transform: translate3d(0, -0.5%, 0) scale(0.96); }
  72% { opacity: 0.82; }
  100% { opacity: 1; transform: translate3d(0, 3.6%, 0) scale(1.2); }
}

@keyframes cds-journey-parking-road-stop {
  0%, 72% { opacity: 1; }
  100% { opacity: 0.7; }
}

@keyframes cds-journey-parking-road-stop-a {
  0% { opacity: 0.84; transform: translate3d(0, 0, 0) scale(1); }
  52% { opacity: 0.76; transform: translate3d(0, 4.8%, 0) scale(1.22); }
  82% { opacity: 0.38; transform: translate3d(0, 6.1%, 0) scale(1.29); }
  100% { opacity: 0; transform: translate3d(0, 6.35%, 0) scale(1.305); }
}

@keyframes cds-journey-parking-road-stop-b {
  0% { opacity: 0; transform: translate3d(0, -0.5%, 0) scale(0.96); }
  28% { opacity: 0.68; }
  66% { opacity: 0.92; transform: translate3d(0, 2.7%, 0) scale(1.1); }
  100% { opacity: 1; transform: translate3d(0, 3.25%, 0) scale(1.125); }
}

/* Keep the vehicle planted; suspension movement supports rather than creates speed. */
@keyframes cds-journey-car-approach {
  0% { opacity: 0; transform: translate3d(-50%, 0.9rem, 0) scale(0.94); }
  18% { opacity: 1; transform: translate3d(-50%, 0.08rem, 0) scale(0.99); }
  42% { transform: translate3d(calc(-50% - 0.1rem), 0.04rem, 0) scale(1); }
  72% { transform: translate3d(calc(-50% + 0.08rem), -0.04rem, 0) scale(0.995); }
  100% { opacity: 1; transform: translate3d(-50%, -0.18rem, 0) scale(0.97); }
}

@keyframes cds-journey-car-park {
  0% { opacity: 1; transform: translate3d(-50%, -0.18rem, 0) scale(0.97); }
  58% { transform: translate3d(calc(-50% - 0.06rem), -0.28rem, 0) scale(0.945); }
  82% { transform: translate3d(-50%, -0.32rem, 0) scale(0.935); }
  91% { transform: translate3d(-50%, -0.24rem, 0) scale(0.94); }
  100% { opacity: 1; transform: translate3d(-50%, -0.28rem, 0) scale(0.938); }
}

/* Tunnel asphalt is isolated from the walls and loops at the same vanishing point as its lights. */
.cds-tunnel-real-road-motion {
  z-index: 2;
  clip-path: polygon(49.2% 55%, 50.8% 55%, 99% 100%, 1% 100%);
  isolation: isolate;
  opacity: 0;
  will-change: opacity;
}

.cds-tunnel-real-road-mid {
  clip-path: polygon(49.2% 54%, 50.8% 54%, 86% 83%, 14% 83%);
}

.cds-tunnel-real-road-near {
  clip-path: polygon(13% 78%, 87% 78%, 100% 100%, 0 100%);
}

.cds-tunnel-real-road-surface {
  inset: -2%;
  width: 104%;
  height: 104%;
  object-position: 50% 50%;
  transform-origin: 50% 56%;
  filter: saturate(0.98) contrast(1.06) brightness(0.91);
}

html[data-theme="dark"] .cds-tunnel-real-road-surface {
  filter: saturate(0.92) contrast(1.12) brightness(0.73);
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-real-road-motion {
  animation: cds-tunnel-real-road-start 300ms ease-out 250ms both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-real-road-mid .cds-tunnel-real-road-surface {
  animation: cds-tunnel-real-road-mid-loop 920ms linear 260ms infinite;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-real-road-near .cds-tunnel-real-road-surface {
  animation: cds-tunnel-real-road-near-loop 520ms linear 260ms infinite;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-real-road-mid .cds-tunnel-real-road-b {
  --cds-road-layer-delay: -460ms;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-real-road-near .cds-tunnel-real-road-b {
  --cds-road-layer-delay: -260ms;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-real-road-motion {
  animation: cds-tunnel-real-road-slow var(--cds-drive-student-arrival) cubic-bezier(0.12, 0.72, 0.16, 1) both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-real-road-mid .cds-tunnel-real-road-surface {
  animation: cds-tunnel-real-road-mid-loop 1700ms linear infinite;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-real-road-near .cds-tunnel-real-road-surface {
  animation: cds-tunnel-real-road-near-loop 980ms linear infinite;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-real-road-mid .cds-tunnel-real-road-b {
  --cds-road-layer-delay: -850ms;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-real-road-near .cds-tunnel-real-road-b {
  --cds-road-layer-delay: -490ms;
}

@keyframes cds-tunnel-real-road-start {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes cds-tunnel-real-road-slow {
  0%, 66% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cds-tunnel-real-road-mid-loop {
  0% { opacity: 0; transform: translate3d(0, -0.7%, 0) scale(0.92); }
  12% { opacity: 0.9; }
  60% { opacity: 0.96; }
  87% { opacity: 0.34; }
  100% { opacity: 0; transform: translate3d(0, 10%, 0) scale(1.86); }
}

@keyframes cds-tunnel-real-road-near-loop {
  0% { opacity: 0; transform: translate3d(0, -1.2%, 0) scale(0.88); }
  9% { opacity: 0.9; }
  58% { opacity: 0.98; }
  84% { opacity: 0.32; }
  100% { opacity: 0; transform: translate3d(0, 18%, 0) scale(2.32); }
}

@media (max-width: 640px) {
  .cds-drive-real-road-motion {
    clip-path: polygon(48.8% 49.5%, 51.2% 49.5%, 100% 100%, 0 100%);
  }

  .cds-drive-real-road-mid {
    clip-path: polygon(48.6% 49%, 51.4% 49%, 100% 84%, 0 84%);
  }

  .cds-drive-real-road-near {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
  }

  .cds-journey-parking-road-motion {
    clip-path: polygon(42% 38%, 58% 38%, 100% 100%, 0 100%);
  }

  .cds-tunnel-real-road-motion {
    clip-path: polygon(48.7% 55%, 51.3% 55%, 100% 100%, 0 100%);
  }

  .cds-tunnel-real-road-mid {
    clip-path: polygon(48.4% 54%, 51.6% 54%, 100% 84%, 0 84%);
  }

  .cds-tunnel-real-road-near {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cds-drive-real-road-motion {
    clip-path: polygon(49.25% 48%, 50.75% 48%, 99% 100%, 1% 100%);
  }

  .cds-drive-real-road-surface {
    transform-origin: 50% 49%;
  }

  .cds-tunnel-real-road-motion {
    clip-path: polygon(49.2% 54%, 50.8% 54%, 99% 100%, 1% 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cds-drive-transition.is-reduced .cds-drive-real-road-motion,
  .cds-drive-transition.is-reduced .cds-journey-parking-road-motion,
  .cds-drive-transition.is-reduced .cds-tunnel-real-road-motion {
    display: none !important;
    animation: none !important;
  }

  .cds-drive-transition.is-reduced :is(
    .cds-drive-real-road-surface,
    .cds-journey-parking-road-surface,
    .cds-tunnel-real-road-surface
  ) {
    animation: none !important;
  }
}

@keyframes cds-drive-sky-in {
  0% { opacity: 0.45; transform: scale(1.03); }
  38%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes cds-drive-speed-lines {
  0% { opacity: 0; transform: scaleX(0.88) translateY(-2%); }
  42% { opacity: 0.75; }
  100% { opacity: 0; transform: scaleX(1.05) translateY(8%); }
}

@keyframes cds-drive-road-enter {
  0% { opacity: 0; transform: translateX(-50%) perspective(700px) rotateX(62deg) scaleY(0.44); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) perspective(700px) rotateX(62deg) scaleY(1.08); }
}

@keyframes cds-drive-road-uphill {
  0% { opacity: 0; transform: translateX(-50%) perspective(700px) rotateX(68deg) translateY(18%) scaleY(0.45); }
  28% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) perspective(700px) rotateX(54deg) translateY(-5%) scaleY(1); }
}

@keyframes cds-drive-markings {
  from { background-position-y: -7rem; }
  to { background-position-y: 9rem; }
}

@keyframes cds-drive-headlight-left {
  0% { opacity: 0; transform: translateX(8%) scaleX(0.08) scaleY(0.22); }
  56% { opacity: 0.72; }
  100% { opacity: 0; transform: translateX(-10%) scaleX(1.35) scaleY(1.1); }
}

@keyframes cds-drive-headlight-right {
  0% { opacity: 0; transform: translateX(-8%) scaleX(0.08) scaleY(0.22); }
  56% { opacity: 0.72; }
  100% { opacity: 0; transform: translateX(10%) scaleX(1.35) scaleY(1.1); }
}

@keyframes cds-drive-car-forward {
  0% { opacity: 0; transform: translate3d(-9rem, 0.8rem, 0) scale(0.82); }
  26% { opacity: 1; }
  78% { opacity: 0.96; transform: translate3d(7rem, -0.25rem, 0) scale(0.98); }
  100% { opacity: 0; transform: translate3d(10rem, -0.4rem, 0) scale(1.03); }
}

@keyframes cds-drive-car-back {
  0% { opacity: 0; transform: translate3d(9rem, 0.5rem, 0) scale(0.88) scaleX(-1); }
  30% { opacity: 0.82; }
  100% { opacity: 0; transform: translate3d(-8rem, 0, 0) scale(0.98) scaleX(-1); }
}

@keyframes cds-drive-car-uphill {
  0% { opacity: 0; transform: translate3d(-5rem, 3rem, 0) rotate(3deg) scale(0.86); }
  28% { opacity: 1; }
  70% { transform: translate3d(3rem, -3rem, 0) rotate(-2deg) scale(0.94); }
  100% { opacity: 0; transform: translate3d(6rem, -5rem, 0) rotate(0) scale(0.98); }
}

@keyframes cds-drive-checkpoint-line {
  0% { transform: scaleX(0); opacity: 0; }
  50%, 78% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.76); opacity: 0; }
}

@keyframes cds-drive-barrier {
  0% { transform: translateY(5rem) scaleX(0); opacity: 0; }
  55% { transform: translateY(0) scaleX(1); opacity: 1; }
  100% { transform: translateY(-2.5rem) scaleX(0.84); opacity: 0; }
}

@keyframes cds-drive-label {
  0% { opacity: 0; transform: translateY(6px); }
  35%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes cds-drive-ignition {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  32% { opacity: 0.78; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cds-drive-logo-moment {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.78) rotate(-8deg); }
  10%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) rotate(6deg); }
}

@keyframes cds-drive-gear-reverse {
  0%, 100% { opacity: 0; transform: scale(0.82); }
  24%, 78% { opacity: 0.92; transform: scale(1); }
}

@keyframes cds-drive-bridge {
  0% { opacity: 0; transform: rotate(var(--cds-bridge-angle, 0rad)) scaleX(0); }
  35%, 75% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(var(--cds-bridge-angle, 0rad)) scaleX(1); }
}

@keyframes cds-drive-theory-sign {
  0% { opacity: 0; transform: rotate(-20deg) scale(0.7); }
  35%, 76% { opacity: 0.92; transform: rotate(3deg) scale(1); }
  100% { opacity: 0; transform: rotate(8deg) scale(0.9); }
}

@keyframes cds-drive-theory-reveal {
  0% { clip-path: circle(18% at 50% 50%); }
  100% { clip-path: circle(82% at 50% 50%); }
}

@keyframes cds-drive-message-wave {
  0% { opacity: 0; transform: translate3d(-3rem, 0, 0) scaleX(0.7); }
  35%, 72% { opacity: 0.92; }
  100% { opacity: 0; transform: translate3d(12rem, 0, 0) scaleX(1); }
}

/* Route-specific Student Portal scenes share the same road, logo checkpoint and controller. */
.cds-drive-scenes {
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cds-drive-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.cds-drive-transition.is-variant-gear-shift .cds-drive-scene-gear,
.cds-drive-transition.is-variant-rear-view-mirror .cds-drive-scene-mirror,
.cds-drive-transition.is-variant-instrument-cluster .cds-drive-scene-cluster,
.cds-drive-transition.is-variant-road-sign .cds-drive-scene-road-sign,
.cds-drive-transition.is-variant-windscreen .cds-drive-scene-windscreen,
.cds-drive-transition.is-variant-ignition-start .cds-drive-scene-ignition,
.cds-drive-transition.is-variant-route-map .cds-drive-scene-route-map,
.cds-drive-transition.is-variant-tunnel .cds-drive-scene-tunnel,
.cds-drive-transition.is-variant-traffic-light .cds-drive-scene-traffic,
.cds-drive-transition.is-variant-finish-line .cds-drive-scene-finish,
.cds-drive-transition.is-variant-clipboard .cds-drive-scene-clipboard,
.cds-drive-transition.is-variant-odometer .cds-drive-scene-odometer,
.cds-drive-transition.is-variant-communication .cds-drive-scene-communication,
.cds-drive-transition.is-variant-licence-scan .cds-drive-scene-licence,
.cds-drive-transition.is-variant-roadblock .cds-drive-scene-roadblock {
  opacity: 1;
  visibility: visible;
}

.cds-drive-transition.is-student-transition:not(.is-variant-forward-road) .cds-drive-checkpoint,
.cds-drive-transition.is-student-transition .cds-drive-theory-sign,
.cds-drive-transition.is-student-transition .cds-drive-message-wave,
.cds-drive-transition.is-student-transition.is-variant-gear-shift > .cds-drive-gear-indicator {
  display: none;
}

.cds-drive-scene-copy {
  position: absolute;
  top: 31%;
  left: 50%;
  width: min(30rem, 82vw);
  text-align: center;
  transform: translate(-50%, -50%);
}

.cds-drive-scene-copy small,
.cds-drive-scene-copy strong,
.cds-drive-cluster-display small,
.cds-drive-cluster-display strong,
.cds-drive-sign-board small,
.cds-drive-sign-board strong,
.cds-drive-tunnel-sign small,
.cds-drive-tunnel-sign strong,
.cds-drive-ignition-copy small,
.cds-drive-ignition-copy strong {
  display: block;
  letter-spacing: 0;
}

.cds-drive-scene-copy small,
.cds-drive-cluster-display small,
.cds-drive-sign-board small,
.cds-drive-tunnel-sign small,
.cds-drive-ignition-copy small {
  color: var(--cds-drive-yellow);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.cds-drive-scene-copy strong,
.cds-drive-cluster-display strong,
.cds-drive-sign-board strong,
.cds-drive-tunnel-sign strong,
.cds-drive-ignition-copy strong {
  margin-top: 0.28rem;
  color: var(--cds-drive-copy);
  font-size: clamp(1.12rem, 3.6vw, 1.72rem);
  font-weight: 820;
}

/* Journey Home: a short, legible shift sequence rather than a decorative gearbox. */
.cds-drive-gear-console {
  position: absolute;
  top: 23%;
  left: 12%;
  display: grid;
  gap: 0.32rem;
  width: 3.5rem;
  padding: 0.48rem;
  border: 1px solid rgba(136, 190, 255, 0.45);
  border-radius: 0.7rem;
  background: rgba(2, 11, 26, 0.84);
  box-shadow: 0 0.8rem 2.4rem rgba(0, 5, 18, 0.42), inset 0 0 1.2rem rgba(67, 143, 255, 0.12);
  transform: translateX(-1.5rem);
}

.cds-drive-gear-console span {
  display: grid;
  min-height: 2rem;
  place-items: center;
  color: #8fa4bf;
  border: 1px solid transparent;
  border-radius: 0.42rem;
  font-size: 0.84rem;
  font-weight: 850;
}

.cds-drive-transition.is-visible.is-variant-gear-shift .cds-drive-gear-console {
  animation: cds-drive-module-enter 940ms var(--cds-drive-ease) 90ms both;
}

.cds-drive-transition.is-visible.is-variant-gear-shift:not(.is-reverse-route) [data-gear="P"] { animation: cds-drive-gear-step 190ms ease 120ms both; }
.cds-drive-transition.is-visible.is-variant-gear-shift:not(.is-reverse-route) [data-gear="N"] { animation: cds-drive-gear-step 190ms ease 275ms both; }
.cds-drive-transition.is-visible.is-variant-gear-shift:not(.is-reverse-route) [data-gear="D"] { animation: cds-drive-gear-hold 560ms ease 430ms both; }
.cds-drive-transition.is-visible.is-variant-gear-shift.is-reverse-route [data-gear="D"] { animation: cds-drive-gear-step 190ms ease 120ms both; }
.cds-drive-transition.is-visible.is-variant-gear-shift.is-reverse-route [data-gear="N"] { animation: cds-drive-gear-step 190ms ease 275ms both; }
.cds-drive-transition.is-visible.is-variant-gear-shift.is-reverse-route [data-gear="R"] { animation: cds-drive-gear-hold 560ms ease 430ms both; }

.cds-drive-transition.is-visible.is-variant-gear-shift .cds-drive-scene-copy {
  animation: cds-drive-scene-label 700ms var(--cds-drive-ease) 265ms both;
}

.cds-drive-parking-bay {
  position: absolute;
  right: 12%;
  bottom: 9%;
  width: min(18rem, 34vw);
  height: 7rem;
  border: 2px solid rgba(228, 239, 255, 0.46);
  border-top: 0;
  opacity: 0;
  transform: perspective(340px) rotateX(58deg) translateY(2rem);
}

.cds-drive-parking-bay span {
  position: absolute;
  inset: 38% 0 auto;
  color: rgba(232, 241, 255, 0.54);
  font-weight: 900;
  text-align: center;
}

.cds-drive-transition.is-visible.is-variant-gear-shift .cds-drive-parking-bay {
  animation: cds-drive-parking-bay 700ms var(--cds-drive-ease) 300ms both;
}

/* Lesson History: the old page recedes in the mirror while the road remains forward-facing. */
.cds-drive-mirror {
  position: absolute;
  top: 12%;
  left: 50%;
  width: min(38rem, 78vw);
  height: clamp(7rem, 19vw, 10rem);
  overflow: hidden;
  border: 0.55rem solid #06101e;
  border-radius: 2.8rem / 2.1rem;
  background: linear-gradient(165deg, #a7c5dd 0 38%, #42647d 39% 46%, #17283a 47% 100%);
  box-shadow: 0 1.2rem 3rem rgba(0, 5, 17, 0.54), inset 0 0 0 1px rgba(210, 232, 255, 0.52);
  transform: translate(-50%, -2rem) scale(0.82);
}

.cds-drive-mirror-road {
  position: absolute;
  inset: 43% -8% -36%;
  background: linear-gradient(90deg, transparent 47%, rgba(255, 210, 70, 0.88) 48% 49%, transparent 50%), linear-gradient(165deg, #27384a, #060d18);
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
}

.cds-drive-mirror strong {
  position: absolute;
  right: 7%;
  bottom: 11%;
  color: #f5f9ff;
  font-size: clamp(0.8rem, 2.3vw, 1.15rem);
  letter-spacing: 0;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);
}

.cds-drive-mirror-shine {
  position: absolute;
  inset: -40% 52% -40% -20%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(18deg) translateX(-130%);
}

.cds-drive-transition.is-visible.is-variant-rear-view-mirror .cds-drive-mirror {
  animation: cds-drive-mirror-arrive 880ms var(--cds-drive-ease) 80ms both;
}

.cds-drive-transition.is-visible.is-variant-rear-view-mirror .cds-drive-mirror-shine {
  animation: cds-drive-mirror-shine 620ms ease 250ms both;
}

/* My Progress: a restrained instrument cluster with a single journey dial. */
.cds-drive-scene-cluster {
  display: grid;
  place-items: center;
}

.cds-drive-cluster-ring {
  position: relative;
  width: clamp(13rem, 30vw, 18rem);
  aspect-ratio: 1;
  padding: 0.7rem;
  border: 1px solid rgba(141, 195, 255, 0.42);
  border-radius: 50%;
  background: radial-gradient(circle, #0c182a 0 43%, #040a14 66%, #17263b 67% 69%, #02060c 72%);
  box-shadow: 0 0 0 0.48rem rgba(1, 8, 19, 0.72), 0 0 3rem rgba(39, 124, 239, 0.26), inset 0 0 2.3rem rgba(94, 169, 255, 0.12);
  opacity: 0;
  transform: scale(0.8);
}

.cds-drive-cluster-ring svg { width: 100%; height: 100%; overflow: visible; }
.cds-drive-cluster-track { fill: none; stroke: rgba(218, 232, 249, 0.18); stroke-width: 5; stroke-dasharray: 2 8; }
.cds-drive-cluster-progress { fill: none; stroke: var(--cds-drive-blue); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 420 580; transform: rotate(132deg); transform-origin: center; filter: drop-shadow(0 0 5px var(--cds-drive-blue-glow)); }
.cds-drive-cluster-ticks { fill: none; stroke: #e7f1ff; stroke-width: 4; stroke-linecap: round; }
.cds-drive-cluster-needle { fill: none; stroke: var(--cds-drive-yellow); stroke-width: 4; stroke-linecap: round; transform-origin: 120px 120px; transform: rotate(-34deg); filter: drop-shadow(0 0 5px rgba(255, 209, 70, 0.7)); }
.cds-drive-cluster-ring circle:last-child { fill: #dbeaff; stroke: #06101f; stroke-width: 3; }
.cds-drive-cluster-unit { position: absolute; inset: 68% 0 auto; color: #7f95af; font-size: 0.62rem; font-weight: 750; text-align: center; }

.cds-drive-cluster-display {
  position: absolute;
  top: calc(50% + clamp(7.2rem, 17vw, 9.3rem));
  left: 50%;
  min-width: min(20rem, 76vw);
  padding: 0.68rem 1.2rem;
  border: 1px solid rgba(92, 163, 255, 0.42);
  border-radius: 0.55rem;
  background: rgba(3, 13, 29, 0.88);
  box-shadow: inset 0 0 1.1rem rgba(42, 128, 255, 0.1);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 1rem);
}

.cds-drive-cluster-display strong { color: #eaf4ff; }

.cds-drive-transition.is-visible.is-variant-instrument-cluster .cds-drive-cluster-ring {
  animation: cds-drive-cluster-start 850ms var(--cds-drive-ease) 90ms both;
}

.cds-drive-transition.is-visible.is-variant-instrument-cluster .cds-drive-cluster-needle {
  animation: cds-drive-needle-sweep 760ms var(--cds-drive-ease) 170ms both;
}

.cds-drive-transition.is-visible.is-variant-instrument-cluster .cds-drive-cluster-display {
  animation: cds-drive-module-enter 560ms var(--cds-drive-ease) 380ms both;
}

/* Timetable: destination is presented as one roadside instruction. */
.cds-drive-sign-post {
  position: absolute;
  top: 46%;
  right: 18%;
  width: 0.36rem;
  height: 48%;
  background: linear-gradient(90deg, #75889c, #eef5fc 48%, #66788c);
  opacity: 0;
}

.cds-drive-sign-board {
  position: absolute;
  top: 22%;
  right: 10%;
  width: min(25rem, 68vw);
  min-height: 9rem;
  padding: 1.25rem 4.2rem 1.15rem 1.45rem;
  border: 0.28rem solid #d8e8fb;
  border-radius: 0.65rem;
  background: linear-gradient(145deg, #073176, #052351);
  box-shadow: 0 1.4rem 3.4rem rgba(0, 7, 21, 0.55), inset 0 0 0 1px rgba(51, 139, 255, 0.62);
  opacity: 0;
  transform: translateX(5rem) rotateY(-8deg);
}

.cds-drive-sign-board strong { color: #f8fbff; font-size: clamp(1.25rem, 4vw, 2rem); }
.cds-drive-sign-brand { display: block; margin-top: 0.85rem; color: #a9c7eb; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; }
.cds-drive-sign-arrow { position: absolute; top: 1.25rem; right: 1.35rem; color: #f4f8ff; font-size: 2.4rem; line-height: 1; }

.cds-drive-transition.is-visible.is-variant-road-sign .cds-drive-sign-post {
  animation: cds-drive-sign-post 700ms var(--cds-drive-ease) 120ms both;
}

.cds-drive-transition.is-visible.is-variant-road-sign .cds-drive-sign-board {
  animation: cds-drive-sign-arrive 800ms var(--cds-drive-ease) 150ms both;
}

/* Optional weather route: the wiper reveals the same destination layer beneath it. */
.cds-drive-rain {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(104deg, transparent 0 24px, rgba(205, 229, 255, 0.22) 25px 27px, transparent 28px 48px);
  opacity: 0;
}

.cds-drive-wiper {
  position: absolute;
  z-index: 2;
  right: 48%;
  bottom: 4%;
  width: min(43rem, 72vw);
  height: 0.72rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #26374b, #020711);
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.5);
  transform: rotate(-7deg);
  transform-origin: right center;
}

.cds-drive-transition.is-visible.is-variant-windscreen .cds-drive-rain { animation: cds-drive-rain 900ms linear 40ms both; }
.cds-drive-transition.is-visible.is-variant-windscreen .cds-drive-wiper { animation: cds-drive-wipe 900ms var(--cds-drive-ease) 80ms both; }
.cds-drive-transition.is-visible.is-variant-windscreen .cds-drive-scene-copy { animation: cds-drive-scene-label 620ms var(--cds-drive-ease) 430ms both; }

/* First portal arrival: the real CDS badge remains the focal point while the cluster wakes. */
.cds-drive-ignition-module {
  position: absolute;
  top: 57%;
  left: 50%;
  width: clamp(11rem, 24vw, 15rem);
  aspect-ratio: 1;
  border: 1px solid rgba(104, 174, 255, 0.38);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 208, 61, 0.08) 0 39%, rgba(4, 14, 29, 0.9) 40% 64%, rgba(34, 119, 245, 0.18) 65% 66%, transparent 67%);
  box-shadow: 0 0 3.2rem rgba(36, 121, 243, 0.24), inset 0 0 2rem rgba(255, 209, 68, 0.08);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
}

.cds-drive-warning-light {
  position: absolute;
  color: #806a27;
  font-size: 0.55rem;
  font-weight: 850;
}

.cds-drive-warning-light:nth-child(1) { top: 15%; left: 14%; }
.cds-drive-warning-light:nth-child(2) { top: 15%; right: 15%; }
.cds-drive-warning-light:nth-child(3) { right: 4%; bottom: 28%; }

.cds-drive-ignition-copy {
  position: absolute;
  top: 21%;
  left: 50%;
  width: min(28rem, 82vw);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 0.8rem);
}

.cds-drive-transition.is-visible.is-variant-ignition-start .cds-drive-ignition-module {
  animation: cds-drive-ignition-start 930ms var(--cds-drive-ease) 70ms both;
}

.cds-drive-transition.is-visible.is-variant-ignition-start .cds-drive-warning-light {
  animation: cds-drive-warning-settle 620ms ease 170ms both;
}

.cds-drive-transition.is-visible.is-variant-ignition-start .cds-drive-ignition-copy {
  animation: cds-drive-scene-label 700ms var(--cds-drive-ease) 230ms both;
}

/* Journey Log: the route itself draws; the page URL or personal data never enters the scene. */
.cds-drive-scene-route-map {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(7, 42, 88, 0.45), transparent 68%);
}

.cds-drive-scene-route-map svg {
  width: min(45rem, 88vw);
  height: auto;
  overflow: visible;
  opacity: 0;
  transform: perspective(700px) rotateX(28deg) scale(0.86);
}

.cds-drive-map-grid { fill: none; stroke: rgba(76, 127, 185, 0.25); stroke-width: 2; }
.cds-drive-map-route { fill: none; stroke: #48a0ff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 610; stroke-dashoffset: 610; filter: drop-shadow(0 0 7px rgba(52, 145, 255, 0.86)); }
.cds-drive-map-start { fill: var(--cds-drive-blue); stroke: #dbeeff; stroke-width: 4; }
.cds-drive-map-end { fill: #71d948; stroke: #e6ffd9; stroke-width: 4; }
.cds-drive-map-car { fill: #e9f4ff; stroke: #061224; stroke-width: 1.2; opacity: 0; }
.cds-drive-map-label { position: absolute; padding: 0.35rem 0.6rem; color: #dcecff; border: 1px solid rgba(96, 167, 255, 0.36); border-radius: 0.42rem; background: rgba(2, 13, 30, 0.82); font-size: 0.66rem; font-weight: 780; opacity: 0; }
.cds-drive-map-label-start { top: 24%; left: 18%; }
.cds-drive-map-label-end { right: 14%; bottom: 24%; }

.cds-drive-transition.is-visible.is-variant-route-map .cds-drive-scene-route-map svg { animation: cds-drive-map-enter 900ms var(--cds-drive-ease) 70ms both; }
.cds-drive-transition.is-visible.is-variant-route-map .cds-drive-map-route { animation: cds-drive-route-draw 790ms var(--cds-drive-ease) 150ms both; }
.cds-drive-transition.is-visible.is-variant-route-map .cds-drive-map-car { animation: cds-drive-map-car 720ms var(--cds-drive-ease) 240ms both; }
.cds-drive-transition.is-visible.is-variant-route-map .cds-drive-map-label { animation: cds-drive-scene-label 620ms var(--cds-drive-ease) 310ms both; }
.cds-drive-transition.is-visible.is-variant-route-map .cds-drive-map-label-end { animation-delay: 480ms; }

/* Study Materials: move through one quiet tunnel into the learning destination. */
.cds-drive-tunnel-shell {
  position: absolute;
  inset: 5% 4% -16%;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background:
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 8%, rgba(155, 190, 229, 0.09) 8.4% 9%, transparent 9.4% 14%),
    linear-gradient(90deg, #02050a, #172332 46% 54%, #02050a);
  box-shadow: inset 0 0 4rem #000, 0 0 4rem rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(1.22);
}

.cds-drive-tunnel-lights {
  position: absolute;
  top: 8%;
  bottom: 13%;
  width: 1rem;
  background: repeating-linear-gradient(180deg, rgba(239, 246, 255, 0.9) 0 8px, transparent 9px 46px);
  filter: drop-shadow(0 0 7px rgba(205, 228, 255, 0.78));
}

.cds-drive-tunnel-lights-left { left: 18%; transform: skewX(16deg); }
.cds-drive-tunnel-lights-right { right: 18%; transform: skewX(-16deg); }
.cds-drive-tunnel-exit { position: absolute; top: 28%; left: 50%; width: 12%; aspect-ratio: 0.8; border-radius: 50% 50% 0 0; background: #f1f7ff; box-shadow: 0 0 2rem #d5ecff; transform: translateX(-50%); }

.cds-drive-tunnel-sign {
  position: absolute;
  z-index: 3;
  top: 25%;
  left: 50%;
  min-width: min(21rem, 72vw);
  padding: 0.8rem 1.1rem;
  border: 1px solid rgba(99, 170, 255, 0.54);
  border-radius: 0.55rem;
  background: rgba(2, 12, 26, 0.88);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 1.2rem) scale(0.86);
}
.cds-drive-tunnel-sign strong { color: #eef6ff; }

.cds-drive-transition.is-visible.is-variant-tunnel .cds-drive-tunnel-shell { animation: cds-drive-tunnel 1080ms var(--cds-drive-ease) both; }
.cds-drive-transition.is-visible.is-variant-tunnel .cds-drive-tunnel-lights { animation: cds-drive-tunnel-lights var(--cds-drive-travel-loop) linear 180ms infinite; }
.cds-drive-transition.is-visible.is-variant-tunnel .cds-drive-tunnel-sign { animation: cds-drive-tunnel-sign 720ms var(--cds-drive-ease) 210ms both; }

/* Theory Quiz: a genuine stop-ready-go cue followed by the ignition checkpoint. */
.cds-drive-traffic-light {
  position: absolute;
  top: 17%;
  left: 18%;
  display: grid;
  gap: 0.52rem;
  width: 4.5rem;
  padding: 0.62rem;
  border: 1px solid rgba(177, 205, 235, 0.32);
  border-radius: 0.8rem;
  background: #020711;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.52), inset 0 0 1rem rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(-1rem);
}

.cds-drive-traffic-light span { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #151c25; box-shadow: inset 0 0.15rem 0.4rem rgba(0, 0, 0, 0.7); }
.cds-drive-transition.is-visible.is-variant-traffic-light .cds-drive-traffic-light { animation: cds-drive-module-enter 600ms var(--cds-drive-ease) 70ms both; }
.cds-drive-transition.is-visible.is-variant-traffic-light .cds-traffic-red { animation: cds-drive-light-red 270ms ease 130ms both; }
.cds-drive-transition.is-visible.is-variant-traffic-light .cds-traffic-amber { animation: cds-drive-light-amber 270ms ease 330ms both; }
.cds-drive-transition.is-visible.is-variant-traffic-light .cds-traffic-green { animation: cds-drive-light-green 520ms ease 530ms both; }
.cds-drive-transition.is-visible.is-variant-traffic-light .cds-drive-scene-copy { animation: cds-drive-scene-label 650ms var(--cds-drive-ease) 390ms both; }

/* Results, records and messages use compact dashboard objects instead of a second road scene. */
.cds-drive-finish-banner {
  position: absolute;
  top: 22%;
  left: 50%;
  width: min(34rem, 82vw);
  overflow: hidden;
  padding: 1.15rem 1.3rem 1.25rem;
  border: 1px solid rgba(221, 235, 251, 0.48);
  border-radius: 0.65rem;
  background: rgba(2, 11, 25, 0.9);
  box-shadow: 0 1.2rem 3rem rgba(0, 3, 13, 0.55);
  color: #edf6ff;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -1.5rem);
}

.cds-drive-checkers { display: block; height: 1.15rem; margin: -1.15rem -1.3rem 0.85rem; background: conic-gradient(#f4f7fa 25%, #071120 0 50%, #f4f7fa 0 75%, #071120 0) 0 0 / 1.15rem 1.15rem; }
.cds-drive-finish-banner small { display: block; color: var(--cds-drive-yellow); font-size: 0.66rem; font-weight: 850; text-transform: uppercase; }
.cds-drive-finish-banner strong { display: block; margin-top: 0.28rem; font-size: clamp(1.25rem, 4vw, 1.85rem); letter-spacing: 0; }
.cds-drive-transition.is-visible.is-variant-finish-line .cds-drive-finish-banner { animation: cds-drive-finish 870ms var(--cds-drive-ease) 100ms both; }

.cds-drive-clipboard {
  position: absolute;
  top: 15%;
  left: 50%;
  width: min(19rem, 72vw);
  min-height: 15rem;
  padding: 2.3rem 1.4rem 1.2rem;
  border: 1px solid rgba(162, 194, 231, 0.62);
  border-radius: 0.75rem;
  background: linear-gradient(160deg, #f8fbff, #dbe8f5);
  box-shadow: 0 1.5rem 3.4rem rgba(0, 5, 17, 0.5);
  color: #071b3a;
  opacity: 0;
  transform: translate(-50%, 2rem) rotate(-2deg);
}

.cds-drive-clipboard-clip { position: absolute; top: -0.48rem; left: 50%; width: 6.2rem; height: 1.65rem; border: 1px solid #9bb0c6; border-radius: 0.42rem; background: linear-gradient(#e8f0f7, #8ea3b8); transform: translateX(-50%); }
.cds-drive-clipboard small { display: block; color: #42607e; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; }
.cds-drive-clipboard strong { display: block; margin: 0.32rem 0 1rem; font-size: 1.05rem; letter-spacing: 0; }
.cds-drive-clipboard-line { display: block; height: 0.5rem; margin-top: 0.62rem; border-radius: 99px; background: #bbcee0; }
.cds-drive-clipboard-line:nth-of-type(2) { width: 74%; }
.cds-drive-clipboard-check { position: absolute; right: 1.1rem; bottom: 1rem; display: grid; width: 2.2rem; aspect-ratio: 1; place-items: center; color: #fff; border-radius: 50%; background: #23884a; opacity: 0; transform: scale(0.4); }
.cds-drive-transition.is-visible.is-variant-clipboard .cds-drive-clipboard { animation: cds-drive-clipboard 850ms var(--cds-drive-ease) 100ms both; }
.cds-drive-transition.is-visible.is-variant-clipboard .cds-drive-clipboard-check { animation: cds-drive-confirm 430ms var(--cds-drive-ease) 520ms both; }

.cds-drive-odometer {
  position: absolute;
  top: 25%;
  left: 50%;
  display: flex;
  gap: 0.24rem;
  padding: 0.72rem;
  border: 1px solid rgba(142, 193, 248, 0.35);
  border-radius: 0.65rem;
  background: #02070e;
  box-shadow: 0 1rem 3rem rgba(0, 2, 8, 0.56), inset 0 0 1.2rem rgba(61, 141, 248, 0.12);
  opacity: 0;
  transform: translate(-50%, -1rem) scale(0.9);
}

.cds-drive-odometer span { display: grid; width: 2.35rem; aspect-ratio: 0.78; place-items: center; color: #e8f4ff; border: 1px solid #40566f; border-radius: 0.24rem; background: linear-gradient(#111d2b 0 48%, #03080f 49% 52%, #111d2b 53%); font: 850 1.45rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.cds-drive-transition.is-visible.is-variant-odometer .cds-drive-odometer { animation: cds-drive-odometer 820ms var(--cds-drive-ease) 110ms both; }
.cds-drive-transition.is-visible.is-variant-odometer .cds-drive-scene-copy { animation: cds-drive-scene-label 650ms var(--cds-drive-ease) 330ms both; }

.cds-drive-comms-panel {
  position: absolute;
  top: 22%;
  left: 50%;
  width: min(28rem, 78vw);
  padding: 1.2rem 1.35rem;
  border: 1px solid rgba(71, 155, 255, 0.5);
  border-radius: 0.75rem;
  background: rgba(3, 14, 31, 0.9);
  box-shadow: 0 1.2rem 3rem rgba(0, 4, 16, 0.5), inset 0 0 1.4rem rgba(55, 143, 255, 0.1);
  color: #edf6ff;
  opacity: 0;
  transform: translate(-50%, 1rem);
}
.cds-drive-comms-panel small { display: block; color: var(--cds-drive-yellow); font-size: 0.66rem; font-weight: 850; text-transform: uppercase; }
.cds-drive-comms-panel strong { display: block; margin-top: 0.32rem; font-size: clamp(1.1rem, 3.6vw, 1.55rem); letter-spacing: 0; }
.cds-drive-comms-wave { position: absolute; top: 50%; right: 1.1rem; display: flex; align-items: center; gap: 0.24rem; transform: translateY(-50%); }
.cds-drive-comms-wave i { display: block; width: 0.34rem; height: 0.8rem; border-radius: 99px; background: linear-gradient(var(--cds-drive-yellow), var(--cds-drive-blue)); }
.cds-drive-comms-wave i:nth-child(2) { height: 1.45rem; }
.cds-drive-comms-wave i:nth-child(3) { height: 1.05rem; }
.cds-drive-transition.is-visible.is-variant-communication .cds-drive-comms-panel { animation: cds-drive-comms 880ms var(--cds-drive-ease) 100ms both; }
.cds-drive-transition.is-visible.is-variant-communication .cds-drive-comms-wave i { animation: cds-drive-comms-bars 420ms ease-in-out 280ms 2 alternate; }

.cds-drive-licence-card {
  position: absolute;
  top: 18%;
  left: 50%;
  width: min(31rem, 82vw);
  min-height: 12.5rem;
  overflow: hidden;
  padding: 1.5rem 1.45rem 1.25rem 8rem;
  border: 1px solid rgba(97, 164, 241, 0.48);
  border-radius: 0.8rem;
  background: linear-gradient(145deg, rgba(241, 247, 255, 0.96), rgba(183, 213, 244, 0.94));
  box-shadow: 0 1.4rem 3.5rem rgba(0, 5, 17, 0.52);
  color: #071b3a;
  opacity: 0;
  transform: translate(-50%, 1.2rem) rotateY(8deg);
}
.cds-drive-licence-photo { position: absolute; top: 1.4rem; left: 1.35rem; width: 5.3rem; height: 7rem; border-radius: 0.55rem; background: linear-gradient(155deg, #2c64a4, #071b3a); }
.cds-drive-licence-lines { position: absolute; left: 8rem; right: 1.4rem; bottom: 2rem; height: 3rem; background: repeating-linear-gradient(180deg, #8ca6bf 0 4px, transparent 4px 12px); opacity: 0.58; }
.cds-drive-licence-card small { display: block; color: #416587; font-size: 0.65rem; font-weight: 850; text-transform: uppercase; }
.cds-drive-licence-card strong { display: block; margin-top: 0.3rem; font-size: clamp(1rem, 3vw, 1.4rem); letter-spacing: 0; }
.cds-drive-scan-line { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 2px; background: #25a0ff; box-shadow: 0 0 0.8rem #25a0ff; opacity: 0; }
.cds-drive-transition.is-visible.is-variant-licence-scan .cds-drive-licence-card { animation: cds-drive-licence 900ms var(--cds-drive-ease) 90ms both; }
.cds-drive-transition.is-visible.is-variant-licence-scan .cds-drive-scan-line { animation: cds-drive-scan 650ms ease 270ms both; }

.cds-drive-roadblock-bar {
  position: absolute;
  top: 42%;
  left: 50%;
  display: flex;
  width: min(34rem, 82vw);
  height: 2.4rem;
  overflow: hidden;
  border: 0.22rem solid #eef4fb;
  border-radius: 0.35rem;
  background: #f8fbff;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.52);
  opacity: 0;
  transform: translate(-50%, 2rem) rotate(-2deg);
}
.cds-drive-roadblock-bar span { flex: 1; background: repeating-linear-gradient(135deg, #f8fbff 0 24px, #d4473f 25px 48px); }
.cds-drive-transition.is-visible.is-variant-roadblock .cds-drive-roadblock-bar { animation: cds-drive-roadblock 780ms var(--cds-drive-ease) 110ms both; }
.cds-drive-transition.is-visible.is-variant-roadblock .cds-drive-scene-copy { top: 29%; animation: cds-drive-scene-label 620ms var(--cds-drive-ease) 290ms both; }

/* Continuous motion is CSS-only and exists only during the travel phase. */
.cds-drive-transition.is-student-transition.is-travelling .cds-drive-road-centre,
.cds-drive-transition.is-student-transition.is-arriving .cds-drive-road-centre {
  animation: cds-drive-markings-loop var(--cds-drive-travel-loop) linear infinite;
}

.cds-drive-transition.is-student-transition.is-travelling .cds-drive-car {
  animation: cds-drive-car-cruise 520ms ease-in-out infinite alternate;
  opacity: 0.96;
}

.cds-drive-transition.is-incoming .cds-drive-logo-moment {
  animation-name: cds-drive-logo-arrive !important;
  animation-duration: var(--cds-drive-student-arrival) !important;
  animation-delay: 0ms !important;
}

.cds-drive-transition.is-incoming .cds-drive-scene {
  animation-duration: var(--cds-drive-student-arrival) !important;
  animation-delay: 0ms !important;
}

@keyframes cds-drive-overlay-failsafe {
  0%, 99% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes cds-drive-content-failsafe {
  0%, 99% { opacity: 0; }
  100% { opacity: 1; transform: none; clip-path: none; }
}

@keyframes cds-drive-module-enter {
  0% { opacity: 0; transform: translate(-50%, 1.2rem) scale(0.9); }
  24%, 84% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1); }
}

@keyframes cds-drive-gear-step {
  0%, 100% { color: #8fa4bf; border-color: transparent; background: transparent; box-shadow: none; }
  35%, 75% { color: #eaffdf; border-color: rgba(117, 225, 76, 0.68); background: rgba(66, 164, 45, 0.28); box-shadow: 0 0 0.8rem rgba(95, 220, 60, 0.45); }
}

@keyframes cds-drive-gear-hold {
  0% { color: #8fa4bf; border-color: transparent; background: transparent; }
  22%, 86% { color: #eaffdf; border-color: rgba(117, 225, 76, 0.72); background: rgba(66, 164, 45, 0.3); box-shadow: 0 0 0.9rem rgba(95, 220, 60, 0.5); }
  100% { color: #8fa4bf; border-color: transparent; background: transparent; box-shadow: none; }
}

@keyframes cds-drive-scene-label {
  0% { opacity: 0; transform: translate(-50%, 0.9rem); }
  24%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -0.35rem); }
}

@keyframes cds-drive-parking-bay {
  0% { opacity: 0; transform: perspective(340px) rotateX(58deg) translateY(2rem) scale(0.8); }
  35%, 86% { opacity: 0.72; }
  100% { opacity: 0; transform: perspective(340px) rotateX(58deg) translateY(0) scale(1); }
}

@keyframes cds-drive-mirror-arrive {
  0% { opacity: 0; transform: translate(-50%, -2rem) scale(0.76); }
  25%, 79% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -0.6rem) scale(0.88); filter: blur(2px); }
}

@keyframes cds-drive-mirror-shine {
  from { transform: rotate(18deg) translateX(-130%); }
  to { transform: rotate(18deg) translateX(360%); }
}

@keyframes cds-drive-cluster-start {
  0% { opacity: 0; transform: scale(0.78); }
  24%, 86% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes cds-drive-needle-sweep {
  0% { transform: rotate(-34deg); }
  42%, 72% { transform: rotate(58deg); }
  100% { transform: rotate(36deg); }
}

@keyframes cds-drive-sign-post {
  0% { opacity: 0; transform: translateY(4rem); }
  24%, 88% { opacity: 0.9; transform: none; }
  100% { opacity: 0; }
}

@keyframes cds-drive-sign-arrive {
  0% { opacity: 0; transform: translateX(5rem) rotateY(-8deg); }
  24%, 84% { opacity: 1; transform: translateX(0) rotateY(0); }
  100% { opacity: 0; transform: translateX(-1rem) scale(0.98); }
}

@keyframes cds-drive-rain {
  0% { opacity: 0; background-position: 0 -5rem; }
  22%, 70% { opacity: 0.72; }
  100% { opacity: 0; background-position: 4rem 12rem; }
}

@keyframes cds-drive-wipe {
  0% { opacity: 0; transform: rotate(-7deg); }
  12% { opacity: 1; }
  50% { transform: rotate(72deg); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-7deg); }
}

@keyframes cds-drive-ignition-start {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.68) rotate(-14deg); }
  20%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); box-shadow: 0 0 4rem rgba(38, 128, 255, 0.38), inset 0 0 2rem rgba(255, 209, 68, 0.16); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes cds-drive-warning-settle {
  0%, 38% { color: #ff9f32; text-shadow: 0 0 0.6rem rgba(255, 139, 30, 0.8); }
  62%, 100% { color: #4b5565; text-shadow: none; }
}

@keyframes cds-drive-map-enter {
  0% { opacity: 0; transform: perspective(700px) rotateX(36deg) scale(0.78); }
  24%, 86% { opacity: 1; transform: perspective(700px) rotateX(28deg) scale(1); }
  100% { opacity: 0; transform: perspective(700px) rotateX(24deg) scale(1.04); }
}

@keyframes cds-drive-route-draw { to { stroke-dashoffset: 0; } }

@keyframes cds-drive-map-car {
  0% { opacity: 0; transform: translate(60px, 56px); }
  15% { opacity: 1; }
  100% { opacity: 0.95; transform: translate(470px, 182px); }
}

@keyframes cds-drive-tunnel {
  0% { opacity: 0; transform: scale(1.3); }
  18%, 85% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.84); }
}

@keyframes cds-drive-tunnel-lights {
  from { background-position-y: 0; }
  to { background-position-y: 92px; }
}

@keyframes cds-drive-tunnel-sign {
  0% { opacity: 0; transform: translate(-50%, 1.2rem) scale(0.78); }
  25%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -0.2rem) scale(1.07); }
}

@keyframes cds-drive-light-red {
  0%, 100% { background: #151c25; box-shadow: none; }
  30%, 75% { background: #e84c4c; box-shadow: 0 0 1.1rem rgba(232, 76, 76, 0.8); }
}

@keyframes cds-drive-light-amber {
  0%, 100% { background: #151c25; box-shadow: none; }
  30%, 75% { background: #f0b63f; box-shadow: 0 0 1.1rem rgba(240, 182, 63, 0.8); }
}

@keyframes cds-drive-light-green {
  0% { background: #151c25; box-shadow: none; }
  28%, 84% { background: #53c54b; box-shadow: 0 0 1.3rem rgba(83, 197, 75, 0.82); }
  100% { background: #151c25; box-shadow: none; }
}

@keyframes cds-drive-finish {
  0% { opacity: 0; transform: translate(-50%, -2rem) scale(0.86); }
  24%, 84% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -0.4rem) scale(1.02); }
}

@keyframes cds-drive-clipboard {
  0% { opacity: 0; transform: translate(-50%, 2rem) rotate(-4deg) scale(0.88); }
  24%, 84% { opacity: 1; transform: translate(-50%, 0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -0.4rem) rotate(1deg); }
}

@keyframes cds-drive-confirm {
  0% { opacity: 0; transform: scale(0.35) rotate(-18deg); }
  55%, 88% { opacity: 1; transform: scale(1.08) rotate(0); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes cds-drive-odometer {
  0% { opacity: 0; transform: translate(-50%, -1rem) scale(0.85); }
  22%, 84% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1.04); }
}

@keyframes cds-drive-comms {
  0% { opacity: 0; transform: translate(-50%, 1rem) scaleX(0.92); }
  24%, 84% { opacity: 1; transform: translate(-50%, 0) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -0.25rem); }
}

@keyframes cds-drive-comms-bars { from { transform: scaleY(0.45); } to { transform: scaleY(1.1); } }

@keyframes cds-drive-licence {
  0% { opacity: 0; transform: translate(-50%, 1.2rem) rotateY(12deg) scale(0.9); }
  22%, 84% { opacity: 1; transform: translate(-50%, 0) rotateY(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -0.2rem) rotateY(-3deg); }
}

@keyframes cds-drive-scan {
  0% { top: 0; opacity: 0; }
  15%, 84% { opacity: 1; }
  100% { top: calc(100% - 2px); opacity: 0; }
}

@keyframes cds-drive-roadblock {
  0% { opacity: 0; transform: translate(-50%, 2rem) rotate(-6deg) scaleX(0.7); }
  24%, 84% { opacity: 1; transform: translate(-50%, 0) rotate(-2deg) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -0.3rem) rotate(1deg); }
}

@keyframes cds-drive-markings-loop { from { background-position-y: -7rem; } to { background-position-y: 9rem; } }

@keyframes cds-drive-car-cruise {
  from { transform: translate3d(-0.3rem, 0.22rem, 0) scale(0.96); }
  to { transform: translate3d(0.3rem, -0.12rem, 0) scale(1); }
}

@keyframes cds-drive-logo-arrive {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.84); }
}

/* Cinematic Student Portal scene refinement: layered depth without image or canvas payloads. */
.cds-drive-transition::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 38% -4% -8%;
  clip-path: polygon(45% 0, 55% 0, 92% 100%, 8% 100%);
  background:
    radial-gradient(ellipse at 50% 45%, rgba(105, 173, 247, 0.12), transparent 40%),
    linear-gradient(90deg, #0c1724, #263545 19%, #111c29 50%, #263545 81%, #0c1724);
  box-shadow: 0 -1px rgba(199, 225, 247, 0.22), inset 0 0 5rem rgba(0, 5, 14, 0.7);
  opacity: 0;
  pointer-events: none;
}

.cds-drive-transition.is-visible::before {
  animation: cds-drive-asphalt-arrive 920ms var(--cds-drive-ease) 80ms both;
}

.cds-drive-horizon {
  position: absolute;
  z-index: -3;
  top: 17%;
  right: 0;
  left: 0;
  height: 30%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.cds-drive-horizon-glow {
  position: absolute;
  top: 35%;
  left: 50%;
  width: min(52rem, 84vw);
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(137, 195, 255, 0.68), rgba(45, 120, 220, 0.2) 42%, transparent 72%);
  filter: blur(10px);
  transform: translateX(-50%);
}

.cds-drive-landscape {
  position: absolute;
  right: -4%;
  bottom: 0;
  left: -4%;
  height: 58%;
  background: linear-gradient(180deg, #102a45, #030a14);
  filter: drop-shadow(0 -1px 0 rgba(145, 193, 236, 0.18));
}

.cds-drive-landscape-left {
  right: 48%;
  clip-path: polygon(0 65%, 7% 53%, 12% 61%, 18% 44%, 23% 58%, 31% 35%, 38% 62%, 45% 48%, 55% 72%, 65% 58%, 77% 77%, 100% 82%, 100% 100%, 0 100%);
}

.cds-drive-landscape-right {
  left: 48%;
  clip-path: polygon(0 82%, 12% 72%, 19% 49%, 25% 64%, 35% 39%, 44% 61%, 51% 45%, 61% 65%, 70% 47%, 77% 60%, 86% 41%, 93% 57%, 100% 49%, 100% 100%, 0 100%);
}

.cds-drive-transition.is-visible .cds-drive-horizon {
  animation: cds-drive-horizon-arrive 900ms var(--cds-drive-ease) 70ms both;
}

.cds-drive-roadside-lights {
  position: absolute;
  z-index: -1;
  inset: 23% 0 24%;
  opacity: 0;
  pointer-events: none;
}

.cds-drive-roadside-lights span {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 42%;
  background: linear-gradient(#91a5bb, #1d2b3b 72%, transparent);
  transform-origin: bottom;
}

.cds-drive-roadside-lights span::before {
  content: "";
  position: absolute;
  top: -0.2rem;
  left: 50%;
  width: 0.48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff6cf;
  box-shadow: 0 0 0.5rem #fff0ad, 0 0 1.8rem rgba(255, 220, 127, 0.8);
  transform: translateX(-50%);
}

.cds-drive-roadside-lights span:nth-child(1) { left: 8%; transform: scale(1); }
.cds-drive-roadside-lights span:nth-child(2) { left: 22%; transform: scale(0.72); }
.cds-drive-roadside-lights span:nth-child(3) { left: 35%; transform: scale(0.44); }
.cds-drive-roadside-lights span:nth-child(4) { right: 35%; transform: scale(0.44); }
.cds-drive-roadside-lights span:nth-child(5) { right: 22%; transform: scale(0.72); }
.cds-drive-roadside-lights span:nth-child(6) { right: 8%; transform: scale(1); }

.cds-drive-transition.is-visible .cds-drive-roadside-lights {
  animation: cds-drive-environment-arrive 920ms ease 140ms both;
}

.cds-drive-road {
  z-index: -1;
  top: 32%;
  width: min(112vw, 92rem);
  height: 105vh;
  clip-path: polygon(43% 0, 57% 0, 97% 100%, 3% 100%);
  background:
    radial-gradient(ellipse at 50% 56%, rgba(104, 174, 255, 0.16), transparent 43%),
    repeating-linear-gradient(102deg, transparent 0 11%, rgba(255, 255, 255, 0.024) 11.3% 11.7%, transparent 12% 24%),
    linear-gradient(180deg, var(--cds-drive-road), var(--cds-drive-road-deep) 72%);
  box-shadow: 0 -0.15rem 0 rgba(179, 211, 241, 0.13), 0 0 5rem rgba(0, 6, 18, 0.82);
}

.cds-drive-road-sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 43%, rgba(116, 181, 255, 0.11) 48%, rgba(255, 231, 150, 0.09) 50%, rgba(116, 181, 255, 0.1) 52%, transparent 57%),
    repeating-linear-gradient(180deg, transparent 0 82px, rgba(210, 231, 250, 0.035) 84px 86px, transparent 88px 154px);
  mix-blend-mode: screen;
}

.cds-drive-road-shoulder {
  position: absolute;
  top: -3%;
  bottom: -3%;
  width: 7%;
  background: repeating-linear-gradient(180deg, rgba(239, 245, 251, 0.34) 0 38px, rgba(16, 30, 46, 0.18) 39px 70px);
  filter: drop-shadow(0 0 0.4rem rgba(201, 228, 255, 0.2));
}

.cds-drive-road-shoulder-left { left: 2%; transform: skewX(-19deg); }
.cds-drive-road-shoulder-right { right: 2%; transform: skewX(19deg); }

.cds-drive-road-edge { width: 2px; opacity: 0.8; }
.cds-drive-road-edge-left { left: 15%; transform: rotate(-10deg); }
.cds-drive-road-edge-right { right: 15%; transform: rotate(10deg); }

.cds-drive-road-lane,
.cds-drive-reflectors {
  position: absolute;
  top: 0;
  bottom: 0;
}

.cds-drive-road-lane {
  width: 3px;
  background: repeating-linear-gradient(180deg, rgba(232, 241, 248, 0.78) 0 24px, transparent 25px 68px);
  filter: drop-shadow(0 0 4px rgba(202, 229, 255, 0.42));
}

.cds-drive-road-lane-left { left: 34%; transform: rotate(-5deg); transform-origin: top; }
.cds-drive-road-lane-right { right: 34%; transform: rotate(5deg); transform-origin: top; }

.cds-drive-reflectors {
  width: 8px;
  background: repeating-linear-gradient(180deg, transparent 0 54px, #f3fbff 55px 59px, transparent 60px 108px);
  filter: drop-shadow(0 0 6px rgba(220, 242, 255, 0.86));
}

.cds-drive-reflectors-left { left: 12%; transform: rotate(-11deg); transform-origin: top; }
.cds-drive-reflectors-right { right: 12%; transform: rotate(11deg); transform-origin: top; }

.cds-drive-transition.is-visible :is(.cds-drive-road-lane, .cds-drive-reflectors, .cds-drive-road-sheen) {
  animation: cds-drive-surface-travel var(--cds-drive-travel-loop) linear 180ms infinite;
}

.cds-drive-car {
  bottom: 5.5%;
  left: 50%;
  width: clamp(9.5rem, 17vw, 14.5rem);
  height: auto;
  color: rgba(223, 234, 250, 0.9);
  transform: translate3d(-50%, 1.2rem, 0) scale(0.84);
  filter: drop-shadow(0 1rem 1.1rem rgba(0, 0, 0, 0.58));
}

.cds-drive-car svg { aspect-ratio: 240 / 112; overflow: visible; fill: none; stroke: none; }
.cds-car-wheel { fill: #02050a; }
.cds-car-body { fill: url(#cds-car-body); stroke: rgba(165, 205, 239, 0.68); stroke-width: 1.4; }
.cds-car-roof { fill: #0b2038; stroke: rgba(170, 210, 244, 0.7); stroke-width: 1.2; }
.cds-car-glass { fill: url(#cds-car-glass); stroke: rgba(201, 229, 250, 0.55); stroke-width: 1; }
.cds-car-boot { fill: rgba(12, 35, 61, 0.82); stroke: rgba(131, 181, 222, 0.36); stroke-width: 1; }
.cds-car-light { fill: url(#cds-car-light); filter: drop-shadow(0 0 7px rgba(255, 60, 44, 0.95)); }
.cds-car-bumper { fill: #020914; stroke: rgba(130, 164, 194, 0.46); stroke-width: 1; }
.cds-car-plate { fill: #e8edf0; stroke: #788997; stroke-width: 1; }
.cds-car-plate-text { fill: #06101f; font: 800 10px system-ui, sans-serif; letter-spacing: 1px; }
.cds-car-chrome { fill: none; stroke: rgba(215, 235, 250, 0.72); stroke-width: 1.4; stroke-linecap: round; }

.cds-drive-car-glow {
  inset: 58% -17% -18%;
  background: radial-gradient(ellipse, rgba(244, 53, 42, 0.35), rgba(72, 148, 255, 0.26) 40%, transparent 72%);
  filter: blur(10px);
}

.cds-drive-car-shadow {
  position: absolute;
  z-index: -1;
  right: 5%;
  bottom: -2%;
  left: 5%;
  height: 22%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(8px);
}

.cds-drive-transition.is-visible .cds-drive-car {
  animation-name: cds-drive-car-cinematic;
}

.cds-drive-transition.is-student-transition.is-travelling .cds-drive-car {
  animation: cds-drive-car-cinematic-cruise 520ms ease-in-out infinite alternate;
}

.cds-drive-transition.is-back.is-visible .cds-drive-car { animation-name: cds-drive-car-cinematic-back; }
.cds-drive-transition.is-uphill.is-visible .cds-drive-car { animation-name: cds-drive-car-cinematic-uphill; }

html[data-theme="light"] .cds-drive-landscape { background: linear-gradient(180deg, #7896ae, #24405a); opacity: 0.72; }
html[data-theme="light"] .cds-drive-horizon-glow { background: radial-gradient(ellipse, rgba(255, 244, 206, 0.95), rgba(128, 190, 247, 0.42) 48%, transparent 74%); }
html[data-theme="light"] .cds-drive-roadside-lights span::before { background: #fff; box-shadow: 0 0 0.7rem rgba(255, 255, 255, 0.9); }
html[data-theme="light"] .cds-drive-transition::before {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(142, 197, 246, 0.16), transparent 42%),
    linear-gradient(90deg, #344454, #586a79 18%, #2c3b49 50%, #586a79 82%, #344454);
  box-shadow: 0 -1px rgba(239, 248, 255, 0.48), inset 0 0 4rem rgba(13, 28, 42, 0.36);
}

.cds-drive-mirror-mount {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4.4rem;
  height: 15%;
  border-radius: 0 0 1.1rem 1.1rem;
  background: linear-gradient(90deg, #02060b, #293642 48%, #03070c);
  box-shadow: 0 0.8rem 1.4rem rgba(0, 0, 0, 0.52);
  transform: translateX(-50%);
}

.cds-drive-mirror {
  top: 10%;
  width: min(42rem, 82vw);
  height: clamp(8rem, 21vw, 11.5rem);
  border: 0.72rem solid #03070c;
  background: linear-gradient(176deg, #93b5ce 0 44%, #f0a75f 45% 47%, #20394f 48% 100%);
  box-shadow:
    0 0 0 2px rgba(115, 137, 158, 0.7),
    0 1.6rem 3.4rem rgba(0, 3, 12, 0.68),
    inset 0 0 0 1px rgba(220, 239, 255, 0.54),
    inset 0 -1.2rem 2.8rem rgba(0, 7, 19, 0.48);
}

.cds-drive-mirror-horizon {
  position: absolute;
  right: 0;
  bottom: 42%;
  left: 0;
  height: 25%;
  background: linear-gradient(165deg, transparent 42%, rgba(7, 25, 39, 0.85) 43% 63%, transparent 64%), linear-gradient(195deg, transparent 40%, rgba(11, 32, 46, 0.78) 41% 62%, transparent 63%);
}

.cds-drive-mirror-road {
  inset: 46% -8% -43%;
  background:
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(255, 224, 139, 0.9) 27px 34px, transparent 35px 67px) center / 4px 100% no-repeat,
    linear-gradient(165deg, #4f6170, #060d18 66%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}

.cds-drive-mirror-car {
  position: absolute;
  left: 28%;
  bottom: 13%;
  width: 3.1rem;
  height: 1.4rem;
  border-radius: 55% 55% 28% 28%;
  background: #08182a;
  box-shadow: -0.9rem 0.2rem 1rem rgba(255, 48, 38, 0.6), 0.9rem 0.2rem 1rem rgba(255, 48, 38, 0.6);
}

.cds-drive-mirror-controls {
  position: absolute;
  bottom: -0.52rem;
  left: 50%;
  display: flex;
  gap: 0.35rem;
  transform: translateX(-50%);
}

.cds-drive-mirror-controls i { width: 0.3rem; aspect-ratio: 1; border-radius: 50%; background: #697b8a; box-shadow: inset 0 1px rgba(255,255,255,.4); }

.cds-drive-cluster-ring {
  width: clamp(15rem, 33vw, 21rem);
  padding: 0.9rem;
  border: 2px solid rgba(151, 194, 231, 0.5);
  background:
    radial-gradient(circle, transparent 0 39%, rgba(41, 80, 119, 0.12) 40% 51%, transparent 52%),
    radial-gradient(circle, #0b1727 0 59%, #02060c 60% 68%, #526779 69% 70%, #02050a 72%);
  box-shadow: 0 0 0 0.55rem #02060c, 0 0 0 0.66rem rgba(138, 177, 211, 0.42), 0 0 3.6rem rgba(35, 121, 239, 0.3), inset 0 0 2.8rem rgba(94, 169, 255, 0.16);
}

.cds-drive-cluster-number {
  position: absolute;
  z-index: 2;
  color: #f0f5fb;
  font-size: clamp(0.52rem, 1vw, 0.72rem);
  font-weight: 650;
  text-shadow: 0 0 5px rgba(196, 225, 255, 0.45);
  transform: translate(-50%, -50%);
}

.cds-drive-cluster-number.n0 { top: 72%; left: 17%; }
.cds-drive-cluster-number.n20 { top: 52%; left: 10%; }
.cds-drive-cluster-number.n40 { top: 32%; left: 17%; }
.cds-drive-cluster-number.n60 { top: 18%; left: 30%; }
.cds-drive-cluster-number.n80 { top: 11%; left: 45%; }
.cds-drive-cluster-number.n100 { top: 12%; left: 61%; }
.cds-drive-cluster-number.n120 { top: 21%; left: 76%; }
.cds-drive-cluster-number.n140 { top: 37%; left: 87%; }
.cds-drive-cluster-number.n160 { top: 56%; left: 90%; }
.cds-drive-cluster-number.n180 { top: 74%; left: 82%; }

.cds-drive-cluster-hub {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 28%;
  aspect-ratio: 1;
  place-items: center;
  color: #eef7ff;
  border: 1px solid rgba(153, 199, 239, 0.44);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #183655, #030914 70%);
  box-shadow: 0 0 0 0.28rem rgba(1, 6, 14, 0.86), 0 0 1.2rem rgba(46, 135, 255, 0.28);
  font-size: clamp(0.78rem, 1.8vw, 1.15rem);
  font-style: italic;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.cds-drive-cluster-unit { inset: 64% 0 auto; z-index: 3; }

.cds-drive-side-gauge {
  position: absolute;
  top: 50%;
  display: grid;
  width: clamp(2.8rem, 6vw, 4rem);
  height: clamp(7rem, 16vw, 10rem);
  place-items: center;
  color: #b8c9d9;
  opacity: 0;
  transform: translateY(-50%);
}

.cds-drive-side-gauge i { width: 0.38rem; height: 68%; border-radius: 99px; background: linear-gradient(0deg, #e85a42, #f1c347 40%, #48a3ff 100%); box-shadow: 0 0 0.7rem rgba(66, 145, 239, 0.42); }
.cds-drive-side-gauge small { font-size: 0.58rem; font-weight: 800; }
.cds-drive-side-gauge-fuel { left: calc(50% - clamp(12rem, 25vw, 16rem)); }
.cds-drive-side-gauge-temp { right: calc(50% - clamp(12rem, 25vw, 16rem)); }
.cds-drive-transition.is-visible.is-variant-instrument-cluster .cds-drive-side-gauge { animation: cds-drive-side-gauge 760ms var(--cds-drive-ease) 170ms both; }

.cds-drive-sign-board {
  border-width: 0.32rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 35%),
    linear-gradient(145deg, #073a87, #041d45);
  box-shadow: 0 0 0 2px #122333, 0 1.8rem 4rem rgba(0, 5, 18, 0.68), inset 0 0 0 1px rgba(89, 163, 255, 0.72), inset 0 -1rem 2rem rgba(0, 11, 31, 0.24);
}

.cds-drive-sign-board::after {
  content: "";
  position: absolute;
  inset: -24% 8% auto;
  height: 28%;
  background: radial-gradient(ellipse, rgba(255, 244, 208, 0.54), transparent 68%);
  filter: blur(5px);
}

.cds-drive-sign-bolt { position: absolute; width: 0.35rem; aspect-ratio: 1; border-radius: 50%; background: #bdc9d4; box-shadow: inset 0 1px #fff, 0 0 3px #000; }
.cds-drive-sign-bolt-a { top: 0.7rem; left: 0.7rem; }
.cds-drive-sign-bolt-b { right: 0.7rem; bottom: 0.7rem; }

.cds-drive-windscreen-glass {
  position: absolute;
  inset: 3% 4% 7%;
  border: 0.65rem solid rgba(1, 7, 15, 0.88);
  border-radius: 3.5rem 3.5rem 1.2rem 1.2rem / 2.2rem 2.2rem 1rem 1rem;
  background: linear-gradient(128deg, rgba(217, 236, 250, 0.14), transparent 28% 66%, rgba(139, 190, 231, 0.12));
  box-shadow: inset 0 0 4rem rgba(7, 27, 46, 0.55), 0 1.4rem 4rem rgba(0,0,0,.55);
}

.cds-drive-windscreen-dashboard { position: absolute; right: -5%; bottom: -7%; left: -5%; height: 28%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #182635, #02060c 70%); box-shadow: 0 -1rem 2rem rgba(0,0,0,.48); }
.cds-drive-rain { inset: 3% 4% 7%; border-radius: 3rem; background: radial-gradient(circle, rgba(219, 239, 255, 0.34) 0 1px, transparent 2px) 0 0 / 31px 27px, repeating-linear-gradient(104deg, transparent 0 24px, rgba(205, 229, 255, 0.22) 25px 27px, transparent 28px 48px); }
.cds-drive-wiper { right: 47%; bottom: 10%; height: 0.9rem; border: 1px solid #415365; }

.cds-drive-ignition-module {
  border: 2px solid rgba(119, 167, 211, 0.45);
  background: radial-gradient(circle, rgba(255, 206, 59, 0.08) 0 35%, #030914 36% 53%, rgba(43, 113, 184, 0.18) 54% 56%, #050c16 57% 70%, transparent 71%);
  box-shadow: 0 0 0 0.5rem rgba(1,7,16,.76), 0 0 3.6rem rgba(37, 125, 244, 0.28), inset 0 0 2.4rem rgba(255, 207, 62, 0.1);
}

.cds-drive-ignition-ring { position: absolute; inset: 12%; border: 2px solid #f0b741; border-radius: 50%; box-shadow: 0 0 0.6rem rgba(255, 178, 50, 0.78), inset 0 0 1rem rgba(255, 178, 50, 0.25); }
.cds-drive-ignition-button { position: absolute; inset: 28%; display: grid; place-items: center; align-content: center; color: #eef7ff; border: 1px solid #7592ab; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #24425f, #030810 70%); box-shadow: inset 0 0.2rem 0.5rem rgba(255,255,255,.12), 0 0.5rem 1rem rgba(0,0,0,.52); font-size: 1.15rem; font-weight: 900; }
.cds-drive-ignition-button small { color: #ffc641; font-size: 0.45rem; letter-spacing: 0.08rem; }

.cds-drive-scene-route-map { background: radial-gradient(ellipse at center, rgba(7, 48, 100, 0.58), rgba(1, 8, 19, 0.82) 68%); }
.cds-drive-scene-route-map::before { content: ""; position: absolute; inset: 8% 4%; opacity: .32; background: repeating-linear-gradient(28deg, transparent 0 29px, rgba(45, 94, 144, .24) 30px 31px), repeating-linear-gradient(151deg, transparent 0 43px, rgba(48, 103, 159, .2) 44px 45px); mask-image: radial-gradient(ellipse, #000, transparent 72%); }
.cds-drive-map-grid { stroke: rgba(77, 137, 199, 0.32); }
.cds-drive-map-minor { fill: none; stroke: rgba(45, 98, 155, 0.24); stroke-width: 1.5; stroke-dasharray: 5 5; }
.cds-drive-map-route { stroke: #43a5ff; stroke-width: 6; filter: drop-shadow(0 0 4px #bde5ff) drop-shadow(0 0 12px rgba(46, 143, 255, 0.9)); }
.cds-drive-map-start, .cds-drive-map-end { filter: drop-shadow(0 0 10px currentColor); }

.cds-drive-tunnel-shell {
  inset: 2% -2% -18%;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 0 12%, rgba(14, 28, 42, .38) 13% 24%, transparent 25%),
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 7%, rgba(155, 190, 229, 0.11) 7.4% 8.1%, transparent 8.5% 13%),
    linear-gradient(90deg, #010306, #192635 44% 56%, #010306);
  box-shadow: inset 0 0 6rem #000, inset 0 2rem 4rem rgba(53, 79, 101, 0.16), 0 0 4rem rgba(0,0,0,.6);
}

.cds-drive-tunnel-road { position: absolute; right: 10%; bottom: 0; left: 10%; height: 64%; clip-path: polygon(43% 0,57% 0,100% 100%,0 100%); background: linear-gradient(180deg,#27323b,#05080d 70%); }
.cds-drive-tunnel-centre { position: absolute; bottom: 0; left: 50%; width: 4px; height: 58%; background: repeating-linear-gradient(180deg, #f5e5a9 0 18px, transparent 19px 48px); filter: drop-shadow(0 0 4px rgba(255,239,179,.64)); transform: translateX(-50%); }
.cds-drive-tunnel-ribs { position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 50% 42%, transparent 0 8%, rgba(154, 178, 199, .15) 8.2% 8.8%, transparent 9% 14%); }
.cds-drive-tunnel-lights { width: 0.8rem; background: repeating-linear-gradient(180deg, #fff6dc 0 9px, transparent 10px 46px); filter: drop-shadow(0 0 9px rgba(255,232,173,.9)); }
.cds-drive-tunnel-exit { top: 25%; width: 10%; background: radial-gradient(circle at 50% 60%, #fff, #c9e8ff 62%, #86b0d0); box-shadow: 0 0 3rem #d5ecff, 0 0 7rem rgba(167,217,255,.5); }

.cds-drive-transition.is-student-transition:not(.is-variant-ignition-start) .cds-drive-logo-moment { top: 70%; width: clamp(4.2rem, 6vw, 5.4rem); }
.cds-drive-transition.is-variant-instrument-cluster .cds-drive-logo-moment { display: none; }

@keyframes cds-drive-horizon-arrive {
  0% { opacity: 0; transform: scale(1.06) translateY(1rem); }
  24%, 88% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.02) translateY(-0.4rem); }
}

@keyframes cds-drive-asphalt-arrive { 0% { opacity: 0; transform: scaleY(.72); transform-origin: 50% 0; } 24%, 88% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1.06); } }
@keyframes cds-drive-environment-arrive { 0% { opacity: 0; transform: scale(.88); } 25%, 86% { opacity: .86; } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes cds-drive-surface-travel { from { background-position-y: -8rem; } to { background-position-y: 10rem; } }
@keyframes cds-drive-car-cinematic {
  0% { opacity: 0; transform: translate3d(-50%, 2rem, 0) scale(.72); }
  24% { opacity: 1; }
  30%, 82% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -2.2rem, 0) scale(.74); }
}
@keyframes cds-drive-car-cinematic-back { 0% { opacity: 0; transform: translate3d(-50%, -1rem, 0) scale(.76); } 26%, 78% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } 100% { opacity: 0; transform: translate3d(-50%, 2.6rem, 0) scale(1.12); } }
@keyframes cds-drive-car-cinematic-uphill { 0% { opacity: 0; transform: translate3d(-50%, 3rem, 0) rotate(2deg) scale(.78); } 25%, 76% { opacity: 1; transform: translate3d(-50%, 0, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate3d(-50%, -3rem, 0) scale(.7); } }
@keyframes cds-drive-car-cinematic-cruise { from { transform: translate3d(calc(-50% - .22rem), .14rem, 0) scale(.99); } to { transform: translate3d(calc(-50% + .22rem), -.1rem, 0) scale(1.01); } }
@keyframes cds-drive-side-gauge { 0% { opacity: 0; transform: translateY(-50%) scale(.8); } 25%, 84% { opacity: .9; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1.03); } }

@media (max-width: 640px) {
  .cds-drive-horizon { top: 20%; }
  .cds-drive-road { top: 35%; width: 142vw; }
  .cds-drive-roadside-lights span:nth-child(1),
  .cds-drive-roadside-lights span:nth-child(6) { display: none; }
  .cds-drive-car { bottom: 7%; width: clamp(8.4rem, 38vw, 10.5rem); }
  .cds-drive-gear-console { top: 18%; left: 7%; width: 3.15rem; padding: 0.38rem; }
  .cds-drive-gear-console span { min-height: 1.75rem; }
  .cds-drive-parking-bay { right: 4%; width: 42vw; }
  .cds-drive-mirror { top: 11%; width: 88vw; height: 7.4rem; border-width: 0.52rem; }
  .cds-drive-cluster-ring { width: min(15rem, 62vw); }
  .cds-drive-side-gauge { display: none; }
  .cds-drive-cluster-display { top: calc(50% + 7.5rem); }
  .cds-drive-sign-board { top: 18%; right: 5%; width: 78vw; min-height: 8rem; padding: 1rem 3.4rem 1rem 1.1rem; }
  .cds-drive-sign-post { right: 15%; }
  .cds-drive-traffic-light { top: 13%; left: 7%; width: 3.8rem; }
  .cds-drive-scene-traffic .cds-drive-scene-copy { top: 33%; left: 58%; width: 68vw; }
  .cds-drive-ignition-module { top: 59%; width: min(13rem, 55vw); }
  .cds-drive-ignition-copy { top: 18%; }
  .cds-drive-map-label-start { top: 22%; left: 5%; }
  .cds-drive-map-label-end { right: 5%; bottom: 27%; }
  .cds-drive-tunnel-shell { inset: 7% -14% -12%; }
  .cds-drive-transition.is-student-transition:not(.is-variant-ignition-start) .cds-drive-logo-moment { top: 72%; width: 4.1rem; }
  .cds-drive-comms-panel { padding-right: 4.5rem; }
  .cds-drive-licence-card { padding-left: 6.5rem; min-height: 10.8rem; }
  .cds-drive-licence-photo { width: 4.25rem; height: 5.8rem; }
  .cds-drive-licence-lines { left: 6.5rem; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cds-drive-logo-moment { top: 58%; width: 5.2rem; }
  .cds-drive-road { top: 26%; }
  .cds-drive-scene-copy { top: 25%; }
  .cds-drive-mirror { top: 5%; height: 5.8rem; }
  .cds-drive-cluster-ring { width: 10rem; }
  .cds-drive-cluster-display { top: calc(50% + 4.8rem); padding: 0.4rem 0.8rem; }
  .cds-drive-sign-board { top: 9%; min-height: 6rem; padding-block: 0.7rem; }
  .cds-drive-ignition-copy { top: 9%; }
  .cds-drive-ignition-module { width: 9rem; }
  .cds-drive-clipboard { top: 7%; min-height: 10rem; padding-top: 1.7rem; }
  .cds-drive-licence-card { top: 8%; min-height: 8.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cds-drive-transition.is-reduced::before {
    display: none;
    animation: none !important;
  }

  html.cds-page-enter-pending .cds-drive-transition,
  html.cds-page-enter-pending body > :not(.cds-drive-transition):not(script) {
    animation: none;
  }

  .cds-drive-transition.is-reduced .cds-drive-scenes,
  .cds-drive-transition.is-reduced .cds-drive-logo-moment,
  .cds-drive-transition.is-reduced .cds-drive-road,
  .cds-drive-transition.is-reduced .cds-drive-car,
  .cds-drive-transition.is-reduced .cds-drive-speed-lines,
  .cds-drive-transition.is-reduced .cds-drive-headlights {
    display: none;
    animation: none !important;
  }

  .cds-drive-transition.is-student-transition.is-travelling .cds-drive-road-centre,
  .cds-drive-transition.is-student-transition.is-arriving .cds-drive-road-centre {
    animation: none;
  }
}

/* My Timetable: the supplied 1536x1024 artwork stays in one shared perspective canvas. */
.cds-drive-transition.is-route-timetable .cds-drive-logo-moment {
  display: none;
}

.cds-drive-scene-road-sign {
  perspective: 1400px;
}

.cds-drive-sign-atmosphere {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 50%;
  width: min(82rem, 96vw);
  height: 68%;
  --cds-sign-atmosphere-opacity: 0.88;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(117, 183, 255, 0.22), transparent 49%),
    radial-gradient(ellipse at 50% 78%, rgba(75, 143, 207, 0.11), transparent 60%),
    linear-gradient(180deg, transparent 0 56%, rgba(2, 10, 23, 0.35));
  filter: blur(8px);
  opacity: 0;
  transform: translateX(-50%);
}

.cds-drive-sign-assembly {
  position: absolute;
  z-index: 3;
  top: 49%;
  left: 50%;
  width: clamp(31rem, 70vw, 68rem);
  aspect-ratio: 3 / 2;
  opacity: 0;
  transform: translate3d(-50%, -34%, 0) scale(0.24);
  transform-origin: 50% 59%;
  will-change: opacity, transform;
}

.cds-drive-sign-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.cds-drive-sign-gantry {
  z-index: 1;
  opacity: 0;
  filter: brightness(0.94) contrast(1.06) drop-shadow(0 1.7rem 1.8rem rgba(0, 3, 12, 0.45));
}

.cds-drive-sign-board-asset {
  z-index: 2;
  opacity: 0;
  filter: contrast(1.04) saturate(1.02) drop-shadow(0 1.3rem 1.7rem rgba(0, 4, 15, 0.48));
}

.cds-drive-sign-glow {
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(0.78) brightness(0.9);
}

.cds-drive-sign-copy-plane {
  --cds-sign-copy-transform: perspective(1050px) rotateY(-11deg) rotateZ(3.7deg);
  position: absolute;
  z-index: 4;
  top: 32.5%;
  left: 17%;
  display: grid;
  width: 60%;
  height: 38%;
  place-content: center;
  justify-items: center;
  color: #f7fbff;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 7, 24, 0.88);
  opacity: 0;
  transform: var(--cds-sign-copy-transform) translate3d(0, 0.7rem, 0) scale(0.96);
  transform-origin: 14% 50%;
  will-change: opacity, transform;
}

.cds-drive-sign-copy-plane small,
.cds-drive-sign-copy-plane strong {
  display: block;
  max-width: 100%;
  letter-spacing: 0;
  line-height: 1.05;
}

.cds-drive-sign-copy-plane small {
  margin-bottom: 0.3rem;
  color: #d4e9ff;
  font-size: clamp(0.54rem, 1.2vw, 0.82rem);
  font-weight: 760;
  text-transform: uppercase;
}

.cds-drive-sign-copy-plane strong {
  color: #fff;
  font-size: clamp(1.05rem, 2.65vw, 2.25rem);
  font-weight: 860;
  text-wrap: balance;
  text-transform: uppercase;
}

.cds-drive-sign-logo {
  display: grid;
  margin-top: clamp(0.4rem, 0.9vw, 0.74rem);
  place-items: center;
  opacity: 0;
  transform: translateY(0.45rem) scale(0.88);
}

.cds-drive-sign-logo .cds-theme-logo {
  --cds-logo-size: clamp(3.25rem, 5.7vw, 6.15rem);
}

.cds-drive-sign-logo .cds-theme-logo-image {
  filter: drop-shadow(0 0.35rem 0.65rem rgba(0, 5, 18, 0.52));
}

html[data-theme="dark"] .cds-drive-sign-gantry {
  filter: brightness(1.02) contrast(1.09) drop-shadow(0 1.7rem 2rem rgba(0, 0, 0, 0.62));
}

html[data-theme="dark"] .cds-drive-sign-board-asset {
  filter: contrast(1.08) saturate(1.06) brightness(0.94) drop-shadow(0 1.4rem 2rem rgba(0, 0, 0, 0.62));
}

html[data-theme="dark"] .cds-drive-sign-glow {
  filter: saturate(0.9) brightness(1.04);
}

html[data-theme="dark"] .cds-drive-sign-atmosphere {
  --cds-sign-atmosphere-opacity: 0.94;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(77, 156, 243, 0.24), transparent 50%),
    radial-gradient(ellipse at 50% 78%, rgba(36, 105, 177, 0.16), transparent 62%),
    linear-gradient(180deg, transparent 0 53%, rgba(1, 7, 18, 0.46));
  filter: blur(9px);
}

html[data-theme="dark"] .cds-drive-sign-logo .cds-theme-logo-image {
  filter:
    brightness(1.16)
    contrast(1.06)
    drop-shadow(0 0 0.62rem rgba(51, 153, 255, 0.58))
    drop-shadow(0 0 0.24rem rgba(255, 190, 38, 0.24));
}

.cds-drive-sign-road-reflection {
  --cds-sign-reflection-opacity: 0.34;
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: -3%;
  left: 4%;
  height: 42%;
  background:
    radial-gradient(ellipse at 50% 7%, rgba(102, 205, 255, 0.14), rgba(55, 146, 234, 0.05) 39%, transparent 70%),
    linear-gradient(90deg, transparent 20%, rgba(61, 154, 255, 0.02) 36%, rgba(78, 185, 255, 0.08) 50%, rgba(61, 154, 255, 0.02) 64%, transparent 80%);
  clip-path: polygon(36% 0, 64% 0, 88% 100%, 12% 100%);
  filter: blur(19px);
  -webkit-mask-image: linear-gradient(180deg, #000 0 18%, rgba(0, 0, 0, 0.72) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 18%, rgba(0, 0, 0, 0.72) 55%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
}

html[data-theme="dark"] .cds-drive-sign-road-reflection {
  --cds-sign-reflection-opacity: 0.48;
  background:
    radial-gradient(ellipse at 50% 7%, rgba(94, 207, 255, 0.22), rgba(48, 135, 230, 0.075) 40%, transparent 71%),
    linear-gradient(90deg, transparent 19%, rgba(43, 137, 238, 0.025) 35%, rgba(74, 187, 255, 0.12) 50%, rgba(43, 137, 238, 0.025) 65%, transparent 81%);
}

.cds-drive-transition.is-visible.is-variant-road-sign:not(.is-incoming) .cds-drive-sign-atmosphere {
  animation: cds-timetable-atmosphere 1080ms var(--cds-drive-ease) 80ms both;
}

.cds-drive-transition.is-visible.is-variant-road-sign:not(.is-incoming) .cds-drive-sign-assembly {
  animation: cds-timetable-sign-approach 1080ms var(--cds-drive-ease) 90ms both;
}

.cds-drive-transition.is-visible.is-variant-road-sign:not(.is-incoming) .cds-drive-sign-gantry {
  opacity: 1;
  animation: none;
}

.cds-drive-transition.is-visible.is-variant-road-sign:not(.is-incoming) .cds-drive-sign-board-asset {
  opacity: 1;
  animation: none;
}

.cds-drive-transition.is-visible.is-variant-road-sign:not(.is-incoming) .cds-drive-sign-glow {
  animation: cds-timetable-glow-resolve 660ms ease-out 400ms both;
}

.cds-drive-transition.is-visible.is-variant-road-sign:not(.is-incoming) .cds-drive-sign-copy-plane {
  animation: cds-timetable-copy-resolve 580ms var(--cds-drive-ease) 470ms both;
}

.cds-drive-transition.is-visible.is-variant-road-sign:not(.is-incoming) .cds-drive-sign-logo {
  animation: cds-timetable-logo-resolve 500ms var(--cds-drive-ease) 540ms both;
}

.cds-drive-transition.is-visible.is-variant-road-sign:not(.is-incoming) .cds-drive-sign-road-reflection {
  animation: cds-timetable-reflection 700ms ease-out 360ms both;
}

.cds-drive-transition.is-visible.is-variant-road-sign.is-incoming .cds-drive-sign-assembly {
  animation: cds-timetable-sign-pass var(--cds-drive-student-arrival) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-variant-road-sign.is-incoming .cds-drive-sign-gantry,
.cds-drive-transition.is-visible.is-variant-road-sign.is-incoming .cds-drive-sign-board-asset,
.cds-drive-transition.is-visible.is-variant-road-sign.is-incoming .cds-drive-sign-copy-plane,
.cds-drive-transition.is-visible.is-variant-road-sign.is-incoming .cds-drive-sign-logo {
  opacity: 1;
}

.cds-drive-transition.is-visible.is-variant-road-sign.is-incoming .cds-drive-sign-glow {
  opacity: 0.46;
}

.cds-drive-transition.is-visible.is-variant-road-sign.is-incoming .cds-drive-sign-atmosphere,
.cds-drive-transition.is-visible.is-variant-road-sign.is-incoming .cds-drive-sign-road-reflection {
  animation: cds-timetable-incoming-light var(--cds-drive-student-arrival) ease-out both;
}

@keyframes cds-timetable-sign-approach {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -30%, 0) scale(0.2) rotateZ(-0.9deg);
  }
  14% { opacity: 0.45; }
  38% {
    opacity: 1;
    transform: translate3d(-50%, -44%, 0) scale(0.66) rotateZ(-0.65deg);
  }
  60% {
    opacity: 1;
    transform: translate3d(-50%, -49%, 0) scale(0.91) rotateZ(-0.35deg);
  }
  73% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(0.99) rotateZ(-0.08deg);
  }
  76%, 95% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, -50.2%, 0) scale(1.035) rotateZ(0.12deg);
  }
}

@keyframes cds-timetable-gantry-resolve {
  0% { opacity: 0; }
  20%, 100% { opacity: 1; }
}

@keyframes cds-timetable-board-resolve {
  0% { opacity: 0; filter: contrast(0.92) saturate(0.82) brightness(0.72); }
  32%, 100% { opacity: 1; }
}

@keyframes cds-timetable-glow-resolve {
  0% { opacity: 0; }
  44% { opacity: 0.58; }
  100% { opacity: 0.38; }
}

@keyframes cds-timetable-copy-resolve {
  0% {
    opacity: 0;
    transform: var(--cds-sign-copy-transform) translate3d(0, 0.7rem, 0) scale(0.96);
  }
  40%, 100% {
    opacity: 1;
    transform: var(--cds-sign-copy-transform) translate3d(0, 0, 0) scale(1);
  }
}

@keyframes cds-timetable-logo-resolve {
  0% { opacity: 0; transform: translateY(0.45rem) scale(0.88); }
  45%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cds-timetable-atmosphere {
  0% { opacity: 0; transform: translateX(-50%) scale(0.82); }
  34%, 100% { opacity: var(--cds-sign-atmosphere-opacity); transform: translateX(-50%) scale(1); }
}

@keyframes cds-timetable-reflection {
  0% { opacity: 0; transform: scaleY(0.45); transform-origin: 50% 0; }
  46%, 100% { opacity: var(--cds-sign-reflection-opacity); transform: scaleY(1); }
}

@keyframes cds-timetable-sign-pass {
  0% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.035);
  }
  36% {
    opacity: 1;
    transform: translate3d(-50%, -57%, 0) scale(1.14);
  }
  78% { opacity: 0.82; }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -108%, 0) scale(1.62);
  }
}

@keyframes cds-timetable-incoming-light {
  0%, 28% { opacity: 0.62; }
  100% { opacity: 0; }
}

@media (max-width: 640px) {
  .cds-drive-sign-assembly {
    top: 43%;
    left: 53%;
    width: max(31rem, 132vw);
  }

  .cds-drive-sign-copy-plane {
    top: 32%;
    left: 17.5%;
    width: 59%;
  }

  .cds-drive-sign-copy-plane small {
    margin-bottom: 0.2rem;
    font-size: 0.55rem;
  }

  .cds-drive-sign-copy-plane strong {
    font-size: clamp(0.96rem, 4.8vw, 1.18rem);
  }

  .cds-drive-sign-logo .cds-theme-logo {
    --cds-logo-size: 3.05rem;
  }

  .cds-drive-sign-road-reflection {
    right: -8%;
    left: -8%;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .cds-drive-sign-assembly {
    top: 46%;
    width: 82vw;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cds-drive-sign-assembly {
    top: 55%;
    width: min(48rem, 82vw);
  }

  .cds-drive-sign-copy-plane {
    top: 31%;
  }

  .cds-drive-sign-copy-plane strong {
    font-size: clamp(0.88rem, 3.2vw, 1.35rem);
  }

  .cds-drive-sign-logo .cds-theme-logo {
    --cds-logo-size: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-scenes {
    display: block !important;
  }

  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-sign-atmosphere,
  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-sign-road-reflection {
    display: none;
  }

  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-sign-assembly {
    display: block;
    opacity: 1;
    animation: cds-timetable-sign-reduced 180ms ease-out both !important;
  }

  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-sign-gantry,
  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-sign-board-asset,
  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-sign-copy-plane,
  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-sign-logo {
    opacity: 1;
    animation: none !important;
  }

  .cds-drive-transition.is-reduced.is-variant-road-sign .cds-drive-sign-glow {
    opacity: 0.28;
    animation: none !important;
  }
}

@keyframes cds-timetable-sign-reduced {
  from { opacity: 0; transform: translate3d(-50%, -49%, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}

/* Shared photographic road foundation. Route-specific scenes stay layered above it. */
.cds-drive-transition::before {
  display: none;
  content: none;
}

.cds-drive-environment {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #8bb9df;
  opacity: 0;
  transform: scale(1.025);
  transform-origin: 50% 48%;
  pointer-events: none;
  will-change: opacity, transform;
}

.cds-drive-environment-plate {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: opacity 300ms ease, filter 300ms ease;
  user-select: none;
}

.cds-drive-environment-day {
  opacity: 1;
  filter: saturate(0.94) contrast(1.02) brightness(0.96);
}

.cds-drive-environment-night {
  opacity: 0;
  filter: saturate(0.95) contrast(1.08) brightness(0.94);
}

html[data-theme="dark"] .cds-drive-environment {
  background: #010712;
}

html[data-theme="dark"] .cds-drive-environment-day {
  opacity: 0;
}

html[data-theme="dark"] .cds-drive-environment-night {
  opacity: 1;
}

.cds-drive-environment-depth {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 13, 27, 0.04), transparent 36%, rgba(2, 8, 16, 0.18) 82%, rgba(1, 4, 9, 0.5)),
    radial-gradient(ellipse at 50% 47%, transparent 24%, rgba(1, 7, 15, 0.18) 72%, rgba(0, 3, 9, 0.38));
  pointer-events: none;
}

.cds-drive-environment-depth::after {
  position: absolute;
  inset: 33% -8% 7%;
  background:
    radial-gradient(ellipse at 4% 54%, rgba(72, 115, 153, 0.17), transparent 34%),
    radial-gradient(ellipse at 96% 54%, rgba(72, 115, 153, 0.17), transparent 34%),
    linear-gradient(180deg, transparent 0 43%, rgba(30, 63, 91, 0.07) 78%, transparent);
  content: "";
  filter: blur(11px);
  opacity: 0.46;
}

html[data-theme="dark"] .cds-drive-environment-depth::after {
  background:
    radial-gradient(ellipse at 4% 54%, rgba(48, 94, 137, 0.24), transparent 35%),
    radial-gradient(ellipse at 96% 54%, rgba(48, 94, 137, 0.24), transparent 35%),
    linear-gradient(180deg, transparent 0 39%, rgba(19, 55, 88, 0.12) 76%, transparent);
  opacity: 0.64;
}

html[data-theme="light"] .cds-drive-environment-depth,
html:not([data-theme="dark"]) .cds-drive-environment-depth {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%, rgba(7, 18, 29, 0.14) 86%, rgba(3, 10, 18, 0.36)),
    radial-gradient(ellipse at 50% 47%, transparent 32%, rgba(9, 33, 54, 0.12) 78%, rgba(3, 13, 24, 0.28));
}

.cds-drive-horizon-light {
  position: absolute;
  z-index: 3;
  top: 40%;
  left: 50%;
  width: min(62rem, 92vw);
  height: 17%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(132, 194, 255, 0.2), rgba(85, 155, 226, 0.07) 48%, transparent 73%);
  filter: blur(12px);
  opacity: 0.7;
  transform: translateX(-50%);
}

html[data-theme="light"] .cds-drive-horizon-light,
html:not([data-theme="dark"]) .cds-drive-horizon-light {
  background: radial-gradient(ellipse, rgba(255, 247, 216, 0.32), rgba(118, 188, 244, 0.08) 52%, transparent 74%);
  opacity: 0.52;
}

.cds-drive-road-reflection-layer {
  position: absolute;
  z-index: 4;
  right: 16%;
  bottom: -8%;
  left: 16%;
  height: 48%;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(72, 143, 218, 0.14), transparent 62%),
    linear-gradient(90deg, transparent 25%, rgba(236, 244, 255, 0.06) 49%, rgba(236, 244, 255, 0.03) 52%, transparent 75%);
  clip-path: polygon(45% 0, 55% 0, 82% 100%, 18% 100%);
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0.58;
}

.cds-drive-transition.is-visible .cds-drive-environment {
  animation: cds-drive-photo-environment-in var(--drive-transition-duration) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-student-transition.is-travelling .cds-drive-environment-plate,
.cds-drive-transition.is-student-transition.is-arriving .cds-drive-environment-plate {
  animation: cds-drive-photo-plate-cruise 5.2s ease-in-out infinite alternate;
}

.cds-drive-speed-lines {
  z-index: 1;
  inset: 43% 0 0;
  background:
    repeating-linear-gradient(168deg, transparent 0 4.1rem, rgba(215, 234, 251, 0.16) 4.16rem 4.22rem, transparent 4.28rem 8.4rem) left bottom / 15% 100% no-repeat,
    repeating-linear-gradient(12deg, transparent 0 4.1rem, rgba(215, 234, 251, 0.16) 4.16rem 4.22rem, transparent 4.28rem 8.4rem) right bottom / 15% 100% no-repeat;
  filter: blur(0.5px);
  mix-blend-mode: screen;
}

html[data-theme="light"] .cds-drive-speed-lines,
html:not([data-theme="dark"]) .cds-drive-speed-lines {
  opacity: 0.46;
  filter: blur(0.75px) brightness(0.8);
}

.cds-drive-road {
  z-index: 0;
  top: 48%;
  bottom: -10%;
  left: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  clip-path: none;
  background: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transform-origin: 50% 0;
  pointer-events: none;
}

.cds-drive-transition.is-visible .cds-drive-road {
  animation: cds-drive-photo-road-in 720ms ease-out 70ms both;
}

.cds-drive-road-flow {
  position: absolute;
  inset: -16% 8% -24%;
  background:
    repeating-linear-gradient(180deg, transparent 0 4.2rem, rgba(220, 235, 247, 0.045) 4.28rem 4.36rem, transparent 4.44rem 8.8rem),
    radial-gradient(ellipse at 50% 0, rgba(101, 168, 234, 0.12), transparent 58%);
  clip-path: polygon(43% 0, 57% 0, 94% 100%, 6% 100%);
  filter: blur(0.65px);
  mix-blend-mode: screen;
  opacity: 0.78;
}

.cds-drive-road-streak {
  position: absolute;
  top: 0;
  bottom: -14%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(218, 237, 255, 0.58) 42%, rgba(218, 237, 255, 0.08));
  filter: drop-shadow(0 0 5px rgba(172, 215, 255, 0.32));
  opacity: 0.48;
  transform-origin: 50% 0;
}

.cds-drive-road-streak-left {
  left: 28%;
  transform: rotate(-16deg);
}

.cds-drive-road-streak-right {
  right: 28%;
  transform: rotate(16deg);
}

.cds-drive-road-centre {
  top: -8%;
  bottom: -18%;
  left: calc(50% - 2px);
  width: 4px;
  background: repeating-linear-gradient(180deg, rgba(245, 248, 250, 0.86) 0 2.2rem, transparent 2.3rem 6.8rem);
  filter: drop-shadow(0 0 4px rgba(223, 239, 255, 0.42));
  opacity: 0.46;
  transform-origin: 50% 0;
}

.cds-drive-transition.is-visible .cds-drive-road-centre,
.cds-drive-transition.is-student-transition.is-travelling .cds-drive-road-flow,
.cds-drive-transition.is-student-transition.is-arriving .cds-drive-road-flow {
  animation: cds-drive-photo-road-flow var(--cds-drive-travel-loop) linear infinite;
}

.cds-drive-car {
  z-index: 4;
  bottom: clamp(-2.2rem, -2.4vh, -0.6rem);
  left: 50%;
  width: clamp(12rem, 23vw, 18rem);
  height: auto;
  aspect-ratio: 924 / 733;
  opacity: 0;
  transform: translate3d(-50%, 1.4rem, 0) scale(0.82);
  filter: drop-shadow(0 1.15rem 1.35rem rgba(0, 0, 0, 0.52));
  will-change: opacity, transform;
}

.cds-drive-car-body {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.94) contrast(1.03) brightness(1.02);
  user-select: none;
}

html[data-theme="dark"] .cds-drive-car-body {
  filter: saturate(0.88) contrast(1.09) brightness(0.82) drop-shadow(0 0 0.65rem rgba(87, 149, 216, 0.18));
}

.cds-drive-car-plate {
  position: absolute;
  z-index: 4;
  top: 50.7%;
  left: 50%;
  display: grid;
  width: 20.25%;
  height: 5.8%;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(23, 31, 41, 0.82);
  border-radius: 2px;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.78), transparent 28% 72%, rgba(255, 255, 255, 0.44)),
    linear-gradient(180deg, #f4f5f2, #cfd3d3 58%, #b8bec0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(36, 43, 51, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.58);
  color: #0a1420;
  font-family: Arial, sans-serif;
  font-size: clamp(0.4rem, 0.68vw, 0.68rem);
  font-weight: 800;
  line-height: 1;
  opacity: 0.97;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.54);
  transform: translate3d(-50%, -50%, 0) perspective(180px) rotateX(1deg);
  user-select: none;
}

html[data-theme="dark"] .cds-drive-car-plate {
  filter: brightness(0.88) contrast(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(15, 22, 31, 0.42),
    0 1px 4px rgba(0, 0, 0, 0.72),
    0 0 5px rgba(106, 157, 206, 0.08);
}

.cds-drive-car-shadow {
  position: absolute;
  z-index: 0;
  right: 5%;
  bottom: 2%;
  left: 5%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.4) 45%, transparent 73%);
  filter: blur(8px);
  transform: scaleX(1.08);
}

.cds-drive-car-reflection {
  position: absolute;
  z-index: -1;
  top: 79%;
  right: 12%;
  left: 12%;
  height: 47%;
  overflow: hidden;
  filter: blur(2.4px) saturate(0.72);
  opacity: 0.25;
  transform: scaleY(-0.54);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 76%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 76%);
}

.cds-drive-car-reflection img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.62) contrast(1.06);
}

html[data-theme="light"] .cds-drive-car-reflection,
html:not([data-theme="dark"]) .cds-drive-car-reflection {
  opacity: 0.16;
}

.cds-drive-brake-light {
  position: absolute;
  z-index: 3;
  top: 39.5%;
  width: 25%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 229, 219, 0.94) 0 5%, rgba(255, 77, 51, 0.86) 24%, rgba(255, 30, 22, 0.28) 59%, transparent 75%);
  filter: blur(4.1px);
  mix-blend-mode: screen;
  opacity: 0.46;
}

.cds-drive-brake-light-left { left: 7.5%; }
.cds-drive-brake-light-right { right: 7.5%; }

.cds-drive-brake-spill {
  position: absolute;
  z-index: -1;
  right: 2%;
  bottom: -8%;
  left: 2%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 45, 30, 0.28), rgba(177, 18, 16, 0.1) 45%, transparent 73%);
  filter: blur(13px);
  opacity: 0.68;
  transform: perspective(300px) rotateX(66deg) scaleX(1.24);
}

html[data-theme="light"] .cds-drive-brake-light,
html:not([data-theme="dark"]) .cds-drive-brake-light {
  opacity: 0.24;
}

html[data-theme="light"] .cds-drive-brake-spill,
html:not([data-theme="dark"]) .cds-drive-brake-spill {
  opacity: 0.24;
}

.cds-drive-transition.is-visible .cds-drive-car {
  animation-name: cds-drive-car-photoreal;
}

.cds-drive-transition.is-back.is-visible .cds-drive-car {
  animation-name: cds-drive-car-photoreal-back;
}

.cds-drive-transition.is-uphill.is-visible .cds-drive-car {
  animation-name: cds-drive-car-photoreal-uphill;
}

.cds-drive-transition.is-student-transition.is-travelling .cds-drive-car {
  opacity: 1;
  animation: cds-drive-car-photoreal-cruise 640ms ease-in-out infinite alternate;
}

.cds-drive-transition.is-student-transition.is-arriving .cds-drive-car {
  opacity: 1;
}

.cds-drive-transition.is-student-transition.is-arriving .cds-drive-brake-light,
.cds-drive-transition.is-student-transition.is-arriving .cds-drive-brake-spill {
  animation: cds-drive-brake-arrival var(--cds-drive-student-arrival) ease-out both;
}

@keyframes cds-drive-photo-environment-in {
  0% { opacity: 0; transform: scale(1.045); }
  22%, 100% { opacity: 1; transform: scale(1.025); }
}

@keyframes cds-drive-photo-plate-cruise {
  from { transform: scale(1.018) translate3d(-0.08%, 0, 0); }
  to { transform: scale(1.026) translate3d(0.08%, -0.08%, 0); }
}

@keyframes cds-drive-photo-road-in {
  from { opacity: 0; transform: scaleY(0.88); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes cds-drive-photo-road-flow {
  from { background-position-y: -4.5rem; }
  to { background-position-y: 4.3rem; }
}

@keyframes cds-drive-car-photoreal {
  0% { opacity: 0; transform: translate3d(calc(-50% - 0.35rem), 2.4rem, 0) scale(0.76); }
  24% { opacity: 1; }
  32% { opacity: 1; transform: translate3d(calc(-50% - 0.18rem), 0.12rem, 0) scale(0.985); }
  58% { opacity: 1; transform: translate3d(calc(-50% + 0.12rem), -0.08rem, 0) scale(1); }
  82% { opacity: 1; transform: translate3d(calc(-50% - 0.05rem), 0, 0) scale(1.008); }
  100% { opacity: 0; transform: translate3d(-50%, -1.5rem, 0) scale(0.88); }
}

@keyframes cds-drive-car-photoreal-back {
  0% { opacity: 0; transform: translate3d(-50%, -0.8rem, 0) scale(0.82); }
  28%, 78% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, 2.2rem, 0) scale(1.08); }
}

@keyframes cds-drive-car-photoreal-uphill {
  0% { opacity: 0; transform: translate3d(-50%, 2.5rem, 0) scale(0.8); }
  28%, 76% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -2.4rem, 0) scale(0.78); }
}

@keyframes cds-drive-car-photoreal-cruise {
  from { transform: translate3d(calc(-50% - 0.13rem), 0.08rem, 0) scale(0.998); }
  to { transform: translate3d(calc(-50% + 0.13rem), -0.06rem, 0) scale(1.004); }
}

@keyframes cds-drive-brake-arrival {
  0% { opacity: 0.28; filter: blur(4px); }
  34%, 76% { opacity: 0.95; filter: blur(3px); }
  100% { opacity: 0.52; filter: blur(4px); }
}

@media (max-width: 640px) {
  .cds-drive-environment-plate {
    object-position: 50% 50%;
  }

  .cds-drive-road {
    top: 47%;
    width: 100%;
  }

  .cds-drive-road-flow {
    inset-inline: -24%;
    clip-path: polygon(43% 0, 57% 0, 96% 100%, 4% 100%);
  }

  .cds-drive-road-streak-left { left: 17%; }
  .cds-drive-road-streak-right { right: 17%; }

  .cds-drive-car {
    bottom: -0.75rem;
    width: clamp(11rem, 54vw, 13.75rem);
  }

  .cds-drive-sign-logo .cds-theme-logo {
    --cds-logo-size: 3.25rem;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .cds-drive-car {
    bottom: -1rem;
    width: clamp(13rem, 30vw, 16rem);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cds-drive-environment-plate {
    object-position: 50% 52%;
  }

  .cds-drive-road {
    top: 44%;
  }

  .cds-drive-car {
    bottom: -2.2rem;
    width: clamp(9rem, 21vw, 12.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cds-drive-transition.is-reduced .cds-drive-environment,
  .cds-drive-transition.is-reduced .cds-drive-road,
  .cds-drive-transition.is-reduced .cds-drive-car {
    display: block !important;
    animation: none !important;
  }

  .cds-drive-transition.is-reduced .cds-drive-environment {
    opacity: 1;
    transform: scale(1.025);
  }

  .cds-drive-transition.is-reduced .cds-drive-road {
    opacity: 0.32;
    transform: none;
  }

  .cds-drive-transition.is-reduced .cds-drive-road-flow,
  .cds-drive-transition.is-reduced .cds-drive-road-centre,
  .cds-drive-transition.is-reduced .cds-drive-speed-lines {
    animation: none !important;
    opacity: 0;
  }

  .cds-drive-transition.is-reduced .cds-drive-car {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(0.96);
  }
}

/* Journey Home: supplied gear-selector and parking artwork over the shared road/car system. */
.cds-journey-parking-environment {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  overflow: hidden;
  background: #8aa7b7;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025);
  transform-origin: 50% 48%;
  will-change: opacity, transform;
}

.cds-drive-transition.is-route-journey-home.is-variant-gear-shift .cds-journey-parking-environment {
  display: block;
}

.cds-journey-parking-image,
.cds-journey-parking-marker,
.cds-journey-arrival-glow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
}

.cds-journey-parking-day {
  opacity: 1;
  filter: saturate(0.94) contrast(1.02) brightness(0.98);
}

.cds-journey-parking-night {
  opacity: 0;
  filter: saturate(0.98) contrast(1.07) brightness(0.96);
}

html[data-theme="dark"] .cds-journey-parking-day {
  opacity: 0;
}

html[data-theme="dark"] .cds-journey-parking-night {
  opacity: 1;
}

.cds-journey-parking-marker {
  z-index: 2;
  object-fit: fill;
  opacity: 0;
  transform: translate3d(0, 22%, 0) scale3d(0.78, 1.12, 1);
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

.cds-journey-arrival-glow {
  z-index: 4;
  object-fit: fill;
  opacity: 0;
  transform: translate3d(0, 10%, 0) scale3d(0.84, 1, 1);
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

.cds-journey-parking-depth {
  position: absolute;
  z-index: 5;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 8, 18, 0.05), transparent 38%, rgba(1, 5, 12, 0.22) 100%),
    radial-gradient(ellipse at 50% 54%, transparent 28%, rgba(1, 5, 12, 0.2) 76%, rgba(0, 3, 8, 0.42));
  animation: cds-journey-parking-light 3.8s ease-in-out infinite alternate;
}

html[data-theme="light"] .cds-journey-parking-depth,
html:not([data-theme="dark"]) .cds-journey-parking-depth {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 48%, rgba(2, 10, 17, 0.18) 100%),
    radial-gradient(ellipse at 50% 54%, transparent 38%, rgba(6, 20, 31, 0.12) 84%, rgba(2, 8, 14, 0.24));
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-parking-environment {
  animation: cds-journey-parking-handoff var(--cds-drive-student-departure) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-parking-environment {
  opacity: 1;
  animation: cds-journey-parking-arrival var(--cds-drive-student-arrival) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-parking-marker {
  animation: cds-journey-marker-approach var(--cds-drive-student-departure) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-parking-marker {
  animation: cds-journey-marker-arrival var(--cds-drive-student-arrival) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-arrival-glow {
  animation: cds-journey-arrival-confirm var(--cds-drive-student-arrival) ease-out both;
}

.cds-journey-gear-stage {
  --cds-gear-highlight-width: 20.6%;
  --cds-gear-d-left: 34.3%;
  --cds-gear-d-top: 27.7%;
  --cds-gear-n-left: 32.7%;
  --cds-gear-n-top: 19.1%;
  --cds-gear-p-left: 30.2%;
  --cds-gear-p-top: 4%;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -2%;
  width: min(55rem, 68vw);
  aspect-ratio: 3 / 2;
  opacity: 0;
  transform: translate3d(-2rem, -50%, 0) scale(0.94);
  transform-origin: 44% 50%;
  will-change: opacity, transform;
}

.cds-journey-gear-console-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1.6rem 2.8rem rgba(0, 4, 13, 0.58));
  user-select: none;
}

.cds-journey-gear-highlight {
  position: absolute;
  z-index: 2;
  top: var(--cds-gear-d-top);
  left: var(--cds-gear-d-left);
  display: block;
  width: var(--cds-gear-highlight-width);
  height: auto;
  filter: hue-rotate(52deg) saturate(0.9) brightness(1.12) drop-shadow(0 0 0.7rem rgba(151, 239, 95, 0.5));
  opacity: 0;
  will-change: top, left, opacity, filter;
}

.cds-journey-gear-readout {
  position: absolute;
  z-index: 3;
  right: 14%;
  bottom: 12%;
  display: grid;
  min-width: 6.6rem;
  padding: 0.52rem 0.72rem;
  border: 1px solid rgba(150, 195, 239, 0.3);
  border-radius: 0.65rem;
  background: rgba(3, 12, 24, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0.8rem 2rem rgba(0, 4, 13, 0.32);
  color: #f4f8fd;
  text-align: left;
  backdrop-filter: blur(8px);
}

.cds-journey-gear-readout small {
  color: rgba(196, 216, 237, 0.72);
  font-size: 0.56rem;
  font-weight: 760;
  line-height: 1;
  text-transform: uppercase;
}

.cds-journey-gear-readout strong {
  position: relative;
  display: block;
  min-height: 1.18rem;
  margin-top: 0.18rem;
  color: #bcf68d;
  font-size: 0.82rem;
  font-weight: 840;
  line-height: 1.18rem;
}

.cds-journey-gear-readout strong > span {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-gear-stage {
  animation: cds-journey-selector-out var(--cds-drive-student-departure) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-gear-stage {
  top: 24%;
  left: 1%;
  width: min(37rem, 45vw);
  animation: cds-journey-selector-in var(--cds-drive-student-arrival) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-gear-highlight {
  animation: cds-journey-highlight-drive-neutral var(--cds-drive-student-departure) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-gear-highlight {
  animation: cds-journey-highlight-neutral-park var(--cds-drive-student-arrival) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-gear-drive {
  animation: cds-journey-readout-drive var(--cds-drive-student-departure) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-journey-gear-neutral {
  animation: cds-journey-readout-neutral-out var(--cds-drive-student-departure) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-gear-neutral {
  animation: cds-journey-readout-neutral-in var(--cds-drive-student-arrival) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-gear-park {
  animation: cds-journey-readout-park var(--cds-drive-student-arrival) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift .cds-drive-scene-copy {
  top: 22%;
  right: 8%;
  left: auto;
  width: min(25rem, 34vw);
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(160, 197, 235, 0.25);
  border-radius: 0.7rem;
  background: rgba(2, 11, 24, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.8rem 2.4rem rgba(0, 5, 16, 0.2);
  backdrop-filter: blur(7px);
  text-align: right;
  transform: none;
  animation: cds-journey-destination-label var(--drive-transition-duration) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift .cds-drive-scene-copy strong {
  color: #f8fbff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-drive-car {
  animation: cds-journey-car-approach var(--cds-drive-student-departure) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-drive-car {
  animation: cds-journey-car-park var(--cds-drive-student-arrival) var(--cds-drive-ease) both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-drive-brake-light,
.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift:not(.is-incoming) .cds-drive-brake-spill {
  animation: cds-journey-brake-approach var(--cds-drive-student-departure) ease-out both;
}

.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-drive-brake-light,
.cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-drive-brake-spill {
  animation: cds-journey-brake-settle var(--cds-drive-student-arrival) ease-out both;
}

.cds-drive-car-plate {
  top: 50.7%;
  left: 50%;
  display: block;
  width: 29.7%;
  height: auto;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  opacity: 0.98;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.58));
  transform: translate3d(-50%, -43%, 0) perspective(180px) rotateX(1deg);
}

html[data-theme="dark"] .cds-drive-car-plate {
  filter: brightness(0.86) contrast(1.08) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.72));
  box-shadow: none;
}

@keyframes cds-journey-parking-handoff {
  0%, 60% { opacity: 0; transform: scale(1.055); }
  72% { opacity: 0.18; }
  86% { opacity: 0.72; }
  100% { opacity: 1; transform: scale(1.025); }
}

@keyframes cds-journey-parking-arrival {
  0% { opacity: 1; transform: scale(1.038); }
  100% { opacity: 1; transform: scale(1.015); }
}

@keyframes cds-journey-marker-approach {
  0%, 70% { opacity: 0; transform: translate3d(0, 24%, 0) scale3d(0.74, 1.16, 1); }
  86% { opacity: 0.24; }
  100% { opacity: 0.4; transform: translate3d(0, 22%, 0) scale3d(0.75, 1.1, 1); }
}

@keyframes cds-journey-marker-arrival {
  0% { opacity: 0.4; transform: translate3d(0, 22%, 0) scale3d(0.75, 1.1, 1); }
  66% { opacity: 0.58; }
  100% { opacity: 0.48; transform: translate3d(0, 21.5%, 0) scale3d(0.745, 1.095, 1); }
}

@keyframes cds-journey-arrival-confirm {
  0%, 62% { opacity: 0; transform: translate3d(0, 11%, 0) scale3d(0.8, 0.94, 1); }
  78% { opacity: 0.72; }
  100% { opacity: 0.34; transform: translate3d(0, 10%, 0) scale3d(0.84, 1, 1); }
}

@keyframes cds-journey-parking-light {
  from { opacity: 0.9; }
  to { opacity: 1; }
}

@keyframes cds-journey-selector-out {
  0%, 10% { opacity: 0; transform: translate3d(-2rem, -50%, 0) scale(0.92); }
  18%, 68% { opacity: 1; transform: translate3d(0, -50%, 0) scale(1); }
  82% { opacity: 0.84; transform: translate3d(-1.2rem, -50%, 0) scale(0.84); }
  100% { opacity: 0.62; transform: translate3d(-2.2rem, -50%, 0) scale(0.7); }
}

@keyframes cds-journey-selector-in {
  0% { opacity: 0.62; transform: translate3d(-1rem, -50%, 0) scale(0.82); }
  24%, 82% { opacity: 0.96; transform: translate3d(0, -50%, 0) scale(0.9); }
  100% { opacity: 0.72; transform: translate3d(0, -50%, 0) scale(0.88); }
}

@keyframes cds-journey-highlight-drive-neutral {
  0%, 12% { top: var(--cds-gear-d-top); left: var(--cds-gear-d-left); opacity: 0; }
  18%, 67% { top: var(--cds-gear-d-top); left: var(--cds-gear-d-left); opacity: 1; }
  82%, 100% { top: var(--cds-gear-n-top); left: var(--cds-gear-n-left); opacity: 1; }
}

@keyframes cds-journey-highlight-neutral-park {
  0%, 62% { top: var(--cds-gear-n-top); left: var(--cds-gear-n-left); opacity: 1; filter: hue-rotate(52deg) saturate(0.9) brightness(1.12) drop-shadow(0 0 0.7rem rgba(151, 239, 95, 0.5)); }
  77%, 100% { top: var(--cds-gear-p-top); left: var(--cds-gear-p-left); opacity: 1; filter: hue-rotate(4deg) saturate(0.78) brightness(1.18) drop-shadow(0 0 0.8rem rgba(255, 211, 93, 0.5)); }
}

@keyframes cds-journey-readout-drive { 0%, 12% { opacity: 0; } 18%, 68% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes cds-journey-readout-neutral-out { 0%, 70% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes cds-journey-readout-neutral-in { 0%, 62% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes cds-journey-readout-park { 0%, 68% { opacity: 0; } 78%, 100% { opacity: 1; } }

@keyframes cds-journey-destination-label {
  0%, 18% { opacity: 0; transform: translate3d(0, 0.8rem, 0); }
  32%, 84% { opacity: 1; transform: none; }
  100% { opacity: 0.78; transform: none; }
}

@keyframes cds-journey-car-approach {
  0% { opacity: 0; transform: translate3d(-50%, 2.2rem, 0) scale(0.76); }
  18% { opacity: 1; }
  30%, 60% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  76% { opacity: 1; transform: translate3d(-50%, calc(-1rem - 2vh), 0) scale(0.95); }
  100% { opacity: 1; transform: translate3d(-50%, calc(-2rem - 5vh), 0) scale(0.88); }
}

@keyframes cds-journey-car-park {
  0% { opacity: 1; transform: translate3d(-50%, calc(-2rem - 5vh), 0) scale(0.88); }
  54% { opacity: 1; transform: translate3d(-50%, calc(-2rem - 9vh), 0) scale(0.8); }
  78% { opacity: 1; transform: translate3d(-50%, calc(-2rem - 11vh), 0) scale(0.76); }
  88% { opacity: 1; transform: translate3d(-50%, calc(-1.8rem - 10.8vh), 0) scale(0.755); }
  100% { opacity: 1; transform: translate3d(-50%, calc(-2rem - 11vh), 0) scale(0.76); }
}

@keyframes cds-journey-brake-approach {
  0%, 57% { opacity: 0.28; filter: blur(4px); }
  72% { opacity: 0.62; }
  100% { opacity: 0.94; filter: blur(3px); }
}

@keyframes cds-journey-brake-settle {
  0% { opacity: 0.94; filter: blur(3px); }
  54% { opacity: 1; filter: blur(2.6px); }
  82% { opacity: 0.72; filter: blur(3.2px); }
  100% { opacity: 0.48; filter: blur(4px); }
}

@media (min-width: 641px) and (max-width: 900px) {
  .cds-journey-gear-stage {
    top: 46%;
    left: -8%;
    width: 84vw;
  }

  .cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-gear-stage {
    top: 21%;
    left: -7%;
    width: 62vw;
  }

  .cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift .cds-drive-scene-copy {
    top: 12%;
    right: 6%;
    width: 38vw;
  }
}

@media (max-width: 640px) {
  .cds-journey-parking-image {
    object-position: 50% 50%;
  }

  .cds-journey-parking-marker {
    object-fit: cover;
    transform: translate3d(0, 18%, 0) scale3d(0.78, 1.06, 1);
  }

  .cds-journey-arrival-glow {
    object-fit: cover;
    transform: translate3d(0, 8%, 0) scale3d(0.84, 0.98, 1);
  }

  .cds-journey-gear-stage {
    top: 45%;
    left: -7.5%;
    width: 115vw;
  }

  .cds-journey-gear-readout {
    right: 11%;
    bottom: 10%;
    min-width: 5.6rem;
    padding: 0.42rem 0.58rem;
  }

  .cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-gear-stage {
    top: 20%;
    left: -12%;
    width: 88vw;
  }

  .cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift .cds-drive-scene-copy {
    top: 7%;
    right: 5%;
    width: 58vw;
  }

  .cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift .cds-drive-scene-copy small {
    font-size: 0.58rem;
  }

  .cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift .cds-drive-scene-copy strong {
    font-size: clamp(1rem, 5.4vw, 1.3rem);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cds-journey-gear-stage {
    top: 49%;
    left: -1%;
    width: min(36rem, 56vw);
  }

  .cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift.is-incoming .cds-journey-gear-stage {
    top: 30%;
    left: -2%;
    width: min(25rem, 40vw);
  }

  .cds-drive-transition.is-visible.is-route-journey-home.is-variant-gear-shift .cds-drive-scene-copy {
    top: 12%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cds-drive-transition.is-reduced.is-route-journey-home.is-variant-gear-shift .cds-journey-parking-environment {
    display: block;
    opacity: 1;
    transform: scale(1.015);
    animation: none !important;
  }

  .cds-drive-transition.is-reduced.is-route-journey-home.is-variant-gear-shift .cds-journey-parking-depth {
    animation: none !important;
  }

  .cds-drive-transition.is-reduced.is-route-journey-home.is-variant-gear-shift .cds-journey-gear-stage {
    display: none;
    animation: none !important;
  }

  .cds-drive-transition.is-reduced.is-route-journey-home.is-variant-gear-shift .cds-journey-parking-marker {
    opacity: 0.52;
    animation: none !important;
  }

  .cds-drive-transition.is-reduced.is-route-journey-home.is-variant-gear-shift .cds-journey-arrival-glow {
    opacity: 0.2;
    animation: none !important;
  }

  .cds-drive-transition.is-reduced.is-route-journey-home.is-variant-gear-shift .cds-drive-car {
    opacity: 1;
    transform: translate3d(-50%, calc(-2rem - 11vh), 0) scale(0.76);
    animation: none !important;
  }
}

/* Motion realism polish: let the photographic road carry travel and keep overlays atmospheric. */
.cds-drive-transition.is-visible.is-student-transition .cds-drive-environment {
  opacity: 1;
  transform: none;
  animation: none;
}

.cds-drive-transition.is-visible.is-student-transition:not(.is-incoming) .cds-drive-environment-plate {
  animation: cds-drive-photo-scene-departure var(--cds-drive-student-departure) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cds-drive-transition.is-visible.is-student-transition.is-incoming .cds-drive-environment-plate {
  animation: cds-drive-photo-scene-arrival var(--cds-drive-student-arrival) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cds-drive-transition.is-student-transition .cds-drive-speed-lines,
.cds-drive-transition.is-student-transition .cds-drive-road-streak,
.cds-drive-transition.is-student-transition .cds-drive-road-centre {
  display: none;
  opacity: 0;
  animation: none;
}

.cds-drive-transition.is-student-transition .cds-drive-road-flow {
  inset: -12% 5% -28%;
  background:
    radial-gradient(ellipse at 50% 7%, rgba(155, 205, 247, 0.12), transparent 50%),
    linear-gradient(90deg, transparent 31%, rgba(229, 241, 251, 0.035) 49%, rgba(229, 241, 251, 0.025) 52%, transparent 69%);
  clip-path: polygon(43% 0, 57% 0, 93% 100%, 7% 100%);
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0.2;
  transform: scaleY(0.9);
  transform-origin: 50% 0;
}

html[data-theme="dark"] .cds-drive-transition.is-student-transition .cds-drive-road-flow {
  opacity: 0.3;
}

.cds-drive-transition.is-visible.is-student-transition:not(.is-incoming) .cds-drive-road-flow {
  animation: cds-drive-real-road-sheen-departure var(--cds-drive-student-departure) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cds-drive-transition.is-visible.is-student-transition.is-incoming .cds-drive-road-flow {
  animation: cds-drive-real-road-sheen-arrival var(--cds-drive-student-arrival) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cds-drive-transition.is-visible.is-student-transition:not(.is-incoming) .cds-drive-road-reflection-layer {
  animation: cds-drive-road-reflection-departure var(--cds-drive-student-departure) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cds-drive-transition.is-visible.is-student-transition.is-incoming .cds-drive-road-reflection-layer {
  animation: cds-drive-road-reflection-arrival var(--cds-drive-student-arrival) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cds-drive-photo-scene-departure {
  0% { transform: translate3d(0, 0.45%, 0) scale(1.032); }
  36% { transform: translate3d(0, 0, 0) scale(1.045); }
  72% { transform: translate3d(0, -0.8%, 0) scale(1.066); }
  100% { transform: translate3d(0, -1.55%, 0) scale(1.084); }
}

@keyframes cds-drive-photo-scene-arrival {
  0% { transform: translate3d(0, -1.55%, 0) scale(1.084); }
  48% { transform: translate3d(0, -2.15%, 0) scale(1.1); }
  100% { transform: translate3d(0, -2.55%, 0) scale(1.112); }
}

@keyframes cds-drive-real-road-sheen-departure {
  0% { opacity: 0.08; transform: scaleY(0.88); }
  52% { opacity: 0.2; }
  100% { opacity: 0.13; transform: scaleY(1.14); }
}

@keyframes cds-drive-real-road-sheen-arrival {
  0% { opacity: 0.13; transform: scaleY(1.14); }
  58% { opacity: 0.24; }
  100% { opacity: 0.08; transform: scaleY(1.28); }
}

@keyframes cds-drive-road-reflection-departure {
  0% { opacity: 0.32; transform: translate3d(0, 2%, 0) scaleY(0.9); }
  64% { opacity: 0.58; }
  100% { opacity: 0.44; transform: translate3d(0, 7%, 0) scaleY(1.12); }
}

@keyframes cds-drive-road-reflection-arrival {
  0% { opacity: 0.44; transform: translate3d(0, 7%, 0) scaleY(1.12); }
  64% { opacity: 0.54; }
  100% { opacity: 0.24; transform: translate3d(0, 11%, 0) scaleY(1.24); }
}

/* My Timetable: steady sign approach and a continuous pass into the destination page. */
@keyframes cds-timetable-sign-approach {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -34%, 0) scale(0.28) rotateZ(-0.45deg);
  }
  16% { opacity: 0.42; }
  44% {
    opacity: 1;
    transform: translate3d(-50%, -45%, 0) scale(0.72) rotateZ(-0.24deg);
  }
  68% {
    opacity: 1;
    transform: translate3d(-50%, -49.4%, 0) scale(0.955) rotateZ(-0.05deg);
  }
  82%, 94% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, -50.1%, 0) scale(1.022) rotateZ(0deg);
  }
}

@keyframes cds-timetable-sign-pass {
  0% {
    opacity: 1;
    transform: translate3d(-50%, -50.1%, 0) scale(1.022);
  }
  42% {
    opacity: 1;
    transform: translate3d(-50%, -58%, 0) scale(1.13);
  }
  76% { opacity: 0.78; }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -103%, 0) scale(1.5);
  }
}

/* Journey Home: continuous road-to-bay handoff, progressive braking, and suspension settle. */
@keyframes cds-journey-parking-handoff {
  0%, 50% { opacity: 0; transform: translate3d(0, 0.8%, 0) scale(1.07); }
  64% { opacity: 0.18; }
  84% { opacity: 0.78; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.028); }
}

@keyframes cds-journey-parking-arrival {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.028); }
  62% { opacity: 1; transform: translate3d(0, -0.08%, 0) scale(1.019); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.015); }
}

@keyframes cds-journey-car-approach {
  0% { opacity: 0; transform: translate3d(-50%, 1.4rem, 0) scale(0.84); }
  16% { opacity: 1; transform: translate3d(-50%, 0.7rem, 0) scale(0.92); }
  38% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  66% { opacity: 1; transform: translate3d(-50%, calc(-0.55rem - 1.2vh), 0) scale(0.975); }
  84% { opacity: 1; transform: translate3d(-50%, calc(-1.25rem - 3.2vh), 0) scale(0.93); }
  100% { opacity: 1; transform: translate3d(-50%, calc(-1.8rem - 5.2vh), 0) scale(0.89); }
}

@keyframes cds-journey-car-park {
  0% { opacity: 1; transform: translate3d(-50%, calc(-1.8rem - 5.2vh), 0) scale(0.89); }
  38% { opacity: 1; transform: translate3d(-50%, calc(-1.92rem - 8.1vh), 0) scale(0.825); }
  68% { opacity: 1; transform: translate3d(-50%, calc(-2rem - 10.6vh), 0) scale(0.77); }
  82% { opacity: 1; transform: translate3d(-50%, calc(-2.05rem - 11.2vh), 0) scale(0.758); }
  91% { opacity: 1; transform: translate3d(-50%, calc(-1.96rem - 11vh), 0) scale(0.762); }
  100% { opacity: 1; transform: translate3d(-50%, calc(-2rem - 11.15vh), 0) scale(0.76); }
}

@keyframes cds-journey-brake-approach {
  0%, 52% { opacity: 0.26; filter: blur(4px); }
  68% { opacity: 0.46; filter: blur(3.7px); }
  84% { opacity: 0.72; filter: blur(3.25px); }
  100% { opacity: 0.94; filter: blur(3px); }
}

@keyframes cds-journey-brake-settle {
  0% { opacity: 0.94; filter: blur(3px); }
  34% { opacity: 1; filter: blur(2.65px); }
  66% { opacity: 0.82; filter: blur(3px); }
  86% { opacity: 0.58; filter: blur(3.55px); }
  100% { opacity: 0.48; filter: blur(4px); }
}

/* Study Materials: supplied photoreal tunnel plates replace the legacy CSS tunnel. */
.cds-drive-transition.is-route-study-materials.is-variant-tunnel {
  --cds-tunnel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: #020407;
}

.cds-drive-transition.is-route-study-materials.is-variant-tunnel .cds-drive-scenes {
  z-index: 2;
}

.cds-drive-transition.is-route-study-materials.is-variant-tunnel .cds-drive-road,
.cds-drive-transition.is-route-study-materials.is-variant-tunnel .cds-drive-speed-lines,
.cds-drive-transition.is-route-study-materials.is-variant-tunnel .cds-drive-dashboard-bridge,
.cds-drive-transition.is-route-study-materials.is-variant-tunnel .cds-drive-logo-moment {
  display: none;
}

.cds-drive-scene-tunnel,
.cds-tunnel-journey,
.cds-tunnel-approach,
.cds-tunnel-interior-stage,
.cds-tunnel-exit-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cds-tunnel-journey {
  isolation: isolate;
  background: #020407;
}

.cds-tunnel-plate,
.cds-tunnel-layer {
  position: absolute;
  inset: -2%;
  display: block;
  width: 104%;
  height: 104%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  will-change: opacity, transform;
}

.cds-tunnel-approach {
  z-index: 1;
  opacity: 0;
  background: #07111a;
}

.cds-tunnel-entrance {
  transform-origin: 50% 48%;
}

.cds-tunnel-entrance-night,
.cds-tunnel-exit-night {
  opacity: 0;
}

html[data-theme="dark"] .cds-tunnel-entrance-day,
html[data-theme="dark"] .cds-tunnel-exit-day {
  opacity: 0;
}

html[data-theme="dark"] .cds-tunnel-entrance-night,
html[data-theme="dark"] .cds-tunnel-exit-night {
  opacity: 1;
}

.cds-tunnel-entrance-depth {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 17%, rgba(0, 5, 11, 0.05) 36%, rgba(0, 3, 8, 0.34) 100%),
    linear-gradient(180deg, rgba(2, 8, 14, 0.04), rgba(1, 4, 8, 0.24));
  pointer-events: none;
}

html:not([data-theme="dark"]) .cds-tunnel-entrance-depth,
html[data-theme="light"] .cds-tunnel-entrance-depth {
  background: radial-gradient(ellipse at 50% 48%, transparent 0 22%, rgba(3, 10, 17, 0.04) 56%, rgba(2, 8, 14, 0.2) 100%);
}

.cds-tunnel-interior-stage {
  z-index: 2;
  opacity: 0;
  background: #030405;
}

.cds-tunnel-interior {
  z-index: 1;
  filter: saturate(0.98) contrast(1.06) brightness(0.9);
  transform-origin: 50% 47%;
}

html[data-theme="dark"] .cds-tunnel-interior {
  filter: saturate(0.92) contrast(1.12) brightness(0.72);
}

.cds-tunnel-ceiling-lights {
  z-index: 4;
  opacity: 0;
  object-position: 50% 42%;
  filter: brightness(1.06) drop-shadow(0 0 0.65rem rgba(255, 224, 159, 0.3));
  mix-blend-mode: screen;
  transform-origin: 50% 43%;
}

.cds-tunnel-wall-lights {
  z-index: 5;
  opacity: 0;
  object-position: 50% 62%;
  filter: saturate(1.05) drop-shadow(0 0 0.55rem rgba(255, 139, 68, 0.32));
  mix-blend-mode: screen;
  transform-origin: 50% 48%;
}

.cds-tunnel-road-reflection {
  z-index: 3;
  opacity: 0;
  object-position: 50% 70%;
  filter: saturate(1.04) contrast(1.06);
  mix-blend-mode: screen;
  transform-origin: 50% 46%;
}

.cds-tunnel-atmosphere {
  z-index: 6;
  opacity: 0;
  object-position: 50% 46%;
  filter: brightness(0.82);
  mix-blend-mode: screen;
  transform-origin: 50% 45%;
}

.cds-tunnel-checkpoint {
  position: absolute;
  z-index: 8;
  top: 12%;
  left: 50%;
  width: clamp(18rem, 36vw, 31rem);
  aspect-ratio: 378 / 150;
  opacity: 0;
  transform: translate3d(-50%, 1.2rem, 0) scale(0.72);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.cds-tunnel-checkpoint-frame,
.cds-tunnel-checkpoint-glow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}

.cds-tunnel-checkpoint-frame {
  z-index: 2;
  filter: drop-shadow(0 0.7rem 1rem rgba(0, 0, 0, 0.66));
}

.cds-tunnel-checkpoint-glow {
  z-index: 1;
  opacity: 0.76;
  filter: blur(0.15rem) brightness(1.08);
  mix-blend-mode: screen;
}

.cds-tunnel-checkpoint-copy {
  position: absolute;
  z-index: 3;
  inset: 23% 12% 22%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.65rem, 1.4vw, 1.1rem);
  color: #f7f8f3;
  text-align: left;
}

.cds-tunnel-checkpoint-copy .cds-theme-logo {
  --cds-logo-size: clamp(2.6rem, 4.2vw, 4.25rem);
  filter: drop-shadow(0 0 0.8rem rgba(255, 196, 50, 0.36));
}

.cds-tunnel-checkpoint-copy span,
.cds-tunnel-checkpoint-copy small,
.cds-tunnel-checkpoint-copy strong {
  display: block;
  min-width: 0;
  letter-spacing: 0;
}

.cds-tunnel-checkpoint-copy small {
  color: #f5c648;
  font-size: clamp(0.58rem, 0.85vw, 0.72rem);
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.cds-tunnel-checkpoint-copy strong {
  margin-top: 0.2rem;
  overflow: hidden;
  color: #f8fafc;
  font-size: clamp(0.95rem, 1.65vw, 1.35rem);
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cds-tunnel-exit-stage {
  z-index: 9;
  background: #020407;
  clip-path: circle(0 at 50% 42%);
  opacity: 0;
  will-change: clip-path, opacity, transform;
}

.cds-tunnel-exit {
  z-index: 1;
  filter: saturate(0.98) contrast(1.04) brightness(0.94);
  transform-origin: 50% 43%;
}

html[data-theme="dark"] .cds-tunnel-exit {
  filter: saturate(0.94) contrast(1.1) brightness(0.78);
}

.cds-tunnel-exit-glow {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
  opacity: 0;
  filter: brightness(0.84) saturate(0.86);
  mix-blend-mode: screen;
  transform-origin: 50% 43%;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-approach {
  animation: cds-tunnel-approach-departure var(--cds-drive-student-departure) var(--cds-tunnel-ease) both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-entrance {
  animation: cds-tunnel-entrance-drive var(--cds-drive-student-departure) var(--cds-tunnel-ease) both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-interior-stage {
  animation: cds-tunnel-interior-departure var(--cds-drive-student-departure) var(--cds-tunnel-ease) both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-interior {
  animation: cds-tunnel-interior-travel 1120ms ease-in-out 260ms infinite alternate;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-ceiling-lights {
  animation: cds-tunnel-ceiling-pass 520ms linear 290ms infinite;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-wall-lights {
  animation: cds-tunnel-wall-pass 610ms linear 300ms infinite;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-road-reflection {
  animation: cds-tunnel-reflection-pass 680ms linear 280ms infinite;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-atmosphere {
  animation: cds-tunnel-atmosphere-travel 980ms ease-in-out 300ms infinite alternate;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-tunnel-checkpoint {
  animation: cds-tunnel-checkpoint-departure 920ms var(--cds-tunnel-ease) 145ms both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel:not(.is-incoming) .cds-drive-car {
  animation: cds-tunnel-car-departure var(--cds-drive-student-departure) var(--cds-tunnel-ease) both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-interior-stage {
  animation: cds-tunnel-interior-arrival var(--cds-drive-student-arrival) ease-out both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-interior {
  animation: cds-tunnel-interior-arrival-travel var(--cds-drive-student-arrival) ease-out both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-ceiling-lights {
  animation: cds-tunnel-ceiling-arrival var(--cds-drive-student-arrival) ease-out both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-wall-lights {
  animation: cds-tunnel-wall-arrival var(--cds-drive-student-arrival) ease-out both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-road-reflection {
  animation: cds-tunnel-reflection-arrival var(--cds-drive-student-arrival) ease-out both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-atmosphere {
  animation: cds-tunnel-atmosphere-arrival var(--cds-drive-student-arrival) ease-out both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-exit-stage {
  animation: cds-tunnel-exit-reveal var(--cds-drive-student-arrival) var(--cds-tunnel-ease) both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-exit {
  animation: cds-tunnel-exit-travel var(--cds-drive-student-arrival) var(--cds-tunnel-ease) both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-tunnel-exit-glow {
  animation: cds-tunnel-exit-light var(--cds-drive-student-arrival) ease-out both;
}

.cds-drive-transition.is-visible.is-route-study-materials.is-variant-tunnel.is-incoming .cds-drive-car {
  animation: cds-tunnel-car-arrival var(--cds-drive-student-arrival) ease-out both;
}

@keyframes cds-tunnel-approach-departure {
  0% { opacity: 0; transform: scale(1.015); }
  8%, 35% { opacity: 1; }
  52%, 100% { opacity: 0; transform: scale(1.04); }
}

@keyframes cds-tunnel-entrance-drive {
  0% { transform: translate3d(0, 0.6%, 0) scale(1.025); }
  34% { transform: translate3d(0, -0.5%, 0) scale(1.14); }
  58% { transform: translate3d(0, 3.8%, 0) scale(1.62); }
  100% { transform: translate3d(0, 7%, 0) scale(1.84); }
}

@keyframes cds-tunnel-interior-departure {
  0%, 24% { opacity: 0; transform: scale(1.035); }
  39%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes cds-tunnel-interior-travel {
  from { transform: translate3d(0, -0.25%, 0) scale(1.045); }
  to { transform: translate3d(0, 1.4%, 0) scale(1.105); }
}

@keyframes cds-tunnel-ceiling-pass {
  0% { opacity: 0; transform: translate3d(0, -2.5%, 0) scale(0.82); }
  14% { opacity: 0.78; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 8%, 0) scale(1.42); }
}

@keyframes cds-tunnel-wall-pass {
  0% { opacity: 0; transform: translate3d(0, -1.5%, 0) scale(0.86); }
  16% { opacity: 0.72; }
  68% { opacity: 0.92; }
  100% { opacity: 0; transform: translate3d(0, 9%, 0) scale(1.58); }
}

@keyframes cds-tunnel-reflection-pass {
  0% { opacity: 0; transform: translate3d(0, -2%, 0) scale(0.9); }
  18% { opacity: 0.35; }
  72% { opacity: 0.62; }
  100% { opacity: 0; transform: translate3d(0, 10%, 0) scale(1.46); }
}

@keyframes cds-tunnel-atmosphere-travel {
  from { opacity: 0.18; transform: scale(1.02); }
  to { opacity: 0.48; transform: scale(1.14); }
}

@keyframes cds-tunnel-checkpoint-departure {
  0%, 33% { opacity: 0; transform: translate3d(-50%, 1.2rem, 0) scale(0.68); }
  48% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(0.9); }
  59%, 78% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -1.2rem, 0) scale(1.16); }
}

@keyframes cds-tunnel-car-departure {
  0% { opacity: 0; transform: translate3d(-50%, 1.1rem, 0) scale(0.92); }
  13% { opacity: 1; }
  27% { transform: translate3d(-50%, 0, 0) scale(1); }
  48% { transform: translate3d(calc(-50% - 0.16rem), 0.08rem, 0) scale(0.995); }
  70% { transform: translate3d(calc(-50% + 0.12rem), -0.06rem, 0) scale(1.005); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}

@keyframes cds-tunnel-interior-arrival {
  0%, 42% { opacity: 1; }
  76%, 100% { opacity: 0; }
}

@keyframes cds-tunnel-interior-arrival-travel {
  0% { transform: translate3d(0, 0.6%, 0) scale(1.09); }
  100% { transform: translate3d(0, 3.2%, 0) scale(1.22); }
}

@keyframes cds-tunnel-ceiling-arrival {
  0% { opacity: 0.72; transform: translate3d(0, 1%, 0) scale(1.04); }
  66% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(0, 11%, 0) scale(1.65); }
}

@keyframes cds-tunnel-wall-arrival {
  0% { opacity: 0.62; transform: translate3d(0, 0, 0) scale(1.04); }
  64% { opacity: 0.86; }
  100% { opacity: 0; transform: translate3d(0, 12%, 0) scale(1.82); }
}

@keyframes cds-tunnel-reflection-arrival {
  0% { opacity: 0.42; transform: translate3d(0, 0, 0) scale(1.02); }
  68% { opacity: 0.58; }
  100% { opacity: 0; transform: translate3d(0, 12%, 0) scale(1.66); }
}

@keyframes cds-tunnel-atmosphere-arrival {
  0% { opacity: 0.4; transform: scale(1.08); }
  68% { opacity: 0.56; }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes cds-tunnel-exit-reveal {
  0%, 14% { opacity: 0; clip-path: circle(2% at 50% 42%); }
  25% { opacity: 0.55; }
  58% { opacity: 1; clip-path: circle(28% at 50% 42%); }
  100% { opacity: 1; clip-path: circle(88% at 50% 42%); }
}

@keyframes cds-tunnel-exit-travel {
  0% { transform: scale(0.96); }
  58% { transform: scale(1.02); }
  100% { transform: translate3d(0, -1.5%, 0) scale(1.09); }
}

@keyframes cds-tunnel-exit-light {
  0%, 14% { opacity: 0; transform: scale(0.78); }
  48% { opacity: 0.62; }
  72% { opacity: 0.78; transform: scale(1.12); }
  100% { opacity: 0.18; transform: scale(1.34); }
}

@keyframes cds-tunnel-car-arrival {
  0% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  46% { opacity: 1; transform: translate3d(-50%, -0.12rem, 0) scale(0.985); }
  76% { opacity: 0.92; transform: translate3d(-50%, -0.35rem, 0) scale(0.95); }
  100% { opacity: 0; transform: translate3d(-50%, -0.8rem, 0) scale(0.9); }
}

@media (max-width: 640px) {
  .cds-drive-transition.is-route-study-materials.is-variant-tunnel .cds-drive-car {
    bottom: -0.8rem;
    width: clamp(10.25rem, 47vw, 12.5rem);
  }

  .cds-tunnel-plate,
  .cds-tunnel-layer {
    inset: -1% -18%;
    width: 136%;
    height: 102%;
    object-position: 50% 50%;
  }

  .cds-tunnel-checkpoint {
    top: 14%;
    width: min(21rem, 91vw);
  }

  .cds-tunnel-checkpoint-copy {
    inset: 22% 11% 21%;
    gap: 0.58rem;
  }

  .cds-tunnel-checkpoint-copy .cds-theme-logo {
    --cds-logo-size: 2.7rem;
  }

  .cds-tunnel-checkpoint-copy strong {
    font-size: clamp(0.82rem, 4vw, 1.05rem);
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .cds-drive-transition.is-route-study-materials.is-variant-tunnel .cds-drive-car {
    bottom: -1.1rem;
    width: clamp(12.5rem, 31vw, 15.5rem);
  }

  .cds-tunnel-checkpoint {
    top: 13%;
    width: clamp(21rem, 48vw, 27rem);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cds-tunnel-checkpoint {
    top: 4%;
    width: min(20rem, 44vw);
  }

  .cds-tunnel-checkpoint-copy .cds-theme-logo {
    --cds-logo-size: 2.45rem;
  }

  .cds-tunnel-checkpoint-copy strong {
    font-size: 0.9rem;
  }

  .cds-drive-transition.is-route-study-materials.is-variant-tunnel .cds-drive-car {
    bottom: -2.7rem;
    width: clamp(8.5rem, 21vw, 11.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-approach,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-exit-stage {
    display: none;
  }

  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-interior-stage,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-interior,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-checkpoint,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-drive-car {
    animation: none !important;
  }

  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-interior-stage,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-interior,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-checkpoint {
    opacity: 1;
    transform: none;
  }

  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-ceiling-lights,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-wall-lights,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-road-reflection,
  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-atmosphere {
    animation: none !important;
    opacity: 0.24;
    transform: none;
  }

  .cds-drive-transition.is-reduced.is-route-study-materials.is-variant-tunnel .cds-tunnel-checkpoint {
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Final motion overrides must follow the legacy transition keyframes above. */
@keyframes cds-drive-photo-scene-departure {
  0% { transform: translate3d(0, 0.08%, 0) scale(1.018); }
  52% { transform: translate3d(-0.04%, 0, 0) scale(1.022); }
  100% { transform: translate3d(0.04%, -0.08%, 0) scale(1.026); }
}

@keyframes cds-drive-photo-scene-arrival {
  0% { transform: translate3d(0.04%, -0.08%, 0) scale(1.026); }
  100% { transform: translate3d(0, -0.12%, 0) scale(1.03); }
}

@keyframes cds-journey-car-approach {
  0% { opacity: 0; transform: translate3d(-50%, 0.9rem, 0) scale(0.94); }
  18% { opacity: 1; transform: translate3d(-50%, 0.08rem, 0) scale(0.99); }
  42% { transform: translate3d(calc(-50% - 0.1rem), 0.04rem, 0) scale(1); }
  72% { transform: translate3d(calc(-50% + 0.08rem), -0.04rem, 0) scale(0.995); }
  100% { opacity: 1; transform: translate3d(-50%, -0.18rem, 0) scale(0.97); }
}

@keyframes cds-journey-car-park {
  0% { opacity: 1; transform: translate3d(-50%, -0.18rem, 0) scale(0.97); }
  58% { transform: translate3d(calc(-50% - 0.06rem), -0.28rem, 0) scale(0.945); }
  82% { transform: translate3d(-50%, -0.32rem, 0) scale(0.935); }
  91% { transform: translate3d(-50%, -0.24rem, 0) scale(0.94); }
  100% { opacity: 1; transform: translate3d(-50%, -0.28rem, 0) scale(0.938); }
}