/* =========================================================
   TAXI DECOR — анимированные элементы-отсылки на такси
   ========================================================= */

/* ---------- CHECKER STRIPE (шашечный разделитель) ---------- */
.checker-strip {
  position: relative;
  height: 14px;
  overflow: hidden;
  background:
    linear-gradient(45deg, var(--accent) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(-45deg, var(--accent) 25%, transparent 25%) 0 10px / 20px 20px,
    linear-gradient(45deg, transparent 75%, var(--accent) 75%) 10px -10px / 20px 20px,
    linear-gradient(-45deg, transparent 75%, var(--accent) 75%) 10px 0 / 20px 20px,
    var(--accent-ink);
  animation: checker-slide 6s linear infinite;
  box-shadow: 0 0 40px var(--accent-ring);
}
.checker-strip--thin { height: 6px; }
.checker-strip--flat {
  background:
    repeating-linear-gradient(90deg,
      var(--accent) 0 20px,
      var(--accent-ink) 20px 40px);
  animation: strip-slide 4s linear infinite;
}
@keyframes checker-slide {
  0%   { background-position: 0 0, 0 10px, 10px -10px, 10px 0; }
  100% { background-position: 40px 0, 40px 10px, 50px -10px, 50px 0; }
}
@keyframes strip-slide {
  from { background-position: 0 0; }
  to   { background-position: 40px 0; }
}

/* ---------- NIGHT STREET (фары в темноте) ---------- */
.night-street {
  position: relative;
  height: 120px;
  overflow: hidden;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 55%,
      #0a0a0f 55%,
      #07070b 100%);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .night-street {
  background:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 55%,
      #2a2a35 55%,
      #1a1a22 100%);
}
/* дорожная разметка */
.night-street::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 78%;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #FFE066 0 30px,
    transparent 30px 60px);
  opacity: .7;
  animation: road-dash 1.2s linear infinite;
}
@keyframes road-dash {
  from { background-position: 0 0; }
  to   { background-position: -60px 0; }
}
/* фары — проезжающие точки света */
.night-street__headlight {
  position: absolute;
  bottom: 14%;
  width: 80px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 230, 150, .85) 0%,
    rgba(255, 180, 80, .4) 30%,
    transparent 70%);
  filter: blur(4px);
  animation: headlight-pass 7s linear infinite;
}
.night-street__headlight:nth-child(2) { animation-delay: -2.3s; animation-duration: 9s; bottom: 18%; transform: scale(.7); }
.night-street__headlight:nth-child(3) { animation-delay: -4.7s; animation-duration: 11s; bottom: 16%; transform: scale(.55); }
.night-street__headlight:nth-child(4) { animation-delay: -1.2s; animation-duration: 8s; bottom: 20%; transform: scale(.4); }
@keyframes headlight-pass {
  0%   { left: -120px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
/* звёздочки / огни окон вдалеке */
.night-street__lights {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 30%, rgba(255,200,100,.8), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(255,220,150,.6), transparent),
    radial-gradient(1px 1px at 40% 25%, rgba(180,200,255,.7), transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(255,190,120,.7), transparent),
    radial-gradient(1px 1px at 75% 20%, rgba(255,230,180,.8), transparent),
    radial-gradient(1px 1px at 85% 35%, rgba(255,180,100,.6), transparent),
    radial-gradient(1px 1px at 50% 15%, rgba(220,230,255,.7), transparent),
    radial-gradient(1px 1px at 15% 50%, rgba(255,210,140,.5), transparent);
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* ---------- TAXI SIGN (знак остановки) ---------- */
.taxi-sign {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2em;
  position: relative;
  box-shadow: 0 0 0 3px var(--accent-ink), 0 0 0 5px var(--accent), 0 10px 30px var(--accent-ring);
}
.taxi-sign::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E63946;
  box-shadow: 0 0 0 3px rgba(230,57,70,.25);
  animation: sign-pulse 1.4s ease-in-out infinite;
}
@keyframes sign-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(230,57,70,.25), 0 0 12px rgba(230,57,70,.6); }
  50%      { box-shadow: 0 0 0 8px rgba(230,57,70,0),    0 0 20px rgba(230,57,70,1); }
}
.taxi-sign__checker {
  position: absolute;
  left: 0; right: 0; top: -6px;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent-ink) 0 6px,
    var(--accent) 6px 12px);
  border-radius: 6px 6px 0 0;
}

