/* Homepage hero video: click-to-play poster + accessible modal.
   Behavior: /assets/hero-video.js. Ported from the Scale.gg video-card pattern.

   The poster is the first child of .hero-support, so the reading order is
   badge, h1, video, Alex intro, supporting copy, stats + CTAs. Desktop shows it
   at the top of the right column; phones stack it directly under the headline.
   No :has(), display: contents or order; the hero keeps real boxes only.

   The modal plays the short product video (YouTube, no-cookie embed). The full
   17-minute campaign build stays in the frame further down the hero. Nothing
   loads from the video host until the poster is clicked, and closing the modal
   removes the iframe. */

body.family-redesign[data-page="home"] .hero-video {
  position: relative;
  isolation: isolate;
  margin: 0 0 22px;
}

body.family-redesign[data-page="home"] .hero-video::before {
  position: absolute;
  z-index: -1;
  inset: 22px -10px -10px 22px;
  content: "";
  border-radius: 24px;
  background: rgba(197, 176, 244, 0.55);
  transform: rotate(-1.4deg);
}

.hero-video .hero-video-poster {
  --lift: 0px;
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: var(--hv-ratio, 3 / 2);
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 20px;
  background: #0b1026;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(31, 29, 61, 0.06), 0 30px 64px -30px rgba(31, 29, 61, 0.5);
  transform: translateY(var(--lift));
  transition: transform 520ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 520ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-video .hero-video-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video .hero-video-poster:focus-visible {
  outline: 3px solid #6f4bd8;
  outline-offset: 4px;
}

.hero-video .hero-video-play {
  position: absolute;
  /* Sits on the dashboard in the thumbnail, clear of its headline text. */
  left: var(--hv-play-x, 50%);
  top: var(--hv-play-y, 62%);
  display: grid;
  place-items: center;
  width: var(--hv-play-size, clamp(60px, 15%, 88px));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 30px -8px rgba(12, 11, 28, 0.6), 0 0 0 7px rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%);
  transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 320ms ease;
}

.hero-video .hero-video-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 9%;
  border-style: solid;
  border-width: 0.62em 0 0.62em 1.02em;
  border-color: transparent transparent transparent #ff6f61;
  font-size: clamp(15px, 1.7vw, 22px);
}

.hero-video .hero-video-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(12, 11, 28, 0.82);
  color: #fff;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

.hero-video .hero-video-poster::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(520px circle at 60% 40%, rgba(255, 255, 255, 0.16), transparent 60%);
  transition: opacity 400ms ease;
}

.hero-video .hero-video-glint {
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  transform: translateX(-60%) skewX(-18deg);
}

@media (hover: hover) and (pointer: fine) {
  .hero-video .hero-video-poster:hover {
    --lift: -6px;
    box-shadow: 0 2px 4px rgba(31, 29, 61, 0.06), 0 40px 78px -30px rgba(31, 29, 61, 0.55);
  }
  .hero-video .hero-video-poster:hover::after { opacity: 1; }
  .hero-video .hero-video-poster:hover .hero-video-glint {
    opacity: 1;
    transform: translateX(60%) skewX(-18deg);
    transition: transform 1100ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease;
  }
  .hero-video .hero-video-poster:hover .hero-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 14px 36px -8px rgba(12, 11, 28, 0.6), 0 0 0 9px rgba(255, 255, 255, 0.3);
  }
}

.hero-video .hero-video-poster:active .hero-video-play {
  transform: translate(-50%, -50%) scale(0.96);
}

/* Desktop: a slightly narrower poster keeps the hero stats and CTAs inside the
   first screen at 1440x900. */
@media (min-width: 981px) {
  body.family-redesign[data-page="home"] .hero-video { max-width: 440px; margin-bottom: 18px; }
}

/* Desktop/tablet headline fit. The poster column made the h1 wrap to six huge
   lines and pushed the CTAs under the fold. Cap the h1 so it sets in about four
   lines, and let the stats + CTAs sit directly under it in the left column
   while the poster, Alex intro and supporting copy fill the right column.
   The 1fr last row absorbs the right column's extra height so the CTA row
   never gets pushed down by it. DOM (reading) order is unchanged; phones keep
   the stacked layout from family.css. */
@media (min-width: 981px) {
  body.family-redesign[data-page="home"] .hero-copy {
    grid-template-rows: auto auto auto 1fr;
  }
  body.family-redesign[data-page="home"] .hero-pitch { grid-column: 1; grid-row: 2; }
  body.family-redesign[data-page="home"] .hero-support { grid-column: 2; grid-row: 2 / -1; }
  body.family-redesign[data-page="home"] .hero-conversion {
    display: block;
    grid-column: 1;
    grid-row: 3;
    padding-top: 8px;
  }
  body.family-redesign[data-page="home"] .hero-conversion .hero-cta { margin-top: 18px; }
  body.family-redesign[data-page="home"] .hero-pitch h1 {
    max-width: 17ch;
    font-size: clamp(44px, 4.3vw, 60px);
    line-height: 0.96;
  }
}

@media (max-width: 980px) {
  body.family-redesign[data-page="home"] .hero-support { padding-top: 18px; }
  body.family-redesign[data-page="home"] .hero-video { max-width: 720px; }
}

@media (max-width: 620px) {
  body.family-redesign[data-page="home"] .hero-video { margin-bottom: 18px; }
  body.family-redesign[data-page="home"] .hero-video::before { inset: 14px -6px -8px 8px; border-radius: 18px; transform: none; }
  .hero-video .hero-video-poster { border-radius: 14px; }
  .hero-video .hero-video-badge { left: 8px; bottom: 8px; font-size: 11px; }
}

/* ------------------------------------------------------------------- modal */
html.hv-modal-open { overflow: hidden; }
.hv-modal[hidden] { display: none; }
.hv-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 48px);
}
.hv-modal-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hv-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 28, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hv-modal-panel {
  position: relative;
  width: min(1200px, 100%, calc((100dvh - 120px) * 16 / 9));
  min-width: 0;
  color: #fff;
  animation: hv-modal-in 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hv-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.hv-modal .hv-modal-title {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.hv-modal .hv-modal-close {
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.hv-modal .hv-modal-close:hover { background: rgba(255, 255, 255, 0.18); }
.hv-modal .hv-modal-close:active { transform: scale(0.96); }
.hv-modal .hv-modal-close:focus-visible { outline: 3px solid #c5b0f4; outline-offset: 3px; }
.hv-modal-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}
.hv-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hv-modal-frame iframe:focus-visible { outline: 3px solid #c5b0f4; outline-offset: -3px; }
@keyframes hv-modal-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-video .hero-video-poster,
  .hero-video .hero-video-play { transition: box-shadow 200ms ease; }
  .hero-video .hero-video-poster:hover,
  .hero-video .hero-video-poster:active { --lift: 0px; }
  .hero-video .hero-video-poster:hover .hero-video-play,
  .hero-video .hero-video-poster:active .hero-video-play { transform: translate(-50%, -50%); }
  .hero-video .hero-video-glint,
  .hero-video .hero-video-poster::after { display: none; }
  .hv-modal-panel { animation: none; }
}

/* A 16:9 poster that carries its own play mark (bottom left): the card's play
   button sits over that mark, and the length badge moves to the right. */
.hero-video--wide { --hv-ratio: 16 / 9; }
.hero-video--wide .hero-video-play { --hv-play-size: clamp(44px, 10%, 64px); }
.hero-video--wide .hero-video-badge { left: auto; right: 12px; }