*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#02050b}
body{overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hero{position:relative;width:100vw;height:100dvh;min-height:520px;overflow:hidden;background:#02050b;isolation:isolate}
.cinema{position:absolute;inset:-2.5%;z-index:0;display:block;overflow:hidden;background:#02050b}
.cinema img{
  width:105%;height:105%;object-fit:cover;object-position:center;
  display:block;user-select:none;pointer-events:none;
  transform:scale(1.018);
  animation:cameraFloat 11s ease-in-out infinite alternate;
  filter:saturate(1.04) contrast(1.03);
}
.brand{
  position:absolute;z-index:20;left:32px;top:25px;
  color:#f4fcff;font-size:26px;font-weight:740;letter-spacing:-.035em;
  text-shadow:0 4px 24px rgba(0,0,0,.55);
}
.brand span{color:#71d8ff;font-weight:650}
.star-layer,.flare,.light-sweep,.vignette{position:absolute;inset:0;pointer-events:none}
.star-layer{z-index:5;background-repeat:repeat}
.star-one{
  opacity:.16;
  background-image:
    radial-gradient(circle,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle,#77d9ff 0 .8px,transparent 1.3px);
  background-size:151px 151px,223px 223px;
  background-position:0 0,47px 83px;
  animation:starsA 38s linear infinite;
}
.star-two{
  opacity:.09;
  background-image:radial-gradient(circle,#fff 0 .65px,transparent 1.1px);
  background-size:91px 91px;
  animation:starsB 52s linear infinite;
}
.flare{z-index:7;mix-blend-mode:screen}
.flare-line{
  top:19.5%;left:48%;right:-2%;height:2px;bottom:auto;
  background:linear-gradient(90deg,transparent,rgba(79,149,255,.23),rgba(255,245,211,.98),rgba(255,166,76,.77),transparent);
  box-shadow:0 0 12px rgba(255,193,104,.42),0 0 30px rgba(76,147,255,.16);
  animation:flareBreath 4.2s ease-in-out infinite;
}
.flare-glow{
  left:auto;right:10%;top:7%;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,217,.55),rgba(255,166,73,.22) 28%,transparent 70%);
  filter:blur(5px);
  animation:sunBreath 5.4s ease-in-out infinite;
}
.light-sweep{
  z-index:6;
  width:44vw;left:-55vw;
  background:linear-gradient(110deg,transparent 34%,rgba(101,209,255,.025) 44%,rgba(255,255,255,.075) 50%,rgba(91,192,255,.02) 57%,transparent 67%);
  transform:skewX(-10deg);
  animation:sweep 9s ease-in-out infinite;
}
.vignette{
  z-index:12;
  background:
    radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.30) 100%),
    linear-gradient(180deg,rgba(0,0,0,.16),transparent 20%,transparent 76%,rgba(0,0,0,.30));
}
@keyframes cameraFloat{
  0%{transform:scale(1.018) translate3d(-.2%,.05%,0)}
  100%{transform:scale(1.055) translate3d(.25%,-.22%,0)}
}
@keyframes starsA{to{background-position:151px 62px,270px 135px}}
@keyframes starsB{to{background-position:-91px 128px}}
@keyframes flareBreath{0%,100%{opacity:.58;transform:scaleX(.96)}50%{opacity:1;transform:scaleX(1.045)}}
@keyframes sunBreath{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:.8;transform:scale(1.08)}}
@keyframes sweep{0%,68%{transform:translateX(0) skewX(-10deg);opacity:0}74%{opacity:.75}100%{transform:translateX(180vw) skewX(-10deg);opacity:0}}
@media(max-width:900px){
  .brand{left:20px;top:18px;font-size:21px}
  .cinema{inset:-5%}
  .cinema img{width:110%;height:110%;object-position:56% center}
  .flare-line{left:28%;top:17%}
  .flare-glow{right:-3%;top:4%;width:180px;height:180px}
}
@media(max-width:600px){
  .brand{font-size:19px}
  .cinema img{object-position:58% center}
}
@media(prefers-reduced-motion:reduce){
  .cinema img,.star-one,.star-two,.flare-line,.flare-glow,.light-sweep{animation:none!important}
}