/* ============================================================
   StockFloc hero-enhance.css
   Loaded AFTER site.css. Two jobs:
   1) Style the animated terminal-wall canvas (#heroBg) behind the hero
   2) Rebalance the hero so the tall phone no longer floats in black
   ============================================================ */

/* keep the canvas's stacking self-contained to the hero */
.hero { isolation: isolate; overflow: clip; }

/* the terminal wall: absolute, behind content. Feathered on ALL FOUR edges so
   it dissolves into black with no hard rectangle; a soft right-bias radial keeps
   it densest behind the phone and lightest under the copy. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .9;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 15%, #000 80%, transparent 100%),
    radial-gradient(115% 115% at 80% 42%, #000 0%, #000 36%, transparent 82%);
  -webkit-mask-composite: source-in, source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 15%, #000 80%, transparent 100%),
    radial-gradient(115% 115% at 80% 42%, #000 0%, #000 36%, transparent 82%);
          mask-composite: intersect;
}

/* lift all hero content above the canvas */
.heroA, .heroB__grid, .heroC { position: relative; z-index: 1; }

/* soft warm floor-glow bleeding up from the bottom of the hero to marry the
   terminal wall into the section instead of ending on hard black */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 130% at 78% 118%, color-mix(in oklab, var(--g-calm) 15%, transparent), transparent 70%),
    radial-gradient(60% 120% at 12% 120%, color-mix(in oklab, var(--ice-1) 9%, transparent), transparent 72%);
}

/* ---------- HERO B: spacing & balance ---------- */
/* Cap the phone so the row isn't dominated by a ~1100px-tall image, and let the
   two columns center against a shorter, calmer composition. */
.heroB {
  padding-top: clamp(24px, 3.5vw, 46px);
  padding-bottom: clamp(44px, 6vw, 88px);
}
.heroB__grid {
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
}
.heroB__copy { max-width: 560px; }

/* phone: capped, grounded with its own radial glow + subtle float */
.heroB__panel { position: relative; z-index: 1; }
.hero-shot {
  max-width: 500px;
  position: relative;
  z-index: 1;
  animation: heroFloat 7s ease-in-out infinite;
}
.heroB__panel::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 118%; height: 78%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in oklab, var(--g-calm) 22%, transparent), transparent 72%),
    radial-gradient(closest-side, color-mix(in oklab, var(--ice-1) 12%, transparent), transparent 78%);
  filter: blur(8px);
}
/* elliptical shadow-pool under the device */
.heroB__panel::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2%;
  width: 62%; height: 44px;
  transform: translateX(-50%);
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 70%);
  filter: blur(10px);
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot { animation: none; }
}

/* the hero-brand lockup was sitting on a lot of air; tighten it to the eyebrow */
.hero-brand { margin-bottom: 18px; }

/* ---------- download cue ----------
   A small "Free download" label with a nudging arrow above the store badges so
   it's unmistakable that the badges ARE the download buttons. */
.dl-group { display: flex; flex-direction: column; gap: 11px; }
.dl-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.dl-hint__arr {
  color: var(--g-glow); font-weight: 700; font-size: 14px;
  animation: dlNudge 1.8s ease-in-out infinite;
}
@keyframes dlNudge {
  0%, 100% { transform: translateY(0);   opacity: .65; }
  50%      { transform: translateY(3px); opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) { .dl-hint__arr { animation: none; } }

/* NAV alignment (mark + wordmark lockup) lives in site.css so it applies on
   every page, not just the homepage. See the ".brand" block there. */

/* ---------- hero disclaimer ----------
   Relocated to sit directly under the phone, centered to the device width. */
.heroB__panel .hero-trust {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 500px;
  margin: 20px auto 0;
}

/* On tablet/phone the split collapses to one column (site.css handles the
   breakpoint); make sure the canvas mask still reads centered there. */
@media (max-width: 900px) {
  .hero-bg {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      radial-gradient(150% 92% at 50% 22%, #000 0%, #000 32%, transparent 84%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      radial-gradient(150% 92% at 50% 22%, #000 0%, #000 32%, transparent 84%);
            mask-composite: intersect;
  }
  .hero-shot { animation: none; }
}