/* ============================================================
   bolt-ambient.css
   Bolt PWA — Ambient background layer
   All ambient elements z-index: 1.  UI is z-index: 10+.
   Theme switching via data-theme="day"|"night" on container.
   ============================================================ */

/* ── LAYER BASE ── */
.bolt-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Vehicles need visible overflow for lights and exhaust */
.passing-car, .passing-truck { overflow: visible; }
.car-shape, .truck-shape { overflow: visible; }

/* ── THEME VISIBILITY ── */
.bolt-ambient .day-only  { display: none; }
.bolt-ambient .night-only { display: none; }

.bolt-ambient[data-theme="day"]   .day-only   { display: block; }
.bolt-ambient[data-theme="night"] .night-only  { display: block; }


/* ============================================================
   DAY AMBIENT
   ============================================================ */

/* ── Sky wash ── */
.bolt-ambient .day-sky-wash {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40vh;
  background: linear-gradient(to bottom, rgba(168, 212, 240, 0.12), transparent);
  z-index: 1;
  pointer-events: none;
}

/* ── Pixel Sun ── */
.bolt-ambient .pixel-sun {
  position: fixed;
  top: 60px;
  right: 40px;
  width: 12px;
  height: 12px;
  background: #f5d020;
  z-index: 1;
  pointer-events: none;
}
/* Sun rays — top */
.bolt-ambient .pixel-sun::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 4px;
  width: 4px;
  height: 4px;
  background: #f5d020;
  box-shadow:
    0px 16px 0 0 #f5d020,  /* bottom ray */
    -8px 6px 0 0 #f5d020,  /* left ray */
    12px 6px 0 0 #f5d020;  /* right ray */
}

/* ── Pixel Clouds ── */
.bolt-ambient .pixel-cloud {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
}

.bolt-ambient .pixel-cloud-1 {
  top: 15vh;
  animation: bolt-cloud-drift 60s linear infinite;
}

.bolt-ambient .pixel-cloud-2 {
  top: 28vh;
  animation: bolt-cloud-drift 35s linear infinite;
}

/* Cloud shape: main rectangle + two bumps on top */
.pixel-cloud-body {
  width: 48px;
  height: 12px;
  background: #e8f4f8;
  position: relative;
}

.pixel-cloud-body::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 8px;
  width: 16px;
  height: 8px;
  background: #e8f4f8;
}

.pixel-cloud-body::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 28px;
  width: 12px;
  height: 6px;
  background: #e8f4f8;
}

@keyframes bolt-cloud-drift {
  from { left: -80px; }
  to   { left: calc(100vw + 80px); }
}

/* ── Birds (day only) — classic 8-bit seagull silhouette ── */
.bolt-ambient .pixel-bird {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  width: 10px;
  height: 6px;
}

.bolt-ambient .pixel-bird-1 {
  top: 12vh;
  animation: bolt-bird-fly 32s linear infinite;
  animation-delay: 0.3s;
}
.bolt-ambient .pixel-bird-2 {
  top: 20vh;
  animation: bolt-bird-fly 38s linear infinite;
  animation-delay: 1.2s;
}
.bolt-ambient .pixel-bird-3 {
  top: 8vh;
  animation: bolt-bird-fly 28s linear infinite;
  animation-delay: 1.8s;
}

