/*
  Scroll fluidity + reveal cleanup — load last (after sr-responsive-polish.css)
  Fixes janky scroll, double animations, hero/footer overlap.
*/

html {
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* One reveal system: CSS transitions only, no stacked keyframes */
body.sr-site .fade-up.is-visible,
body.sr-site .fade-up.visible,
body.sr-site .sr-ui-reveal.is-visible,
body.sr-site .sr-ui-reveal.visible {
  animation: none !important;
}

/* Grand-premium hotfix forces visible before motion JS — restore hidden state */
body.sr-site.sr-motion-ready #dashboard .fade-up:not(.is-visible):not(.visible),
body.sr-site.sr-motion-ready #search-guide .sr-ui-reveal:not(.is-visible),
body.sr-site.sr-motion-ready #guide .fade-up:not(.is-visible):not(.visible),
body.sr-site.sr-motion-ready #about .sr-ui-reveal:not(.is-visible),
body.sr-site.sr-motion-ready .card.fade-up:not(.is-visible):not(.visible),
body.sr-site.sr-motion-ready section[id] > .max-w-7xl > header.fade-up:not(.is-visible):not(.visible),
body.sr-site.sr-motion-ready section[id] > .max-w-7xl > .card.fade-up:not(.is-visible):not(.visible),
body.sr-site.sr-motion-ready section[id] > .max-w-7xl > .sr-glass-deep.fade-up:not(.is-visible):not(.visible),
body.sr-site.sr-motion-ready .sr-ui-reveal:not(.is-visible) {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  visibility: visible !important;
}

body.sr-site .hero-stage.sr-scroll-scene {
  min-height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 767px) {
  body.sr-site .hero-stage {
    min-height: min(88svh, 820px) !important;
  }
}

/* Scroll indicator — keep pinned, never overlap readout */
body.sr-site .hero-stage > .absolute.bottom-8 {
  position: absolute !important;
  bottom: 1.75rem !important;
  left: 50% !important;
  width: auto !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
  z-index: 5;
  pointer-events: none;
}

/* Section stacking — content above fixed backdrop */
body.sr-site main,
body.sr-site section,
body.sr-site footer.footer-premium {
  isolation: isolate;
}

body.sr-site #dashboard,
body.sr-site #guide,
body.sr-site #about,
body.sr-site .sr-seo-section,
body.sr-site .sr-faq-section {
  position: relative;
  z-index: 10;
}

/* Spectrogram markers stay inside image bounds */
body.sr-site .spectro-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

body.sr-site .spectro-overlay {
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

body.sr-site .spectro-marker {
  max-width: 46%;
  z-index: 3;
}

/* Footer — lang pills never overlap columns */
body.sr-site .sr-footer-columns {
  align-items: flex-start;
}

body.sr-site .sr-footer-col--langs .sr-footer-lang-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem;
  max-width: 100%;
}

body.sr-site .sr-footer-meta {
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}

/* While scrolling: pause only heavy milky layer (stars/nebula stay live) */
body.is-scrolling #world-solar-bg .wsb-milky,
body.is-scrolling #world-solar-bg::before {
  animation-play-state: paused;
}

body.sr-site .sr-cinematic-scroll-hint {
  opacity: calc(0.45 * (1 - var(--sr-hero-progress, 0)));
  transform: translateX(-50%) translate3d(0, calc(var(--sr-hero-progress, 0) * 20px), 0);
}