/* Input pages — cosmic hero bands (onboarding + tarot only) */

:root {
  --input-hero-bg-color: #040618;
  --input-hero-nav-fade: #090a12;
}

.input-hero-edge-fade::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      var(--input-hero-nav-fade) 0%,
      rgba(9, 10, 18, .92) 5%,
      rgba(4, 6, 24, .55) 12%,
      rgba(4, 6, 24, .15) 22%,
      transparent 32%
    ),
    linear-gradient(
      to top,
      var(--bg) 0%,
      rgba(4, 6, 24, .96) 5%,
      rgba(4, 6, 24, .68) 11%,
      rgba(4, 6, 24, .22) 20%,
      transparent 30%
    );
}

/* —— Onboarding (birth chart input) —— */
body[data-page="onboarding"] .onboarding-v2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--input-hero-bg-color);
  background-image:
    /* 多段平滑渐变，避免左右明暗「断层」；底图氛围 + 表单实底卡片分担可读性 */
    linear-gradient(
      90deg,
      rgba(4, 6, 24, .82) 0%,
      rgba(4, 6, 24, .66) 26%,
      rgba(4, 6, 24, .52) 44%,
      rgba(4, 6, 24, .46) 58%,
      rgba(4, 6, 24, .54) 72%,
      rgba(4, 6, 24, .68) 100%
    ),
    url('/assets/pages/hero-onboarding.webp');
  background-size: auto, cover;
  background-position: center, 72% 38%;
  background-repeat: no-repeat;
}

body[data-page="onboarding"] .onboarding-v2.input-hero-edge-fade::before {
  z-index: 0;
  opacity: 0.62;
}

body[data-page="onboarding"] .onboarding-v2 .container {
  position: relative;
  z-index: 2;
}

/* —— Tarot input —— */
.tarot-hero.input-hero-band-tarot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--input-hero-bg-color);
  background-image:
    linear-gradient(90deg, rgba(4, 6, 24, .98) 0%, rgba(4, 6, 24, .9) 38%, rgba(4, 6, 24, .45) 58%, rgba(4, 6, 24, .55) 100%),
    url('/assets/pages/hero-tarot.webp'),
    radial-gradient(680px 420px at 74% 12%, rgba(139, 92, 246, .1), transparent 62%),
    radial-gradient(520px 320px at 12% 10%, rgba(244, 199, 107, .08), transparent 60%);
  background-size: auto, cover, auto, auto;
  background-position: center, 88% 42%, center, center;
  background-repeat: no-repeat;
}

.tarot-hero.input-hero-band-tarot > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 720px) {
  body[data-page="onboarding"] .onboarding-v2 {
    background-position: center, 78% 36%;
  }

  .tarot-hero.input-hero-band-tarot {
    background-position: center, 92% 40%, center, center;
  }
}