/* Team TararBari SpaceFX V4 - visible stars + inner-page demo background */

html,body{
  min-height:100%;
}

body.sfx4-enabled{
  position:relative!important;
  overflow-x:hidden!important;
  background:#020817!important;
}

/* =========================================================
   INNER PUBLIC PAGES: generated jhakanaka space demo background
   ========================================================= */
body.sfx4-inner .sfx4-bg{
  position:fixed;
  inset:-5%;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(0,8,25,.52),rgba(0,8,25,.30) 46%,rgba(0,4,16,.35)),
    url('/assets/spacefx-v4/spacefx-v4-bg.webp?v=4');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  filter:saturate(1.08) contrast(1.03);
  transform:scale(1.04);
  animation:sfx4PlanetDrift 18s ease-in-out infinite alternate;
}

body.sfx4-inner .sfx4-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 30%,rgba(0,235,255,.15),transparent 26%),
    radial-gradient(circle at 78% 26%,rgba(56,115,255,.10),transparent 24%),
    linear-gradient(180deg,rgba(1,8,24,.18),rgba(1,8,24,.42));
  mix-blend-mode:screen;
}

/* Make existing page canvas transparent so the new image is actually visible. */
body.sfx4-inner main,
body.sfx4-inner section,
body.sfx4-inner .page-hero,
body.sfx4-inner .profile-hero,
body.sfx4-inner .project-hero,
body.sfx4-inner .member-profile-hero{
  background:transparent!important;
}

body.sfx4-inner .nav,
body.sfx4-inner main,
body.sfx4-inner .footer{
  position:relative;
  z-index:4;
}

/* Keep page title/content above moving star field. */
body.sfx4-inner .page-hero .container,
body.sfx4-inner section .container,
body.sfx4-inner .profile-hero .container,
body.sfx4-inner .project-hero .container{
  position:relative;
  z-index:5;
}

/* =========================================================
   GLOBAL MOVING NEBULA / STARS
   ========================================================= */
.sfx4-nebula,
.sfx4-nebula2,
.sfx4-stars,
.sfx4-shooting{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.sfx4-nebula{
  z-index:1;
  opacity:.78;
  background:
    radial-gradient(ellipse at 22% 42%,rgba(0,220,255,.15),transparent 32%),
    radial-gradient(ellipse at 66% 35%,rgba(78,88,255,.15),transparent 35%),
    radial-gradient(ellipse at 82% 70%,rgba(255,128,54,.08),transparent 29%);
  filter:blur(30px);
  animation:sfx4NebulaA 17s ease-in-out infinite alternate;
}

.sfx4-nebula2{
  z-index:1;
  opacity:.62;
  background:
    radial-gradient(ellipse at 12% 18%,rgba(0,255,205,.10),transparent 30%),
    radial-gradient(ellipse at 52% 80%,rgba(34,118,255,.11),transparent 34%),
    radial-gradient(ellipse at 91% 40%,rgba(140,82,255,.10),transparent 26%);
  filter:blur(44px);
  animation:sfx4NebulaB 23s ease-in-out infinite alternate;
}

.sfx4-stars,
.sfx4-shooting{
  z-index:3;
}

/* Inner pages have stars behind readable content/cards. */
body.sfx4-inner .sfx4-stars,
body.sfx4-inner .sfx4-shooting{
  z-index:3;
}

.sfx4-star,
.sfx4-home-star{
  position:absolute;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 7px rgba(255,255,255,.96),
    0 0 15px rgba(110,225,255,.55),
    0 0 27px rgba(0,170,255,.22);
  will-change:transform,opacity;
  animation-name:sfx4StarMove,sfx4Twinkle;
  animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite;
}

.sfx4-star.blue,
.sfx4-home-star.blue{
  background:#c7f2ff;
  box-shadow:0 0 8px rgba(190,240,255,.98),0 0 18px rgba(0,190,255,.58);
}

.sfx4-star.warm,
.sfx4-home-star.warm{
  background:#fff1d1;
  box-shadow:0 0 8px rgba(255,237,196,.95),0 0 18px rgba(255,162,70,.42);
}

.sfx4-shoot,
.sfx4-home-shoot{
  position:absolute;
  width:250px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),rgba(86,226,255,.8),transparent);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.75));
  opacity:.9;
  animation:sfx4Shoot linear infinite;
}