/* Two-frame flap: switch between a flat "_" and a V shape using box-shadows */
.pixel-bird-body {
  position: relative;
  width: 2px;
  height: 2px;
  background: transparent;
  animation: bolt-bird-flap 0.55s steps(1) infinite;
}
/* Frame A: wings level     *-*-*  (a gentle ripple) */
/* Frame B: wings angled    /-\    (V silhouette)    */
@keyframes bolt-bird-flap {
  0%, 49% {
    box-shadow:
      -6px 1px 0 0 rgba(220,230,240,0.45),
      -4px 0px 0 0 rgba(220,230,240,0.45),
      -2px 1px 0 0 rgba(220,230,240,0.45),
       0px 1px 0 0 rgba(220,230,240,0.45),
       2px 0px 0 0 rgba(220,230,240,0.45),
       4px 1px 0 0 rgba(220,230,240,0.45);
  }
  50%, 100% {
    box-shadow:
      -6px 2px 0 0 rgba(220,230,240,0.45),
      -4px 1px 0 0 rgba(220,230,240,0.45),
      -2px 0px 0 0 rgba(220,230,240,0.45),
       0px 1px 0 0 rgba(220,230,240,0.45),
       2px 2px 0 0 rgba(220,230,240,0.45),
       4px 1px 0 0 rgba(220,230,240,0.45);
  }
}

@keyframes bolt-bird-fly {
  from { left: -30px; }
  to   { left: calc(100vw + 30px); }
}

/* ============================================================
   SHARED VEHICLES — one set, appearance changes with theme
   ============================================================ */

.bolt-ambient .ambient-vehicles .passing-car {
  position: absolute;
  /* bottom set dynamically by bolt-ambient.js via getBoundingClientRect()
     on .bottom-nav — pure JS to avoid PWA vs Safari env() mismatches. */
  bottom: 75px;
  opacity: 0;
  animation: bolt-car-drive linear infinite;
  /* Smooth theme transition on colors */
}

.bolt-ambient .ambient-vehicles .passing-car-a {
  animation-duration: 22s;
  animation-delay: 0.2s;
}

.bolt-ambient .ambient-vehicles .passing-car-b {
  animation-duration: 28s;
  animation-delay: 1.5s;
  /* bottom set dynamically by bolt-ambient.js */
}

@keyframes bolt-car-drive {
  0%   { left: -80px; opacity: 0; }
  4%   { opacity: 0.8; }
  93%  { opacity: 0.8; }
  100% { left: calc(100% + 30px); opacity: 0; }
}

/* ── Night car appearance (default) ── */
.bolt-ambient .ambient-vehicles .car-shape {
  position: relative;
  width: 42px; height: 11px;
  background: rgba(30, 40, 60, 0.8);
  border-radius: 3px;
  transition: background 0.5s;
}

.bolt-ambient .ambient-vehicles .car-shape::before {
  content: '';
  position: absolute;
  top: -6px; left: 9px;
  width: 18px; height: 6px;
  background: rgba(30, 40, 60, 0.8);
  border-radius: 3px 3px 0 0;
  transition: background 0.5s;
}

.bolt-ambient .ambient-vehicles .car-shape::after {
  content: '';
  position: absolute;
  top: 0; right: -40px;
  width: 40px; height: 10px;
  background: linear-gradient(to right, rgba(255, 250, 220, 0.5), rgba(255, 250, 220, 0.1), transparent);
  border-radius: 0 8px 8px 0;
  transition: opacity 0.5s;
}

.bolt-ambient .ambient-vehicles .headlights {
  position: absolute;
  top: 1px; right: -3px;
  width: 6px; height: 6px;
  background: #fffbe0;
  border-radius: 50%;
  box-shadow: 0 0 8px 4px rgba(255, 250, 220, 0.6), 0 0 16px 8px rgba(255, 250, 220, 0.2);
  z-index: 3;
  transition: box-shadow 0.5s, background 0.5s;
}

.bolt-ambient .ambient-vehicles .taillights {
  position: absolute;
  top: 1px; left: -3px;
  width: 6px; height: 6px;
  background: #ff4444;
  border-radius: 50%;
  box-shadow: 0 0 8px 4px rgba(255, 50, 50, 0.6), 0 0 16px 8px rgba(255, 50, 50, 0.2);
  z-index: 3;
  transition: box-shadow 0.5s, opacity 0.5s;
}

