/* MANKIZ - COSMIC PAGE STYLING */

:root {
  --bg-color: #06070a;
}

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--bg-color);
  overflow: hidden;
  height: 100%;
}

body {
  min-height: 100vh;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: 
    radial-gradient(circle at center, rgba(6, 7, 10, 0.2) 0%, var(--bg-color) 80%),
    url('../images/coming_soon_bg.png') no-repeat center center / cover;
  animation: bg-drift 20s ease-in-out infinite alternate;
}

/* Matte Noise Overlay */
.noise-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  animation: noise-shift 0.15s steps(4) infinite;
}

@keyframes noise-shift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-1%, -1.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Stars Parallax Twinkling Layer */
.stars-parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: 
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 150px 80px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 300px 240px, #fff, transparent),
    radial-gradient(2px 2px at 450px 120px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 600px 350px, #fff, transparent),
    radial-gradient(1px 1px at 750px 480px, rgba(255,255,255,0.5), transparent),
    radial-gradient(2.5px 2.5px at 900px 180px, #fff, transparent),
    radial-gradient(1px 1px at 1100px 290px, rgba(255,255,255,0.8), transparent);
  background-size: 1200px 1200px;
  animation: stars-twinkle 6s ease-in-out infinite alternate;
}

@keyframes stars-twinkle {
  0% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.45; }
  100% { opacity: 0.25; transform: scale(1.03); }
}

/* Keyframe Animations */
@keyframes bg-drift {
  0% { background-position: center 50%; }
  100% { background-position: center 52%; }
}