:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --text-strong: #fff5e2;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  font-family: "Georgia", "Times New Roman", serif;
  background-color: #04060d;
  background:
    linear-gradient(180deg, rgba(3, 5, 13, 0.52) 0%, rgba(5, 11, 23, 0.36) 100%),
    url("assets/universe-background.webp") center / cover no-repeat,
    linear-gradient(180deg, #03050d 0%, #050b17 42%, #0a0e1f 100%);
  color: var(--text-strong);
}

button {
  font: inherit;
}

.experience-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.universe-layer,
.starfield,
.gallery-backdrop {
  position: absolute;
  inset: 0;
}

.universe-layer {
  z-index: -4;
}

.universe-layer-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(28, 60, 112, 0.12), transparent 33%),
    radial-gradient(circle at 14% 18%, rgba(255, 139, 38, 0.14), transparent 20%),
    radial-gradient(circle at 82% 10%, rgba(154, 112, 222, 0.09), transparent 22%);
}

.universe-layer-mid {
  z-index: -3;
  background:
    radial-gradient(circle at center, transparent 0 22%, rgba(3, 4, 9, 0.2) 58%, rgba(1, 2, 5, 0.6) 100%),
    radial-gradient(circle at 50% 45%, rgba(255, 198, 120, 0.04), transparent 18%);
}

.starfield {
  z-index: -2;
  opacity: 0;
  background-repeat: repeat;
  background-size: 520px 520px;
  animation: drift 42s linear infinite;
  transition: opacity 350ms ease;
}

.bg-ready .starfield-a {
  opacity: 0.62;
}

.starfield-a {
  background-image:
    radial-gradient(circle at 8% 14%, rgba(255, 255, 255, 0.95) 0 1.4px, transparent 1.6px),
    radial-gradient(circle at 37% 42%, rgba(255, 243, 214, 0.8) 0 1px, transparent 1.2px),
    radial-gradient(circle at 66% 21%, rgba(164, 205, 255, 0.8) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 82% 78%, rgba(255, 202, 150, 0.75) 0 1.1px, transparent 1.3px),
    radial-gradient(circle at 20% 82%, rgba(255, 255, 255, 0.65) 0 0.9px, transparent 1.1px);
}

.starfield-b {
  z-index: -1;
  background-size: 760px 760px;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.95) 0 1.9px, transparent 2.2px),
    radial-gradient(circle at 52% 34%, rgba(255, 208, 161, 0.8) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 78% 60%, rgba(165, 200, 255, 0.8) 0 1.8px, transparent 2px),
    radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.72) 0 1.2px, transparent 1.5px);
  animation-direction: reverse;
  animation-duration: 64s;
}

.bg-ready .starfield-b {
  opacity: 0.28;
}

.skip-button {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 30;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(255, 229, 183, 0.18);
  border-radius: 999px;
  background: rgba(7, 12, 22, 0.56);
  color: rgba(255, 244, 220, 0.9);
  letter-spacing: 0.03em;
  cursor: pointer;
  backdrop-filter: blur(18px);
  transition:
    background 220ms var(--ease-premium),
    border-color 220ms var(--ease-premium),
    transform 220ms var(--ease-premium);
}

.skip-button:hover,
.skip-button:focus-visible {
  background: rgba(18, 27, 45, 0.84);
  border-color: rgba(255, 219, 150, 0.46);
  transform: translateY(-1px);
}

.intro-scene,
.gallery-scene {
  position: absolute;
  inset: 0;
}

.intro-scene {
  display: grid;
  place-items: center;
  padding: min(7vw, 4rem);
  z-index: 10;
}

.invitation-frame {
  width: min(76vmin, 88vw);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.invitation-stack {
  position: relative;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 2.5rem 5rem rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 2rem rgba(252, 199, 115, 0.06));
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.is-zooming-performance .starfield {
  animation-play-state: paused;
}

.is-zooming-performance .invitation-stack {
  filter: none;
}

.is-zooming-performance .saturn-hotspot,
.is-zooming-performance .saturn-beam,
.is-zooming-performance .sun-ambient,
.is-zooming-performance .sun-halo,
.is-zooming-performance .sun-disc-glow,
.is-zooming-performance .sun-ray-glow,
.is-zooming-performance .sun-ray-core,
.is-zooming-performance .sun-ray-cap {
  filter: none !important;
}

.invitation-base,
.planet-layer img {
  display: block;
  width: 100%;
  height: auto;
}

.invitation-base {
  position: relative;
  z-index: 1;
  user-select: none;
  pointer-events: none;
  will-change: filter, opacity;
}

.invitation-dimmer,
.invitation-vignette {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.invitation-dimmer {
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(5, 9, 16, 0.06) 0 18%, rgba(3, 7, 14, 0.3) 58%, rgba(2, 4, 9, 0.6) 100%);
  mix-blend-mode: multiply;
}

.invitation-vignette {
  z-index: 7;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 56%, rgba(2, 4, 10, 0.15) 74%, rgba(2, 4, 10, 0.34) 100%);
}

