/* css/hero.css
   Hero look & atmosphere (pixel-friendly, cozy, calm)
*/

.hero {
  background: var(--bg);
}

/* Vignette + warm cinematic overlays */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(
      to right,
      rgba(8, 16, 28, 0.85) 0%,
      rgba(8, 16, 28, 0.65) 25%,
      rgba(8, 16, 28, 0.20) 45%,
      rgba(8, 16, 28, 0.00) 60%
    ),
    radial-gradient(1200px 600px at 65% 40%, rgba(255, 179, 92, 0.06), transparent 60%),
    radial-gradient(900px 500px at 30% 30%, rgba(90, 167, 255, 0.04), transparent 60%),
    radial-gradient(1200px 900px at 50% 60%, rgba(0, 0, 0, 0.25), transparent 55%);
}

/* Keep hero stack above the vignette.
   IMPORTANT: do NOT change .hero-layer positioning here
   (it must stay absolute from base.css). */
.hero-stack {
  position: relative;
  z-index: 1;
}

/* Text polish for hero only */
.hero-title {
  font-size: 2.8rem;
  line-height: 1.1;
  letter-spacing: 0.2px;
  font-weight: 600;
}

.hero-subtitle {
  margin-top: 0.25rem;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.hero-lines {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
}

/* Links below buttons */
.hero-links a {
  color: var(--muted);
  text-decoration: none;
}

.hero-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Particles canvas should never block clicks */
.particles-canvas {
  display: block;
}

/* Lamp glow: warm, subtle, not neon */
.lamp-glow {
  position: absolute;
  right: 20%;
  top: 14%;
  width: 560px;
  height: 560px;

  background:
    radial-gradient(
      circle at 45% 45%,
      rgba(255, 179, 92, 0.22),
      rgba(255, 179, 92, 0.10) 35%,
      rgba(255, 179, 92, 0.00) 70%
    );

  pointer-events: none;
  transform-origin: center;
}

/* Mobile hero text sizing */
@media (max-width: 720px) {
  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle,
  .hero-lines {
    font-size: 1rem;
  }

  .lamp-glow {
    right: 10%;
    top: 10%;
    width: 420px;
    height: 420px;
  }
}