/* Car-b drives right-to-left */
.bolt-ambient .ambient-vehicles .passing-car-b .car-shape::after {
  right: auto; left: -40px;
  background: linear-gradient(to left, rgba(255, 250, 220, 0.5), rgba(255, 250, 220, 0.1), transparent);
  border-radius: 8px 0 0 8px;
}
.bolt-ambient .ambient-vehicles .passing-car-b .headlights { right: auto; left: -3px; }
.bolt-ambient .ambient-vehicles .passing-car-b .taillights { left: auto; right: -3px; }

/* ── Day car overrides ── */
.bolt-ambient[data-theme="day"] .ambient-vehicles .car-shape {
  background: rgba(0, 180, 160, 0.35);
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .car-shape::before {
  background: rgba(0, 180, 160, 0.3);
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .car-shape::after {
  opacity: 0; /* no headlight beam in day */
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .headlights {
  background: rgba(255, 255, 240, 0.5);
  box-shadow: 0 0 3px 1px rgba(255, 255, 240, 0.2);
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .taillights {
  opacity: 0.15;
  box-shadow: none;
}

/* ── Truck (shared) ── */
.bolt-ambient .ambient-vehicles .passing-truck {
  position: absolute;
  /* bottom set dynamically by bolt-ambient.js */
  bottom: 75px;
  opacity: 0;
  animation: bolt-truck-drive 42s linear infinite;
  animation-delay: 1s;
}

@keyframes bolt-truck-drive {
  0%   { left: -80px; opacity: 0; }
  4%   { opacity: 0.8; }
  93%  { opacity: 0.8; }
  100% { left: calc(100% + 30px); opacity: 0; }
}

.bolt-ambient .ambient-vehicles .truck-shape {
  position: relative;
  width: 56px; height: 12px;
  background: rgba(22, 22, 44, 0.75);
  transition: background 0.5s;
}

.bolt-ambient .ambient-vehicles .truck-shape::before {
  content: '';
  position: absolute;
  top: -9px; right: 0px;
  width: 20px; height: 9px;
  background: rgba(22, 22, 44, 0.75);
  transition: background 0.5s;
}

.bolt-ambient .ambient-vehicles .truck-shape::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 5px;
  width: 8px; height: 8px;
  background: rgba(40, 40, 40, 0.7);
  border-radius: 50%;
  box-shadow: 34px 0 0 rgba(40, 40, 40, 0.7);
}

.bolt-ambient .ambient-vehicles .truck-headlights {
  position: absolute;
  top: 1px; right: -4px;
  width: 6px; height: 6px;
  background: #fffbe0;
  border-radius: 50%;
  box-shadow: 0 0 8px 4px rgba(255, 250, 220, 0.6), 0 0 16px 8px rgba(255, 250, 220, 0.2);
  z-index: 3;
  transition: box-shadow 0.5s, background 0.5s;
}

.bolt-ambient .ambient-vehicles .truck-headlight-beam {
  position: absolute;
  top: 0; right: -44px;
  width: 44px; height: 12px;
  background: linear-gradient(to right, rgba(255, 250, 220, 0.5), rgba(255, 250, 220, 0.1), transparent);
  border-radius: 0 8px 8px 0;
  z-index: 1;
  transition: opacity 0.5s;
}

.bolt-ambient .ambient-vehicles .truck-taillights {
  position: absolute;
  top: 1px; left: -4px;
  width: 6px; height: 6px;
  background: #ff4444;
  border-radius: 50%;
  box-shadow: 0 0 8px 4px rgba(255, 50, 50, 0.6), 0 0 16px 8px rgba(255, 50, 50, 0.2);
  z-index: 3;
  transition: box-shadow 0.5s, opacity 0.5s;
}

.bolt-ambient .ambient-vehicles .truck-exhaust {
  position: absolute;
  top: -4px; left: -8px;
  width: 6px; height: 6px;
  background: rgba(180, 180, 200, 0.3);
  border-radius: 50%;
  animation: exhaust-puff 1.2s ease-out infinite;
}

.bolt-ambient .ambient-vehicles .truck-exhaust::before {
  content: '';
  position: absolute;
  top: -3px; left: -5px;
  width: 5px; height: 5px;
  background: rgba(180, 180, 200, 0.2);
  border-radius: 50%;
  animation: exhaust-puff 1.2s ease-out infinite 0.4s;
}

.bolt-ambient .ambient-vehicles .truck-exhaust::after {
  content: '';
  position: absolute;
  top: -6px; left: -10px;
  width: 4px; height: 4px;
  background: rgba(180, 180, 200, 0.12);
  border-radius: 50%;
  animation: exhaust-puff 1.2s ease-out infinite 0.8s;
}

.bolt-ambient .ambient-vehicles .flag-pole {
  position: absolute;
  top: -14px; left: 8px;
  width: 1px; height: 14px;
  background: rgba(140, 140, 140, 0.5);
  transition: background 0.5s;
}

.bolt-ambient .ambient-vehicles .flag {
  position: absolute;
  top: -1px; right: 2px;
  width: 10px; height: 6px;
  background: rgba(180, 25, 25, 0.6);
  box-shadow: inset 3px 0 0 rgba(200,200,200,0.4), inset -3px 0 0 rgba(200,200,200,0.4);
  transform-origin: right center;
  animation: flag-wave 1.2s ease-in-out infinite;
}

@keyframes flag-wave {
  0%   { transform: skewY(0deg) scaleX(1) translateX(0); }
  20%  { transform: skewY(4deg) scaleX(0.92) translateX(-1px); }
  40%  { transform: skewY(-2deg) scaleX(1.05) translateX(0); }
  60%  { transform: skewY(3deg) scaleX(0.94) translateX(-1px); }
  80%  { transform: skewY(-1deg) scaleX(1.02) translateX(0); }
  100% { transform: skewY(0deg) scaleX(1) translateX(0); }
}

@keyframes exhaust-puff {
  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(-6px, -4px) scale(1.5); opacity: 0.15; }
  100% { transform: translate(-12px, -8px) scale(2); opacity: 0; }
}

/* ── Day truck overrides ── */
.bolt-ambient[data-theme="day"] .ambient-vehicles .truck-shape {
  background: rgba(230, 175, 20, 0.75);
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .truck-shape::before {
  background: rgba(230, 175, 20, 0.75);
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .truck-headlights {
  background: rgba(255, 255, 240, 0.5);
  box-shadow: 0 0 3px 1px rgba(255, 255, 240, 0.2);
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .truck-headlight-beam {
  opacity: 0;
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .truck-taillights {
  opacity: 0.15;
  box-shadow: none;
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .flag-pole {
  background: rgba(180, 180, 180, 0.6);
}
.bolt-ambient[data-theme="day"] .ambient-vehicles .flag {
  background: rgba(220, 30, 30, 0.7);
  box-shadow: inset 3px 0 0 rgba(255,255,255,0.6), inset -3px 0 0 rgba(255,255,255,0.6);
}


/* ============================================================
   NIGHT AMBIENT (sky, moon, stars — still night-only)
   ============================================================ */

.bolt-ambient .night-sky-wash {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 10, 38, 0.45) 0%,
    rgba(8, 10, 38, 0.10) 40%,
    transparent 70%
  );
}

/* Moon */
.bolt-ambient .moon {
  position: absolute;
  top: 14px; right: 22px;
  width: 16px; height: 16px;
  background: rgba(235, 228, 195, 0.15);
  border-radius: 50%;
  box-shadow:
    3px -3px 0 0 rgba(12, 26, 36, 0.95),
    0 0 8px 2px rgba(235, 228, 195, 0.08);
}

/* Stars */
.bolt-ambient .star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
}

.bolt-ambient .star-1 { width: 3px; height: 3px; top: 18px;   left: 8%;   animation: bolt-twinkle 3.2s ease-in-out infinite; }
.bolt-ambient .star-2 { width: 2px; height: 2px; top: 65px;   left: 22%;  animation: bolt-twinkle 4.7s ease-in-out infinite; animation-delay: 1.1s; }
.bolt-ambient .star-3 { width: 3px; height: 3px; top: 30px;   left: 40%;  animation: bolt-twinkle 2.9s ease-in-out infinite; animation-delay: 0.4s; }
.bolt-ambient .star-4 { width: 2px; height: 2px; top: 120px;  left: 55%;  animation: bolt-twinkle 5.2s ease-in-out infinite; animation-delay: 2.3s; }
.bolt-ambient .star-5 { width: 3px; height: 3px; top: 10px;   left: 68%;  animation: bolt-twinkle 3.7s ease-in-out infinite; animation-delay: 0.7s; }
.bolt-ambient .star-6 { width: 2px; height: 2px; top: 85px;   left: 82%;  animation: bolt-twinkle 4.3s ease-in-out infinite; animation-delay: 1.8s; }
.bolt-ambient .star-7 { width: 2px; height: 2px; top: 200px;  left: 12%;  animation: bolt-twinkle 4.0s ease-in-out infinite; animation-delay: 0.2s; }
.bolt-ambient .star-8 { width: 2px; height: 2px; top: 160px;  left: 92%;  animation: bolt-twinkle 5.6s ease-in-out infinite; animation-delay: 3.2s; }

@keyframes bolt-twinkle {
  0%, 100% { opacity: 0.9;  transform: scale(1); }
  40%       { opacity: 0.1;  transform: scale(0.4); }
  65%       { opacity: 0.7;  transform: scale(1.4); }
}


/* ============================================================
   PIXEL COFFEE CUP  —  driver idle animation
   8-bit style, built from box-shadows on a single pixel
   ============================================================ */
.pixel-coffee {
  display: inline-block;
  margin: 0 auto 12px;
  animation: coffeeBob 3s ease-in-out infinite;
}

@keyframes coffeeBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* The mug — built from a 1px element + box-shadows */
.pixel-mug {
  width: 3px;
  height: 3px;
  position: relative;
  background: transparent;
  box-shadow:
    /* Rim */
     0px  0px 0 0 #e0f0f8,
     3px  0px 0 0 #e0f0f8,
     6px  0px 0 0 #e0f0f8,
     9px  0px 0 0 #e0f0f8,
    12px  0px 0 0 #e0f0f8,
    15px  0px 0 0 #e0f0f8,
    /* Body left wall */
     0px  3px 0 0 #90c0d8,
     0px  6px 0 0 #90c0d8,
     0px  9px 0 0 #90c0d8,
     0px 12px 0 0 #90c0d8,
    /* Body right wall */
    15px  3px 0 0 #90c0d8,
    15px  6px 0 0 #90c0d8,
    15px  9px 0 0 #90c0d8,
    15px 12px 0 0 #90c0d8,
    /* Body fill — coffee brown */
     3px  3px 0 0 #8B5E3C,
     6px  3px 0 0 #8B5E3C,
     9px  3px 0 0 #8B5E3C,
    12px  3px 0 0 #8B5E3C,
     3px  6px 0 0 #6B3F1E,
     6px  6px 0 0 #7A4E2D,
     9px  6px 0 0 #6B3F1E,
    12px  6px 0 0 #7A4E2D,
     3px  9px 0 0 #6B3F1E,
     6px  9px 0 0 #6B3F1E,
     9px  9px 0 0 #7A4E2D,
    12px  9px 0 0 #6B3F1E,
     3px 12px 0 0 #5A2E10,
     6px 12px 0 0 #5A2E10,
     9px 12px 0 0 #5A2E10,
    12px 12px 0 0 #5A2E10,
    /* Bottom */
     0px 15px 0 0 #90c0d8,
     3px 15px 0 0 #90c0d8,
     6px 15px 0 0 #90c0d8,
     9px 15px 0 0 #90c0d8,
    12px 15px 0 0 #90c0d8,
    15px 15px 0 0 #90c0d8,
    /* Handle */
    18px  3px 0 0 #90c0d8,
    21px  3px 0 0 #90c0d8,
    21px  6px 0 0 #90c0d8,
    21px  9px 0 0 #90c0d8,
    18px  9px 0 0 #90c0d8;
}

/* Steam wisps */
.pixel-steam {
  position: absolute;
  top: -18px;
  left: 3px;
  width: 3px;
  height: 3px;
  background: transparent;
}

.pixel-steam::before,
.pixel-steam::after,
.pixel-steam-3 {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 0;
}

.pixel-steam::before {
  left: 0px;
  background: rgba(200, 220, 240, 0.5);
  animation: steamRise 2.0s ease-out infinite;
}

.pixel-steam::after {
  left: 6px;
  background: rgba(200, 220, 240, 0.4);
  animation: steamRise 2.4s ease-out infinite;
  animation-delay: 0.7s;
}

.pixel-steam-3 {
  position: absolute;
  top: -18px;
  left: 15px;
  width: 3px;
  height: 3px;
  background: rgba(200, 220, 240, 0.3);
  animation: steamRise 2.8s ease-out infinite;
  animation-delay: 1.3s;
}

@keyframes steamRise {
  0%   { transform: translateY(0); opacity: 0.6; }
  50%  { transform: translateY(-8px) translateX(2px); opacity: 0.3; }
  100% { transform: translateY(-16px) translateX(-1px); opacity: 0; }
}

/* Day mode coffee — darker colors */
[data-theme="day"] .pixel-mug {
  box-shadow:
     0px  0px 0 0 #3a5068,
     3px  0px 0 0 #3a5068,
     6px  0px 0 0 #3a5068,
     9px  0px 0 0 #3a5068,
    12px  0px 0 0 #3a5068,
    15px  0px 0 0 #3a5068,
     0px  3px 0 0 #3a5068,
     0px  6px 0 0 #3a5068,
     0px  9px 0 0 #3a5068,
     0px 12px 0 0 #3a5068,
    15px  3px 0 0 #3a5068,
    15px  6px 0 0 #3a5068,
    15px  9px 0 0 #3a5068,
    15px 12px 0 0 #3a5068,
     3px  3px 0 0 #8B5E3C,
     6px  3px 0 0 #8B5E3C,
     9px  3px 0 0 #8B5E3C,
    12px  3px 0 0 #8B5E3C,
     3px  6px 0 0 #6B3F1E,
     6px  6px 0 0 #7A4E2D,
     9px  6px 0 0 #6B3F1E,
    12px  6px 0 0 #7A4E2D,
     3px  9px 0 0 #6B3F1E,
     6px  9px 0 0 #6B3F1E,
     9px  9px 0 0 #7A4E2D,
    12px  9px 0 0 #6B3F1E,
     3px 12px 0 0 #5A2E10,
     6px 12px 0 0 #5A2E10,
     9px 12px 0 0 #5A2E10,
    12px 12px 0 0 #5A2E10,
     0px 15px 0 0 #3a5068,
     3px 15px 0 0 #3a5068,
     6px 15px 0 0 #3a5068,
     9px 15px 0 0 #3a5068,
    12px 15px 0 0 #3a5068,
    15px 15px 0 0 #3a5068,
    18px  3px 0 0 #3a5068,
    21px  3px 0 0 #3a5068,
    21px  6px 0 0 #3a5068,
    21px  9px 0 0 #3a5068,
    18px  9px 0 0 #3a5068;
}

[data-theme="day"] .pixel-steam::before,
[data-theme="day"] .pixel-steam::after {
  background: rgba(60, 80, 100, 0.25);
}
[data-theme="day"] .pixel-steam-3 {
  background: rgba(60, 80, 100, 0.2);
}