.planet-layer,
.sun-portal {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.planet-layer {
  z-index: 4;
  transform: scale(0.985);
  transform-origin: 50% 50%;
  filter: brightness(0.78) saturate(0.92);
  will-change: transform, opacity, filter;
}

.planet-layer img {
  filter:
    drop-shadow(0 0 0.4rem rgba(255, 241, 206, 0.32))
    drop-shadow(0 0 1rem rgba(255, 153, 50, 0.18));
}

.planet-jupiter {
  left: 15.1%;
  top: 37.85%;
  width: 12.2%;
}

.planet-moon {
  left: 32.25%;
  top: 38.25%;
  width: 4.4%;
}

.planet-neptune {
  left: 16.35%;
  top: 67.85%;
  width: 7%;
}

.planet-venus {
  left: 32.2%;
  top: 54.7%;
  width: 5.5%;
}

.planet-mercury {
  left: 63.1%;
  top: 46.05%;
  width: 3%;
}

.planet-mars {
  left: 49.2%;
  top: 68.35%;
  width: 4.65%;
}

.planet-saturn {
  left: 65%;
  top: 59.75%;
  width: 22.5%;
  z-index: 5;
  overflow: visible;
}

.planet-saturn img {
  filter:
    drop-shadow(0 0 0.9rem rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 2rem rgba(245, 244, 235, 0.18));
}

.saturn-static {
  display: block;
  width: 100%;
  height: auto;
}

.saturn-static {
  position: relative;
  z-index: 1;
}

.saturn-sweep,
.saturn-sweep-band {
  display: none;
}

.saturn-spotlight {
  position: absolute;
  inset: -10% -12% -7% -8%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}

.saturn-hotspot {
  position: absolute;
  left: 38.6%;
  top: 22.4%;
  width: 17.2%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 43% 43%, rgba(255,255,255,1) 0 16%, rgba(255,250,238,0.98) 26%, rgba(244,247,255,0.78) 48%, rgba(232,238,255,0.26) 68%, transparent 82%);
  box-shadow:
    0 0 0.45rem rgba(255,255,255,0.95),
    0 0 1.45rem rgba(255,246,224,0.92),
    0 0 3rem rgba(240,245,255,0.58);
  filter: blur(1px);
  opacity: 0;
}

.saturn-beam {
  position: absolute;
  left: 46.9%;
  top: 30.8%;
  height: 0.9%;
  border-radius: 999px;
  opacity: 0;
  transform-origin: 0% 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,251,236,0.9) 18%, rgba(255,248,232,0.42) 54%, transparent 100%);
  box-shadow:
    0 0 0.5rem rgba(255,250,235,0.34),
    0 0 1.1rem rgba(255,244,214,0.18);
  filter: blur(1.5px);
}

.saturn-beam-a {
  width: 26%;
  transform: rotate(-32deg);
}

.saturn-beam-b {
  width: 22%;
  transform: rotate(-4deg);
}

.saturn-beam-c {
  width: 20%;
  transform: rotate(18deg);
}

.saturn-beam-d {
  width: 18%;
  transform: rotate(42deg);
}

.saturn-beam-e {
  width: 20%;
  transform: rotate(68deg);
}

.saturn-beam-f {
  width: 17%;
  transform: rotate(102deg);
}

.saturn-beam-g {
  width: 15%;
  transform: rotate(132deg);
}

.sun-portal {
  left: 36.5%;
  top: 35.35%;
  width: 27%;
  aspect-ratio: 1 / 1;
  z-index: 6;
  will-change: transform, opacity;
}

.sun-ambient,
.sun-halo,
.sun-rays,
.sun-disc-glow,
.sun-disc,
.sun-disc-texture,
.sun-disc-shade {
  position: absolute;
}

.sun-ambient,
.sun-halo,
.sun-rays {
  inset: 0;
}

.sun-ambient {
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(255, 146, 28, 0.38) 0 18%, rgba(255, 112, 8, 0.28) 31%, rgba(228, 71, 0, 0.16) 47%, rgba(202, 63, 0, 0.08) 61%, transparent 80%);
  filter: blur(12px);
  mix-blend-mode: screen;
}

