:root {
  --motion-fast: 180ms;
  --motion-base: 420ms;
  --motion-slow: 760ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Entrada automática: el parabrisas se transforma en el hero real. */
body.vehicle-entry-active {
  overflow: hidden;
}

.vehicle-entry {
  --entry-duration: 3550ms;
  position: fixed;
  z-index: 5000;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #030b14;
  opacity: 1;
  transition: opacity 680ms cubic-bezier(.22, 1, .36, 1), visibility 680ms;
  isolation: isolate;
}

.vehicle-entry.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vehicle-entry__world {
  position: absolute;
  inset: 0;
  transform: scale(1.16) translateY(5%);
  animation: vehicle-board var(--entry-duration) cubic-bezier(.2, .78, .18, 1) both;
}

.vehicle-entry__windshield {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgb(2 11 22 / .76), rgb(2 11 22 / .12) 54%, rgb(2 11 22 / .32)),
    url('/images/hero-flota-mixta.webp') center 48% / cover no-repeat;
  filter: brightness(.46) saturate(.72) blur(1px);
  transform: scale(1.16);
  animation: windshield-focus var(--entry-duration) cubic-bezier(.16, 1, .3, 1) both;
}

.vehicle-entry__windshield::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 28%, rgb(255 255 255 / .13) 43%, transparent 56%);
  transform: translateX(-100%);
  animation: windshield-reflection var(--entry-duration) ease-out both;
}

.vehicle-entry__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -8%;
  width: 62vw;
  height: 42vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(245 168 0 / .2), transparent 68%);
  transform: translateX(-50%);
  opacity: 0;
  animation: ignition-glow var(--entry-duration) ease both;
}

.vehicle-entry__pillar,
.vehicle-entry__roof,
.vehicle-entry__dashboard {
  position: absolute;
  background: linear-gradient(135deg, #111b26, #02070d 72%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .035), 0 0 45px rgb(0 0 0 / .62);
}

.vehicle-entry__pillar { top: -4%; bottom: 13%; width: clamp(72px, 11vw, 185px); }
.vehicle-entry__pillar--left { left: -2.5%; transform: skewX(7deg); }
.vehicle-entry__pillar--right { right: -2.5%; transform: skewX(-7deg); }
.vehicle-entry__roof { top: -5%; right: 0; left: 0; height: clamp(54px, 9vh, 92px); border-radius: 0 0 46% 46%; }

.vehicle-entry__dashboard {
  right: -4%;
  bottom: -16%;
  left: -4%;
  height: clamp(190px, 34vh, 360px);
  border-radius: 52% 52% 0 0 / 34% 34% 0 0;
  transform: perspective(700px) rotateX(18deg);
}

.vehicle-entry__dashboard::before {
  content: "";
  position: absolute;
  top: 12%;
  right: 9%;
  left: 9%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(245 168 0 / .65), transparent);
  box-shadow: 0 0 16px rgb(245 168 0 / .5);
  opacity: 0;
  animation: dashboard-line var(--entry-duration) ease both;
}

.vehicle-entry__wheel {
  position: absolute;
  left: 14%;
  top: -23%;
  width: clamp(128px, 18vw, 250px);
  aspect-ratio: 1;
  border: clamp(15px, 2vw, 27px) solid #050a10;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #222d38, 0 18px 34px rgb(0 0 0 / .55);
  transform: rotate(-8deg);
}

