/* Noctluna cinematic pass v3: astrophotography first, restrained interface. */
.cosmos-home {
  background: #02040a;
  isolation: isolate;
}
.cosmos-galaxy {
  z-index: 0;
  inset: -14%;
  background-image: url('/static/assets/milky-way-eso-4k.webp');
  background-size: cover;
  background-position: 53% 49%;
  opacity: .82;
  filter: brightness(.96) saturate(.98) contrast(1.12);
  transform: rotate(-11deg) scale(1.13);
  animation: galaxy-drift-v3 120s ease-in-out infinite alternate;
  will-change: transform;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.52), #000 24%, #000 82%, rgba(0,0,0,.72));
}
@keyframes galaxy-drift-v3 {
  from { transform: rotate(-11deg) scale(1.13) translate3d(-.35%, -.2%, 0); }
  to { transform: rotate(-9.2deg) scale(1.17) translate3d(.25%, .3%, 0); }
}
/* Keep cinematic grading behind the actual rendered geometry. The prior pass
   darkened the Earth itself by placing the vignette above the WebGL canvas. */
.cosmos-atmosphere {
  z-index: .5;
  background:
    radial-gradient(ellipse at 72% 48%, rgba(4,12,28,.04) 0%, rgba(3,7,17,.14) 44%, rgba(1,3,9,.30) 78%, rgba(1,2,7,.64) 100%),
    linear-gradient(90deg, rgba(1,3,9,.38) 0%, rgba(1,3,9,.16) 27%, transparent 57%),
    linear-gradient(180deg, rgba(1,3,9,.18) 0%, transparent 26%, transparent 70%, rgba(1,3,9,.34) 100%);
}
.cosmos-canvas {
  z-index: 1;
  background: transparent;
  filter: none;
}
.cosmos-grain {
  display: block;
  z-index: 2;
  opacity: .035;
  background-image: radial-gradient(rgba(235,244,255,.34) .42px, transparent .7px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
}
.cosmos-frame { z-index: 4; opacity: .24; }
.cosmos-header { z-index: 6; }
.cosmos-hero {
  z-index: 5;
  width: min(680px, 47vw);
  top: 51%;
}
.cosmos-hero::before {
  inset: -76px -52px -76px -66px;
  background: linear-gradient(90deg, rgba(1,3,9,.62), rgba(1,3,9,.28) 57%, transparent 100%);
  filter: blur(24px);
}
.cosmos-hero h1 {
  font-size: clamp(48px, 5.1vw, 78px);
  line-height: .99;
  letter-spacing: -.069em;
  text-shadow: 0 2px 34px rgba(0,0,0,.52);
}
.cosmos-hero h1 em {
  background: linear-gradient(100deg, #e6edf8 0%, #a9bed8 65%, #d4e0ed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cosmos-hero p {
  color: rgba(215,227,242,.78);
  font-size: 13px;
}
.approach-button {
  border-color: rgba(217,232,250,.30);
  background: linear-gradient(120deg, rgba(16,27,44,.60), rgba(4,9,18,.44));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 12px 38px rgba(0,0,0,.32), 0 0 26px rgba(86,151,223,.09);
}
.approach-button:hover {
  border-color: rgba(222,239,255,.56);
  background: linear-gradient(120deg, rgba(28,47,72,.72), rgba(6,13,24,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 40px rgba(0,0,0,.30);
}
.approach-button-icon {
  border-color: rgba(221,236,252,.28);
  background: rgba(155,192,231,.12);
}
.cosmos-footer {
  z-index: 6;
  color: rgba(194,211,233,.50);
}
.cosmos-live-dot, .cosmos-footer i, .warp-caption-dot {
  background: #c5e1ff;
  box-shadow: 0 0 10px rgba(141,197,255,.5);
}
.cosmos-home.is-entering .cosmos-atmosphere { opacity: .06; }
.cosmos-home.is-entering .cosmos-hero { opacity: 0; transform: translateY(-54%) scale(.92); }
.cosmos-home.is-entering .cosmos-canvas { filter: brightness(1.2) saturate(1.12); }
@media (max-width: 760px) {
  .cosmos-galaxy {
    inset: -9% -58%;
    background-size: auto 112%;
    background-position: 54% 35%;
    opacity: .64;
    filter: brightness(.90) saturate(.94) contrast(1.08);
    transform: rotate(-12deg) scale(1.08);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.72), #000 24%, #000 70%, rgba(0,0,0,.76));
  }
  .cosmos-atmosphere {
    background:
      linear-gradient(180deg, rgba(1,3,9,.16) 0%, transparent 26%, rgba(1,3,9,.10) 55%, rgba(1,3,9,.42) 100%),
      radial-gradient(ellipse at 50% 48%, transparent 18%, rgba(1,3,9,.34) 80%, rgba(1,3,9,.60) 100%);
  }
  .cosmos-grain { opacity: .025; }
  .cosmos-hero { top: 36.5%; width: calc(100% - 34px); }
  .cosmos-hero h1 { font-size: clamp(33px, 8.4vw, 43px); }
  .cosmos-hero::before {
    inset: -32px -12px;
    background: radial-gradient(ellipse at center, rgba(1,3,9,.68), rgba(1,3,9,.27) 58%, transparent 84%);
    filter: blur(16px);
  }
  .cosmos-footer { bottom: 21px; }
}
@media (max-width: 390px) {
  .cosmos-hero { top: 36%; width: calc(100% - 28px); }
  .cosmos-hero h1 { font-size: 32px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .cosmos-hero { top: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmos-galaxy { animation: none; }
}

/* A low-energy halo behind the planet, not painted over its surface. */
.cosmos-home::before {
  content: "";
  position: absolute;
  z-index: .75;
  inset: -14%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 52%, rgba(37,88,155,.18) 0%, rgba(18,46,91,.08) 24%, transparent 43%),
    radial-gradient(ellipse at 69% 28%, rgba(88,127,181,.06) 0%, transparent 26%);
  filter: blur(26px);
  mix-blend-mode: screen;
}
@media (max-width: 760px) {
  .cosmos-home::before {
    inset: -8%;
    background:
      radial-gradient(ellipse at 52% 82%, rgba(37,88,155,.16) 0%, rgba(18,46,91,.07) 28%, transparent 52%),
      radial-gradient(ellipse at 65% 55%, rgba(88,127,181,.05) 0%, transparent 30%);
    filter: blur(20px);
  }
}


/* A restrained, staggered focus-in makes the first view feel like an arrival. */
@keyframes cosmos-focus-in {
  from { opacity: 0; filter: blur(7px); }
  to { opacity: 1; filter: blur(0); }
}
.cosmos-header { animation: cosmos-focus-in .9s .10s backwards; }
.cosmos-overline { animation: cosmos-focus-in .75s .18s backwards; }
.cosmos-hero h1 { animation: cosmos-focus-in .95s .30s backwards; }
.cosmos-hero p { animation: cosmos-focus-in .8s .48s backwards; }
.approach-button { animation: cosmos-focus-in .8s .62s backwards; }
.approach-note { animation: cosmos-focus-in .75s .78s backwards; }
.cosmos-footer { animation: cosmos-focus-in .85s .72s backwards; }
@media (prefers-reduced-motion: reduce) {
  .cosmos-header, .cosmos-overline, .cosmos-hero h1, .cosmos-hero p,
  .approach-button, .approach-note, .cosmos-footer {
    animation: none;
  }
}


/* Reduced-cost compositor path for software / virtual display adapters. */
.cosmos-home.cosmos-low-power .cosmos-galaxy {
  animation: none;
  filter: none;
  mask-image: none;
}
.cosmos-home.cosmos-low-power .cosmos-grain {
  display: none;
}
.cosmos-home.cosmos-low-power::before,
.cosmos-home.cosmos-low-power .cosmos-hero::before {
  filter: none;
}

/* Keep the deep-space backdrop gently alive on every display mode.
   The 3D renderer adapts resolution independently for low-power devices. */
.cosmos-home .cosmos-galaxy {
  animation: galaxy-drift-v3 120s ease-in-out infinite alternate !important;
}
.cosmos-home.cosmos-low-power .cosmos-galaxy {
  animation: galaxy-drift-v3 180s ease-in-out infinite alternate !important;
}