:root{
  --bg:#050507;
  --panel:#0d0b13;
  --text:#f8f7fb;
  --muted:#aaa5b6;
  --violet:#8d3cff;
  --violet2:#c68aff;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(circle at 50% -10%,rgba(112,36,200,.2),transparent 38%),var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif
}
.hidden{display:none!important}

/* INTRO */
.intro{
  position:fixed;
  inset:0;
  z-index:50;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#000
}
.stars{
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:
    radial-gradient(circle at 12% 20%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 32%,#b78cff 0 1px,transparent 1.5px),
    radial-gradient(circle at 46% 70%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 85% 75%,#b78cff 0 1px,transparent 1.5px),
    radial-gradient(circle at 31% 42%,#fff 0 1px,transparent 1.5px);
  background-size:220px 220px,260px 260px,280px 280px,330px 330px,370px 370px;
  animation:drift 12s linear infinite
}

/* RADIO DIAL */
.radio-dial-wrap{
  position:absolute;
  width:min(880px,88vw);
  opacity:0;
  transform:translateY(16px) scale(.96);
  animation:dialEnter .9s ease .25s forwards, dialLeave .8s ease 3.4s forwards;
  text-align:center
}
.dial-title{
  font-size:clamp(.8rem,1.8vw,1rem);
  letter-spacing:.34em;
  color:#d9c8ff;
  margin-bottom:12px;
  text-shadow:0 0 16px rgba(168,92,255,.7)
}
.radio-dial{
  position:relative;
  height:170px;
  border:1px solid rgba(202,163,255,.25);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(23,15,34,.95),rgba(5,4,9,.98)),
    #08060b;
  box-shadow:
    inset 0 0 35px rgba(98,34,160,.12),
    0 0 45px rgba(109,36,188,.18);
  overflow:hidden
}
.dial-glass{
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.06),transparent 26%,transparent 64%,rgba(255,255,255,.025));
  pointer-events:none
}
.dial-scale{
  position:absolute;
  left:5%;
  right:5%;
  top:47px;
  height:40px
}
.dial-scale span{
  position:absolute;
  left:var(--x);
  transform:translateX(-50%);
  font-size:.78rem;
  color:#bdb4ca;
  letter-spacing:.04em
}
.ticks{
  position:absolute;
  left:6%;
  right:6%;
  top:78px;
  height:34px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.58) 0 1px,
      transparent 1px 10px
    );
  mask-image:linear-gradient(to bottom,#000 0 52%,transparent 52% 100%)
}
.ticks::after{
  content:"";
  position:absolute;
  left:0;right:0;top:21px;
  height:1px;
  background:rgba(255,255,255,.28)
}
.needle{
  position:absolute;
  top:29px;
  bottom:20px;
  width:2px;
  left:9%;
  background:#d7b4ff;
  box-shadow:0 0 7px 2px rgba(180,100,255,.95),0 0 18px 6px rgba(123,45,220,.55);
  animation:tuneNeedle 2.55s cubic-bezier(.45,0,.25,1) .75s forwards
}
.dial-glow{
  position:absolute;
  left:7%;
  right:7%;
  bottom:14px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,#6f23c9,#c48cff,#6f23c9,transparent);
  filter:blur(4px);
  opacity:.65
}
.tuning-copy{
  margin-top:12px;
  font-size:.72rem;
  letter-spacing:.25em;
  color:#8f849b;
  animation:textFlicker .28s steps(2,end) 7
}

/* MOON */
.moon-stage{
  position:absolute;
  width:min(46vw,460px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.86);
  animation:moonEnter 1.2s ease-out 3.75s forwards
}
.moon{
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 32%,rgba(255,255,255,.98),rgba(225,225,238,.9) 35%,rgba(175,174,191,.92) 65%,rgba(118,115,134,.95));
  box-shadow:inset -22px -18px 40px rgba(60,55,80,.4)
}
.halo{
  position:absolute;
  width:85%;
  aspect-ratio:1;
  border-radius:50%;
  box-shadow:0 0 42px 16px rgba(156,79,255,.45),0 0 90px 34px rgba(107,34,207,.25);
  opacity:0;
  animation:halo 1.1s ease 5.0s forwards
}
.shadow{
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:#000;
  transform:translateX(-2%);
  animation:eclipse 2.4s cubic-bezier(.65,0,.35,1) 4.1s forwards
}

/* LOGO REVEAL */
.intro-logo{
  position:absolute;
  width:min(76vw,760px);
  max-height:72vh;
  object-fit:contain;
  opacity:0;
  transform:scale(.92);
  filter:drop-shadow(0 0 28px rgba(142,61,255,.25));
  animation:logoReveal 1.45s ease 6.4s forwards
}
.skip{
  position:absolute;
  right:24px;
  bottom:22px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45);
  color:#fff;
  border-radius:999px;
  padding:10px 16px;
  cursor:pointer
}
.skip:hover{border-color:var(--violet2)}
.intro.fade-out{animation:introOut 1s ease forwards}

