* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #020407;
}

body {
  overflow: hidden;
}

.space {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #020407;
}

.art,
.shade,
.stars,
.grain {
  position: absolute;
  inset: 0;
}

.art {
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  will-change: transform;
}

.art--desktop {
  display: block;
  background-image: url("assets/cosmos-desktop.png");
  animation: breathe-desktop 24s ease-in-out infinite alternate;
}

.art--mobile {
  display: none;
  background-image: url("assets/cosmos-mobile.png");
}

.shade {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, transparent 0 34%, rgba(0,0,0,.03) 62%, rgba(0,0,0,.15) 100%);
}

.stars {
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.living-star {
  position: absolute;
  z-index: 3;
  left: 48.5%;
  top: 25.7%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  animation: star-drift 9s ease-in-out infinite;
}

.living-star__core,
.living-star__ray,
.living-star__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  transform: translate(-50%, -50%);
}

.living-star__core {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff9ed;
  box-shadow:
    0 0 7px 2px rgba(255,249,237,.98),
    0 0 20px 6px rgba(255,221,180,.72),
    0 0 48px 12px rgba(211,178,141,.30);
  animation: star-core 4.2s ease-in-out infinite;
}

.living-star__ray--h {
  width: 84px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,235,208,.72), #fff, rgba(255,235,208,.72), transparent);
  animation: ray-h 4.2s ease-in-out infinite;
}

.living-star__ray--v {
  width: 1px;
  height: 84px;
  background: linear-gradient(180deg, transparent, rgba(255,235,208,.72), #fff, rgba(255,235,208,.72), transparent);
  animation: ray-v 4.2s ease-in-out infinite;
}

.living-star__halo {
  border-radius: 50%;
  border: 1px solid rgba(255,225,190,.22);
}

.living-star__halo--1 {
  width: 40px;
  height: 40px;
  animation: halo 4.2s ease-out infinite;
}

.living-star__halo--2 {
  width: 76px;
  height: 76px;
  animation: halo 4.2s 1.45s ease-out infinite;
}

.grain {
  z-index: 4;
  pointer-events: none;
  opacity: .028;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.7) 0 .28px, transparent .48px 3px);
  background-size: 6px 6px;
  mix-blend-mode: soft-light;
}

@keyframes breathe-desktop {
  0%   { transform: scale(1.005); filter: brightness(.99) saturate(.94); }
  100% { transform: scale(1.025); filter: brightness(1.015) saturate(.97); }
}

@keyframes breathe-mobile {
  0%   { transform: scale(1.000); filter: brightness(.99) saturate(.94); }
  100% { transform: scale(1.012); filter: brightness(1.012) saturate(.97); }
}

@keyframes star-core {
  0%,100% { transform: translate(-50%,-50%) scale(.72); opacity: .70; }
  40%     { transform: translate(-50%,-50%) scale(1.8); opacity: 1; }
  54%     { transform: translate(-50%,-50%) scale(1.03); opacity: .88; }
  68%     { transform: translate(-50%,-50%) scale(1.42); opacity: 1; }
}

@keyframes ray-h {
  0%,100% { transform: translate(-50%,-50%) scaleX(.3); opacity: .2; }
  40%     { transform: translate(-50%,-50%) scaleX(1.25); opacity: .92; }
  68%     { transform: translate(-50%,-50%) scaleX(.86); opacity: .62; }
}

@keyframes ray-v {
  0%,100% { transform: translate(-50%,-50%) scaleY(.3); opacity: .2; }
  40%     { transform: translate(-50%,-50%) scaleY(1.25); opacity: .92; }
  68%     { transform: translate(-50%,-50%) scaleY(.86); opacity: .62; }
}

@keyframes halo {
  0%   { transform: translate(-50%,-50%) scale(.18); opacity: 0; }
  24%  { opacity: .32; }
  100% { transform: translate(-50%,-50%) scale(2.15); opacity: 0; }
}

@keyframes star-drift {
  0%,100% { transform: translate3d(-2px,1px,0); }
  50%     { transform: translate3d(3px,-2px,0); }
}

/* iPhone / Android portrait */
@media (max-width: 768px), (orientation: portrait) {
  .space {
    height: 100svh;
    min-height: 100svh;
  }

  .art--desktop {
    display: none;
  }

  .art--mobile {
    display: block;
    background-image: url("assets/cosmos-mobile.png");
    background-position: center center;
    background-size: cover;
    animation: breathe-mobile 26s ease-in-out infinite alternate;
  }

  .shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.05)),
      radial-gradient(circle at 50% 40%, transparent 0 34%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.13) 100%);
  }

  /* Aligns with the bright star in the portrait artwork */
  .living-star {
    left: 50%;
    top: 38.2%;
  }

  .living-star__ray--h { width: 62px; }
  .living-star__ray--v { height: 62px; }
}

/* Modern Safari/Chrome dynamic viewport */
@supports (height: 100dvh) {
  .space {
    height: 100dvh;
    min-height: 100dvh;
  }
}

/* iPhone safe-area support */
@supports (padding: max(0px)) {
  .space {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art,
  .living-star,
  .living-star__core,
  .living-star__ray,
  .living-star__halo {
    animation: none !important;
  }
}