/* ════════════════════════════════════════════════════════════════════
   Homepage v2 hero: "Whole day voice agent for your Mac".
   Everything the hero says is HTML text. The canvas behind it is
   decoration only (aria-hidden). The glow around the hero extends the app's
   "Edge Glow" indicator (Views/Components/PillVariants.swift,
   GlowStripPillView) to all four edges, in the app's stage colours
   (Helpers/DesignSystem.swift).
   Tokens come from main.css :root (--bg, --text, --green, --font-heading).
   ════════════════════════════════════════════════════════════════════ */

.hv {
  --hv-ink: #f2f2f2;
  --hv-mid: #a8a8a8;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; width: 100%;
  max-width: none; margin: 0;           /* main.css caps every <section> at 1200px; the field must be full-bleed */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 5.5rem 1.25rem 0.75rem;      /* top: clear the fixed nav */
}

/* decoration layers */
.hv-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.hv::before {           /* soft light where the ridges rise */
  content: ''; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(34% 24% at 50% var(--hv-cy, 74%), rgba(var(--hv-st, 52,199,89), 0.09), rgba(0,0,0,0) 70%),
    radial-gradient(70% 45% at 50% var(--hv-cy, 74%), rgba(255,255,255,0.04), rgba(255,255,255,0) 70%);
  transition: background 0.6s ease;
}
.hv::after {            /* fade the field into the page at the bottom edge */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0), var(--bg));
}

/* vertical balance on any screen: the free height is split evenly between the air above the
   text and the ridge stage below it, so the text sits near the middle and the stage fills the
   rest. The ridges scale to the stage height (see home-v2.js), so there is never an empty band. */
.hv-spacer { flex: 1 1 0; width: 1px; }
.hv-inner { flex: none; display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 1.75rem; }

.hv-title {
  font-family: 'Somerun', var(--font-heading), sans-serif; font-weight: 700;
  text-transform: uppercase; color: var(--hv-ink);
  font-size: clamp(2rem, 4.6vw, 4.7rem); line-height: 1.04; letter-spacing: 0.005em;
  text-wrap: balance; max-width: 22ch;
  text-shadow: 0 0 60px rgba(255,255,255,0.08);
}
.hv-title .hv-line { display: block; }

.hv-sub {
  margin-top: 1.5rem; max-width: 34rem; color: var(--hv-mid);
  font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; text-wrap: balance;
}
.hv-sub, .hv-cta, .hv-stage { animation: hv-rise 0.9s cubic-bezier(0.16,1,0.3,1) both; }
.hv-sub { animation-delay: 0.08s; } .hv-cta { animation-delay: 0.18s; } .hv-stage { animation-delay: 0.32s; }
@keyframes hv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* calls to action */
.hv-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: 2rem; }
.hv-cta > a { min-height: 54px; }
.hv-dl {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 1.7rem 0.55rem 1.35rem; border-radius: 9999px; text-decoration: none;
  color: var(--bg); background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,0.06), 0 8px 24px rgba(255,255,255,0.12);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.hv-dl:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 14px 40px rgba(255,255,255,0.22); }
.hv-dl:active { transform: translateY(0) scale(0.98); }
.hv-dl svg { width: 17px; height: 20px; flex-shrink: 0; }
.hv-dl__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.hv-dl__label { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; }
.hv-dl__meta { font-size: 0.7rem; color: rgba(10,10,10,0.58); margin-top: 0.15rem; }
.hv-cta .btn-github { justify-content: center; }
.hv-cta a:focus-visible, .hv-pause:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* the stage: the ridges are drawn around it on the canvas, the pill sits in its middle */
.hv-stage {
  position: relative; width: 100%; flex: 1.4 1 0; min-height: 200px;   /* a bit more of the free height than the air above the text */
  display: flex; align-items: flex-start; justify-content: center;
}

/* Glow around the whole hero, built from the app's "Edge Glow" indicator (a
   bright line in the stage colour with a falloff into the screen) and run along
   all four edges instead of the top one. It swells with the voice (--v, 0..1),
   two white highlights travel around the rim, and it is off while the agent is
   idle. Only opacity and a rotation change per frame. */
