/* Общие эффекты лендинга и лаборатории: фоновые слои, капли на глянце, вступление «бокс»,
   спидометр с одометром, сканер дефектов. Разметка — в шаблонах, поведение — в fx.js. */

/* Фоновые слои под содержимым страницы: z-index -1 рисуется поверх фона body, но под блоками. */
.x-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
canvas.x-layer { width: 100%; height: 100%; }

/* ---------- глянец кузова: тёмный лак с медленным бликом ---------- */
body.fx-gloss { background: radial-gradient(120% 90% at 70% 10%, #141a26 0%, #07090f 55%, #020306 100%) fixed; }
.fx-sheen { inset: -20%;
  background: linear-gradient(105deg, transparent 40%, rgba(160, 190, 255, .10) 47%, rgba(255, 255, 255, .16) 50%,
              rgba(160, 190, 255, .08) 53%, transparent 60%);
  transform: translateX(-60%); animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }

/* ---------- вступление: поднимаются ворота бокса, загораются лампы ---------- */
/* Показывается, только если скрипт в начале страницы поставил html.intro (иначе без JS страница не закрыта). */
.garage { position: fixed; inset: 0; z-index: 50; display: none; background: #050608; overflow: hidden; cursor: pointer; }
html.intro .garage { display: block; }
.garage.done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility 0s .6s; }
.garage-lights { position: absolute; top: 6%; left: 8%; right: 8%; display: flex; justify-content: space-between; }
.garage-lights i { width: 15%; height: 6px; border-radius: 4px; background: #1a1d24; }
.garage.go .garage-lights i { animation: lampOn .9s steps(1) 1.25s forwards; }
.garage.go .garage-lights i:nth-child(2) { animation-delay: 1.37s; }
.garage.go .garage-lights i:nth-child(3) { animation-delay: 1.49s; }
.garage.go .garage-lights i:nth-child(4) { animation-delay: 1.61s; }
.garage.go .garage-lights i:nth-child(5) { animation-delay: 1.73s; }
@keyframes lampOn {
  0% { background: #1a1d24; }
  20% { background: #e9f2ff; box-shadow: 0 0 40px 8px rgba(190, 220, 255, .7); }
  30% { background: #1a1d24; box-shadow: none; }
  45%, 100% { background: #f4f8ff; box-shadow: 0 0 60px 14px rgba(190, 220, 255, .75), 0 120px 200px 40px rgba(120, 160, 255, .15); }
}
.garage-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(47, 107, 255, .12)),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 120px);
  transform: perspective(500px) rotateX(55deg); transform-origin: bottom; }
.garage-door { position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(180deg, #2a2f39 0 62px, #1d2129 62px 66px, #343a46 66px 68px);
  box-shadow: inset 0 -30px 60px rgba(0, 0, 0, .6); }
.garage-logo { font: 800 clamp(28px, 6vw, 64px)/1 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .08em;
  color: rgba(255, 255, 255, .85); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.garage-logo b { color: #4d7cf3; }
.garage-skip { position: absolute; right: 18px; bottom: 18px; color: rgba(255, 255, 255, .45); font: 500 13px -apple-system, "Segoe UI", sans-serif; }
.garage.go .garage-door { animation: doorUp 1.3s cubic-bezier(.6, 0, .25, 1) .15s forwards; }
@keyframes doorUp { 0% { transform: translateY(0); } 8% { transform: translateY(2%); } 100% { transform: translateY(-105%); } }

/* ---------- спидометр с одометром ---------- */
.gauge { position: relative; aspect-ratio: 1; }
.gauge-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gauge-rim { fill: rgba(8, 12, 22, .75); stroke: rgba(120, 150, 255, .18); stroke-width: 2; }
.gauge-track { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 14; stroke-linecap: round; }
.gauge-fill { fill: none; stroke: url(#gArc); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.gauge-fill.glow { opacity: .8; stroke-width: 18; }
.gauge-ticks line { stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.gauge-ticks line.big { stroke: rgba(255, 255, 255, .8); stroke-width: 3; }
.gauge-ticks text { fill: #8d96ab; font: 600 15px -apple-system, "Segoe UI", sans-serif; text-anchor: middle; dominant-baseline: middle; }
.gauge-needle { transform-origin: 150px 150px; transform: rotate(-135deg); }
.gauge-needle path { fill: #ff4d5e; filter: drop-shadow(0 0 6px rgba(255, 77, 94, .8)); }
.gauge-needle circle { fill: #0d1220; stroke: #ff4d5e; stroke-width: 3; }
.gauge-label { color: #8d96ab; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.gauge-unit { color: #8d96ab; font-size: 13px; margin-top: 6px; }
/* одометр: у каждой цифры свой барабан */
.odo { display: inline-flex; gap: 3px; margin-top: 8px; padding: 6px 8px; border-radius: 10px; background: #05070c;
  border: 1px solid rgba(120, 150, 255, .25); box-shadow: inset 0 6px 14px rgba(0, 0, 0, .8); }
.odo .d { position: relative; width: .72em; height: 1.15em; overflow: hidden; border-radius: 5px; color: #fff;
  font: 800 clamp(30px, 4vw, 44px)/1.15 "SF Mono", Menlo, Consolas, monospace;
  background: linear-gradient(180deg, #0b0f19, #171e2c 50%, #0b0f19); }
.odo .d::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 30%, transparent 70%, rgba(0, 0, 0, .55)); }
.odo .d > span { display: block; text-align: center; }
.odo .d i { display: block; font-style: normal; }
.odo .sep { width: .25em; }

/* ---------- сканер дефектов ---------- */
.scan { position: relative; max-width: 1000px; margin: 30px auto 0; }
.scan-car { display: block; width: 100%; height: auto; overflow: hidden; }
.scan-shadow { fill: rgba(47, 107, 255, .18); filter: blur(10px); }
.car-body { fill: url(#body); stroke: rgba(120, 170, 255, .55); stroke-width: 1.6; }
.car-glass { fill: url(#glass); stroke: rgba(120, 170, 255, .35); }
.car-line { stroke: rgba(120, 170, 255, .2); fill: none; }
.car-handle { fill: rgba(120, 170, 255, .35); }
.car-light.front { fill: #dfeaff; filter: drop-shadow(0 0 8px #9fc2ff); }
.car-light.rear { fill: #ff4d5e; filter: drop-shadow(0 0 8px #ff4d5e); }
.wheel circle { fill: #07090e; stroke: rgba(120, 170, 255, .4); stroke-width: 2; }
.wheel .rim { fill: #121826; stroke: rgba(160, 190, 255, .55); }
.reflect { fill: rgba(255, 255, 255, .07); animation: reflect 5s ease-in-out infinite; }
@keyframes reflect { 0% { transform: skewX(-25deg) translateX(0); } 60%, 100% { transform: skewX(-25deg) translateX(1100px); } }
.scan-beam rect:first-child { filter: drop-shadow(0 0 10px #5ad1ff) drop-shadow(0 0 22px #2f6bff); }
.beam-trail { fill: rgba(90, 209, 255, .08); }
.defect circle { fill: #ff4d5e; opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box;
  transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.defect.on circle { opacity: 1; transform: scale(1); }
.defect .ring { fill: none; stroke: #ff4d5e; stroke-width: 2; }
.defect.on .ring { animation: ring 1.4s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.scan-labels { position: absolute; inset: 0; pointer-events: none; }
.scan-label { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -150%) scale(.8); opacity: 0;
  padding: 8px 12px; border-radius: 12px; font-size: 14px; white-space: nowrap; color: #fff;
  background: rgba(16, 22, 38, .9); border: 1px solid rgba(255, 77, 94, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  transition: opacity .35s, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.scan-label.on { opacity: 1; transform: translate(-50%, -170%) scale(1); }

@media (max-width: 960px) {
  .scan-label { font-size: 12px; padding: 6px 9px; }
}
@media (max-width: 560px) {
  /* на узком экране подписи не помещаются над машиной — выносим их списком под ней */
  .scan-labels { position: static; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .scan-label { position: static; transform: translateX(-12px); white-space: normal; }
  .scan-label.on { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .garage { display: none !important; }
  .fx-sheen, .reflect { animation: none; }
}