.hero {
  background: #05070c;
  isolation: isolate;
}
.hero-visual {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      180deg,
      #03050bb8 0%,
      #03050b33 34%,
      #03050b25 68%,
      #080c15e8 100%
    ),
    url("assets/lux-spiral-galaxy-clean.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  filter: saturate(0.88) contrast(1.04);
  transform: scale(calc(1.03 + var(--hero-progress, 0) * 0.28))
    translateY(calc(var(--hero-progress, 0) * -10%));
  animation: galaxy-drift 13s ease-in-out infinite alternate;
}
.hero-visual:before,
.hero-visual:after {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  pointer-events: none;
}
.signal-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.48;
}
.lux-apparition {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("assets/lux-apparition-pure-v2.png");
  background-repeat: no-repeat;
  background-size: auto 112%;
  background-position: calc(100% + 1vw) 50%;
  mix-blend-mode: normal;
  opacity: 0;
  filter: saturate(0.8) contrast(0.94) brightness(1.04) blur(1.1px);
  animation: lux-apparition 13s ease-in-out infinite;
}
.lux-apparition::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 88% 44%,
      #f5f8ff5c 0%,
      #e8f0ff2b 30%,
      transparent 60%
    ),
    linear-gradient(110deg, transparent 38%, #eef5ff1c 68%, #f8fbff42 100%);
}
@keyframes lux-apparition {
  0%,
  8%,
  77%,
  100% {
    opacity: 0;
    transform: translateX(12px) scale(1.012);
  }
  20% {
    opacity: 0.36;
  }
  39% {
    opacity: 0.72;
    transform: translateX(0) scale(1);
  }
  62% {
    opacity: 0.42;
  }
}
.hero-content,
.scroll-note {
  z-index: 2;
}
.hero-visual:before {
  background: conic-gradient(
    from 45deg,
    transparent 0 12%,
    #b6d9ff20 17%,
    transparent 25% 48%,
    #91bce931 56%,
    transparent 63% 79%,
    #dceaff1b 86%,
    transparent 94%
  );
  filter: blur(22px);
  animation: orbital-drift 32s linear infinite;
}
.hero-visual:after {
  background: radial-gradient(
    ellipse at center,
    transparent 34%,
    #02040b16 63%,
    #02040b8c 100%
  );
}
.drift {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92vw;
  height: 42vw;
  max-width: 1250px;
  max-height: 570px;
  border: 1px solid #d6e8ff42;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
  animation: orbit-sweep-a 18s ease-in-out infinite alternate;
}
.drift-b {
  width: 64vw;
  height: 28vw;
  transform: translate(-50%, -50%) rotate(47deg);
  opacity: 0.6;
  animation: orbit-sweep-b 24s ease-in-out infinite alternate;
}
.signal-core {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d5edff;
  box-shadow:
    0 0 18px 5px #a3d5ff99,
    0 0 96px 30px #75aee544;
  transform: translate(-50%, -50%);
  animation: signal-pulse 4.8s ease-in-out infinite;
}
.topbar {
  transition:
    background 0.5s ease,
    backdrop-filter 0.5s ease;
}
.topbar.is-scrolled {
  position: fixed;
  background: #070a11b8;
  backdrop-filter: blur(14px);
}
.motion-reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 1.1s cubic-bezier(0.2, 0.65, 0.2, 1),
    transform 1.1s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.motion-reveal.in-view {
  opacity: 1;
  transform: none;
}
.motion-reveal .volume,
.motion-reveal .universe-card,
.motion-reveal .player,
.motion-reveal .dialogue {
  transition:
    transform 0.8s cubic-bezier(0.2, 0.65, 0.2, 1),
    opacity 0.8s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.motion-reveal:not(.in-view) .volume,
.motion-reveal:not(.in-view) .universe-card,
.motion-reveal:not(.in-view) .player,
.motion-reveal:not(.in-view) .dialogue {
  opacity: 0;
  transform: translateY(24px);
}
.motion-reveal.in-view .volume:nth-child(2),
.motion-reveal.in-view .universe-card:nth-child(2) {
  transition-delay: 0.13s;
}
.motion-reveal.in-view .volume:nth-child(3),
.motion-reveal.in-view .universe-card:nth-child(3) {
  transition-delay: 0.26s;
}
@keyframes orbital-drift {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orbit-sweep-a {
  from {
    opacity: 0.16;
    transform: translate(-50%, -50%) rotate(-31deg) scale(0.88);
  }
  to {
    opacity: 0.62;
    transform: translate(-50%, -50%) rotate(18deg) scale(1.16);
  }
}
@keyframes orbit-sweep-b {
  from {
    opacity: 0.12;
    transform: translate(-50%, -50%) rotate(62deg) scale(1.12);
  }
  to {
    opacity: 0.52;
    transform: translate(-50%, -50%) rotate(8deg) scale(0.8);
  }
}
@keyframes signal-pulse {
  0%,
  100% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0.58);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.46);
  }
}
.hero:after {
  inset: 0;
  height: auto;
  background: radial-gradient(
    ellipse at center,
    transparent 36%,
    #03050b80 100%
  );
}
.hero-content {
  text-shadow: 0 2px 24px #02040b;
  transform: translateY(calc(var(--hero-progress, 0) * -44px))
    scale(calc(1 - var(--hero-progress, 0) * 0.07));
  opacity: calc(1 - var(--hero-progress, 0) * 0.76);
}
.hero h1 {
  letter-spacing: 0.13em;
  margin: 26px 0;
  color: #f2f6fb;
}
.hero-dot {
  color: #a6c8ed;
}
.hero-desc {
  color: #d0d8e4;
}
.primary {
  border-color: #d1d8e599;
}
.scroll-note {
  color: #d3dbe6;
}
.theme-dock {
  position: fixed;
  right: clamp(18px, 4vw, 52px);
  bottom: 28px;
  z-index: 8;
}
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid #c8ddf055;
  background: #07101bb3;
  color: #dce9f6;
  font-size: 9px;
  letter-spacing: 0.16em;
  backdrop-filter: blur(12px);
  transition:
    background 0.35s,
    border-color 0.35s,
    color 0.35s;
}
.theme-toggle:hover {
  background: #172b40dd;
  border-color: #d9edff;
}
.theme-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 13px;
}
.theme-bars i {
  display: block;
  width: 2px;
  height: 4px;
  background: #b4dfff;
  animation: none;
}
.theme-bars i:nth-child(2) {
  height: 10px;
}
.theme-bars i:nth-child(3) {
  height: 7px;
}
.theme-toggle.is-playing {
  color: #fff;
  border-color: #d5eaff;
}
.theme-toggle.is-playing .theme-bars i {
  animation: theme-eq 0.78s ease-in-out infinite alternate;
}
.theme-toggle.is-playing .theme-bars i:nth-child(2) {
  animation-delay: -0.22s;
}
.theme-toggle.is-playing .theme-bars i:nth-child(3) {
  animation-delay: -0.47s;
}
@keyframes theme-eq {
  from {
    transform: scaleY(0.32);
    opacity: 0.55;
  }
  to {
    transform: scaleY(1.35);
    opacity: 1;
  }
}
@keyframes galaxy-drift {
  from {
    background-position: 48% 48%;
    filter: saturate(0.82) contrast(1.02) brightness(0.92);
  }
  to {
    background-position: 53% 53%;
    filter: saturate(0.98) contrast(1.07) brightness(1.08);
  }
}
@media (max-width: 800px) {
  .hero-visual {
    background-size: auto 118%;
    animation-name: galaxy-drift-mobile;
  }
  .hero-content {
    transform: translateY(calc(var(--hero-progress, 0) * -32px))
      scale(calc(1 - var(--hero-progress, 0) * 0.04));
  }
  .lux-apparition {
    background-size: auto 106%;
    background-position: 100% 54%;
    animation-duration: 13s;
  }
  .theme-dock {
    right: 16px;
    bottom: 16px;
  }
  .theme-toggle {
    padding: 9px 10px;
    font-size: 8px;
  }
}

@keyframes galaxy-drift-mobile {
  from {
    background-position: 48% 76%;
    filter: saturate(0.82) contrast(1.02) brightness(0.92);
  }
  to {
    background-position: 53% 86%;
    filter: saturate(0.98) contrast(1.07) brightness(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .hero-visual:before,
  .drift,
  .signal-core {
    animation: none;
  }
  .lux-apparition {
    animation: none;
    opacity: 0.12;
  }
  .motion-reveal,
  .motion-reveal:not(.in-view) .volume,
  .motion-reveal:not(.in-view) .universe-card,
  .motion-reveal:not(.in-view) .player,
  .motion-reveal:not(.in-view) .dialogue {
    opacity: 1;
    transform: none;
    transition: none;
  }
}