/* ==========================================================
   hero.css
   ========================================================== */
:root {
  --ebmnt1-hero-min-height: clamp(26rem, 62vh, 36rem);
  --ebmnt1-hero-inner-gap: 1.3em;

  --ebmnt1-hero-glow-purple-color: var(--ebmnt1-color-glow-purple);
  --ebmnt1-hero-glow-orange-color: var(--ebmnt1-color-glow-orange);
  --ebmnt1-hero-glow-blue-color: var(--ebmnt1-color-glow-blue);

  --ebmnt1-hero-title-color: var(--ebmnt1-color-white);
  --ebmnt1-hero-title-font-size: clamp(2rem, 1.3rem + 3.2vw, 4.2rem);
  --ebmnt1-hero-title-border-color: var(--ebmnt1-color-primary);
  --ebmnt1-hero-title-inset-color: var(--ebmnt1-color-glow-purple);
  --ebmnt1-hero-title-bg: var(--ebmnt1-color-primary-tint-08);
  --ebmnt1-hero-corner-bg: var(--ebmnt1-color-page-bg);
  --ebmnt1-hero-corner-border-color: var(--ebmnt1-color-primary-soft);
  --ebmnt1-hero-corner-size: 0.7rem;

  --ebmnt1-hero-text-color: var(--ebmnt1-color-text-soft);
  --ebmnt1-hero-text-font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem);
  --ebmnt1-hero-text-max-width: 38rem;

  --ebmnt1-hero-arc-border-color: var(--ebmnt1-color-gradient-from);
  --ebmnt1-hero-arc-glow-color: var(--ebmnt1-color-glow-purple);
  --ebmnt1-hero-arc-fill-color: var(--ebmnt1-color-primary-tint-18);

  --ebmnt1-hero-scroll-color: var(--ebmnt1-color-text-label);
  --ebmnt1-hero-scroll-font-size: clamp(0.7rem, 0.65rem + 0.15vw, 0.8rem);
}

.ebmnt1-hero {
  min-height: var(--ebmnt1-hero-min-height);
  justify-content: center;
  gap: 1.5em;
  isolation: isolate;
}

.ebmnt1-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--ebmnt1-hero-glow-purple-color), transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 55%, var(--ebmnt1-hero-glow-orange-color), transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 100%, var(--ebmnt1-hero-glow-blue-color), transparent 70%);
  animation: ebmnt1-hero-glow 8s ease-in-out infinite alternate;
}

.ebmnt1-hero__arc {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(100% - 5.5rem);
  width: 150%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  border-top: 2px solid var(--ebmnt1-hero-arc-border-color);
  background: radial-gradient(circle at 50% 0%, var(--ebmnt1-hero-arc-fill-color), transparent 40%);
  box-shadow: 0 -10px 60px 6px var(--ebmnt1-hero-arc-glow-color), 0 -2px 18px 0 var(--ebmnt1-hero-arc-border-color);
  pointer-events: none;
}

.ebmnt1-hero__inner {
  gap: var(--ebmnt1-hero-inner-gap);
}

.ebmnt1-hero__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.8em;
  color: var(--ebmnt1-hero-title-color);
  font-size: var(--ebmnt1-hero-title-font-size);
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid var(--ebmnt1-hero-title-border-color);
  background-color: var(--ebmnt1-hero-title-bg);
  box-shadow: 0 0 40px -8px var(--ebmnt1-hero-title-inset-color) inset;
  animation: ebmnt1-hero-title-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.ebmnt1-hero__corner {
  position: absolute;
  width: var(--ebmnt1-hero-corner-size);
  height: var(--ebmnt1-hero-corner-size);
  background-color: var(--ebmnt1-hero-corner-bg);
  border: 1px solid var(--ebmnt1-hero-corner-border-color);
}

.ebmnt1-hero__corner--tl { top: calc(var(--ebmnt1-hero-corner-size) / -2); inset-inline-start: calc(var(--ebmnt1-hero-corner-size) / -2); }
.ebmnt1-hero__corner--tr { top: calc(var(--ebmnt1-hero-corner-size) / -2); inset-inline-end: calc(var(--ebmnt1-hero-corner-size) / -2); }
.ebmnt1-hero__corner--bl { bottom: calc(var(--ebmnt1-hero-corner-size) / -2); inset-inline-start: calc(var(--ebmnt1-hero-corner-size) / -2); }
.ebmnt1-hero__corner--br { bottom: calc(var(--ebmnt1-hero-corner-size) / -2); inset-inline-end: calc(var(--ebmnt1-hero-corner-size) / -2); }

.ebmnt1-hero__text {
  max-width: var(--ebmnt1-hero-text-max-width);
  color: var(--ebmnt1-hero-text-color);
  font-size: var(--ebmnt1-hero-text-font-size);
}

.ebmnt1-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.9em;
  width: 100%;
  max-width: 22rem;
}

.ebmnt1-hero__pill {
  animation: ebmnt1-hero-fade-up 0.8s ease 0.1s both;
}

.ebmnt1-hero__text {
  animation: ebmnt1-hero-fade-up 0.8s ease 0.6s both;
}

.ebmnt1-hero__actions {
  animation: ebmnt1-hero-fade-up 0.8s ease 0.8s both;
}

.ebmnt1-hero__scroll {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  color: var(--ebmnt1-hero-scroll-color);
  font-size: var(--ebmnt1-hero-scroll-font-size);
  letter-spacing: 0.1em;
  animation: ebmnt1-hero-bob 2s ease-in-out infinite;
}

@media (min-width: 425px) {
  .ebmnt1-hero__actions {
    flex-direction: row;
    max-width: none;
    width: auto;
  }
}

@media (min-width: 768px) {
  .ebmnt1-hero__scroll {
    display: flex;
  }
}

@keyframes ebmnt1-hero-glow {
  from { opacity: 0.75; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.06); }
}

@keyframes ebmnt1-hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ebmnt1-hero-title-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes ebmnt1-hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .ebmnt1-hero__bg,
  .ebmnt1-hero__title,
  .ebmnt1-hero__pill,
  .ebmnt1-hero__text,
  .ebmnt1-hero__actions,
  .ebmnt1-hero__scroll {
    animation: none;
  }
}