:root {
  --night: #080815;
  --night-2: #11102a;
  --lime: #efff62;
  --pink: #ff3f9d;
  --cyan: #50dcff;
  --violet: #7c4dff;
}

body {
  background: #070713;
}

body,
body * {
  letter-spacing: 0;
}

body::before {
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(124, 77, 255, .1) 18.2% 26%, transparent 26.2% 100%),
    linear-gradient(65deg, transparent 0 68%, rgba(255, 63, 157, .08) 68.2% 75%, transparent 75.2% 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -3;
}

.site-header {
  backdrop-filter: blur(18px) saturate(145%);
  background: rgba(8, 8, 21, .66);
  border-bottom-color: rgba(114, 222, 255, .16);
}

.site-header.is-scrolled {
  background: rgba(8, 8, 21, .9);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .42), 0 1px rgba(80, 220, 255, .08);
}

.header-download {
  background: linear-gradient(110deg, var(--cyan), #a4f6ff 55%, var(--lime));
  box-shadow: 0 0 22px rgba(80, 220, 255, .22);
}

.hero {
  background:
    linear-gradient(122deg, rgba(8, 8, 21, .98) 0 36%, rgba(8, 8, 21, .7) 58%, rgba(8, 8, 21, .94) 100%),
    url('/assets/gameplay-03.opt.webp') center / cover no-repeat;
  isolation: isolate;
}

.hero::before {
  background:
    linear-gradient(112deg, transparent 0 29%, rgba(80, 220, 255, .7) 29.15%, rgba(80, 220, 255, .04) 29.35%, transparent 29.6%),
    linear-gradient(72deg, transparent 0 58%, rgba(255, 63, 157, .62) 58.15%, rgba(255, 63, 157, .04) 58.35%, transparent 58.6%),
    linear-gradient(98deg, transparent 0 73%, rgba(239, 255, 98, .42) 73.1%, transparent 73.3%);
  content: "";
  inset: 0;
  opacity: .72;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.hero::after {
  animation: hero-sweep 6s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(80, 220, 255, .08), rgba(255, 63, 157, .12), transparent);
  content: "";
  height: 38%;
  left: -25%;
  pointer-events: none;
  position: absolute;
  top: 24%;
  transform: rotate(-12deg);
  width: 150%;
  z-index: 0;
}

@keyframes hero-sweep {
  0%, 100% { opacity: .25; transform: translateY(-28px) rotate(-12deg); }
  50% { opacity: .8; transform: translateY(32px) rotate(-12deg); }
}

.hero-grid-bg {
  background-size: 46px 46px;
  opacity: .45;
  transform: perspective(650px) rotateX(62deg) scale(1.45);
  transform-origin: 50% 100%;
}

.hero-glow {
  border-radius: 0;
  filter: blur(58px);
  height: 4rem;
  opacity: .38;
  width: 38rem;
}

.hero-glow-a {
  background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
}

.hero-glow-b {
  background: linear-gradient(90deg, transparent, var(--pink), var(--violet), transparent);
}

.hero-inner,
.hero-scroll {
  z-index: 2;
}

.hero h1 {
  letter-spacing: 0;
  text-shadow: 0 0 34px rgba(124, 77, 255, .24);
}

.hero h1 em {
  background: linear-gradient(90deg, var(--lime), var(--cyan) 48%, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-shadow: none;
  transform: skew(-7deg);
}

.button-neon {
  background: linear-gradient(110deg, var(--lime), #bafcae 48%, var(--cyan));
  box-shadow: 0 0 24px rgba(80, 220, 255, .28), 8px 8px 0 rgba(124, 77, 255, .7);
}

.hero-stage {
  backdrop-filter: blur(13px) saturate(145%);
  background: rgba(12, 12, 35, .64);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(124, 77, 255, .2), 20px 24px 0 rgba(80, 220, 255, .11), 0 38px 90px rgba(0, 0, 0, .58);
  overflow: visible;
  transform: perspective(900px) rotateY(-4deg) rotateZ(1deg);
}

.hero-stage::before {
  animation: stage-ring 9s linear infinite;
  border: 1px solid rgba(80, 220, 255, .34);
  border-radius: 50%;
  content: "";
  height: 18rem;
  position: absolute;
  right: -8rem;
  top: -8rem;
  width: 18rem;
  z-index: -1;
}

.hero-stage::after {
  background: linear-gradient(90deg, transparent, rgba(255, 63, 157, .7), transparent);
  content: "";
  height: 1px;
  left: -18%;
  position: absolute;
  top: 18%;
  transform: rotate(-8deg);
  width: 135%;
}

@keyframes stage-ring { to { transform: rotate(360deg); } }

.stage-screen {
  border-radius: 5px;
}

.stage-screen::before {
  animation: screen-scan 3.2s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 3;
}

@keyframes screen-scan {
  0%, 100% { transform: translateX(-105%); }
  50% { transform: translateX(105%); }
}

.stage-screen > img {
  filter: saturate(1.3) contrast(1.08) hue-rotate(-8deg);
}

.stage-line {
  box-shadow: 0 0 8px currentColor, 0 0 28px currentColor;
}

.line-one { color: #fff; }
.line-two { color: var(--cyan); }

.note {
  box-shadow: 0 0 9px currentColor, 0 0 22px currentColor;
}

.note-a,
.note-b { color: var(--lime); }
.note-c { color: var(--cyan); }
.note-d { color: var(--pink); }
.note-e { color: #fff; }

.combo strong {
  color: #fff;
  text-shadow: 0 0 20px var(--cyan);
}

.signal-bar {
  background: linear-gradient(90deg, var(--lime), #a2f6ff 44%, #ffd2ee 78%, var(--pink));
  box-shadow: 0 10px 35px rgba(124, 77, 255, .18);
  position: relative;
  z-index: 3;
}

.gameplay {
  background: linear-gradient(132deg, #f3f4fa 0 62%, #e8eafb 100%);
}

.mechanic-visual,
.note-legend {
  border: 1px solid rgba(19, 22, 42, .18);
  border-radius: 8px;
  box-shadow: 14px 16px 0 rgba(124, 77, 255, .1), 0 24px 50px rgba(32, 24, 68, .12);
}

.mechanic-visual img {
  filter: saturate(1.18) contrast(1.04);
}

.world {
  background:
    linear-gradient(125deg, rgba(255, 63, 157, .1), transparent 28%),
    linear-gradient(50deg, transparent 55%, rgba(80, 220, 255, .08)),
    #0d1026;
  position: relative;
}

.world::before {
  background: linear-gradient(90deg, transparent, rgba(80, 220, 255, .24), rgba(255, 63, 157, .28), transparent);
  content: "";
  height: 1px;
  left: -10%;
  position: absolute;
  top: 5.5rem;
  transform: rotate(-3deg);
  width: 120%;
}

.album {
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .35);
  transition: transform .4s, box-shadow .4s;
}

.album:hover {
  box-shadow: 0 26px 70px rgba(255, 63, 157, .12);
  transform: translateY(-8px);
}

.album-overlay h3 {
  text-shadow: 0 0 20px rgba(255, 63, 157, .48);
}

.guide {
  background: linear-gradient(120deg, var(--lime) 0 55%, #b6f5ff 100%);
}

.timeline li {
  transition: background .2s, padding .2s;
}

.timeline li:hover {
  background: rgba(255, 255, 255, .18);
  padding-inline: .75rem;
}

.download-section {
  background:
    linear-gradient(124deg, rgba(124, 77, 255, .18), transparent 32%),
    linear-gradient(58deg, transparent 62%, rgba(255, 63, 157, .13)),
    #080815;
}

.download-art img {
  box-shadow: 0 0 30px rgba(80, 220, 255, .24), 0 0 65px rgba(124, 77, 255, .16);
}

.orbit {
  box-shadow: 0 0 22px rgba(80, 220, 255, .08);
}

.faq {
  background: linear-gradient(135deg, #f3f4fa 0 74%, #e8eafb 100%);
}

@media (max-width: 767px) {
  .hero-grid-bg {
    transform: perspective(450px) rotateX(58deg) scale(1.6);
  }
  .hero-stage {
    box-shadow: 10px 13px 0 rgba(80, 220, 255, .1), 0 28px 60px rgba(0, 0, 0, .5);
    transform: rotate(1deg);
  }
  .hero-stage::before {
    height: 11rem;
    right: -5rem;
    top: -5rem;
    width: 11rem;
  }
  .mechanic-visual,
  .note-legend {
    box-shadow: 8px 10px 0 rgba(124, 77, 255, .1);
  }
  .album {
    border-radius: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .hero-stage::before,
  .stage-screen::before {
    animation: none;
  }
}

/* Cyber rhythm corridor: laser rails, vertical light pillars and floor reflections. */
.laser-corridor {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.laser-corridor::before,
.laser-corridor::after {
  animation: corridor-pulse 2.8s ease-in-out infinite;
  content: "";
  filter: blur(14px);
  inset-block: 8% 18%;
  opacity: .42;
  position: absolute;
  width: 5rem;
}

.laser-corridor::before {
  background: linear-gradient(90deg, rgba(80, 220, 255, .05), rgba(80, 220, 255, .64), transparent);
  box-shadow: 0 0 3rem rgba(80, 220, 255, .56);
  left: -2.5rem;
}

.laser-corridor::after {
  animation-delay: -1.4s;
  background: linear-gradient(90deg, transparent, rgba(255, 63, 157, .68), rgba(255, 63, 157, .05));
  box-shadow: 0 0 3rem rgba(255, 63, 157, .52);
  right: -2.5rem;
}

.laser-floor {
  background:
    repeating-linear-gradient(90deg, transparent 0 8.8%, rgba(80, 220, 255, .22) 9%, transparent 9.2% 18%),
    repeating-linear-gradient(0deg, transparent 0 16%, rgba(255, 63, 157, .23) 16.4%, transparent 16.8% 32%);
  bottom: -15%;
  filter: drop-shadow(0 0 .55rem rgba(80, 220, 255, .56));
  height: 54%;
  left: -20%;
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000);
  opacity: .46;
  position: absolute;
  transform: perspective(26rem) rotateX(64deg);
  transform-origin: 50% 100%;
  width: 140%;
}

.laser-beam {
  animation: laser-breathe 2.2s ease-in-out infinite;
  border-radius: 999px;
  height: 2px;
  position: absolute;
  transform-origin: left center;
  width: 58%;
}

.laser-beam::after {
  background: inherit;
  content: "";
  filter: blur(10px);
  inset: -4px 0;
  opacity: .82;
  position: absolute;
}

.beam-cyan-a {
  background: #79ecff;
  box-shadow: 0 0 .35rem #fff, 0 0 1.25rem #50dcff, 0 0 2.8rem rgba(80, 220, 255, .72);
  left: -7%;
  top: 22%;
  transform: rotate(7deg);
}

.beam-cyan-b {
  animation-delay: -.8s;
  background: #50dcff;
  box-shadow: 0 0 .35rem #fff, 0 0 1.2rem #50dcff;
  bottom: 21%;
  left: -14%;
  transform: rotate(-10deg);
  width: 48%;
}

.beam-pink-a {
  animation-delay: -1.3s;
  background: #ff65b2;
  box-shadow: 0 0 .35rem #fff, 0 0 1.25rem #ff3f9d, 0 0 2.8rem rgba(255, 63, 157, .65);
  right: -11%;
  top: 31%;
  transform: rotate(-9deg);
  transform-origin: right center;
}

.beam-pink-b {
  animation-delay: -.35s;
  background: #a780ff;
  box-shadow: 0 0 .35rem #fff, 0 0 1.15rem #7c4dff;
  bottom: 12%;
  right: -17%;
  transform: rotate(12deg);
  transform-origin: right center;
  width: 52%;
}

.neon-pillar {
  animation: pillar-shift 5.6s ease-in-out infinite;
  background: linear-gradient(to bottom, transparent, currentColor 16% 76%, transparent);
  box-shadow: 0 0 .45rem currentColor, 0 0 1.7rem currentColor;
  color: var(--cyan);
  height: 64%;
  opacity: .45;
  position: absolute;
  top: 4%;
  width: 2px;
}

.neon-pillar::after {
  background: linear-gradient(to bottom, currentColor, transparent);
  bottom: -38%;
  content: "";
  filter: blur(5px);
  height: 40%;
  left: 0;
  opacity: .55;
  position: absolute;
  width: 100%;
}

.pillar-a { left: 6%; }
.pillar-b { animation-delay: -2s; color: var(--pink); left: 31%; }
.pillar-c { animation-delay: -3.5s; color: var(--violet); right: 27%; }
.pillar-d { animation-delay: -1s; color: var(--pink); right: 5%; }

.beat-flare {
  animation: beat-sweep 4.8s cubic-bezier(.55, 0, .32, 1) infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), var(--cyan), transparent);
  filter: blur(1px) drop-shadow(0 0 .85rem var(--cyan));
  height: 1px;
  left: -35%;
  opacity: 0;
  position: absolute;
  top: 58%;
  transform: rotate(-5deg);
  width: 38%;
}

.hero-copy {
  min-width: 0;
  position: relative;
  text-shadow: 0 2px 1.5rem rgba(0, 0, 0, .88);
  z-index: 3;
}

.hero-lead {
  max-width: min(34rem, 100%);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-copy::before {
  background: radial-gradient(ellipse, rgba(8, 8, 21, .86), rgba(8, 8, 21, .36) 52%, transparent 74%);
  content: "";
  inset: -3rem -4rem;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.hero-stage {
  box-shadow:
    0 0 0 1px rgba(124, 77, 255, .28),
    1.25rem 1.5rem 0 rgba(80, 220, 255, .12),
    -.8rem -.8rem 3.2rem rgba(255, 63, 157, .11),
    0 2.4rem 5.6rem rgba(0, 0, 0, .62);
  z-index: 3;
}

.stage-line {
  animation: judgment-hit 1.7s ease-in-out infinite;
}

.line-two {
  animation-delay: -.85s;
}

.note {
  animation: note-glow 1.1s ease-in-out infinite alternate;
}

.note-b,
.note-d { animation-delay: -.55s; }

@keyframes corridor-pulse {
  0%, 100% { opacity: .26; transform: scaleX(.76); }
  48% { opacity: .58; transform: scaleX(1.18); }
  54% { opacity: .34; transform: scaleX(.92); }
}

@keyframes laser-breathe {
  0%, 100% { opacity: .24; }
  46% { opacity: .88; }
  52% { opacity: .42; }
  58% { opacity: .96; }
}

@keyframes pillar-shift {
  0%, 100% { opacity: .24; transform: translateY(-3%); }
  50% { opacity: .62; transform: translateY(4%); }
}

@keyframes beat-sweep {
  0%, 18% { left: -38%; opacity: 0; }
  24% { opacity: .88; }
  56%, 100% { left: 112%; opacity: 0; }
}

@keyframes judgment-hit {
  0%, 100% { filter: brightness(.92); }
  48% { filter: brightness(1.5); }
  52% { filter: brightness(2.2); }
  58% { filter: brightness(1.05); }
}

@keyframes note-glow {
  from { filter: brightness(.95); }
  to { filter: brightness(1.55); }
}

@media (min-width: 768px) {
  .laser-floor {
    bottom: -17%;
    height: 59%;
    opacity: .62;
  }

  .laser-beam { height: 2px; }
  .neon-pillar { opacity: .58; }
}

@media (max-width: 767px) {
  .laser-corridor { opacity: .72; }
  .laser-beam { width: 78%; }
  .beam-cyan-a { top: 17%; }
  .beam-pink-a { top: 47%; }
  .beam-cyan-b,
  .beam-pink-b { bottom: 7%; }
  .pillar-b,
  .pillar-c { opacity: .24; }
  .hero-copy::before { inset: -2rem -1.5rem; }
  .hero-lead { word-break: break-all; }
}

@media (prefers-reduced-motion: reduce) {
  .laser-corridor::before,
  .laser-corridor::after,
  .laser-beam,
  .neon-pillar,
  .beat-flare,
  .stage-line,
  .note {
    animation: none;
  }
}