/* The sky behind the story: stars, moon, sun and the Riverside Auto street.
   js/sky.js sets --p (0 to 1) on each [data-sky] scene as it scrolls through the screen.
   Every var(--p, n) fallback is that scene's resting frame, used for reduced motion and before the script runs. */

.sky-stars {
  position: absolute; left: 0; right: 0; top: -80px; bottom: -80px; z-index: -1; pointer-events: none;
  background-size: 640px 560px;
  background-image:
    radial-gradient(1.3px 1.3px at 6% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 17% 41%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 7%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 39% 63%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 52% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 64% 79%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 76% 29%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 95% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 9% 88%, #fff 50%, transparent 51%);
  transform: translateY(calc(var(--p, 0.5) * 160px - 80px));
  will-change: transform;
}
.sky-stars::after {
  content: ""; position: absolute; inset: 0;
  background-size: 430px 500px;
  background-image:
    radial-gradient(1.8px 1.8px at 18% 22%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 61% 44%, #e4e0ff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 84% 12%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 37% 81%, #e4e0ff 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.2; } to { opacity: 1; } }

.street { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 84px; pointer-events: none; }
.st-bld { fill: var(--st-bld, #0d0b27); transition: fill 0.8s ease; }
.st-bay { fill: var(--st-bay, #1a1740); transition: fill 0.8s ease; }
.st-door { fill: var(--st-door, #1a1740); transform-box: fill-box; transform-origin: 50% 0; transition: fill 0.8s ease; }
.st-sign { fill: var(--st-sign, #1d1752); transition: fill 0.8s ease; }
.st-sign-t { fill: var(--st-sign-t, #a59fdc); font: 600 13px/1 var(--font-display); letter-spacing: 2px; transition: fill 0.8s ease; }
.st-off { fill: var(--st-off, #2a2170); transition: fill 0.8s ease; }
.st-win { fill: #f5b94a; transition: opacity 0.4s ease; }

/* Hero: the street outside at closing time. Windows come on now and then, like calls coming in. */
.hero .sky-stars { opacity: 0.75; transition: opacity 0.8s ease; }
.hero .street { z-index: -1; }
.street--hero .w2 { animation: window 7s steps(1) infinite; }
.street--hero .w4 { animation: window 9s steps(1) 2s infinite; }
@keyframes window { 0% { opacity: 0; } 35% { opacity: 1; } 80% { opacity: 1; } 81% { opacity: 0; } }
.shoot {
  position: absolute; top: 14%; left: 72%; z-index: -1; width: 140px; height: 1.5px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff); transform: rotate(-18deg);
  animation: shoot 11s ease-in 3s infinite;
}
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-18deg); } 2% { opacity: 1; } 6% { opacity: 0; transform: translate(-260px, 86px) rotate(-18deg); } 100% { opacity: 0; } }
/* The story's day beats light the street and put the stars away. */
.hero:has([data-beat="4"]), .hero:has([data-beat="5"]) { --st-bld: #d9d1f2; --st-bay: #3d3550; --st-door: #cfc3e8; --st-sign: #e9e3f8; --st-sign-t: #5a3b8a; --st-off: #e9e3f8; }
.hero:has([data-beat="4"]) .sky-stars, .hero:has([data-beat="5"]) .sky-stars, .hero:has([data-beat="4"]) .shoot, .hero:has([data-beat="5"]) .shoot { opacity: 0; animation: none; }
.hero:has([data-beat="4"]) .st-win, .hero:has([data-beat="5"]) .st-win { opacity: 0; animation: none; }

/* Night: the stars carry on behind Portal, Calliope and DataBridge, and the moon sets as you scroll. */
.md--portal, .md--call, .md--bridge, .md--camp, .md--dash { position: relative; isolation: isolate; overflow: clip; }
.md--portal .sky-stars, .md--call .sky-stars, .md--bridge .sky-stars { opacity: 0.45; }
.md--bridge .sky-stars { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.moon {
  position: absolute; right: 8%; top: 28px; z-index: -1; width: 40px; height: 40px; border-radius: 50%; pointer-events: none;
  box-shadow: inset -10px 5px 0 0 #e9e4ff; filter: drop-shadow(0 0 16px rgba(201, 190, 255, 0.45));
  transform: translate(calc(var(--p, 0.5) * -60px), calc(var(--p, 0.5) * 260px));
}

/* Sunrise: stars fade, the sun comes up behind the street and the windows go out. */
.dawn {
  position: relative; isolation: isolate; overflow: clip; height: 300px;
  background: linear-gradient(180deg, var(--night-0) 0%, #2a2170 30%, #6d5bd0 52%, #c9b6f0 70%, #fbd9c4 86%, var(--paper) 100%);
  --st-bld: #2a2170; --st-bay: #1a1740; --st-door: #1a1740; --st-sign: #3b2f86; --st-sign-t: #c6c0f2; --st-off: #3b2f86;
}
.dawn .sky-stars { opacity: clamp(0, (0.55 - var(--p, 0.7)) * 2.5, 0.6); -webkit-mask-image: linear-gradient(#000 30%, transparent 70%); mask-image: linear-gradient(#000 30%, transparent 70%); }
.dawn .sun {
  position: absolute; left: 50%; bottom: 24px; width: 200px; height: 200px; margin-left: -100px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffd9a8 0 36%, rgba(255, 180, 120, 0.55) 37%, rgba(255, 170, 120, 0) 70%);
  transform: translateY(calc(clamp(0, (0.7 - var(--p, 0.7)) * 2, 1) * 80%));
}
.dawn .st-win { opacity: clamp(0, (0.6 - var(--p, 0.7)) * 4, 1); }

/* Day: a morning sun and a couple of clouds over Campaign Builder; the workshop opens its doors under Dash. */
.day-sun {
  position: absolute; right: -60px; top: -40px; z-index: -1; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 170, 0.75) 0 14%, rgba(255, 214, 170, 0.28) 32%, rgba(255, 214, 170, 0) 68%);
  transform: translateY(calc(var(--p, 0.5) * 140px - 40px));
}
.cloud { display: none; position: absolute; z-index: -1; height: 22px; border-radius: 999px; background: #e6e0fa; pointer-events: none; transform: translateX(calc(var(--p, 0.5) * -240px)); }
.cloud--1 { right: 12%; top: 120px; width: 150px; }
.cloud--2 { right: 3%; top: 166px; width: 90px; }
.md--dash { padding-bottom: 150px; }
.street--day { --st-bld: #e6dcf3; --st-bay: #3d3550; --st-door: #cfc3e8; --st-sign: #d8cdee; --st-sign-t: #5a3b8a; --st-off: #d8cdee; }
.street--day .st-win { opacity: 0; }
.street--day .st-door { transform: scaleY(calc(1 - clamp(0, (var(--p, 0.6) - 0.15) * 3.5, 1) * 0.72)); }

/* Dusk: back to 5:30pm. Stars come out over the form and the street's lights come on one by one. */
#enquire.end { position: relative; isolation: isolate; overflow: clip; }
.end .sky-stars { opacity: clamp(0, (var(--p, 1) - 0.3) * 2, 0.6); -webkit-mask-image: linear-gradient(transparent 15%, #000 40%); mask-image: linear-gradient(transparent 15%, #000 40%); }
.street--dusk { position: relative; height: 90px; margin-top: 72px; --st-bld: #100e2c; --st-bay: #15123a; --st-door: #15123a; --st-sign: #1d1752; }
.end .foot { margin-top: 0; }
.street--dusk .st-win { opacity: 0; }
.street--dusk .w1, .street--dusk .w5 { opacity: clamp(0, (var(--p, 1) - 0.55) * 8, 1); }
.street--dusk .w2 { opacity: clamp(0, (var(--p, 1) - 0.7) * 8, 1); }
.street--dusk .w3 { opacity: clamp(0, (var(--p, 1) - 0.8) * 8, 1); }
.street--dusk .w4 { opacity: clamp(0, (var(--p, 1) - 0.9) * 8, 1); }

@media (min-width: 900px) {
  .street { height: 150px; }
  .hero-grid { padding-bottom: 150px; }
  .moon { width: 60px; height: 60px; top: 90px; right: 12%; box-shadow: inset -14px 6px 0 0 #e9e4ff; }
  .dawn { height: 420px; }
  .dawn .sun { width: 320px; height: 320px; margin-left: -160px; bottom: 50px; }
  .day-sun { width: 420px; height: 420px; right: 4%; top: 0; }
  .cloud { display: block; }
  .md--dash { padding-bottom: 260px; }
  .street--dusk { height: 160px; margin-top: 120px; }
}
/* The street art is 2880 wide and crops at the sides; past ~2000px it would crop the rooftops, so it grows instead. */
@media (min-width: 1900px) {
  .street, .street--dusk { height: 190px; }
}