/* Living backgrounds behind the main screens (js/ambient.js). Slow, faint, and only transform/opacity move. */
.screen { isolation: isolate; }
.ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient i { position: absolute; display: block; font-style: normal; will-change: transform; }

.amb-sun { right: 6%; top: 5%; width: 13dvh; height: 13dvh; border-radius: 50%; background: radial-gradient(#fff6c4, #ffe27a 55%, rgba(255, 226, 122, 0) 72%); animation: ambGlow 7s ease-in-out infinite; opacity: .85; }
@keyframes ambGlow { 50% { transform: scale(1.12); opacity: 1; } }

.amb-cloud { left: 0; width: 110px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, .8); transform: scale(var(--s, 1));
  box-shadow: 34px -14px 0 6px rgba(255, 255, 255, .8), -26px -6px 0 2px rgba(255, 255, 255, .7); animation: ambDrift 100s linear infinite; }
@keyframes ambDrift { from { translate: -200px 0; } to { translate: calc(100vw + 120px) 0; } }

.amb-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26%; opacity: .5; }
.amb-car { bottom: calc(26% * .17); left: 0; width: 22px; height: 9px; border-radius: 5px 8px 3px 3px; background: #e2392c; opacity: .7; animation: ambCar 40s linear infinite; }
.amb-car::before, .amb-car::after { content: ""; position: absolute; bottom: -3px; width: 6px; height: 6px; border-radius: 50%; background: #2b2f3a; }
.amb-car::before { left: 3px; } .amb-car::after { right: 3px; }
@keyframes ambCar { from { translate: -40px 0; } to { translate: calc(100vw + 40px) 0; } }

.amb-balloon { left: 0; bottom: 0; font-size: clamp(1.4rem, 5dvh, 2.2rem); opacity: 0; animation: ambBalloon 50s ease-in-out infinite; }
@keyframes ambBalloon { 0% { transform: translate(12vw, 10dvh); opacity: 0; } 6% { opacity: .85; } 40% { transform: translate(22vw, -70dvh) rotate(6deg); opacity: .85; } 44%, 100% { transform: translate(24vw, -80dvh); opacity: 0; } }
.amb-bird { left: 0; top: 20%; width: 18px; height: 8px; opacity: 0; animation: ambBird 40s linear infinite; }
.amb-bird::before, .amb-bird::after { content: ""; position: absolute; top: 0; width: 10px; height: 6px; border-top: 2.5px solid #3a3f4a; border-radius: 50% 50% 0 0; animation: ambFlap .5s ease-in-out infinite alternate; }
.amb-bird::before { left: 0; } .amb-bird::after { left: 8px; }
@keyframes ambFlap { to { transform: scaleY(.4); } }
@keyframes ambBird { 0% { transform: translate(-40px, 0); opacity: 0; } 3% { opacity: .7; } 30% { transform: translate(55vw, -30px); opacity: .7; } 33%, 100% { transform: translate(60vw, -34px); opacity: 0; } }
.amb-spark { width: 14px; height: 14px; background: #fff6b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ambTwinkle 3.2s ease-in-out infinite; opacity: .6; }
@keyframes ambTwinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .15; } }

body.calm .ambient *, body.calm .ambient *::before, body.calm .ambient *::after { animation: none !important; }
body.calm .amb-balloon, body.calm .amb-bird, body.calm .amb-car { display: none; }
body.calm .amb-cloud { translate: 30vw 0; }
@media (prefers-reduced-motion: reduce) { .ambient * { animation: none !important; } .amb-balloon, .amb-bird, .amb-car { display: none; } }

/* Home: the car drives along a road on the grass, scenery scrolling left behind it */
#home .podium { display: none; }
#home .garage { align-items: flex-end; }
#home .home-actions, #home .home-mech { align-self: center; }
#home .showroom { margin-bottom: calc(19dvh - 8px); }
#home .scenery { overflow: visible; }
.home-far, .home-trees { position: absolute; left: 0; width: 200%; background-repeat: repeat-x; background-size: 50% 100%; pointer-events: none; will-change: transform; }
.home-far { bottom: 100%; height: 14dvh; opacity: .9; animation: homeScroll 70s linear infinite; }
.home-trees { bottom: calc(100% - 2px); height: 9dvh; animation: homeScroll 24s linear infinite; }
@keyframes homeScroll { to { transform: translateX(-50%); } }
.home-road { position: absolute; left: 0; right: 0; top: 0; height: 10dvh; background: linear-gradient(#5b6475, #4a5263); border-top: 3px solid #d8cfbb; border-bottom: 3px solid #d8cfbb; overflow: hidden; z-index: 1; }
.home-road i { position: absolute; left: 0; top: 50%; width: 200%; height: 4px; margin-top: -2px; will-change: transform;
  background: repeating-linear-gradient(90deg, #f3eedf 0 34px, transparent 34px 80px); animation: homeScroll 1.6s linear infinite; }
#home .grass { top: 0; }
/* The car bobs on its springs and goes over a small bump every so often */
#home .showroom .car-slot { animation: homeBump 6.5s ease-in-out infinite; }
@keyframes homeBump { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 74% { transform: translateY(-7px) rotate(-1.6deg); } 79% { transform: translateY(1px) rotate(.6deg); } 83% { transform: translateY(-2px) rotate(0); } }
body.calm .home-far, body.calm .home-trees, body.calm .home-road i, body.calm #home .showroom .car-slot { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .home-far, .home-trees, .home-road i, #home .showroom .car-slot { animation: none !important; } }
#home .garage { z-index: 2; }
#home .scenery { z-index: 0; }
/* Phones stack the home screen in a column, so the car keeps its stand there */
@media (max-width: 700px) { #home .podium { display: block; } #home .showroom { margin-bottom: 0; } #home .garage { align-items: center; } .home-road, .home-trees { display: none; } }