/* ───── VAPOR hero ─────
   Cinematic full-bleed video/image background, oversized display headline
   bottom-left, accent ticker strip below the section. Header sits on top
   transparently — its sticky JS handles the solid-on-scroll transition. */

.vp-hero {
  position: relative;
  width: 100%;
  height: var(--hero-height, 94vh);
  min-height: 560px;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
}

.vp-hero__media-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.vp-hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vp-hero__media--placeholder {
  background:
    radial-gradient(circle at 30% 20%, rgba(212,255,61,0.10), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(212,255,61,0.06), transparent 50%),
    var(--color-surface);
}

/* Bottom-up ink scrim — ensures the headline reads over any imagery. */
.vp-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.35) 45%, rgba(10,10,10,0.05) 75%, rgba(10,10,10,0) 100%);
  opacity: calc(0.6 + var(--scrim-strength, 0.35) * 0.5);
}

/* Subtle film-grain noise — inline SVG fractal noise so we don't ship a PNG. */
.vp-hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.vp-hero__inner {
  position: relative;
  z-index: 1;
  align-self: end;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  gap: var(--space-4);
  max-width: 1100px;
}

.vp-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent);
}

.vp-hero__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 11vw, 11rem);
  line-height: 0.92;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.vp-hero__body {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: var(--leading-snug);
  color: var(--color-text);
  opacity: 0.78;
  max-width: 52ch;
  margin: var(--space-2) 0 0;
}

.vp-hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.vp-hero__ctas .btn--ghost { color: var(--color-text); }

/* Scroll cue — small vertical label + line in the bottom-right corner. */
.vp-hero__scroll-cue {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  z-index: 1;
}
.vp-hero__scroll-cue-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.vp-hero__scroll-cue-line {
  width: 1px;
  height: 60px;
  background: var(--color-accent);
  position: relative;
  overflow: hidden;
}
.vp-hero__scroll-cue-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: -30%;
  width: 100%;
  height: 30%;
  background: var(--color-bg);
  animation: vp-scroll-cue 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes vp-scroll-cue {
  0%   { top: -30%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* Ticker strip below the hero — the marquee primitive does the work. */
.vp-hero-ticker {
  border-block: 1px solid var(--color-bg);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 720px) {
  .vp-hero { min-height: 520px; }
  .vp-hero__inner { padding-inline: 0; gap: var(--space-3); }
  .vp-hero__heading { font-size: clamp(3rem, 14vw, 5rem); }
  .vp-hero__scroll-cue { display: none; }
  .vp-hero__ctas { width: 100%; }
  .vp-hero__ctas .btn { width: 100%; justify-content: center; }
}