/* Truck loader scene — service card "Автодоставка" only */
.ac-service-full-card.ac-service-full-card--auto {
  position: relative;
  display: block;
  /* Перебиваем overflow:hidden у .ac-service-full-card в main.css */
  overflow: visible;
}

/* Сцена + текст в колонке: без абсолютной панели и без overflow-y — прокрутки нет */
.ac-service-auto-stack {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ac-service-auto-scene {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(8px, 1.5vw, 16px) clamp(6px, 2vw, 14px) clamp(10px, 2vw, 18px);
  background: linear-gradient(180deg, #dbeafe 0%, #e0f2fe 45%, #eff6ff 100%);
  overflow: visible;
  pointer-events: none;
}

.ac-service-auto-truck {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  min-height: 17em;
  max-height: none;
  background: linear-gradient(to right, #000000 2%, #0b1742 10%, #0b1742 90%, #000000 98%);
  box-shadow: 0 0 2em #454545;
  border-radius: 1em;
  /* Иначе translate ящика обрезается и «анимации нет» */
  overflow: visible;
  /* Без container / cqw: иначе containment или невалидный calc могут «убить» слой */
  font-size: clamp(10px, min(20px, 3.25vw), 20px);
}

.ac-service-full-card--auto .ac-service-full-card-inner {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding: clamp(20px, 3.2vw, 32px) clamp(24px, 4vw, 40px) clamp(24px, 3.5vw, 36px);
  overflow: visible;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
  pointer-events: auto;
  border-top: 1px solid var(--ac-border);
}

.ac-auto-brand-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 4%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: pre;
  gap: 0.12em;
  font-family: var(--ac-display, "Syne", system-ui, sans-serif);
  color: #ffffff;
  font-size: clamp(1.85em, 4.5cqw, 2.65em);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 0 0.6em rgba(34, 211, 238, 0.35);
  pointer-events: none;
}

/* Как в CodePen: blur-letter + задержки по буквам */
.ac-auto-brand-title span {
  display: inline-block;
  -webkit-animation: ac-auto-blur-letter 1.5s ease alternate infinite;
  animation: ac-auto-blur-letter 1.5s ease alternate infinite;
  -webkit-animation-delay: calc(var(--ac-i, 0) * 0.1s);
  animation-delay: calc(var(--ac-i, 0) * 0.1s);
  will-change: filter;
}

@-webkit-keyframes ac-auto-blur-letter {
  0% {
    -webkit-filter: blur(0.45em);
    filter: blur(0.45em);
  }

  5% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }

  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes ac-auto-blur-letter {
  0% {
    filter: blur(0.45em);
  }

  5% {
    filter: blur(0);
  }

  100% {
    filter: blur(0);
  }
}

.ac-auto-shadow-box {
  position: absolute;
  width: 46em;
  height: 1em;
  background: none;
  border: none;
  border-radius: 1em;
  box-shadow: 0 4em 1.5em #000000;
  top: 53%;
  left: 15%;
  z-index: 0;
}

.ac-auto-cab-top {
  position: absolute;
  background: #ffffff;
  height: 3em;
  width: 4em;
  border-radius: 100% 0 0 0;
  right: 74%;
  top: 32%;
}

.ac-auto-cab-right {
  position: absolute;
  background: #ffffff;
  width: 2.4em;
  height: 3em;
  border-radius: 0 0.1em 0 0;
  top: 32%;
  right: 70%;
}

.ac-auto-cab-bottom {
  position: absolute;
  background: linear-gradient(to top, grey, #ffffff 15%);
  height: 3em;
  width: 10em;
  border-radius: 50% 0 0.1em 0.1em;
  top: 50%;
  right: 70%;
}

.ac-auto-cab-rear {
  position: absolute;
  background: #000000;
  width: 0.5em;
  height: 5.6em;
  border-radius: 0 0.2em 0.2em 0;
  top: 34%;
  left: 30%;
}

.ac-auto-front-bumper {
  position: absolute;
  background: linear-gradient(to right, #454545, #000000 12%, #f3f3f3 13%, grey 70%, #454545);
  height: 1.1em;
  width: 15em;
  border-radius: 0.1em 0.1em 0.1em 0.5em;
  top: 68.5%;
  right: 61.7%;
  box-shadow: inset 0 0.1em 0.1em #454545;
}

.ac-auto-windshield {
  position: absolute;
  background: linear-gradient(#454545 0.5%, #a7d3e2 20%, #e5e5e5 40%, grey 70%, #0b1742 100%);
  box-shadow: inset 0 0 0.2em #454545;
  height: 1.7em;
  width: 0.7em;
  transform: skewX(160deg);
  border-radius: 5em 0.2em 0.2em 0.2em;
  top: 40%;
  left: 19.9%;
}

.ac-auto-window {
  position: absolute;
  background: linear-gradient(#454545 0.5%, #a7d3e2 20%, #e5e5e5 40%, grey 70%, #0b1742 100%);
  box-shadow: inset 0 0 0.2em #454545;
  height: 1.7em;
  width: 1.6em;
  transform: skewX(160deg);
  border-radius: 0.2em;
  top: 40%;
  left: 21.6%;
}

.ac-auto-door {
  position: absolute;
  background: none;
  height: 4.9em;
  width: 3.2em;
  box-shadow: inset -0.2em 0.1em 0.2em grey;
  border-radius: 1em 0 0 0;
  top: 38%;
  left: 21.5%;
}

.ac-auto-panel {
  position: absolute;
  background: none;
  border: inset 0.2em;
  height: 2em;
  width: 1em;
  border-radius: 0.5em;
  box-shadow: inset 0 0 0.2em grey;
  top: 43%;
  left: 27.3%;
}

.ac-auto-handle {
  position: absolute;
  background: linear-gradient(grey, #454545);
  box-shadow: inset 0 0 0.2em #000000;
  height: 0.9em;
  width: 0.45em;
  border-radius: 0.4em 0.4em 1em 0.6em;
  top: 58%;
  left: 25.2%;
}

.ac-auto-top-window {
  position: absolute;
  background: linear-gradient(grey, #454545);
  box-shadow: inset 0 0 0.2em #000000;
  height: 1em;
  width: 1em;
  border-radius: 0.4em 0.4em 0.4em 100%;
  top: 33.5%;
  left: 27.8%;
}

.ac-auto-antenna {
  position: absolute;
  background: #454545;
  height: 1.5em;
  width: 0.1em;
  border-radius: 50% 50% 0 0;
  top: 34%;
  left: 27%;
}

.ac-auto-mirror {
  position: absolute;
  background: #454545;
  box-shadow: 0.2em 0.6em 0.5em grey;
  width: 0.4em;
  height: 1.1em;
  border-radius: 1em;
  top: 45%;
  left: 21.5%;
}

.ac-auto-front-mirror {
  position: absolute;
  background: #454545;
  height: 0.7em;
  width: 0.3em;
  border-radius: 1em;
  transform: skewX(170deg);
  top: 51%;
  left: 15%;
}

.ac-auto-stripe {
  position: absolute;
  height: 0;
  width: 3.4em;
  background: none;
  border-top: 0.2em solid grey;
  border-bottom: 0.2em solid black;
  border-radius: 100% 0 100% 0;
  transform: rotate(174deg);
  top: 55%;
  left: 14.2%;
}

.ac-auto-trailer-base {
  position: absolute;
  background: #ffffff;
  width: 24.2em;
  height: 4.5em;
  border-radius: 0.1em;
  border: 0.5em solid #f3f3f3;
  box-shadow: inset 0 0 0.8em #454545;
  z-index: 1;
  top: 32%;
  left: 33%;
}

.ac-auto-refrigerator {
  position: absolute;
  background: linear-gradient(to right, #ffffff, grey 99%);
  width: 0.75em;
  height: 3.5em;
  border-radius: 0.5em 0 0 0.5em;
  top: 34%;
  left: 31.8%;
}

.ac-auto-guard {
  position: absolute;
  background: linear-gradient(to right, #000000, grey 15%, #ffffff, grey 75%, #000000);
  width: 11em;
  height: 1.2em;
  border-radius: 0 0 0.1em 2em;
  top: 66.3%;
  left: 45%;
}

.ac-auto-reflector {
  position: absolute;
  background: none;
  border-left: 0.4em solid red;
  border-right: 0.4em solid red;
  z-index: 1;
  height: 0.2em;
  width: 1em;
}

.ac-auto-reflector--1 { top: 62%; left: 35%; }
.ac-auto-reflector--2 { top: 62%; left: 43%; }
.ac-auto-reflector--3 { top: 62%; left: 51%; }
.ac-auto-reflector--4 { top: 62%; left: 59%; }
.ac-auto-reflector--5 { top: 62%; left: 67%; }

.ac-auto-brace-one-top {
  position: absolute;
  height: 1em;
  width: 0.3em;
  background: #000000;
  top: 66.4%;
  left: 43%;
}

.ac-auto-brace-one-bottom {
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 0.5em solid black;
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  border-top: 0.4em solid transparent;
  background: none;
  top: 68.4%;
  left: 42.6%;
}

.ac-auto-brace-two-top {
  position: absolute;
  height: 1em;
  width: 0.3em;
  background: #000000;
  top: 66.4%;
  left: 70%;
}

.ac-auto-brace-two-bottom {
  position: absolute;
  height: 0.3em;
  width: 0.8em;
  background: #000000;
  top: 72.4%;
  left: 69.6%;
}

.ac-auto-tire {
  position: absolute;
  background: #000000;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  box-shadow: 0 0.1em 0.1em #454545;
}

.ac-auto-tire--1 { top: 66%; left: 15%; }
.ac-auto-tire--2 { top: 66%; left: 33%; }
.ac-auto-tire--3 { top: 66%; left: 37.1%; }
.ac-auto-tire--4 { top: 66%; left: 61%; }
.ac-auto-tire--5 { top: 66%; left: 65.1%; }

.ac-auto-rim {
  position: relative;
  background: radial-gradient(#000000, #454545, #f3f3f3);
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
}

.ac-auto-rim--1 { top: 18%; left: 17%; }
.ac-auto-rim--2 { top: 18%; left: 19%; }
.ac-auto-rim--3 { top: 18%; left: 20%; }
.ac-auto-rim--4 { top: 18%; left: 19%; }
.ac-auto-rim--5 { top: 18%; left: 19%; }

.ac-auto-ramp {
  position: absolute;
  height: 0.3em;
  width: 8em;
  border: none;
  border-radius: 0.2em;
  background: linear-gradient(#454545, grey);
  transform: rotate(198deg);
  top: 74%;
  left: 74.5%;
}

.ac-auto-crate {
  position: absolute;
  height: 1.79em;
  width: 1.79em;
  background: #6d4a21;
  border: 0.2em solid #563a1a;
  border-radius: 0.2em;
  box-shadow: inset 0 0 0.2em #000000, 0 0.04em;
}

.ac-auto-cross-one {
  position: relative;
  height: 0.2em;
  width: 2.4em;
  background: #563a1a;
  box-shadow: 0 0 0.2em #000000;
  border-radius: 40%;
  transform: rotate(135deg);
  top: 47%;
  right: 15%;
}

.ac-auto-cross-two {
  position: relative;
  height: 0.2em;
  width: 2.4em;
  background: #563a1a;
  box-shadow: 0 0 0.2em #000000;
  border-radius: 40%;
  transform: rotate(225deg);
  top: 30%;
  right: 15%;
}

/* Как в CodePen: .loading + @keyframes box-load */
.ac-auto-crate--loader {
  top: 67%;
  left: 89%;
  transform-origin: 50% 50%;
  -webkit-animation: ac-auto-box-load 1.44s infinite both;
  animation: ac-auto-box-load 1.44s infinite both;
  z-index: 2;
}

@-webkit-keyframes ac-auto-box-load {
  0% {
    top: 67%;
    left: 89%;
    -webkit-transform: none;
    transform: none;
  }

  10% {
    -webkit-transform: translateX(-2.3em) rotate(20deg);
    transform: translateX(-2.3em) rotate(20deg);
  }

  100% {
    -webkit-transform: translate(-13.5em, -3.8em) rotate(0);
    transform: translate(-13.5em, -3.8em) rotate(0);
  }
}

@keyframes ac-auto-box-load {
  0% {
    top: 67%;
    left: 89%;
    transform: none;
  }

  10% {
    transform: translateX(-2.3em) rotate(20deg);
  }

  100% {
    transform: translate(-13.5em, -3.8em) rotate(0);
  }
}

.ac-auto-trailer-fill {
  position: absolute;
  width: 24.4em;
  height: 4.5em;
  background: transparent;
  z-index: 1;
  top: 35.4%;
  left: 33.9%;
}

.ac-auto-crate--1 { top: 49.5%; animation: ac-auto-box-fill-1 32s infinite both; }
.ac-auto-crate--2 { animation: ac-auto-box-fill-2 32s infinite both; }
.ac-auto-crate--3 { top: 49.5%; left: 9%; animation: ac-auto-box-fill-3 32s infinite both; }
.ac-auto-crate--4 { left: 9%; animation: ac-auto-box-fill-4 32s infinite both; }
.ac-auto-crate--5 { top: 49.5%; left: 18%; animation: ac-auto-box-fill-5 32s infinite both; }
.ac-auto-crate--6 { left: 18%; animation: ac-auto-box-fill-6 32s infinite both; }
.ac-auto-crate--7 { top: 49.5%; left: 27%; animation: ac-auto-box-fill-7 32s infinite both; }
.ac-auto-crate--8 { left: 27%; animation: ac-auto-box-fill-8 32s infinite both; }
.ac-auto-crate--9 { top: 49.5%; left: 35.9%; animation: ac-auto-box-fill-9 32s infinite both; }
.ac-auto-crate--10 { left: 35.9%; animation: ac-auto-box-fill-10 32s infinite both; }
.ac-auto-crate--11 { top: 49.5%; left: 44.9%; animation: ac-auto-box-fill-11 32s infinite both; }
.ac-auto-crate--12 { left: 44.9%; animation: ac-auto-box-fill-12 32s infinite both; }
.ac-auto-crate--13 { top: 49.5%; left: 53.9%; animation: ac-auto-box-fill-13 32s infinite both; }
.ac-auto-crate--14 { left: 53.9%; animation: ac-auto-box-fill-14 32s infinite both; }
.ac-auto-crate--15 { top: 49.5%; left: 62.8%; animation: ac-auto-box-fill-15 32s infinite both; }
.ac-auto-crate--16 { left: 62.8%; animation: ac-auto-box-fill-16 32s infinite both; }
.ac-auto-crate--17 { top: 49.5%; left: 71.8%; animation: ac-auto-box-fill-17 32s infinite both; }
.ac-auto-crate--18 { left: 71.8%; animation: ac-auto-box-fill-18 32s infinite both; }
.ac-auto-crate--19 { top: 49.5%; left: 80.8%; animation: ac-auto-box-fill-19 32s infinite both; }
.ac-auto-crate--20 { left: 80.8%; animation: ac-auto-box-fill-20 32s infinite both; }
.ac-auto-crate--21 { top: 49.5%; left: 89.7%; animation: ac-auto-box-fill-21 32s infinite both; }
.ac-auto-crate--22 { left: 89.7%; animation: ac-auto-box-fill-22 32s infinite both; }

@keyframes ac-auto-box-fill-1 {
  0% { opacity: 0; }
  4.4% { opacity: 0; }
  4.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-2 {
  0% { opacity: 0; }
  8.9% { opacity: 0; }
  9% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-3 {
  0% { opacity: 0; }
  13.4% { opacity: 0; }
  13.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-4 {
  0% { opacity: 0; }
  17.9% { opacity: 0; }
  18% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-5 {
  0% { opacity: 0; }
  22.4% { opacity: 0; }
  22.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-6 {
  0% { opacity: 0; }
  26.9% { opacity: 0; }
  27% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-7 {
  0% { opacity: 0; }
  31.4% { opacity: 0; }
  31.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-8 {
  0% { opacity: 0; }
  35.9% { opacity: 0; }
  36% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-9 {
  0% { opacity: 0; }
  40.4% { opacity: 0; }
  40.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-10 {
  0% { opacity: 0; }
  44.9% { opacity: 0; }
  45% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-11 {
  0% { opacity: 0; }
  49.4% { opacity: 0; }
  49.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-12 {
  0% { opacity: 0; }
  53.9% { opacity: 0; }
  54% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-13 {
  0% { opacity: 0; }
  58.4% { opacity: 0; }
  58.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-14 {
  0% { opacity: 0; }
  62.9% { opacity: 0; }
  63% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-15 {
  0% { opacity: 0; }
  67.4% { opacity: 0; }
  67.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-16 {
  0% { opacity: 0; }
  71.9% { opacity: 0; }
  72% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-17 {
  0% { opacity: 0; }
  76.4% { opacity: 0; }
  76.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-18 {
  0% { opacity: 0; }
  80.9% { opacity: 0; }
  81% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-19 {
  0% { opacity: 0; }
  85.4% { opacity: 0; }
  85.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-20 {
  0% { opacity: 0; }
  89.9% { opacity: 0; }
  90% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-21 {
  0% { opacity: 0; }
  94.4% { opacity: 0; }
  94.5% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@keyframes ac-auto-box-fill-22 {
  0% { opacity: 0; }
  98.9% { opacity: 0; }
  99% { opacity: 0.9; }
  100% { opacity: 0.9; }
}

@media screen and (max-width: 640px) {
  .ac-service-full-card.ac-service-full-card--auto {
    overflow: hidden;
  }

  .ac-service-auto-scene {
    padding: 6px 0 10px;
    overflow: hidden;
  }

  /* Меньший em-базис — сцена помещается по ширине без вылета за карточку */
  .ac-service-auto-truck {
    font-size: clamp(6.5px, 2.25vw, 11.5px);
    min-height: 14em;
    border-radius: 0.55em;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  .ac-service-full-card--auto .ac-service-full-card-inner {
    padding: 16px 16px 20px;
  }

  .ac-auto-brand-title {
    font-size: clamp(1.15em, 4.8vw, 1.75em);
  }
}