.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero--medium { min-height: 62vh; }
.hero--tall { min-height: 82vh; }
.hero--full { min-height: 100svh; }

.hero__layers { position: absolute; inset: 0; z-index: -1; }
.hero__bg { position: absolute; inset: -8% 0; }
.hero__picture,
.hero__img,
.hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { object-fit: cover; }

/* Designed atmospheric fallback (shown until a hero photo is added).
   Three glows evoke the purple / red / green colourways. */
.hero__fallback {
  background:
    radial-gradient(38% 55% at 22% 68%, color-mix(in srgb, var(--glow-purple) 40%, transparent), transparent 70%),
    radial-gradient(40% 58% at 52% 78%, color-mix(in srgb, var(--glow-red) 42%, transparent), transparent 70%),
    radial-gradient(38% 55% at 80% 66%, color-mix(in srgb, var(--glow-green) 38%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, #14121a, var(--color-bg) 70%);
  animation: hero-breathe 9s var(--ease) infinite alternate;
}
@keyframes hero-breathe {
  from { filter: brightness(0.82) saturate(0.9); }
  to { filter: brightness(1.08) saturate(1.1); }
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--color-bg) 2%, rgba(10, 10, 12, calc(var(--hero-overlay, 0.45) * 0.4)) 45%, transparent 78%),
    radial-gradient(120% 100% at 50% 100%, transparent 40%, rgba(10, 10, 12, 0.5));
}

.hero__embers { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }

.hero__content {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  padding-top: 6rem;
  max-width: min(var(--page-width), 100%);
}
.hero__eyebrow { color: var(--glow); margin-bottom: 1rem; }
.hero__title {
  max-width: 16ch;
  margin: 0;
  text-shadow: 0 0 40px var(--glow-soft);
  animation: hero-title-glow 6s ease-in-out infinite alternate;
}
@keyframes hero-title-glow {
  from { text-shadow: 0 0 24px color-mix(in srgb, var(--glow) 20%, transparent); }
  to { text-shadow: 0 0 52px color-mix(in srgb, var(--glow) 50%, transparent); }
}
.hero__sub { max-width: 46ch; margin-top: 1.25rem; color: var(--color-text-muted); font-size: 1.05rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.25rem;
  transform: translateX(-50%);
  color: var(--color-text-muted);
  animation: hero-bounce 2.4s var(--ease) infinite;
}
@keyframes hero-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__fallback,
  .hero__title,
  .hero__scroll { animation: none; }
}