/* MAIN SITE */
.hero{
  min-height:78vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:72px 22px 54px
}
.hero-logo{
  width:min(880px,92vw);
  max-height:55vh;
  object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(145,69,255,.22))
}
.tagline{
  margin:18px auto 0;
  max-width:780px;
  color:#d9d6e3;
  font-size:clamp(1rem,2vw,1.35rem)
}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.btn{
  text-decoration:none;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  border:1px solid var(--line);
  color:#fff;
  background:rgba(255,255,255,.03)
}
.primary{
  background:linear-gradient(135deg,var(--violet),#5f19c9);
  box-shadow:0 0 26px rgba(141,60,255,.3)
}
.panel,.grid,footer{
  width:min(1120px,calc(100% - 34px));
  margin:0 auto
}
.panel{
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  background:linear-gradient(135deg,rgba(141,60,255,.12),rgba(255,255,255,.025));
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center
}
.eyebrow{color:var(--violet2);font-size:.75rem;font-weight:800;letter-spacing:.18em}
.muted{color:var(--muted)}
.player{
  min-height:150px;
  border:1px solid var(--line);
  border-radius:18px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  background:rgba(0,0,0,.28)
}
.pulse{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--violet2);
  box-shadow:0 0 0 0 rgba(198,138,255,.6);
  animation:pulse 1.7s infinite
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:20px 0 60px
}
.card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  min-height:190px;
  background:var(--panel)
}
footer{
  border-top:1px solid var(--line);
  padding:28px 0 40px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}

/* ANIMATIONS */
@keyframes dialEnter{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialLeave{to{opacity:0;transform:translateY(-14px) scale(.985)}}
@keyframes tuneNeedle{
  0%{left:9%}
  24%{left:71%}
  47%{left:34%}
  68%{left:82%}
  84%{left:57%}
  100%{left:63%}
}
@keyframes textFlicker{50%{opacity:.25}}
@keyframes eclipse{
  0%{transform:translateX(-2%)}
  55%{transform:translateX(28%);box-shadow:-8px 0 24px rgba(167,91,255,.5)}
  100%{transform:translateX(115%)}
}
@keyframes moonEnter{to{opacity:1;transform:scale(1)}}
@keyframes halo{to{opacity:1}}
@keyframes logoReveal{to{opacity:1;transform:scale(1)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@keyframes drift{to{transform:translate3d(-40px,20px,0)}}
@keyframes pulse{
  70%{box-shadow:0 0 0 15px rgba(198,138,255,0)}
  100%{box-shadow:0 0 0 0 rgba(198,138,255,0)}
}

@media(max-width:760px){
  .radio-dial{height:145px}
  .dial-scale{top:39px}
  .ticks{top:69px}
  .panel{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .hero{min-height:70vh}
  .intro-logo{width:92vw}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important
  }
}

/* --- Midnight Radio realistic lunar surface --- */
.moon{
  position:relative;
  overflow:hidden;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 30%, rgba(95,96,112,.55) 0 5%, transparent 5.6%),
    radial-gradient(circle at 64% 22%, rgba(105,106,120,.45) 0 3.5%, transparent 4.2%),
    radial-gradient(circle at 73% 55%, rgba(78,80,96,.50) 0 7%, transparent 7.7%),
    radial-gradient(circle at 43% 68%, rgba(89,91,108,.46) 0 5.5%, transparent 6.2%),
    radial-gradient(circle at 22% 63%, rgba(118,119,132,.42) 0 3.5%, transparent 4.3%),
    radial-gradient(circle at 55% 42%, rgba(135,136,148,.38) 0 10%, transparent 11%),
    radial-gradient(circle at 38% 18%, rgba(255,255,255,.35) 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 35% 32%, #f4f4f7 0%, #d6d6dd 34%, #a9a9b5 67%, #747482 100%);
  box-shadow:
    inset -28px -22px 48px rgba(22,20,35,.52),
    inset 18px 14px 32px rgba(255,255,255,.12),
    0 0 22px rgba(208,198,255,.2);
}

.moon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 31% 47%, rgba(64,65,78,.28) 0 8%, transparent 9%),
    radial-gradient(ellipse at 62% 67%, rgba(58,60,73,.30) 0 11%, transparent 12%),
    radial-gradient(ellipse at 72% 36%, rgba(65,66,78,.22) 0 7%, transparent 8%),
    radial-gradient(ellipse at 47% 23%, rgba(82,83,95,.22) 0 9%, transparent 10%);
  mix-blend-mode:multiply;
}

.moon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 31% 27%, rgba(255,255,255,.28), transparent 38%);
  pointer-events:none;
}

/* Real Midnight moon image */
.moon{
  background:url("../images/midnight-moon-eclipse.png") center/cover no-repeat;
}
.moon::before{
  display:none;
}

/* Enlarge lunar image to remove excess black border */
.moon{
  background-size:135%;
}