#stage { position: fixed; inset: 0; overflow: hidden; background: #000; }
#sky, #stars { position: absolute; inset: 0; }
#stars { bottom: 30%; opacity: 0; }
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff;
  animation: twinkle 3s infinite ease-in-out;
}
@keyframes twinkle { 50% { opacity: .25; } }

#orb {
  position: absolute; width: calc(var(--u) * 9); height: calc(var(--u) * 9);
  border-radius: 50%; transform: translate(-50%, -50%);
}

#clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute; left: 0; width: calc(var(--u) * 14); height: calc(var(--u) * 4);
  background: #fff; border-radius: 99px; opacity: .85;
  animation: drift linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 38%; height: 150%; left: 14%; top: -70%; }
.cloud::after { width: 28%; height: 120%; left: 46%; top: -45%; }
@keyframes drift { from { left: -25vw; } to { left: 110vw; } }

#far { position: absolute; left: 0; bottom: var(--ground); width: 300vw; height: 22vh; opacity: .55; }
#far svg { width: 100%; height: 100%; display: block; }

#trees, #trees-mid { position: absolute; left: 0; bottom: calc(var(--ground) - 1.5%); height: 0; }
#trees-mid { opacity: .75; bottom: calc(var(--ground) - .5%); }
.tree { position: absolute; bottom: 0; transform: translateX(-50%); }
.tree svg { width: 100%; height: 100%; display: block; }

#ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--ground);
  background: linear-gradient(var(--ground-color), var(--ground-color)), #000;
  box-shadow: inset 0 calc(var(--u) * .8) 0 rgba(255, 255, 255, .28);
}
#ground::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.14)); }
#dashes {
  position: absolute; left: 0; right: 0; top: 30%; height: calc(var(--u) * .7);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 4vw, transparent 4vw 12vw);
  background-size: 12vw 100%;
}

#props, #actors { position: absolute; inset: 0; pointer-events: none; }

/* painted backdrops (js/backdrops.js): one .bd per place, layered .bd-l for parallax */
#backdrop { position: absolute; inset: 0; pointer-events: none; }
.bd { position: absolute; inset: 0; }
.bd-l { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.bd-l svg { width: 100%; height: 100%; display: block; }
.bd-twinkle { animation: twinkle 3s infinite ease-in-out; }
.bd-drift { animation: cloudDrift 60s ease-in-out infinite alternate; }
.bd-birds { animation: birds 9s ease-in-out infinite alternate; }
.bd-flag { animation: flag 2.2s ease-in-out infinite alternate; transform-origin: 1458px 225px; transform-box: view-box; }
.bd-flame { animation: flame .35s ease-in-out infinite alternate; transform-origin: 0 -6px; transform-box: fill-box; }
.bd-flow { animation: flow 1.2s linear infinite; }
.bd-foam { animation: foam 4s ease-in-out infinite alternate; }
.bd-waterfall { animation: shimmer 1.6s ease-in-out infinite alternate; }
@keyframes cloudDrift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
@keyframes birds { from { transform: translate(0, 0); } to { transform: translate(60px, -20px); } }
@keyframes flag { from { transform: skewY(-3deg) scaleX(.96); } to { transform: skewY(3deg) scaleX(1); } }
@keyframes flame { from { transform: scale(1, .9) rotate(-3deg); } to { transform: scale(.94, 1.08) rotate(3deg); } }
@keyframes flow { to { stroke-dashoffset: -44; } }
@keyframes foam { from { transform: translateX(-30px); opacity: .7; } to { transform: translateX(30px); opacity: .95; } }
@keyframes shimmer { from { opacity: .85; } to { opacity: 1; } }

/* finishing: soft vignette + a whisper of film grain over everything */
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(20, 10, 30, .38) 100%); }
#grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Solan hills (college years) */
#mountains { position: absolute; left: -5vw; bottom: calc(var(--ground) + 4vh); width: 160vw; height: 36vh; opacity: 0; }
#mountains svg { width: 100%; height: 100%; display: block; }
#pines, #pines-mid { position: absolute; left: 0; bottom: calc(var(--ground) - 1.5%); height: 0; opacity: 0; }
#pines-mid { bottom: calc(var(--ground) - .5%); }
#campus { position: absolute; left: 0; bottom: calc(var(--ground) - .5%); height: 0; opacity: 0; }
.building { position: absolute; bottom: 0; transform: translateX(-50%); }
.building svg { width: 100%; height: auto; display: block; overflow: visible; }

/* trips: turbines, shooting stars, underwater */
.bd-spin { animation: spin 4s linear infinite; }
.bd-shoot { opacity: 0; animation: shoot 7.5s linear infinite; }
@keyframes shoot { 0%, 86% { opacity: 0; transform: translate(0, 0); } 88% { opacity: 1; } 96% { opacity: 0; transform: translate(220px, 94px); } 100% { opacity: 0; } }
.bd-rays { animation: rays 6s ease-in-out infinite alternate; }
@keyframes rays { from { opacity: .7; transform: skewX(-3deg); } to { opacity: 1; transform: skewX(3deg); } }
.bd-swim { animation: cloudDrift 7s ease-in-out infinite alternate; }
.bd-sway { animation: kelp 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes kelp { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.bd-bubble { animation: bubbleUp 6s linear infinite; }
@keyframes bubbleUp { from { transform: translateY(0); opacity: 0; } 10% { opacity: .8; } to { transform: translateY(-700px); opacity: 0; } }