/* ============================================================
   HOME (/) — the platform entry page.

   Ported from the marketing landing's home hero (InsuranceCard.Landing's
   wwwroot/styles.css §hero-dark), so the first screen a visitor sees is the same
   design language whichever door they came through. The type scale, the colours, the
   overlay and the pill buttons are the landing's own values, not re-derived.

   One value deliberately differs: the landing's hero is min-height clamp(520px,48.7vw,935px)
   because a page continues below it. Nothing continues below this one, so it fills the
   viewport instead.

   This page deliberately does NOT use aveum.css's .public-wrap — that wrapper paints
   the light --bg and adds 48px of padding, and the hero is full-bleed black.
   ============================================================ */

.home {
  /* The landing sets these on :root; scoped here so the rest of the SPA keeps
     Archivo and the light palette. */
  --home-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --home-gutter: clamp(20px, 4.6vw, 165px);
  --home-pill: 47px;

  position: relative;
  /* svh, not vh: on mobile Safari 100vh counts the URL bar that is about to collapse, so a
     100vh hero is taller than the screen and the buttons start below the fold. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000 url("/assets/video/8-prism.jpg") center / cover no-repeat;
  color: #fff;
  text-align: center;
  font-family: var(--home-font);
}
/* While the clip plays (js/hero.js adds .is-motion) the poster background goes: the clip is a
   one-shot reveal that starts from its own empty frame and ends on that same render. */
.home.is-motion { background-image: none; }

/* The clip sits under everything, and is never a tap target — no controls, and nothing for
   iOS to draw a play glyph on. Its poster covers the frame until the clip decodes. */
.home__video {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Darkens the middle of the frame so the type keeps its contrast wherever the prism
   happens to be bright. */
.home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(60% 55% at 50% 45%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%);
}

.home__inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--home-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.home__logo { margin-bottom: 8px; }

.home__badge {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 6px;
}

/* The landing's .display, at its .hero-dark size. */
.home__title {
  margin: 0;
  font-size: clamp(40px, 3.6vw, 70px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.025em;
  max-width: 18ch;
}

/* The landing's .lead, at its .hero-dark override. */
.home__lead {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 20px);
  line-height: 1.3;
  color: #e8e8e8;
  max-width: 60ch;
}

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

/* The landing's .btn + .btn--white / .btn--outline-white. */
.home__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 38px;
  border-radius: var(--home-pill);
  font-family: inherit;
  font-size: clamp(14px, .95vw, 18px);
  letter-spacing: -0.02em;
  line-height: 1;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease;
}
.home__btn:hover { transform: translateY(-1px); }
.home__btn:active { transform: translateY(0); }
.home__btn--white { background: #fff; color: #010101; border-color: #fff; }
.home__btn--outline { background: transparent; color: #fff; border-color: #fff; }

/* One line naming what each door leads to — the descriptions the old entry cards carried. */
.home__hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

@media (max-width: 600px) {
  .home__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .home__btn { width: 100%; padding: 0 24px; }
}

/* Reduced motion and Data Saver are handled in js/hero.js instead of here: it withholds the
   source entirely, so those visitors never download the clip. display:none would not have —
   it does not cancel a preload. The <video> then renders its poster, which is the same image
   .home paints as its background, so the hero still looks finished. */

/* The hero paints its own box, but html/body keep aveum.css's light --bg, which flashes as a
   pale band when a trackpad or a phone rubber-bands past the edge of a full-screen black page. */
html:has(.home), body:has(.home) { background: #000; }