/* ---------- intense animated space background ---------- */

@keyframes starfield-zoom {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    opacity: 0.35;
  }
  to {
    transform: scale(1.6);
    opacity: 0.9;
  }
}

@keyframes starfield-zoom-sm {
  from {
    transform: scale(1.6);
    opacity: 0.8;
  }
  50% {
    opacity: 0.3;
  }
  to {
    transform: scale(1);
    opacity: 0.8;
  }
}

@keyframes nebula-drift-a {
  from {
    transform: translate3d(-8%, -4%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(8%, 6%, 0) rotate(14deg);
  }
}

@keyframes nebula-drift-b {
  from {
    transform: translate3d(10%, 8%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(-10%, -6%, 0) rotate(-12deg);
  }
}

@keyframes nebula-drift-c {
  from {
    transform: translate3d(-6%, 10%, 0) scale(1) rotate(0deg);
  }
  to {
    transform: translate3d(6%, -10%, 0) scale(1.25) rotate(16deg);
  }
}

@keyframes hue-cyclone {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes hue-cyclone-slow {
  from {
    filter: hue-rotate(360deg);
  }
  to {
    filter: hue-rotate(0deg);
  }
}

@keyframes warp-streak {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: -600px;
  }
}

@keyframes warp-streak-alt {
  from {
    background-position-y: -900px;
  }
  to {
    background-position-y: 0;
  }
}

@keyframes space-pulse {
  from {
    background-color: #020014;
  }
  to {
    background-color: #0a0430;
  }
}

@keyframes star-twinkle {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #020014;
  animation: space-pulse 5s ease-in-out infinite alternate;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- star layers (generated radial-gradient dots) --- */

.stars,
.stars--sm {
  position: fixed;
  inset: -60%;
  pointer-events: none;
  background-repeat: repeat;
  animation: star-twinkle 2.6s ease-in-out infinite alternate,
    starfield-zoom 9s ease-in-out infinite alternate;
}

.stars {
  background-image: radial-gradient(#fff 1.6px, transparent 1.6px),
    radial-gradient(#9fd6ff 1.2px, transparent 1.2px),
    radial-gradient(#ffd7f7 1.4px, transparent 1.4px),
    radial-gradient(#fff 1px, transparent 1px);
  background-size: 210px 210px, 130px 130px, 330px 330px, 170px 170px;
  background-position: 0 0, 70px 120px, 190px 40px, 250px 160px;
}

.stars--sm {
  background-image: radial-gradient(rgba(255, 255, 255, 0.9) 0.9px, transparent 0.9px),
    radial-gradient(rgba(180, 210, 255, 0.8) 0.7px, transparent 0.7px),
    radial-gradient(rgba(255, 200, 255, 0.75) 0.8px, transparent 0.8px);
  background-size: 70px 70px, 150px 150px, 110px 110px;
  background-position: 30px 50px, 110px 10px, 60px 90px;
  animation-name: star-twinkle, starfield-zoom-sm;
  animation-duration: 1.4s, 9s;
}

/* --- churning nebula blobs --- */

.nebula {
  position: fixed;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: nebula-drift-a 11s ease-in-out infinite alternate,
    hue-cyclone 6s linear infinite;
}

.nebula--a {
  top: -25vmax;
  left: -25vmax;
  background: radial-gradient(
    circle,
    #7b2ff7 0%,
    #f107a3 42%,
    transparent 65%
  );
}

.nebula--b {
  right: -30vmax;
  bottom: -30vmax;
  background: radial-gradient(
    circle,
    #00c2ff 0%,
    #0b026b 45%,
    transparent 68%
  );
  animation-name: nebula-drift-b, hue-cyclone-slow;
  animation-duration: 9s, 7s;
}

.nebula--c {
  top: 30%;
  left: 25%;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(
    circle,
    #ff5e00 0%,
    #a3004b 40%,
    transparent 64%
  );
  animation-name: nebula-drift-c, hue-cyclone;
  animation-duration: 12s, 5s;
}

/* --- intense warp-speed streak layer --- */

.hyperspace {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 12px,
      rgba(140, 190, 255, 0.22) 12px 13px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 31px,
      rgba(255, 170, 240, 0.16) 31px 32px
    );
  background-size: 100% 600px, 100% 900px;
  animation: warp-streak 0.9s linear infinite,
    warp-streak-alt 1.4s linear infinite;
  mask-image: radial-gradient(circle, transparent 10%, black 70%);
  -webkit-mask-image: radial-gradient(circle, transparent 10%, black 70%);
}

/* ---------- meme man + caption ---------- */

.scene {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 4vh 1rem 6vh;
}

.meme-man {
  width: min(52vh, 78vw);
  height: auto;
  transform: rotate(-1.5deg);
  animation: bob 7s ease-in-out infinite;
}

@keyframes bob {
  from {
    transform: rotate(-1.5deg) translateY(-8px) scale(1);
  }
  to {
    transform: rotate(1.5deg) translateY(10px) scale(1.02);
  }
}

/* --- 'ah. servur.' typing-in text --- */

.caption {
  margin: 0;
  display: flex;
  gap: 0.6ch;
  font-size: clamp(2.2rem, 8vw, 5.5rem);
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 0 12px rgba(150, 120, 255, 0.9),
    0 0 42px rgba(0, 190, 255, 0.6),
    4px 4px 0 #1c0033;
  letter-spacing: 0.04em;
}

.caption__word {
  opacity: 0;
  animation: pop-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) forwards,
    text-flicker 3.2s ease-in-out infinite;
}

.caption__word:nth-child(1) {
  animation-delay: 0.8s, 2.6s;
}

.caption__word:nth-child(2) {
  animation-delay: 1.6s, 3s;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.6) rotate(-4deg);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes text-flicker {
  0%,
  86%,
  100% {
    opacity: 1;
  }
  90% {
    opacity: 0.55;
  }
  93% {
    opacity: 1;
  }
  96% {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars,
  .stars--sm,
  .nebula,
  .hyperspace,
  .meme-man,
  .caption__word {
    animation-duration: 0.01s;
    animation-iteration-count: 1;
  }
}