/* =============================================================
   build/atmosphere.css — shared scarecrow / cloud / crow scene
   Used by retail.html (inline copy) and the wired dyno pages.
   Theme-aware via body.perf / body.eco classes.
   ============================================================= */

.bg-stage {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-sky { position: absolute; inset: 0; }
body.perf .bg-sky {
  background:
    radial-gradient(ellipse at 50% 0%, #1a1f2c 0%, #060810 60%, #03050a 100%),
    linear-gradient(180deg, #0a0d14 0%, #050609 100%);
}
body.eco .bg-sky {
  background: linear-gradient(180deg,
    #6cb7e0 0%, #8fcaeb 25%, #b8e3d8 55%, #6f9b48 78%, #2d4a1f 100%);
}

/* Full-screen scarecrow scene at 50% opacity so it reads as backdrop */
.bg-scarecrow {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.5;
}
body.perf .bg-scarecrow {
  background-image: url('scarecrow-perf.png');
  filter: contrast(1.02) saturate(0.95);
}
body.eco .bg-scarecrow {
  background-image: url('scarecrow-eco.png');
  filter: saturate(1.05) contrast(1.02);
}

/* Overlay: light horizontal darken on the left where content lives */
.bg-overlay { position: absolute; inset: 0; }
body.perf .bg-overlay {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.30) 28%,
    rgba(0,0,0,0.05) 55%,
    rgba(0,0,0,0) 80%);
}
body.eco .bg-overlay {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0.18) 28%,
    rgba(0,0,0,0.00) 55%,
    rgba(0,0,0,0) 80%);
}

/* Drifting clouds */
.bg-clouds { position: absolute; inset: 0; overflow: hidden; }
.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  animation: cloud-drift linear infinite;
}
body.perf .cloud {
  background: radial-gradient(ellipse, rgba(95, 105, 125, 0.55) 0%, rgba(60, 70, 90, 0.20) 45%, rgba(0,0,0,0) 75%);
}
body.eco .cloud {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255,255,255,0) 75%);
}
@keyframes cloud-drift {
  from { transform: translateX(-30vw); }
  to   { transform: translateX(130vw); }
}

/* Crow flock */
.bg-crows { position: absolute; inset: 0; pointer-events: none; }
.crow {
  position: absolute;
  width: 56px; height: 36px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
  transition: transform 1.6s cubic-bezier(.3,.6,.3,1), opacity 0.5s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
body.eco .crow { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
.crow .crow-wing { transform-origin: 22px 22px; }
.crow.flying .crow-wing,
.crow.flying-out .crow-wing { animation: crow-wing-flap 0.16s ease-in-out infinite; }
.crow.flying .crow-wing-r,
.crow.flying-out .crow-wing-r { animation-delay: -0.08s; }
.crow.spooked .crow-wing { animation: crow-wing-flap 0.10s ease-in-out infinite; }
.crow.spooked .crow-wing-r { animation-delay: -0.05s; }
.crow.perched .crow-wing { transform: rotate(0); }
.crow.spooked { animation: crow-spook-shake 0.10s ease-in-out 5; }
@keyframes crow-wing-flap { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-28deg); } }
@keyframes crow-spook-shake {
  0%,100% { translate: 0 0; }
  25% { translate: -2px -1px; }
  75% { translate:  2px -1px; }
}

/* Lift everything else above the atmospheric layer */
body.with-atmosphere .topbar,
body.with-atmosphere .dyno-stage,
body.with-atmosphere .dyno-actions,
body.with-atmosphere .veh-stage,
body.with-atmosphere .intent-stage,
body.with-atmosphere .dash-stage,
body.with-atmosphere main,
body.with-atmosphere .build-sheet,
body.with-atmosphere .briefing,
body.with-atmosphere .dash-rooms-nav,
body.with-atmosphere .dash-status-strip,
body.with-atmosphere .dash-build-card,
body.with-atmosphere .dash-progress-card,
body.with-atmosphere .dash-recent,
body.with-atmosphere .dash-quick-actions,
body.with-atmosphere .commit-bar,
body.with-atmosphere .section-title,
body.with-atmosphere .section-subtitle,
body.with-atmosphere .product-grid,
body.with-atmosphere #budrix-build-badge { position: relative; z-index: 5; }
body.with-atmosphere .topbar { z-index: 30; }
/* The atmospheric backdrop: dampen opacity globally so it never dominates content */
body.with-atmosphere .bg-scarecrow { opacity: 0.20 !important; }
body.eco.with-atmosphere .bg-scarecrow { opacity: 0.30 !important; }