/* Hero: amber light slats and the headline. */

.hero {
  padding-top: clamp(120px, 16vw, 168px);
  padding-bottom: clamp(64px, 9vw, 112px);
  overflow: hidden;
  isolation: isolate;
}

/* ── Light ───────────────────────────────────────────── */

.hero-light {
  position: absolute;
  inset: 0 0 auto;
  max-width: none;
  height: min(1100px, 130vw);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 75% 62% at 50% 22%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 62% at 50% 22%, #000 30%, transparent 78%);
}
.hero-light::before {
  /* The warm haze the slats sit in. */
  content: "";
  position: absolute;
  inset: -10% 0 0;
  background:
    radial-gradient(ellipse 45% 38% at 50% 18%, rgba(247, 125, 16, 0.32), transparent 70%),
    radial-gradient(ellipse 30% 22% at 58% 8%, rgba(255, 212, 102, 0.22), transparent 70%);
}

/* Each slat is a glossy strip: dark on one side, a hot edge of light on the other,
   like light falling through the cards of the Stash mark. */
.beam {
  position: absolute;
  top: -45%;
  height: 150%;
  width: var(--w, 120px);
  left: var(--x, 50%);
  transform: rotate(38deg);
  transform-origin: top center;
  opacity: var(--o, 1);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(80, 26, 0, 0.35) 18%,
    rgba(247, 125, 16, 0.55) 52%,
    rgba(255, 196, 80, 0.95) 78%,
    rgba(255, 244, 214, 1) 82%,
    rgba(247, 171, 23, 0.5) 86%,
    transparent 100%);
  filter: blur(var(--blur, 0.6px));
  box-shadow: 0 0 120px 20px rgba(247, 125, 16, 0.18);
  overflow: hidden;
}
.beam::after {
  /* A slow glint that travels down each slat. */
  content: "";
  position: absolute;
  inset: -30% 0 auto;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(255, 240, 210, 0.55), transparent);
  mix-blend-mode: screen;
  animation: glint var(--t, 7s) var(--d, 0s) linear infinite;
}
.beam-1 { --x: 18%; --w: 70px; --o: 0.45; --blur: 2px; --t: 9s; --d: -2s; }
.beam-2 { --x: 32%; --w: 130px; --o: 0.85; --t: 7s; --d: -5s; }
.beam-3 { --x: 49%; --w: 170px; --o: 1; --t: 8s; }
.beam-4 { --x: 68%; --w: 110px; --o: 0.8; --t: 6.5s; --d: -3s; }
.beam-5 { --x: 84%; --w: 60px; --o: 0.4; --blur: 2px; --t: 10s; --d: -6s; }

@keyframes glint {
  from { transform: translateY(0); }
  to { transform: translateY(560%); }
}

/* ── Copy ────────────────────────────────────────────── */

.hero-content { text-align: center; }

.hero-icon {
  width: clamp(96px, 12vw, 132px);
  height: auto;
  margin: 0 auto 36px;
  filter: drop-shadow(0 24px 48px rgba(247, 125, 16, 0.45)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  50% { translate: 0 -8px; }
}

.hero h1 {
  font-size: clamp(40px, 7.6vw, 92px);
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}
.hero h1 .dim {
  display: block;
  text-wrap: balance;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  max-width: 600px;
  margin: 28px auto 0;
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--text-2);
  text-wrap: pretty;
}

.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }

.meta { margin-top: 20px; font-size: 13px; color: var(--text-3); }

/* Staggered entrance for the hero. */
.hero-content .reveal:nth-child(2) { --delay: 0.08s; }
.hero-content .reveal:nth-child(3) { --delay: 0.16s; }
.hero-content .reveal:nth-child(4) { --delay: 0.24s; }
.hero-content .reveal:nth-child(5) { --delay: 0.3s; }
.demo.reveal { --delay: 0.38s; }