/* ---------- TAXIMETER (таксометр) ---------- */
.taximeter {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: #0b0b12;
  border: 1px solid #23232d;
  border-radius: 10px;
  font-family: var(--font-mono);
  color: #FFB347;
  text-shadow: 0 0 8px rgba(255,179,71,.6);
  box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.3);
  position: relative;
  overflow: hidden;
}
.taximeter::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(255,179,71,.05) 2px 3px);
  pointer-events: none;
}
.taximeter__label {
  font-size: 9px;
  letter-spacing: .25em;
  color: #7a6a55;
  text-shadow: none;
}
.taximeter__value {
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.taximeter__value::after {
  content: "";
  display: inline-block;
  width: 4px; height: 22px;
  background: currentColor;
  margin-left: 4px;
  vertical-align: middle;
  animation: blink-cursor 1s steps(2) infinite;
}
@keyframes blink-cursor {
  50% { opacity: 0; }
}
.taximeter__unit {
  font-size: 10px;
  color: #7a6a55;
  text-shadow: none;
  letter-spacing: .2em;
}

/* ---------- FLOATING TAXIS (парящие машинки) ---------- */
.taxi-float-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.taxi-float {
  position: absolute;
  font-size: 28px;
  opacity: .15;
  animation: taxi-drift 20s linear infinite;
  filter: drop-shadow(0 4px 8px var(--accent-ring));
}
.taxi-float svg { display: block; }
.taxi-float:nth-child(1) { top: 15%; left: -60px; animation-duration: 22s; }
.taxi-float:nth-child(2) { top: 45%; left: -60px; animation-duration: 28s; animation-delay: -8s; transform: scale(.7); }
.taxi-float:nth-child(3) { top: 70%; left: -60px; animation-duration: 18s; animation-delay: -4s; transform: scale(.85); }
.taxi-float:nth-child(4) { top: 30%; left: -60px; animation-duration: 32s; animation-delay: -15s; transform: scale(.55); }
@keyframes taxi-drift {
  0%   { transform: translateX(0) scale(var(--s, 1)); }
  100% { transform: translateX(calc(100vw + 120px)) scale(var(--s, 1)); }
}

/* ---------- PASSENGERS LINE (очередь пассажиров) ---------- */
.passengers {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 20px 0;
  position: relative;
}
.passengers::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 16px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--text-3) 0 6px,
    transparent 6px 12px);
  opacity: .4;
}
.passenger {
  width: 44px;
  height: 60px;
  position: relative;
  animation: passenger-wave 3s ease-in-out infinite;
}
.passenger:nth-child(2) { animation-delay: .3s; }
.passenger:nth-child(3) { animation-delay: .6s; }
.passenger:nth-child(4) { animation-delay: .9s; }
.passenger:nth-child(5) { animation-delay: 1.2s; }
.passenger svg { width: 100%; height: 100%; }
@keyframes passenger-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.passenger__suitcase {
  position: absolute;
  bottom: 2px;
  right: -8px;
  width: 14px; height: 12px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.passenger__suitcase::before {
  content: "";
  position: absolute;
  top: -3px; left: 4px; right: 4px; height: 3px;
  border: 1.5px solid var(--accent);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

/* ---------- ARRIVING TAXI (подъезжающее такси) ---------- */
.arriving-taxi {
  position: relative;
  height: 120px;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--line);
}
.arriving-taxi__road {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 50px;
  background: linear-gradient(to bottom, #1a1a22 0%, #0a0a10 100%);
}
.arriving-taxi__road::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0 24px,
    transparent 24px 48px);
  transform: translateY(-50%);
  animation: road-dash 1s linear infinite;
}
.arriving-taxi__car {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 50px;
  animation: car-bounce .4s ease-in-out infinite alternate;
}
@keyframes car-bounce {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-2px); }
}

/* ---------- CALCULATOR BADGE — шашечная полоска ---------- */
.calc-strip {
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent-ink) 0 12px,
    var(--accent) 12px 24px);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  animation: strip-slide 3s linear infinite;
  overflow: hidden;
}

/* ---------- RIBBON (бегущая шашечная лента) ---------- */
.taxi-ribbon {
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  background: var(--accent-ink);
  color: var(--accent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.taxi-ribbon__track {
  display: flex;
  gap: 48px;
  align-items: center;
  white-space: nowrap;
  animation: ribbon-scroll 30s linear infinite;
  padding-left: 48px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.taxi-ribbon__track > * { flex-shrink: 0; }
.taxi-ribbon__dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.taxi-ribbon__checker {
  width: 32px; height: 20px;
  background:
    linear-gradient(45deg, var(--accent) 25%, transparent 25%) 0 0 / 10px 10px,
    linear-gradient(-45deg, var(--accent) 25%, transparent 25%) 0 5px / 10px 10px,
    linear-gradient(45deg, transparent 75%, var(--accent) 75%) 5px -5px / 10px 10px,
    linear-gradient(-45deg, transparent 75%, var(--accent) 75%) 5px 0 / 10px 10px;
}
@keyframes ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- CORNER TAXI (угловой блок с таксометром) ---------- */
.hero-taximeter {
  position: absolute;
  right: 24px; bottom: 24px;
  z-index: 4;
  transform: rotate(-2deg);
  animation: meter-tilt 6s ease-in-out infinite;
}
@keyframes meter-tilt {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(1deg); }
}

@media (max-width: 960px) {
  .hero-taximeter { display: none; }
  .taxi-ribbon__track { font-size: 12px; gap: 32px; padding-left: 32px; }
  .night-street { height: 80px; }
  .passengers { gap: 8px; }
  .passenger { width: 36px; height: 50px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .checker-strip, .checker-strip--flat, .calc-strip, .taxi-ribbon__track,
  .night-street::before, .arriving-taxi__road::before,
  .night-street__headlight, .taxi-float, .passenger, .taxi-sign::before,
  .hero-taximeter, .taximeter__value::after, .night-street__lights,
  .arriving-taxi__car {
    animation: none !important;
  }
}