/* =========================================================
   HOME PAGE: stars MUST sit over the static Mars/demo image
   ========================================================= */
body.sfx4-home .sfx4-stars,
body.sfx4-home .sfx4-shooting,
body.sfx4-home .sfx4-nebula,
body.sfx4-home .sfx4-nebula2{
  display:none!important;
}

.block-hero{
  position:relative!important;
}

.block-hero .sfx4-home-stars,
.block-hero .sfx4-home-shooting{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:6!important;
}

.block-hero .sfx4-home-shooting{
  z-index:7!important;
}

/* Keep V4 clickable demo hotspots above stars. */
.block-hero .tb-demo-hotspot{
  z-index:20!important;
}

/* Gentle movement of the exact Home demo itself without changing its composition. */
body.sfx4-home .block-hero{
  animation:sfx4HomePulse 16s ease-in-out infinite alternate;
}

/* =========================================================
   Animations
   ========================================================= */
@keyframes sfx4StarMove{
  0%{transform:translate3d(0,0,0) scale(1)}
  20%{transform:translate3d(-14px,30px,0) scale(1.08)}
  40%{transform:translate3d(15px,62px,0) scale(.96)}
  60%{transform:translate3d(-16px,95px,0) scale(1.07)}
  80%{transform:translate3d(16px,128px,0) scale(.98)}
  100%{transform:translate3d(-12px,165px,0) scale(1)}
}

@keyframes sfx4Twinkle{
  0%,100%{opacity:.22}
  50%{opacity:1}
}

@keyframes sfx4Shoot{
  0%{transform:translate3d(-35vw,-20vh,0) rotate(-18deg);opacity:0}
  7%{opacity:.98}
  100%{transform:translate3d(138vw,105vh,0) rotate(-18deg);opacity:0}
}

@keyframes sfx4PlanetDrift{
  0%{transform:translate3d(-1.8%,0,0) scale(1.04)}
  50%{transform:translate3d(1.5%,-1%,0) scale(1.075)}
  100%{transform:translate3d(3%,1%,0) scale(1.05)}
}

@keyframes sfx4NebulaA{
  0%{transform:translate3d(-6%,2%,0) scale(1.02) rotate(-1deg)}
  100%{transform:translate3d(7%,-4%,0) scale(1.14) rotate(2deg)}
}

@keyframes sfx4NebulaB{
  0%{transform:translate3d(4%,-5%,0) scale(1.08) rotate(1deg)}
  100%{transform:translate3d(-7%,5%,0) scale(1.16) rotate(-2deg)}
}

@keyframes sfx4HomePulse{
  0%{filter:saturate(1) brightness(1)}
  100%{filter:saturate(1.04) brightness(1.025)}
}

/* =========================================================
   Mobile
   ========================================================= */
@media(max-width:991px){
  body.sfx4-inner .sfx4-bg{
    inset:-7%;
    background-position:72% center;
    transform:scale(1.07);
    animation-duration:22s;
  }

  .sfx4-nebula{animation-duration:21s;filter:blur(26px)}
  .sfx4-nebula2{animation-duration:27s;filter:blur(36px)}
  .sfx4-shoot,
  .sfx4-home-shoot{width:175px}

  /* Do not let animation change the hero height/composition. */
  body.sfx4-home .block-hero{
    transform:none!important;
  }
}

@media(max-width:700px){
  body.sfx4-inner .sfx4-bg{
    background-position:77% center;
  }

  body.sfx4-inner .page-hero{
    padding-top:72px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .sfx4-star,
  .sfx4-home-star,
  .sfx4-shoot,
  .sfx4-home-shoot,
  .sfx4-nebula,
  .sfx4-nebula2,
  .sfx4-bg,
  body.sfx4-home .block-hero{
    animation:none!important;
  }
}