.hv-edge {
  --v: 0; --xf: 700ms;
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
/* two layers crossfade when the stage colour changes, so colours flow into each other */
.hv-edge__layer { position: absolute; inset: 0; opacity: 0; transition: opacity var(--xf) cubic-bezier(0.4,0,0.2,1); will-change: opacity; }
.hv-edge__layer.is-on { opacity: 1; }
.hv-edge__glow { position: absolute; inset: 0; box-shadow: inset 0 0 0 1.5px rgba(var(--st),0.9), inset 0 0 18px 2px rgba(var(--st),0.7), inset 0 0 64px 6px rgba(var(--st),0.3); }
.hv-edge__glow--loud { box-shadow: inset 0 0 0 2.5px rgba(var(--st),1), inset 0 0 28px 6px rgba(var(--st),0.85), inset 0 0 120px 16px rgba(var(--st),0.4); opacity: var(--v); will-change: opacity; }

/* highlights running around the rim: a rotating conic gradient seen through a ring mask */
.hv-edge__ring {
  position: absolute; inset: 0; padding: 4px; overflow: hidden;
  opacity: 0; transition: opacity var(--xf) ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.hv-edge.is-on .hv-edge__ring { opacity: 1; }
.hv-edge__ring > i {
  position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;   /* just covers the diagonal */
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0) 0turn, rgba(255,255,255,0.9) 0.07turn, rgba(255,255,255,0) 0.14turn,
    rgba(255,255,255,0) 0.5turn, rgba(255,255,255,0.9) 0.57turn, rgba(255,255,255,0) 0.64turn);
  animation: hv-spin 7s linear infinite; will-change: transform;
}
/* soft halo for the highlights: a frame mask that fades inward, no blur filter (cheap to composite) */
.hv-edge__ring--bloom {
  padding: 0;
  -webkit-mask: linear-gradient(90deg, #000, rgba(0,0,0,0) 38px, rgba(0,0,0,0) calc(100% - 38px), #000),
                linear-gradient(180deg, #000, rgba(0,0,0,0) 38px, rgba(0,0,0,0) calc(100% - 38px), #000);
  -webkit-mask-composite: source-over;
          mask: linear-gradient(90deg, #000, rgba(0,0,0,0) 38px, rgba(0,0,0,0) calc(100% - 38px), #000),
                linear-gradient(180deg, #000, rgba(0,0,0,0) 38px, rgba(0,0,0,0) calc(100% - 38px), #000);
          mask-composite: add;
}
.hv-edge.is-on .hv-edge__ring--bloom { opacity: 0.4; }
@keyframes hv-spin { to { transform: rotate(1turn); } }


/* stage label: a dot, voice bars while recording, the stage name. No capsule. */
.hv-status {
  --st: 52,199,89;
  display: inline-flex; align-items: center; gap: 12px; margin: 0.7rem 0 0;   /* top of the stage; the ridges rise up to it */
  font: 600 13px/1 var(--font-heading); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.82);
}
.hv-status__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: rgb(var(--st)); box-shadow: 0 0 12px rgba(var(--st),0.9), 0 0 26px rgba(var(--st),0.45);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
.hv-status.is-recording .hv-status__dot { animation: hv-dot 1.2s ease-in-out infinite alternate; }
@keyframes hv-dot { to { transform: scale(1.2); opacity: 0.85; } }
.hv-status__bars {
  display: inline-flex; align-items: center; gap: 3px; height: 16px;
  width: 0; opacity: 0; overflow: hidden;
  transition: width 0.45s cubic-bezier(0.34,1.3,0.64,1), opacity 0.3s ease;
}
.hv-status.is-recording .hv-status__bars { width: 39px; opacity: 1; }
.hv-status__bars i {
  display: block; width: 3px; height: 16px; border-radius: 2px; flex-shrink: 0;
  background: rgb(var(--st)); transform: scaleY(0.15);
}
.hv-status__label { transition: opacity 0.26s ease, transform 0.26s ease, filter 0.26s ease; }
.hv-status.is-swapping .hv-status__label { opacity: 0; transform: translateY(3px); filter: blur(3px); }

.hv-pause {
  display: none; position: absolute; right: max(1.25rem, calc(50% - 38rem)); bottom: 0.5rem;
  width: 30px; height: 30px; padding: 0; place-items: center; cursor: pointer;
  border-radius: 9999px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
  transition: color 0.2s, border-color 0.2s;
}
.hv-js .hv-pause { display: grid; }
.hv-pause:hover { color: #fff; border-color: rgba(255,255,255,0.28); }
.hv-pause svg { width: 11px; height: 11px; fill: currentColor; }
.hv-pause .i-play { display: none; }
.hv-pause[aria-pressed="true"] .i-play { display: block; }
.hv-pause[aria-pressed="true"] .i-pause { display: none; }

/* facts, directly under the hero: only verifiable ones */
.hv-facts {
  max-width: none; margin: 0; padding: 2.25rem 1.25rem 2.75rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.hv-proof {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.55rem 1.6rem; margin: 0; padding: 0;
  font-size: 0.82rem; letter-spacing: 0.01em; color: rgba(255,255,255,0.66);
}
.hv-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: 1.3rem; max-width: 640px; }
.hv-apps img { width: 22px; height: 22px; filter: grayscale(1) brightness(1.7); opacity: 0.55; }

/* preview-only spacer so the hero can scroll away (tests the offscreen pause) */
.hv-next { min-height: 70vh; display: grid; place-items: center; color: rgba(255,255,255,0.35); font-size: 0.85rem; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .hv { padding-top: 5.25rem; }
  .hv-title { font-size: clamp(1.75rem, 8.6vw, 2.4rem); }
  .hv-title .hv-line { display: inline; }
  .hv-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .hv-cta > a { justify-content: center; }
  .hv-stage { min-height: 180px; }
  .hv-status { font-size: 12px; }
  .hv-apps img:nth-child(n+10) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-sub, .hv-cta, .hv-stage { animation: none; }
  .hv-status__dot, .hv-status__bars, .hv-status__label, .hv-edge__layer, .hv-edge__ring, .hv-dl { transition: none !important; }
  .hv-status.is-recording .hv-status__dot, .hv-edge__ring > i { animation: none; }
}