.vehicle-entry__wheel::before,
.vehicle-entry__wheel::after,
.vehicle-entry__wheel span {
  content: "";
  position: absolute;
  background: #080e15;
}
.vehicle-entry__wheel::before { width: 22%; height: 57%; left: 39%; top: 22%; }
.vehicle-entry__wheel::after { width: 70%; height: 20%; left: 15%; top: 40%; }
.vehicle-entry__wheel span { z-index: 1; width: 34%; aspect-ratio: 1; left: 33%; top: 33%; border-radius: 50%; box-shadow: inset 0 0 0 1px #35404b; }

.vehicle-entry__cluster {
  position: absolute;
  left: 11%;
  top: 7%;
  display: flex;
  gap: 1rem;
  align-items: center;
  opacity: 0;
  animation: cluster-on var(--entry-duration) ease both;
}
.vehicle-entry__cluster i { width: clamp(36px, 5vw, 70px); aspect-ratio: 1; border: 2px solid var(--amber, #f5a800); border-radius: 50%; box-shadow: inset 0 0 18px rgb(245 168 0 / .18), 0 0 18px rgb(245 168 0 / .2); }
.vehicle-entry__cluster b { color: var(--amber, #f5a800); font: 800 clamp(.65rem, 1vw, .9rem)/1 sans-serif; letter-spacing: .18em; }
.vehicle-entry__console { position: absolute; left: 47%; top: 22%; display: flex; gap: .6rem; }
.vehicle-entry__console i { width: 8px; aspect-ratio: 1; border-radius: 50%; background: #f5a800; box-shadow: 0 0 10px #f5a800; opacity: 0; animation: console-on var(--entry-duration) ease both; }

.vehicle-entry__mirror {
  position: absolute;
  top: 9%;
  left: 50%;
  width: clamp(130px, 18vw, 260px);
  height: clamp(34px, 5vw, 66px);
  border: 7px solid #070d14;
  border-radius: 8px 8px 30px 30px;
  background: linear-gradient(160deg, #8ea0ad, #17222c 50%, #02080d);
  transform: translateX(-50%);
  box-shadow: 0 10px 22px rgb(0 0 0 / .45);
}
.vehicle-entry__mirror::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 12px; height: 28px; background: #080d12; transform: translateX(-50%); }

.vehicle-entry__brand {
  position: absolute;
  z-index: 5;
  top: 14%;
  left: clamp(24px, 6vw, 92px);
  display: grid;
  max-width: min(560px, 75vw);
  opacity: 0;
  transform: translateY(18px);
  animation: entry-copy var(--entry-duration) cubic-bezier(.16, 1, .3, 1) both;
}
.vehicle-entry__brand img { width: clamp(82px, 9vw, 126px); filter: brightness(0) invert(1); margin-bottom: 1.1rem; }
.vehicle-entry__brand span { color: #f5a800; font: 900 clamp(.68rem, 1vw, .85rem)/1.2 sans-serif; letter-spacing: .24em; margin-bottom: .75rem; }
.vehicle-entry__brand strong { font: 700 clamp(1.7rem, 3.5vw, 4.2rem)/.98 Georgia, serif; text-wrap: balance; }

.vehicle-entry__ignition {
  position: absolute;
  z-index: 6;
  right: clamp(22px, 5vw, 76px);
  bottom: clamp(28px, 7vh, 76px);
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #f5a800;
  font: 900 .68rem/1 sans-serif;
  letter-spacing: .2em;
  opacity: 0;
  animation: ignition-ready var(--entry-duration) ease both;
}
.vehicle-entry__ignition i { width: 9px; aspect-ratio: 1; border-radius: 50%; background: #f5a800; box-shadow: 0 0 18px #f5a800; }

@keyframes vehicle-board { 0% { transform: scale(1.22) translate(3%, 9%); } 34% { transform: scale(1.09) translate(0, 3%); } 100% { transform: scale(1) translate(0); } }
@keyframes windshield-focus { 0%, 24% { filter: brightness(.32) saturate(.55) blur(3px); transform: scale(1.18); } 62%, 100% { filter: brightness(.76) saturate(.95) blur(0); transform: scale(1); } }
@keyframes windshield-reflection { 0%, 42% { transform: translateX(-110%); } 72%, 100% { transform: translateX(120%); } }
@keyframes ignition-glow { 0%, 38% { opacity: 0; } 48% { opacity: 1; } 100% { opacity: .32; } }
@keyframes dashboard-line { 0%, 42% { opacity: 0; transform: scaleX(.1); } 55%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes cluster-on { 0%, 44% { opacity: 0; filter: brightness(0); } 48% { opacity: 1; filter: brightness(2.2); } 100% { opacity: .9; filter: none; } }
@keyframes console-on { 0%, 49% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes entry-copy { 0%, 15% { opacity: 0; transform: translateY(18px); } 32%, 72% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes ignition-ready { 0%, 48% { opacity: 0; } 57%, 88% { opacity: 1; } 100% { opacity: 0; } }

.vehicle-entry--quick .vehicle-entry__brand strong,
.vehicle-entry--quick .vehicle-entry__brand img,
.vehicle-entry--quick .vehicle-entry__pillar,
.vehicle-entry--quick .vehicle-entry__roof,
.vehicle-entry--quick .vehicle-entry__mirror { display: none; }
.vehicle-entry--quick .vehicle-entry__brand { top: 22%; }

@media (width <= 600px) {
  .vehicle-entry__windshield { background-image: linear-gradient(90deg, rgb(2 11 22 / .7), rgb(2 11 22 / .14)), url('/images/hero-flota-mixta-mobile.webp'); }
  .vehicle-entry__pillar { width: 48px; }
  .vehicle-entry__dashboard { height: 29vh; bottom: -10%; }
  .vehicle-entry__wheel { left: 8%; top: -16%; }
  .vehicle-entry__cluster { left: 7%; top: 15%; }
  .vehicle-entry__brand { top: 18%; max-width: calc(100vw - 48px); }
  .vehicle-entry__brand strong { font-size: clamp(1.9rem, 9.5vw, 3rem); }
  .vehicle-entry__ignition { bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .vehicle-entry { display: none !important; }
  body.vehicle-entry-active { overflow: auto; }
}

/* Secuencia v2: aproximación exterior, puerta, ingreso y parabrisas. */
.journey-entry {
  --entry-duration: 9600ms;
  position: fixed;
  z-index: 6000;
  inset: 0;
  overflow: hidden;
  background: #020812;
  color: #fff;
  opacity: 1;
  isolation: isolate;
  transition: opacity 780ms cubic-bezier(.22, 1, .36, 1), visibility 780ms;
}

.journey-entry.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.journey-entry__scene,
.journey-entry__scene img,
.journey-entry__vignette,
.journey-entry__door-close {
  position: absolute;
  inset: 0;
}

.journey-entry__scene { overflow: hidden; }
.journey-entry__scene img { width: 100%; height: 100%; object-fit: cover; }

.journey-entry__scene--approach {
  z-index: 1;
  animation: journey-approach var(--entry-duration) cubic-bezier(.2, .72, .18, 1) both;
}
.journey-entry__scene--approach img {
  transform: scale(1.02);
  animation: journey-walk var(--entry-duration) cubic-bezier(.18, .76, .2, 1) both;
}

.journey-entry__scene--door {
  z-index: 2;
  opacity: 0;
  animation: journey-door-scene var(--entry-duration) ease both;
}
.journey-entry__scene--door img {
  transform-origin: 56% 58%;
  animation: journey-enter var(--entry-duration) cubic-bezier(.16, 1, .3, 1) both;
}

.journey-entry__door-close {
  z-index: 4;
  left: auto;
  width: 62%;
  background: linear-gradient(100deg, #03080e 0 12%, #e9edf0 13% 18%, #07111b 19% 100%);
  box-shadow: -35px 0 65px rgb(0 0 0 / .7);
  transform: translateX(112%) skewX(-6deg);
  transform-origin: right;
  animation: journey-door-close var(--entry-duration) cubic-bezier(.7, 0, .25, 1) both;
}

.journey-entry__scene--cabin {
  z-index: 3;
  opacity: 0;
  animation: journey-cabin var(--entry-duration) ease both;
}
.journey-entry__scene--cabin img {
  transform: scale(1.12) translateX(-4%);
  transform-origin: 48% 52%;
  animation: journey-look-forward var(--entry-duration) cubic-bezier(.2, .78, .18, 1) both;
}

.journey-entry__vignette {
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle at 52% 45%, transparent 38%, rgb(1 8 16 / .72) 115%), linear-gradient(180deg, rgb(1 8 16 / .28), transparent 38%, rgb(1 8 16 / .15));
}

.journey-entry__status {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: clamp(30px, 6vh, 64px);
  display: flex;
  align-items: center;
  gap: 1rem;
  transform: translateX(-50%);
  opacity: 0;
  animation: journey-status var(--entry-duration) ease both;
}
.journey-entry__status img { width: 58px; filter: brightness(0) invert(1); }
.journey-entry__status span { color: #f5a800; font: 900 .72rem/1 sans-serif; letter-spacing: .25em; white-space: nowrap; }

.journey-entry__progress {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #f5a800;
  transform: scaleX(0);
  transform-origin: left;
  animation: journey-progress var(--entry-duration) linear both;
}

@keyframes journey-approach {
  0%, 34% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes journey-walk {
  0% { transform: scale(1.01) translate(0); }
  12% { transform: scale(1.13) translate(-1%, .4%); }
  23% { transform: scale(1.29) translate(-2%, -.3%); }
  36%, 100% { transform: scale(1.52) translate(-4%, 0); }
}
@keyframes journey-door-scene {
  0%, 31% { opacity: 0; }
  40%, 67% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes journey-enter {
  0%, 34% { transform: scale(1.02); }
  56% { transform: scale(1.28) translate(-2%, 1%); }
  72%, 100% { transform: scale(1.62) translate(-7%, 2%); }
}
@keyframes journey-door-close {
  0%, 61% { transform: translateX(112%) skewX(-6deg); }
  69% { transform: translateX(5%) skewX(-2deg); }
  74% { transform: translateX(-106%) skewX(3deg); }
  75%, 100% { transform: translateX(-112%) skewX(3deg); }
}
@keyframes journey-cabin {
  0%, 65% { opacity: 0; }
  74%, 100% { opacity: 1; }
}
@keyframes journey-look-forward {
  0%, 67% { transform: scale(1.17) translateX(-7%); filter: brightness(.46); }
  80% { transform: scale(1.09) translateX(2%); filter: brightness(.68); }
  100% { transform: scale(1) translateX(0); filter: brightness(.82); }
}
@keyframes journey-status {
  0%, 82% { opacity: 0; transform: translate(-50%, 12px); }
  88%, 96% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}
@keyframes journey-progress { to { transform: scaleX(1); } }

.journey-entry--quick .journey-entry__scene--approach,
.journey-entry--quick .journey-entry__scene--door,
.journey-entry--quick .journey-entry__door-close { display: none; }
.journey-entry--quick .journey-entry__scene--cabin { opacity: 1; animation: none; }
.journey-entry--quick .journey-entry__scene--cabin img { animation: journey-quick-look var(--entry-duration) var(--motion-ease-out) both; }
@keyframes journey-quick-look { from { transform: scale(1.1); filter: brightness(.55); } to { transform: scale(1); filter: brightness(.82); } }

@media (width <= 600px) {
  .journey-entry__scene img { object-position: 57% center; }
  .journey-entry__scene--door img { object-position: 52% center; }
  .journey-entry__scene--cabin img { object-position: 50% center; }
  .journey-entry__door-close { width: 82%; }
  .journey-entry__status { bottom: 34px; }
  .journey-entry__status img { width: 46px; }
  .journey-entry__status span { font-size: .62rem; letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-entry { display: none !important; }
}

/* Plano continuo v3: cortes ocultos por la puerta y movimiento corporal. */
.journey-entry__scene,
.journey-entry__scene img { will-change: opacity, transform, filter; }

.journey-entry__scene--approach {
  transform-origin: 50% 65%;
  animation: continuous-approach var(--entry-duration) linear both,
    continuous-body-bob 820ms ease-in-out 4 alternate;
}
.journey-entry__scene--approach img {
  transform-origin: 52% 58%;
  animation: continuous-walk var(--entry-duration) cubic-bezier(.32, .02, .18, 1) both;
}

.journey-entry__scene--door {
  transform-origin: 48% 60%;
  animation: continuous-door-scene var(--entry-duration) linear both;
}
.journey-entry__scene--door img {
  transform-origin: 45% 58%;
  animation: continuous-enter var(--entry-duration) cubic-bezier(.38, 0, .12, 1) both;
}

.journey-entry__occlusion,
.journey-entry__blink { position: absolute; inset: 0; pointer-events: none; }

.journey-entry__occlusion--enter {
  z-index: 3;
  background: linear-gradient(90deg, #02060b 0 58%, #e7ebee 60% 66%, #090e14 68% 100%);
  box-shadow: 30px 0 80px rgb(0 0 0 / .75);
  transform: translateX(-112%) skewX(5deg);
  animation: continuous-enter-occlusion var(--entry-duration) cubic-bezier(.72, 0, .25, 1) both;
}

.journey-entry__scene--cabin { z-index: 4; animation: continuous-cabin var(--entry-duration) ease both; }
.journey-entry__scene--cabin img {
  transform-origin: 42% 58%;
  animation: continuous-look-forward var(--entry-duration) cubic-bezier(.22, .72, .18, 1) both;
}

.journey-entry__door-close {
  z-index: 5;
  width: 72%;
  animation: continuous-door-close var(--entry-duration) cubic-bezier(.7, 0, .25, 1) both;
}

.journey-entry__blink {
  z-index: 6;
  background: #010407;
  opacity: 0;
  animation: continuous-blink var(--entry-duration) ease both;
}
.journey-entry__vignette { z-index: 7; }
.journey-entry__status { z-index: 8; }
.journey-entry__progress { z-index: 9; }

@keyframes continuous-approach {
  0%, 35% { opacity: 1; filter: blur(0); }
  38% { opacity: 1; filter: blur(2px); }
  40%, 100% { opacity: 0; filter: blur(5px); }
}
@keyframes continuous-walk {
  0% { transform: scale(1.01) translate3d(0, 0, 0); filter: blur(0); }
  10% { transform: scale(1.11) translate3d(-.6%, .3%, 0); }
  20% { transform: scale(1.26) translate3d(-2%, -.2%, 0); }
  30% { transform: scale(1.48) translate3d(-5%, .2%, 0); }
  38%, 100% { transform: scale(1.82) translate3d(-10%, 1%, 0); filter: blur(1.5px); }
}
@keyframes continuous-body-bob {
  from { transform: translateY(-2px) rotate(-.12deg); }
  to { transform: translateY(4px) rotate(.12deg); }
}
@keyframes continuous-door-scene {
  0%, 35% { opacity: 0; transform: scale(1.06) translateY(1%); }
  39%, 66% { opacity: 1; transform: scale(1) translateY(0); }
  72%, 100% { opacity: 0; transform: scale(1.05) translateY(3%); }
}
@keyframes continuous-enter {
  0%, 36% { transform: scale(1.02) translate3d(0, 0, 0); }
  46% { transform: scale(1.12) translate3d(-1%, 0, 0); }
  57% { transform: scale(1.35) translate3d(-5%, 2%, 0); }
  69%, 100% { transform: scale(1.72) translate3d(-12%, 6%, 0); filter: blur(1.2px); }
}
@keyframes continuous-enter-occlusion {
  0%, 34% { transform: translateX(-112%) skewX(5deg); }
  39% { transform: translateX(-42%) skewX(2deg); }
  43% { transform: translateX(112%) skewX(-3deg); }
  44%, 100% { transform: translateX(115%) skewX(-3deg); }
}
@keyframes continuous-door-close {
  0%, 64% { transform: translateX(112%) skewX(-6deg); }
  70% { transform: translateX(7%) skewX(-2deg); }
  73% { transform: translateX(-4%) skewX(0); }
  76% { transform: translateX(-110%) skewX(3deg); }
  77%, 100% { transform: translateX(-115%) skewX(3deg); }
}
@keyframes continuous-cabin {
  0%, 67% { opacity: 0; }
  72%, 100% { opacity: 1; }
}
@keyframes continuous-look-forward {
  0%, 67% { transform: scale(1.3) translate3d(-13%, 8%, 0) rotate(-2.5deg); filter: brightness(.38) blur(2px); }
  76% { transform: scale(1.18) translate3d(-7%, 5%, 0) rotate(-1.2deg); filter: brightness(.5) blur(.6px); }
  88% { transform: scale(1.07) translate3d(2%, 1%, 0) rotate(.2deg); filter: brightness(.72) blur(0); }
  100% { transform: scale(1) translate3d(0, 0, 0) rotate(0); filter: brightness(.86) blur(0); }
}
@keyframes continuous-blink {
  0%, 70% { opacity: 0; }
  72% { opacity: .88; }
  74%, 100% { opacity: 0; }
}

@media (width <= 600px) {
  .journey-entry__door-close { width: 82%; }
  .journey-entry__scene--approach img { object-position: 58% center; }
}

/* Entrada final basada en video continuo. */
.cinematic-entry {
  position: fixed;
  z-index: 7000;
  inset: 0;
  overflow: hidden;
  background: #020812;
  color: #fff;
  opacity: 1;
  isolation: isolate;
  transition: opacity 760ms cubic-bezier(.22, 1, .36, 1), visibility 760ms;
}

.cinematic-entry__video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.002);
  filter: brightness(.9) saturate(.96);
  transition: filter 900ms ease, transform 1150ms cubic-bezier(.16, 1, .3, 1), clip-path 1150ms cubic-bezier(.16, 1, .3, 1), opacity 900ms ease;
}

.cinematic-entry__veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgb(4 14 27 / .04), rgb(4 14 27 / .36) 110%);
  opacity: .45;
  backdrop-filter: blur(0);
  transition: opacity 700ms ease, backdrop-filter 900ms ease, background 900ms ease;
}

.cinematic-entry__logo {
  position: absolute;
  z-index: 4;
  top: clamp(24px, 5vh, 54px);
  left: clamp(24px, 4vw, 68px);
  box-sizing: content-box;
  width: clamp(150px, 13vw, 205px);
  height: auto;
  padding: .62rem .8rem;
  border: 1px solid rgb(255 255 255 / .46);
  border-radius: 5px;
  background: rgb(255 255 255 / .9);
  box-shadow: 0 12px 34px rgb(0 0 0 / .22);
  opacity: .92;
  filter: none;
  transform: translate(0, 0) scale(1);
  transform-origin: center;
  transition: top 900ms cubic-bezier(.16, 1, .3, 1),
    left 900ms cubic-bezier(.16, 1, .3, 1),
    width 900ms cubic-bezier(.16, 1, .3, 1),
    opacity 600ms ease,
    transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.cinematic-entry__message {
  position: absolute;
  z-index: 4;
  top: 48%;
  left: 50%;
  display: grid;
  width: min(780px, calc(100vw - 48px));
  gap: .85rem;
  text-align: center;
  transform: translate(-50%, calc(-50% + 18px));
  opacity: 0;
  transition: opacity 720ms ease, transform 820ms cubic-bezier(.16, 1, .3, 1);
}
.cinematic-entry__message span {
  color: #f5a800;
  font: 900 clamp(.64rem, 1vw, .82rem)/1.2 sans-serif;
  letter-spacing: .28em;
}
.cinematic-entry__message strong {
  font: 700 clamp(2rem, 5vw, 5rem)/.98 Georgia, serif;
  text-shadow: 0 10px 38px rgb(0 0 0 / .5);
  text-wrap: balance;
}

.cinematic-entry__progress {
  position: absolute;
  z-index: 5;
  right: clamp(24px, 5vw, 76px);
  bottom: clamp(26px, 6vh, 66px);
  left: clamp(24px, 5vw, 76px);
  height: 3px;
  overflow: hidden;
  background: rgb(255 255 255 / .22);
}
.cinematic-entry__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #f5a800;
  box-shadow: 0 0 18px rgb(245 168 0 / .72);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 120ms linear;
}

.cinematic-entry.is-ending .cinematic-entry__video {
  filter: brightness(.55) saturate(.72) blur(3px);
  transform: scale(1.018);
}
.cinematic-entry.is-ending .cinematic-entry__veil {
  opacity: 1;
  backdrop-filter: blur(2px);
  background: radial-gradient(circle at 50% 44%, rgb(4 14 27 / .08), rgb(4 14 27 / .66) 110%);
}
.cinematic-entry.is-ending .cinematic-entry__message {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.cinematic-entry.is-ending .cinematic-entry__logo {
  top: 25%;
  left: 50%;
  width: clamp(205px, 18vw, 280px);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

.cinematic-entry.is-transitioning { background: transparent; }
.cinematic-entry.is-transitioning .cinematic-entry__video {
  clip-path: circle(9% at 50% 43%);
  opacity: 0;
  transform: scale(1.055);
}
.cinematic-entry.is-transitioning .cinematic-entry__veil,
.cinematic-entry.is-transitioning .cinematic-entry__logo,
.cinematic-entry.is-transitioning .cinematic-entry__message,
.cinematic-entry.is-transitioning .cinematic-entry__progress { opacity: 0; }

.cinematic-entry.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.cinematic-entry.is-skipped { transition-duration: 220ms; }

@media (width <= 600px) {
  .cinematic-entry__video { object-position: 52% center; }
  .cinematic-entry__message { top: 45%; width: calc(100vw - 40px); }
  .cinematic-entry__message strong { font-size: clamp(2rem, 10vw, 3.1rem); }
  .cinematic-entry__progress { right: 22px; bottom: 28px; left: 22px; }
  .cinematic-entry__logo {
    top: 24px;
    left: 50%;
    width: 132px;
    padding: .48rem .62rem;
    transform: translateX(-50%);
  }
  .cinematic-entry.is-ending .cinematic-entry__logo {
    top: 24%;
    width: 185px;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-entry { display: none !important; }
}

/* Esta capa solo se activa en la landing. La ruta /admin queda intacta. */
.landing-motion .site-header {
  transition: background-color var(--motion-base) ease,
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.landing-motion .brand img {
  transition: transform var(--motion-base) var(--motion-ease);
}

.landing-motion .brand:hover img,
.landing-motion .brand:focus-visible img {
  transform: rotate(-3deg) scale(1.04);
}

.landing-motion nav a:not(.nav-cta) {
  position: relative;
  transition: color var(--motion-fast) ease;
}

.landing-motion nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.48rem;
  left: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--motion-ease);
}

.landing-motion nav a:not(.nav-cta):hover::after,
.landing-motion nav a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.landing-motion .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.landing-motion .button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .25) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 520ms var(--motion-ease);
}

.landing-motion .button:hover::before,
.landing-motion .button:focus-visible::before {
  transform: translateX(130%);
}

.landing-motion .button:hover,
.landing-motion .button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(3 14 28 / .18);
}

.landing-motion .button:active {
  transform: translateY(0) scale(.98);
  transition-duration: 80ms;
}

.landing-motion .button svg,
.landing-motion .text-link svg {
  transition: transform 260ms var(--motion-ease);
}

.landing-motion .button:hover svg,
.landing-motion .button:focus-visible svg,
.landing-motion .text-link:hover svg,
.landing-motion .text-link:focus-visible svg {
  transform: translateX(4px);
}

.landing-motion .service-card {
  position: relative;
  transition: transform 320ms var(--motion-ease),
    background-color 320ms ease,
    box-shadow 320ms ease;
}

.landing-motion .service-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--motion-ease);
}

.landing-motion .service-card:hover,
.landing-motion .service-card:focus-within {
  z-index: 1;
  transform: translateY(-6px);
  background: var(--navy-2);
  box-shadow: 0 18px 42px rgb(0 0 0 / .18);
}

.landing-motion .service-card:hover::after,
.landing-motion .service-card:focus-within::after {
  transform: scaleX(1);
}

.landing-motion .fleet-visual {
  overflow: hidden;
}

.landing-motion .fleet-visual > img {
  transition: transform 900ms var(--motion-ease-out);
}

.landing-motion .fleet-visual:hover > img {
  transform: scale(1.025);
}

.landing-motion .fleet-tag {
  transition: transform 360ms var(--motion-ease), box-shadow 360ms ease;
}

.landing-motion .fleet-visual:hover .fleet-tag {
  transform: translate(-5px, -5px);
  box-shadow: 10px 10px 0 rgb(7 24 45 / .16);
}

.landing-motion .equipment-grid > div {
  transition: background-color 240ms ease, padding-inline 280ms var(--motion-ease);
}

.landing-motion .equipment-grid > div:hover {
  background: rgb(255 255 255 / .055);
  padding-inline: 1rem;
}

.landing-motion .field label {
  transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}

.landing-motion .field:focus-within label {
  color: var(--amber);
  transform: translateY(-2px);
}

.landing-motion input,
.landing-motion textarea {
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

/* Entrada editorial: corta, legible y sin bloquear interacción. */
.landing-motion:not(.hero-ready) .site-header,
.landing-motion:not(.hero-ready) .hero .eyebrow,
.landing-motion:not(.hero-ready) .hero h1,
.landing-motion:not(.hero-ready) .hero-copy,
.landing-motion:not(.hero-ready) .hero-actions,
.landing-motion:not(.hero-ready) .hero-vehicle-types,
.landing-motion:not(.hero-ready) .hero-proof,
.landing-motion:not(.hero-ready) .trust-strip {
  opacity: 0;
  transform: translateY(18px);
}

.landing-motion .site-header,
.landing-motion .hero .eyebrow,
.landing-motion .hero h1,
.landing-motion .hero-copy,
.landing-motion .hero-actions,
.landing-motion .hero-vehicle-types,
.landing-motion .hero-proof,
.landing-motion .trust-strip {
  transition: opacity var(--motion-slow) var(--motion-ease-out),
    transform var(--motion-slow) var(--motion-ease-out);
}

.landing-motion:not(.hero-ready) .site-header {
  transform: translateY(-18px);
}

.landing-motion .hero h1 { transition-delay: 70ms; }
.landing-motion .hero-copy { transition-delay: 140ms; }
.landing-motion .hero-actions { transition-delay: 210ms; }
.landing-motion .hero-vehicle-types { transition-delay: 280ms; }
.landing-motion .hero-proof { transition-delay: 340ms; }
.landing-motion .trust-strip { transition-delay: 400ms; }

.landing-motion .hero-image {
  transform: translate3d(0, calc(var(--hero-shift, 0) * 1px), 0) scale(1.035);
  transition: transform 1200ms var(--motion-ease-out), filter 900ms ease;
}

.landing-motion:not(.hero-ready) .hero-image {
  transform: scale(1.075);
  filter: saturate(.8) brightness(.86);
}

/* Revelados: el contenido permanece visible si JavaScript u Observer fallan. */
.landing-motion.motion-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(26px);
}

.landing-motion.motion-ready [data-reveal="from-left"]:not(.is-visible) {
  transform: translateX(-28px);
}

.landing-motion.motion-ready [data-reveal="from-right"]:not(.is-visible) {
  transform: translateX(28px);
}

.landing-motion.motion-ready [data-reveal] {
  transition: opacity var(--motion-slow) var(--motion-ease-out),
    transform var(--motion-slow) var(--motion-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.landing-motion.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .landing-motion .service-card:hover,
  .landing-motion .fleet-visual:hover .fleet-tag,
  .landing-motion .fleet-visual:hover > img,
  .landing-motion .equipment-grid > div:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (width <= 560px) {
  :root {
    --motion-slow: 600ms;
  }

  .landing-motion.motion-ready [data-reveal]:not(.is-visible),
  .landing-motion.motion-ready [data-reveal="from-left"]:not(.is-visible),
  .landing-motion.motion-ready [data-reveal="from-right"]:not(.is-visible) {
    transform: translateY(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-motion *,
  .landing-motion *::before,
  .landing-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .landing-motion:not(.hero-ready) .site-header,
  .landing-motion:not(.hero-ready) .hero .eyebrow,
  .landing-motion:not(.hero-ready) .hero h1,
  .landing-motion:not(.hero-ready) .hero-copy,
  .landing-motion:not(.hero-ready) .hero-actions,
  .landing-motion:not(.hero-ready) .hero-vehicle-types,
  .landing-motion:not(.hero-ready) .hero-proof,
  .landing-motion:not(.hero-ready) .trust-strip,
  .landing-motion.motion-ready [data-reveal]:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  .landing-motion .hero-image {
    transform: none !important;
    filter: none !important;
  }
}

/* Dirección aprobada: movimiento cinematográfico e industrial. */
.landing-motion .landing-reading-progress {
  position: fixed;
  z-index: 1200;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 18px rgb(245 168 0 / .5);
}

.landing-motion .hero::before {
  content: "4×4";
  position: absolute;
  z-index: 1;
  right: -1.5vw;
  top: 14%;
  color: transparent;
  font-size: clamp(10rem, 22vw, 23rem);
  font-weight: 950;
  line-height: .78;
  letter-spacing: -.1em;
  -webkit-text-stroke: 1px rgb(255 255 255 / .15);
  opacity: 0;
  transform: translateX(8%) scale(.92);
  transition: opacity 900ms ease 260ms, transform 1400ms var(--motion-ease-out) 260ms;
  pointer-events: none;
}

.landing-motion.hero-ready .hero::before {
  opacity: 1;
  transform: none;
}

.landing-motion .hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(420px circle at var(--pointer-x, 78%) var(--pointer-y, 34%), rgb(245 168 0 / .14), transparent 65%);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.landing-motion .hero:hover::after { opacity: 1; }
.landing-motion .hero-image { z-index: 0; }
.landing-motion .hero-shade { z-index: 1; }

.landing-motion .hero .eyebrow {
  transition-delay: 60ms;
}

.landing-motion .hero .eyebrow span {
  transform-origin: left;
  transition: transform 700ms var(--motion-ease-out) 340ms;
}

.landing-motion:not(.hero-ready) .hero .eyebrow span { transform: scaleX(0); }

.landing-motion .hero h1 {
  overflow: visible;
  transform: none !important;
}

.landing-motion .hero-title-row {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
  margin-bottom: -.06em;
}

.landing-motion .hero-title-row > span,
.landing-motion .hero-title-row > em {
  display: block;
  transform: translateY(112%) rotate(1.5deg);
  transform-origin: left bottom;
  transition: transform 980ms var(--motion-ease-out) 110ms;
}

.landing-motion .hero-title-row:nth-child(2) > span {
  transition-delay: 230ms;
}

.landing-motion .hero-title-row:nth-child(3) > em {
  transition-delay: 350ms;
}

.landing-motion.hero-ready .hero-title-row > span,
.landing-motion.hero-ready .hero-title-row > em {
  transform: none;
}

.landing-motion .hero-copy {
  transition-delay: 390ms;
}

.landing-motion .hero-actions {
  transition-delay: 500ms;
}

.landing-motion .hero-vehicle-types {
  transition-delay: 590ms;
}

.landing-motion .hero-proof {
  transition-delay: 660ms;
}

.landing-motion .trust-strip {
  clip-path: inset(0 0 100% 0);
  transition: opacity 800ms ease 620ms,
    transform 900ms var(--motion-ease-out) 620ms,
    clip-path 1000ms var(--motion-ease-out) 620ms;
}

.landing-motion.hero-ready .trust-strip { clip-path: inset(0); }

.landing-motion .trust-strip li {
  transition: background-color 220ms ease, transform 300ms var(--motion-ease);
}

.landing-motion .trust-strip li:hover {
  background: rgb(255 255 255 / .06);
  transform: translateY(-5px);
}

.landing-motion .hero-image {
  transition-duration: 1600ms, 1100ms;
}

.landing-motion:not(.hero-ready) .hero-image {
  transform: scale(1.14);
  filter: saturate(.65) brightness(.72);
}

.landing-motion .service-card {
  overflow: hidden;
}

.landing-motion .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--card-x, 50%) var(--card-y, 50%), rgb(245 168 0 / .13), transparent 64%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.landing-motion .service-card:hover::before,
.landing-motion .service-card:focus-within::before { opacity: 1; }

.landing-motion .service-card > span {
  display: inline-block;
  transition: transform 360ms var(--motion-ease), color 220ms ease;
}

.landing-motion .service-card:hover > span,
.landing-motion .service-card:focus-within > span {
  color: #fff;
  transform: translateX(8px) scale(1.12);
}

.landing-motion.motion-ready [data-reveal="card-rise"]:not(.is-visible) {
  opacity: 0;
  transform: translateY(70px) scale(.96);
}

.landing-motion.motion-ready [data-reveal="clip-left"]:not(.is-visible) {
  opacity: 1;
  transform: none;
}

.landing-motion.motion-ready [data-reveal="clip-left"] {
  position: relative;
  transition: opacity 600ms ease;
}

.landing-motion.motion-ready [data-reveal="clip-left"]::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  background: var(--paper);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 1100ms var(--motion-ease-out);
  pointer-events: none;
}

.landing-motion.motion-ready [data-reveal="clip-left"].is-visible::before {
  transform: scaleX(0);
}

.landing-motion.motion-ready [data-reveal="clip-left"] > img {
  transform: scale(1.12) translateX(6%);
  transition: transform 1500ms var(--motion-ease-out) 120ms;
}

.landing-motion.motion-ready [data-reveal="clip-left"].is-visible > img {
  transform: none;
}

.landing-motion .process ol {
  position: relative;
  overflow: hidden;
}

.landing-motion .process ol::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1250ms var(--motion-ease-out);
}

.landing-motion .process.sequence-visible ol::before { transform: scaleX(1); }

.landing-motion .equipment-grid > div {
  transform-origin: left center;
}

.landing-motion .equipment-grid > div.is-visible p {
  animation: equipment-settle 620ms var(--motion-ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes equipment-settle {
  from { letter-spacing: .08em; opacity: .25; }
  to { letter-spacing: normal; opacity: 1; }
}

@media (width <= 900px) {
  .landing-motion .hero::before {
    top: 26%;
    font-size: clamp(8rem, 34vw, 15rem);
    opacity: .55;
  }

  .landing-motion .hero::after { display: none; }
  .landing-motion .trust-strip li:hover { transform: none; }
}

@media (width <= 560px) {
  .landing-motion .hero::before {
    right: -7%;
    top: 31%;
    font-size: 9rem;
    -webkit-text-stroke-color: rgb(255 255 255 / .1);
  }

  .landing-motion .hero-title-row > span,
  .landing-motion .hero-title-row > em {
    transition-duration: 760ms;
  }

  .landing-motion.motion-ready [data-reveal="clip-left"]:not(.is-visible) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-motion .landing-reading-progress { display: none; }
  .landing-motion .hero::before { opacity: .1; transform: none; }
  .landing-motion .hero::after { display: none; }
  .landing-motion .hero-title-row > span,
  .landing-motion .hero-title-row > em,
  .landing-motion:not(.hero-ready) .hero .eyebrow span,
  .landing-motion.motion-ready [data-reveal="clip-left"] > img {
    transform: none !important;
  }
  .landing-motion .trust-strip,
  .landing-motion.motion-ready [data-reveal="clip-left"]:not(.is-visible) {
    clip-path: none !important;
  }
  .landing-motion.motion-ready [data-reveal="clip-left"]::before { display: none; }
}

/* Capa WOW: interacción vinculada al usuario, no solo entradas automáticas. */
.landing-motion .hero-content {
  transform: translate3d(0, calc(var(--hero-exit, 0) * -44px), 0);
  opacity: calc(1 - var(--hero-exit, 0) * .68);
  transition: opacity 80ms linear;
  will-change: transform, opacity;
}

.landing-motion .motion-marquee {
  color: #fff;
  background: var(--amber);
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 12;
  inset: auto 0 0;
}

.landing-motion .motion-marquee-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing-motion .motion-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-height: 48px;
  animation: sbs-marquee 28s linear infinite;
}

/* Mantiene el primer pantallazo alineado y reserva sitio para la cinta. */
.landing-motion .hero .trust-strip {
  bottom: 48px;
}

.landing-motion .hero-content,
.landing-motion .intro-grid > *,
.landing-motion .section-heading > *,
.landing-motion .fleet > *,
.landing-motion .safety > *,
.landing-motion .quote > * {
  min-width: 0;
}

.landing-motion h1,
.landing-motion h2,
.landing-motion h3 {
  text-wrap: balance;
}

.landing-motion p,
.landing-motion li {
  text-wrap: pretty;
}

.landing-motion .hero-title-row {
  white-space: nowrap;
}

.landing-motion .hero-title-row > span > em {
  display: inline;
}

.landing-motion .motion-marquee:hover .motion-marquee-track { animation-play-state: paused; }

.landing-motion .motion-marquee-track span {
  color: var(--navy);
  padding-inline: 1.5rem;
  font-size: clamp(.76rem, 1.2vw, 1rem);
  font-weight: 950;
  letter-spacing: .12em;
  white-space: nowrap;
}

.landing-motion .motion-marquee-track i {
  color: var(--navy);
  font-size: 1.05rem;
  font-style: normal;
}

@keyframes sbs-marquee {
  to { transform: translateX(-50%); }
}

.landing-motion .service-card:hover,
.landing-motion .service-card:focus-within {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-9px) scale(1.015);
}

.landing-motion .magnetic-button:hover,
.landing-motion .magnetic-button:focus-visible {
  transform: translate3d(var(--magnet-x, 0px), calc(var(--magnet-y, 0px) - 3px), 0);
}

.landing-motion .fleet-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 2rem 0 1.25rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.landing-motion .fleet-selector button {
  appearance: none;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  min-height: 78px;
  padding: .85rem .75rem;
  text-align: left;
  font: inherit;
  font-size: .73rem;
  font-weight: 850;
  position: relative;
  transition: color 240ms ease, background-color 240ms ease, transform 300ms var(--motion-ease);
}

.landing-motion .fleet-selector button:last-child { border-right: 0; }

.landing-motion .fleet-selector button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  background: var(--amber);
  transform: scaleX(0);
  transition: transform 380ms var(--motion-ease-out);
}

.landing-motion .fleet-selector button span {
  color: var(--amber);
  margin-bottom: .35rem;
  display: block;
  font-size: .65rem;
}

.landing-motion .fleet-selector button:hover,
.landing-motion .fleet-selector button:focus-visible,
.landing-motion .fleet-selector button[aria-pressed="true"] {
  color: var(--navy);
  background: #fff;
  transform: translateY(-4px);
}

.landing-motion .fleet-selector button[aria-pressed="true"]::after { transform: scaleX(1); }

.landing-motion .fleet-options li {
  opacity: .48;
  transform: translateX(0);
  transition: opacity 320ms ease, transform 420ms var(--motion-ease-out), color 320ms ease;
}

.landing-motion .fleet-options li.is-fleet-active {
  color: var(--navy);
  opacity: 1;
  transform: translateX(9px);
}

.landing-motion.motion-ready .fleet .fleet-visual.is-visible > img {
  transform: scale(1.18);
  transition: transform 850ms var(--motion-ease-out), transform-origin 850ms var(--motion-ease-out);
}

.landing-motion.motion-ready .fleet.fleet-mode-4x4 .fleet-visual.is-visible > img { transform-origin: 18% 54%; }
.landing-motion.motion-ready .fleet.fleet-mode-suv .fleet-visual.is-visible > img { transform-origin: 53% 54%; }
.landing-motion.motion-ready .fleet.fleet-mode-minivan .fleet-visual.is-visible > img { transform-origin: 88% 54%; }

.landing-motion .safety .equipment-grid {
  position: relative;
  overflow: hidden;
}

.landing-motion .safety .equipment-grid::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--amber);
  box-shadow: 0 0 20px rgb(245 168 0 / .5);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1250ms var(--motion-ease-out);
}

.landing-motion .safety.safety-live .equipment-grid::after { transform: scaleY(1); }

@media (width <= 900px) {
  .landing-motion .hero-content {
    transform: translate3d(0, calc(var(--hero-exit, 0) * -20px), 0);
    opacity: calc(1 - var(--hero-exit, 0) * .35);
  }
  .landing-motion .motion-marquee-track { min-height: 44px; animation-duration: 24s; }
  .landing-motion .hero .trust-strip { bottom: 44px; }
  .landing-motion .service-card:hover,
  .landing-motion .service-card:focus-within { transform: translateY(-5px); }
}

@media (width <= 560px) {
  .landing-motion .hero-title-row { white-space: normal; }
  .landing-motion .motion-marquee-track { min-height: 40px; }
  .landing-motion .hero .trust-strip { bottom: 40px; }
  .landing-motion .fleet-selector { grid-template-columns: 1fr; }
  .landing-motion .fleet-selector button {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .landing-motion .fleet-selector button:last-child { border-bottom: 0; }
  .landing-motion .fleet-selector button span { display: inline; margin: 0 .55rem 0 0; }
  .landing-motion.motion-ready .fleet .fleet-visual.is-visible > img { transform: scale(1.08); }
}

@media (hover: none), (pointer: coarse) {
  .landing-motion .service-card:hover,
  .landing-motion .service-card:focus-within,
  .landing-motion .magnetic-button:hover,
  .landing-motion .magnetic-button:focus-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-motion .hero-content { transform: none; opacity: 1; will-change: auto; }
  .landing-motion .motion-marquee-track { animation: none; }
  .landing-motion .motion-marquee-track:nth-child(n) { transform: none; }
  .landing-motion.motion-ready .fleet .fleet-visual.is-visible > img { transform: none; }
}