.sun-halo {
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  background:
    radial-gradient(circle at center, rgba(127, 39, 3, 0.03) 0 22%, rgba(255, 92, 0, 0.24) 34%, rgba(255, 163, 32, 0.24) 50%, rgba(255, 96, 0, 0.12) 65%, transparent 79%);
  filter: blur(6px);
  mix-blend-mode: screen;
}

.sun-rays {
  overflow: visible;
  z-index: 2;
  mix-blend-mode: screen;
}

.sun-ray {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  will-change: opacity;
}

.sun-ray-glow,
.sun-ray-shell,
.sun-ray-core {
  stroke-linecap: square;
}

.sun-ray-glow {
  stroke: url(#sunRayGlowGradient);
  stroke-width: 1.18;
  opacity: 0.82;
  filter: url(#sunRayOuterGlow);
}

.sun-ray-shell {
  stroke: url(#sunRayTubeGradient);
  stroke-width: 0.58;
}

.sun-ray-core {
  stroke: #fff8b7;
  stroke-width: 0.18;
  opacity: 0.9;
  filter: url(#sunRayHotCore);
}

.sun-ray-cap {
  fill: rgba(89, 27, 4, 0.88);
  opacity: 0.5;
  filter: url(#sunRayCapGlow);
}

.sun-disc-glow {
  left: 50%;
  top: 50%;
  width: 45%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.88);
  border-radius: 50%;
  opacity: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 171, 66, 0.28) 0 26%, rgba(255, 113, 18, 0.22) 44%, rgba(174, 52, 10, 0.08) 68%, transparent 82%);
  filter: blur(10px);
}

.sun-disc {
  left: 50%;
  top: 50%;
  width: 37.8%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.84);
  border-radius: 50%;
  opacity: 0;
  z-index: 4;
  background:
    radial-gradient(circle at 42% 34%, rgba(187, 92, 31, 0.98) 0 20%, rgba(151, 58, 18, 0.98) 48%, rgba(109, 35, 10, 1) 76%, rgba(78, 20, 7, 1) 100%);
  box-shadow:
    inset 0 0 1.7rem rgba(255, 134, 30, 0.18),
    inset 0 -0.7rem 1.1rem rgba(74, 18, 8, 0.24),
    0 0 0 0.16rem rgba(255, 176, 64, 0.24),
    0 0 1.2rem rgba(255, 128, 28, 0.24),
    0 0 3rem rgba(176, 56, 10, 0.12);
  overflow: hidden;
  will-change: transform, opacity;
}

.sun-disc-texture,
.sun-disc-shade {
  inset: 0;
  border-radius: 50%;
}

.sun-disc-texture {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 203, 125, 0.22) 0 9%, transparent 20%),
    radial-gradient(circle at 63% 42%, rgba(90, 24, 8, 0.18) 0 14%, transparent 24%),
    radial-gradient(circle at 52% 64%, rgba(255, 156, 46, 0.12) 0 12%, transparent 22%),
    radial-gradient(circle at 42% 36%, transparent 0 58%, rgba(255, 210, 130, 0.04) 76%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.88;
}

.sun-disc-shade {
  background:
    radial-gradient(circle at 58% 60%, rgba(52, 12, 6, 0) 0 42%, rgba(52, 12, 6, 0.14) 72%, rgba(52, 12, 6, 0.28) 100%);
  opacity: 0.7;
}

.gallery-scene {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.gallery-backdrop {
  background:
    linear-gradient(180deg, rgba(2, 6, 14, 0.24) 0%, rgba(2, 7, 15, 0.46) 100%),
    radial-gradient(circle at 52% 45%, rgba(68, 140, 214, 0.14), transparent 28%),
    radial-gradient(circle at 22% 20%, rgba(255, 153, 48, 0.1), transparent 18%),
    radial-gradient(circle at 82% 14%, rgba(115, 167, 255, 0.08), transparent 20%),
    url("assets/universe-background.webp") center / cover no-repeat;
  opacity: 0.74;
  transform: scale(1.06);
  will-change: transform, opacity;
}

.is-final .gallery-scene {
  opacity: 1;
  pointer-events: auto;
}

.is-final .skip-button {
  opacity: 0;
  pointer-events: none;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-40px, -70px, 0);
  }
}

@media (max-width: 900px) {
  .invitation-frame {
    width: min(90vw, 84vh);
  }
}

@media (max-width: 640px) {
  .intro-scene {
    padding: 1.15rem;
  }

  .skip-button {
    top: 0.9rem;
    right: 0.9rem;
    padding: 0.62rem 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .starfield {
    animation: none;
  }
}