* {
  box-sizing: border-box;
}

:root {
  --mx: 0;
  --my: 0;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #020202;
  overflow: hidden;
}

body {
  font-family: Georgia, "Times New Roman", serif;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.hero-image {
  position: absolute;
  inset: 0;
  background-image: url("assets/primarch-hero.png");
  background-size: contain;
  background-position: center center;
  transform:
    translate3d(calc(var(--mx) * -10px), calc(var(--my) * -7px), 0)
    scale(1.035);
  filter: contrast(1.08) brightness(.94);
  animation: heroDrift 26s ease-in-out infinite alternate;
  z-index: 1;
}

.stars {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

.stars-one {
  opacity: .27;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.95) 0 1px, transparent 1.8px),
    radial-gradient(circle at 41% 12%, rgba(255,255,255,.65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 18%, rgba(255,255,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 36%, rgba(255,255,255,.7) 0 1px, transparent 1.9px),
    radial-gradient(circle at 21% 77%, rgba(255,255,255,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 84%, rgba(255,255,255,.8) 0 1px, transparent 1.7px);
  background-size: 410px 410px;
  transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 12px), 0);
  animation: starDriftOne 44s linear infinite;
}

.stars-two {
  opacity: .18;
  background-image:
    radial-gradient(circle at 17% 42%, rgba(255,255,255,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 34% 66%, rgba(255,255,255,.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 56% 28%, rgba(255,255,255,.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 79% 74%, rgba(255,255,255,.6) 0 1px, transparent 1.7px),
    radial-gradient(circle at 94% 12%, rgba(255,255,255,.7) 0 1px, transparent 1.8px);
  background-size: 260px 260px;
  transform: translate3d(calc(var(--mx) * 30px), calc(var(--my) * 18px), 0);
  animation: starDriftTwo 31s linear infinite reverse;
}

.nebula {
  position: absolute;
  inset: -10%;
  z-index: 3;
  pointer-events: none;
  opacity: .17;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.42), transparent 30%),
    radial-gradient(ellipse at 28% 45%, rgba(255,255,255,.16), transparent 28%),
    radial-gradient(ellipse at 74% 43%, rgba(255,255,255,.12), transparent 24%);
  filter: blur(18px);
  transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * -12px), 0);
  animation: nebulaPulse 13s ease-in-out infinite alternate;
}

.bloom {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.32), transparent 7%),
    radial-gradient(circle at 50% 39%, rgba(255,255,255,.15), transparent 18%),
    radial-gradient(ellipse at 50% 59%, rgba(255,255,255,.13), transparent 16%);
  mix-blend-mode: screen;
  animation: eclipsePulse 8s ease-in-out infinite alternate;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.14), transparent 24%, transparent 68%, rgba(0,0,0,.3)),
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.42) 100%);
}

.grain {
  position: absolute;
  inset: -50%;
  z-index: 9;
  pointer-events: none;
  opacity: .055;
  background-image:
    radial-gradient(circle, #fff 0 .7px, transparent .8px);
  background-size: 4px 4px;
  animation: grainMove .8s steps(2) infinite;
}

@keyframes heroDrift {
  0% {
    transform:
      translate3d(calc(var(--mx) * -10px - 8px), calc(var(--my) * -7px - 4px), 0)
      scale(1.035);
  }
  100% {
    transform:
      translate3d(calc(var(--mx) * -10px + 8px), calc(var(--my) * -7px + 4px), 0)
      scale(1.055);
  }
}

@keyframes starDriftOne {
  from { background-position: center center; }
  to { background-position: center center; }
}

@keyframes starDriftTwo {
  from { background-position: center center; }
  to { background-position: center center; }
}

@keyframes nebulaPulse {
  from {
    opacity: .11;
    filter: blur(21px);
  }
  to {
    opacity: .2;
    filter: blur(15px);
  }
}

@keyframes eclipsePulse {
  from {
    opacity: .7;
    filter: blur(0);
  }
  to {
    opacity: 1;
    filter: blur(1px);
  }
}

@keyframes grainMove {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-2%, 1%, 0); }
  50% { transform: translate3d(1%, -2%, 0); }
  75% { transform: translate3d(2%, 2%, 0); }
  100% { transform: translate3d(-1%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image,
  .stars-one,
  .stars-two,
  .nebula,
  .bloom,
  .grain {
    animation: none;
  }
}

@media (max-aspect-ratio: 4 / 3) {
  .hero-image {
    background-size: auto 100%;
  }
}


/* Fit-safe hero: preserve the full 16:9 artwork so bottom text is never clipped */
.hero-image {
  inset: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform:
    translate3d(calc(var(--mx) * -4px), calc(var(--my) * -3px), 0)
    scale(1.000) !important;
  animation: none !important;
}

/* Keep motion graphics and parallax layers active without cropping the artwork */
.stars-one {
  transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px), 0);
}

.stars-two {
  transform: translate3d(calc(var(--mx) * 24px), calc(var(--my) * 14px), 0);
}

nav,.nav,.menu,.hamburger,.menu-toggle,.burger,[aria-label*='menu']{display:none!important;visibility:hidden!important;}