/* ── Peahead Games — synthwave coming soon ───────────────────────────── */

:root {
  --pink:   #ff2d95;
  --magenta:#ff5ec4;
  --cyan:   #22e0ff;
  --violet: #7b2ff7;
  --deep:   #0b0221;
  --night:  #14033a;
}

* { box-sizing: border-box; }

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

body {
  background: var(--deep);
  color: #fff;
  font-family: 'Rajdhani', system-ui, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Scene ───────────────────────────────────────────────────────────── */

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg,
    #06010f   0%,
    #1a0344  38%,
    #57108a  56%,
    #b4148c  66%,
    #ff2d95  70%,
    #2a0446  71%,
    #0b0221 100%);
}

/* Stars */
.stars {
  position: absolute;
  inset: 0 0 32% 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 42%, #cfe9ff, transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 61% 34%, #ffd9f4, transparent),
    radial-gradient(1.5px 1.5px at 74% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 44%, #cfe9ff, transparent),
    radial-gradient(1.3px 1.3px at 8%  56%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 36% 62%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 55% 52%, #ffd9f4, transparent),
    radial-gradient(1.2px 1.2px at 82% 60%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 20% 30%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 68% 8%,  #fff, transparent);
  opacity: .85;
  animation: twinkle 5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: .45; }
  to   { opacity: .95; }
}

/* Sun with scanline slots */
.sun {
  position: absolute;
  left: 50%;
  bottom: 29%;
  width: min(46vw, 460px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 12px,
      rgba(11, 2, 33, .92) 12px 17px),
    linear-gradient(180deg, #fff36b 0%, #ff9d3b 40%, #ff2d95 72%, #b1179a 100%);
  filter: drop-shadow(0 0 70px rgba(255, 45, 149, .55));
}

/* Distant ridgeline */
.mountains {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 28.6%;
  height: 22vh;
  background: #10022b;
  clip-path: polygon(
    0% 100%, 0% 62%, 7% 42%, 13% 58%, 20% 30%,
    27% 55%, 34% 38%, 41% 66%, 48% 34%, 55% 60%,
    63% 40%, 70% 64%, 78% 36%, 86% 58%, 93% 44%,
    100% 66%, 100% 100%);
}

.mountains::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34, 224, 255, .28), transparent 45%);
  clip-path: inherit;
}

/* Glow along the horizon line */
.horizon-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28.6%;
  height: 3px;
  background: #fff;
  box-shadow:
    0 0 12px 3px rgba(255, 255, 255, .9),
    0 0 40px 10px rgba(255, 45, 149, .7),
    0 0 90px 26px rgba(123, 47, 247, .5);
}

/* Perspective grid floor */
.grid-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 29%;
  perspective: 260px;
  /* eye level sits on the horizon, so the floor recedes to exactly the top edge */
  perspective-origin: 50% 0%;
  overflow: hidden;
}

.grid {
  position: absolute;
  /* tall enough that the far edge converges at the horizon rather than short of it */
  inset: -600% -60% 0 -60%;
  transform: rotateX(82deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right,  rgba(34, 224, 255, .75) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(255, 45, 149, .75) 1.5px, transparent 1.5px);
  background-size: 56px 56px;
  animation: drive 1.6s linear infinite;
}

@keyframes drive {
  from { background-position: 0 0; }
  to   { background-position: 0 56px; }
}

/* CRT overlays */
.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: .55;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%,
    transparent 40%, rgba(4, 0, 12, .75) 100%);
}

/* ── Content ─────────────────────────────────────────────────────────── */

.content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4vh 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.5rem, 2vh, 1.5rem);
}

.logo {
  width: min(72vw, 620px);
  height: auto;
  filter:
    drop-shadow(0 0 24px rgba(34, 224, 255, .55))
    drop-shadow(0 0 60px rgba(255, 45, 149, .45));
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.coming-soon {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(2.1rem, 8vw, 5rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.05;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .45em;
  background: linear-gradient(180deg, #ffffff 8%, #7ff0ff 38%, var(--pink) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 10px rgba(255, 45, 149, .85))
    drop-shadow(0 0 32px rgba(123, 47, 247, .7))
    drop-shadow(0 3px 0 rgba(34, 224, 255, .35));
  animation: flicker 7s steps(1) infinite;
}

@keyframes flicker {
  0%, 42%, 44%, 47%, 100% { opacity: 1; }
  43%, 45.5%              { opacity: .55; }
  46%                     { opacity: .82; }
}

.tagline {
  margin: 0;
  font-size: clamp(.95rem, 2.4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #b6f2ff;
  text-shadow: 0 0 14px rgba(34, 224, 255, .8);
  /* letter-spacing adds trailing space — nudge back to true centre */
  text-indent: .42em;
}

.rule {
  width: min(60vw, 340px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
  box-shadow: 0 0 16px rgba(255, 45, 149, .8);
}

.footer {
  position: fixed;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(214, 190, 255, .6);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  .sun         { width: 62vw; }
  .mountains   { height: 14vh; }
  .coming-soon { letter-spacing: .1em; }
  .tagline     { letter-spacing: .28em; text-indent: .28em; }
  /* lift the stack so the tagline clears the horizon line */
  .content     { transform: translateY(-6vh); gap: .8rem; }
  .logo        { width: 84vw; }
}

@media (max-height: 560px) {
  .logo    { width: min(52vw, 420px); }
  .content { gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .grid, .logo, .coming-soon, .stars { animation: none; }
}