*{box-sizing:border-box}
:root{--mx:0px;--my:0px;--rx:0deg;--ry:0deg}
html,body{width:100%;min-height:100%;margin:0;background:#000}
body{overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.teaser{position:relative;width:100%;min-height:100svh;overflow:hidden;isolation:isolate;background:#000}
.scene{position:absolute;inset:0;z-index:2;transform:translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform 700ms cubic-bezier(.2,.75,.2,1);will-change:transform}
.hero-picture{position:absolute;inset:0;display:block}
.hero-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none;animation:reveal 1.7s cubic-bezier(.2,.75,.2,1) both,breathe 12s ease-in-out 1.7s infinite alternate;filter:saturate(1.04) contrast(1.03);transform-origin:center}
.stars{position:absolute;inset:0;pointer-events:none}
.stars-back{z-index:0;opacity:.95}
.stars-front{z-index:4;opacity:1}
.star{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:var(--tone);box-shadow:0 0 calc(var(--size)*3.2) var(--tone),0 0 calc(var(--size)*7) rgba(140,180,255,.32);opacity:0;animation:twinkle var(--duration) ease-in-out var(--delay) infinite}
.fog{position:absolute;z-index:1;top:39%;width:min(43vw,730px);aspect-ratio:1;border-radius:50%;filter:blur(100px);opacity:.10;mix-blend-mode:screen;pointer-events:none;animation:fogFloat 17s ease-in-out infinite alternate}
.fog-left{left:5%;background:radial-gradient(circle,rgba(107,40,245,.58),rgba(93,27,170,.18) 44%,transparent 72%)}
.fog-right{right:5%;background:radial-gradient(circle,rgba(0,132,245,.58),rgba(17,56,200,.17) 44%,transparent 72%);animation-delay:-8s}
.city-lights,.planet-bloom{position:absolute;inset:0;pointer-events:none}
.city-lights,.planet-bloom{
  opacity:0;
  transition:opacity .55s ease .12s;
}
.teaser.is-ready .city-lights,
.teaser.is-ready .planet-bloom{
  opacity:1;
}

.mobile-lights{display:none}
.light{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,rgba(255,245,205,.98) 0 10%,rgba(255,192,84,.82) 22%,rgba(255,149,28,.26) 48%,transparent 74%);filter:blur(.4px);mix-blend-mode:screen;opacity:.10;animation:cityPulse var(--dur) ease-in-out var(--delay) infinite}
/* Desktop: aligned to the same full-screen image layer */
.d1{left:46.8%;top:35.2%;--s:16px;--dur:11.5s;--delay:-2.1s}
.d2{left:42.5%;top:41.7%;--s:11px;--dur:13.2s;--delay:-7.4s}
.d3{left:52.1%;top:44.1%;--s:13px;--dur:12.6s;--delay:-4.6s}
.d4{left:56.1%;top:49.0%;--s:9px;--dur:14.4s;--delay:-9.0s}
.d5{left:45.0%;top:52.4%;--s:11px;--dur:15.0s;--delay:-5.7s}
.d6{left:49.7%;top:56.2%;--s:9px;--dur:13.8s;--delay:-10.8s}
.d7{left:40.2%;top:55.8%;--s:8px;--dur:16.0s;--delay:-3.3s}

.d8{left:47.8%;top:39.0%;--s:10px;--dur:12.8s;--delay:-6.1s}
.d9{left:50.8%;top:40.5%;--s:8px;--dur:14.6s;--delay:-11.4s}
.d10{left:54.6%;top:42.2%;--s:10px;--dur:13.6s;--delay:-8.2s}
.d11{left:43.7%;top:46.3%;--s:8px;--dur:15.2s;--delay:-3.9s}
.d12{left:47.0%;top:48.8%;--s:11px;--dur:12.4s;--delay:-9.7s}
.d13{left:51.8%;top:50.8%;--s:9px;--dur:14.8s;--delay:-5.4s}
.d14{left:54.7%;top:54.2%;--s:8px;--dur:15.6s;--delay:-12.5s}
.d15{left:43.0%;top:55.0%;--s:9px;--dur:13.1s;--delay:-7.8s}
.d16{left:47.4%;top:58.5%;--s:7px;--dur:16.2s;--delay:-4.8s}
.d17{left:52.8%;top:58.0%;--s:8px;--dur:14.2s;--delay:-10.9s}
.d18{left:58.0%;top:46.0%;--s:7px;--dur:15.0s;--delay:-2.7s}


.d19{left:45.5%;top:37.4%;--s:9px;--dur:11.6s;--delay:-5.2s}
.d20{left:49.3%;top:37.8%;--s:8px;--dur:13.8s;--delay:-9.4s}
.d21{left:52.8%;top:38.8%;--s:10px;--dur:12.2s;--delay:-2.8s}
.d22{left:55.2%;top:40.6%;--s:8px;--dur:14.6s;--delay:-7.9s}
.d23{left:40.8%;top:43.5%;--s:8px;--dur:13.0s;--delay:-10.1s}
.d24{left:45.8%;top:44.4%;--s:10px;--dur:11.9s;--delay:-4.0s}
.d25{left:49.5%;top:45.8%;--s:9px;--dur:14.2s;--delay:-8.7s}
.d26{left:53.8%;top:47.0%;--s:11px;--dur:12.8s;--delay:-3.4s}
.d27{left:57.0%;top:50.8%;--s:8px;--dur:15.0s;--delay:-11.6s}
.d28{left:41.8%;top:49.8%;--s:9px;--dur:13.4s;--delay:-6.6s}
.d29{left:46.5%;top:51.2%;--s:8px;--dur:14.8s;--delay:-1.9s}
.d30{left:50.5%;top:52.5%;--s:10px;--dur:12.0s;--delay:-9.9s}
.d31{left:54.2%;top:55.5%;--s:8px;--dur:15.4s;--delay:-5.1s}
.d32{left:44.5%;top:57.0%;--s:8px;--dur:13.6s;--delay:-12.2s}
.d33{left:48.8%;top:59.5%;--s:7px;--dur:15.8s;--delay:-7.0s}
.d34{left:51.8%;top:57.2%;--s:9px;--dur:12.6s;--delay:-3.0s}
.d35{left:38.8%;top:51.5%;--s:7px;--dur:14.4s;--delay:-10.7s}
.d36{left:58.5%;top:44.8%;--s:7px;--dur:16.0s;--delay:-6.1s}

.planet-bloom{background:radial-gradient(circle at 46% 42%,rgba(255,168,62,.045),transparent 8%),radial-gradient(circle at 53% 46%,rgba(255,184,86,.04),transparent 7%),radial-gradient(circle at 49% 53%,rgba(255,152,36,.035),transparent 8%);filter:blur(8px);mix-blend-mode:screen;opacity:.56;animation:bloomBreathe 12s ease-in-out infinite alternate}
.vignette{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at center,transparent 56%,rgba(0,0,0,.10) 76%,rgba(0,0,0,.68) 100%)}
.grain{position:absolute;z-index:6;inset:-50%;pointer-events:none;opacity:.016;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");animation:grainShift .6s steps(2) infinite}
@keyframes reveal{0%{opacity:0;transform:scale(.97);filter:saturate(.8) contrast(.98) blur(7px)}58%{opacity:1}100%{opacity:1;transform:scale(1);filter:saturate(1.04) contrast(1.03) blur(0)}}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.012)}}
@keyframes fogFloat{0%{opacity:.06;transform:translate3d(-2%,1%,0) scale(.94)}50%{opacity:.11}100%{opacity:.08;transform:translate3d(3%,-2%,0) scale(1.06)}}
@keyframes twinkle{0%,72%,100%{opacity:.02;transform:scale(.72)}79%{opacity:1;transform:scale(1.22)}86%{opacity:.28;transform:scale(.92)}92%{opacity:.72;transform:scale(1.04)}}
@keyframes cityPulse{0%,20%,100%{opacity:.055;transform:scale(.92)}38%{opacity:.43;transform:scale(1.055)}55%{opacity:.125;transform:scale(.97)}72%{opacity:.55;transform:scale(1.08)}86%{opacity:.15;transform:scale(.99)}}
@keyframes bloomBreathe{from{opacity:.28;transform:scale(.995)}to{opacity:.43;transform:scale(1.008)}}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@media(max-width:767px){
  .mobile-lights{display:block}.desktop-lights{display:none}
  .fog{width:80vw;filter:blur(68px);top:38%}.fog-left{left:-24%}.fog-right{right:-24%}
  .m1{left:47.8%;top:29.8%;--s:13px;--dur:12.2s;--delay:-2.6s}
  .m2{left:39.8%;top:35.2%;--s:9px;--dur:14.0s;--delay:-7.2s}
  .m3{left:55.0%;top:37.8%;--s:11px;--dur:13.4s;--delay:-4.8s}
  .m4{left:43.0%;top:42.8%;--s:9px;--dur:15.2s;--delay:-9.1s}
  .m5{left:52.0%;top:45.5%;--s:8px;--dur:14.6s;--delay:-6.0s}
  .m6{left:36.8%;top:45.2%;--s:7px;--dur:16.0s;--delay:-11.1s}
  
.d8{left:47.8%;top:39.0%;--s:10px;--dur:12.8s;--delay:-6.1s}
.d9{left:50.8%;top:40.5%;--s:8px;--dur:14.6s;--delay:-11.4s}
.d10{left:54.6%;top:42.2%;--s:10px;--dur:13.6s;--delay:-8.2s}
.d11{left:43.7%;top:46.3%;--s:8px;--dur:15.2s;--delay:-3.9s}
.d12{left:47.0%;top:48.8%;--s:11px;--dur:12.4s;--delay:-9.7s}
.d13{left:51.8%;top:50.8%;--s:9px;--dur:14.8s;--delay:-5.4s}
.d14{left:54.7%;top:54.2%;--s:8px;--dur:15.6s;--delay:-12.5s}
.d15{left:43.0%;top:55.0%;--s:9px;--dur:13.1s;--delay:-7.8s}
.d16{left:47.4%;top:58.5%;--s:7px;--dur:16.2s;--delay:-4.8s}
.d17{left:52.8%;top:58.0%;--s:8px;--dur:14.2s;--delay:-10.9s}
.d18{left:58.0%;top:46.0%;--s:7px;--dur:15.0s;--delay:-2.7s}

.planet-bloom{background:radial-gradient(circle at 47% 35%,rgba(255,168,62,.045),transparent 7%),radial-gradient(circle at 54% 39%,rgba(255,184,86,.04),transparent 6%),radial-gradient(circle at 48% 44%,rgba(255,152,36,.035),transparent 7%)}
}
@media(hover:none),(pointer:coarse){.scene{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-image,.fog,.star,.light,.planet-bloom,.grain{animation:none}.scene{transform:none;transition:none}}
  .m13{left:44.0%;top:30.8%;--s:8px;--dur:12.0s;--delay:-4.3s}
  .m14{left:51.8%;top:31.8%;--s:9px;--dur:13.7s;--delay:-9.2s}
  .m15{left:57.0%;top:35.0%;--s:8px;--dur:12.8s;--delay:-2.7s}
  .m16{left:37.8%;top:37.8%;--s:7px;--dur:14.5s;--delay:-7.4s}
  .m17{left:45.8%;top:37.2%;--s:9px;--dur:12.3s;--delay:-10.6s}
  .m18{left:52.8%;top:39.5%;--s:8px;--dur:13.2s;--delay:-5.5s}
  .m19{left:58.0%;top:40.8%;--s:7px;--dur:15.0s;--delay:-1.8s}
  .m20{left:39.5%;top:42.8%;--s:8px;--dur:12.9s;--delay:-8.5s}
  .m21{left:46.5%;top:44.2%;--s:8px;--dur:14.1s;--delay:-3.8s}
  .m22{left:53.8%;top:46.2%;--s:7px;--dur:15.4s;--delay:-11.4s}
  .m23{left:42.8%;top:47.8%;--s:7px;--dur:13.5s;--delay:-6.7s}
  .m24{left:49.5%;top:49.2%;--s:7px;--dur:14.8s;--delay:-9.8s}