/* Aurora emotional stream — full-width hero and card */

.aurora-hero {
  position: relative;
  width: 100%;
  min-height: 42vh;
  overflow: hidden;
  isolation: isolate;
}

.aurora-hero .aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.aurora-card-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}

.aurora-card-wrap .aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

/* Content over aurora hero */
.aurora-hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 24px);
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  max-width: min(420px, 92vw);
  margin: 0 auto;
}

.aurora-hero-content h1 {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.2em;
}

.aurora-hero-content .tagline {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}

/* Card: text overlay (e.g. "Your city's emotional stream") */
.aurora-card-wrap .stream-label,
.dashboard-stream-label {
  position: relative;
  z-index: 1;
}

/* CSS-only fallback (no canvas): gentle gradient + hue-rotate pulse */
.aurora-fallback {
  position: relative;
  width: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0d0d28 100%);
  overflow: hidden;
}

.aurora-fallback::before,
.aurora-fallback::after {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  height: 40%;
  background: linear-gradient(90deg, transparent, rgba(100, 180, 255, 0.15), rgba(180, 120, 255, 0.12), transparent);
  animation: auroraFallbackWave 12s ease-in-out infinite;
  filter: blur(24px);
}

.aurora-fallback::after {
  top: 60%;
  animation-delay: -4s;
  opacity: 0.8;
}

@keyframes auroraFallbackWave {
  0%, 100% { transform: translateX(-20%) translateY(0) scale(1); opacity: 0.6; }
  50% { transform: translateX(20%) translateY(-5%) scale(1.05); opacity: 1; }
}

/* Optional: hue-rotate for northern-lights feel on a gradient box */
.aurora-fallback-card {
  background: linear-gradient(90deg, hsl(160, 60%, 92%), hsl(200, 50%, 94%));
  animation: auroraHueShift 25s linear infinite;
}

@keyframes auroraHueShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}