/* Launch v2 (2026-10-02): hero box depth, try chips, scroll reveal, built-with rows.
   Loaded after the page's own styles, so these rules win where they overlap. */

/* Hero box: the same animated gradient ring as the dark buttons (.btn-secondary),
   over the layered soft depth. The brand conic gradient paints to the border box
   and a white fill to the padding box, so the ring turns on the 2px border while
   the field stays white and readable (@property --wm-angle + @keyframes
   wm-ring-spin are defined once in index.html). heroAppear stays first in the
   animation list so re-declaring animation here does not cancel the entrance. */
.hero-box {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--n-0), var(--n-0)) padding-box,
    conic-gradient(from var(--wm-angle),
      #47C8D8, #5B9BD5, #8E85C2, #D08EC8, #E8919F, #F2AA84, #47C8D8) border-box;
  box-shadow:
    0 1px 1px rgba(23, 24, 28, .04),
    0 4px 10px -2px rgba(23, 24, 28, .07),
    0 16px 32px -10px rgba(23, 24, 28, .14),
    0 44px 80px -26px rgba(106, 75, 255, .12);
  animation:
    heroAppear 0.15s cubic-bezier(0.72, 0, 0.12, 1) 0.04s forwards,
    wm-ring-spin 3s linear infinite;
}
.hero-box-slot::before {
  content: ""; position: absolute; inset: -34px -60px -46px; z-index: -1; border-radius: 48px; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 58%, rgba(106, 75, 255, .06), rgba(106, 75, 255, 0) 72%);
}
/* Focus: no purple accent ring over the gradient (it read as "a purple border").
   The spinning gradient ring stays the focus indicator; depth just deepens. */
.hero-box:focus-within {
  border-color: transparent;
  box-shadow:
    0 2px 6px -2px rgba(23, 24, 28, .10),
    0 16px 32px -10px rgba(23, 24, 28, .18),
    0 44px 80px -26px rgba(106, 75, 255, .16);
}
.hero-box.is-short { box-shadow: 0 0 0 2px var(--warning, #b45309), 0 16px 32px -10px rgba(23, 24, 28, .14); }

/* Try chips under the box */
.hv2-try { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; max-width: 1180px; margin: 16px auto 0; }
/* Six examples: one centered row when they fit, else one row that scrolls sideways (never a lone chip on a second row). */
@media (max-width: 1139px) { .hv2-try { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 2px 4px 6px; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); } .hv2-try::-webkit-scrollbar { display: none; } .hv2-chip { flex: none; } }
.hv2-try-label { font-size: 13px; color: #666B7A; margin-right: 2px; }
.hv2-chip {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 550; color: #17181C;
  background: #fff; border-radius: 999px; padding: 7px 13px; display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 0 0 1px rgba(23, 24, 28, .10), 0 2px 6px -2px rgba(23, 24, 28, .10);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hv2-chip:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(106, 75, 255, .45), 0 8px 18px -8px rgba(106, 75, 255, .45); }
.hv2-chip:focus-visible { outline: 2px solid #6A4BFF; outline-offset: 2px; }
.hv2-chip.is-picked { background: #17181C; color: #fff; box-shadow: none; }
.hv2-chip img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

/* Scroll reveal: sections rise in once */
.hv2-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.hv2-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hv2-reveal { opacity: 1; transform: none; transition: none; }
  .hv2-chip { transition: none; }
  /* Freeze the hero-box ring to a static gradient border, same as .btn-secondary. */
  .hero-box { animation: none; opacity: 1; transform: none; }
}

/* Built with WPMaven: two rows of real sites, drifting in opposite directions */
.bw-rows { display: flex; flex-direction: column; gap: 20px; margin: 34px 0 8px; overflow: hidden;
  /* almost the full window, out of the 1200px column; the white fade stays at both ends */
  width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.bw-track { display: flex; gap: 20px; width: max-content; padding: 4px 0 10px; animation: bw-left 70s linear infinite; }
.bw-row:nth-child(2) .bw-track { animation-name: bw-right; animation-duration: 76s; }
.bw-rows:hover .bw-track, .bw-rows:focus-within .bw-track { animation-play-state: paused; }
@keyframes bw-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bw-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.bw-card { flex: none; width: 320px; text-decoration: none; color: inherit; display: block; }
.bw-shot { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #f4f4f8;
  box-shadow: 0 0 0 1px rgba(23, 24, 28, .08), 0 12px 28px -16px rgba(23, 24, 28, .35); transition: transform .25s ease, box-shadow .25s ease; }
.bw-shot img { display: block; width: 100%; height: auto; }
.bw-shot .bw-tall { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .25s ease; }
.bw-card:hover .bw-shot, .bw-card:focus-visible .bw-shot { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(106, 75, 255, .35), 0 22px 40px -18px rgba(106, 75, 255, .5); }
.bw-card:hover .bw-tall, .bw-card:focus-visible .bw-tall { opacity: 1; animation: bw-scroll 7s ease-in-out .25s forwards; }
@keyframes bw-scroll { to { transform: translateY(calc(-100% + 200px)); } }
.bw-meta { display: flex; flex-direction: column; gap: 1px; padding: 10px 2px 0; }
.bw-meta strong { font-size: 15px; font-weight: 650; color: #17181C; }
.bw-meta span { font-size: 13.5px; color: #666B7A; }
.bw-card:focus-visible { outline: none; }
.bw-card:focus-visible .bw-shot { outline: 2px solid #6A4BFF; outline-offset: 3px; }
.bw-more { text-align: center; margin: 8px 0 54px; }
.bw-more a { font-weight: 600; color: #6A4BFF; text-decoration: none; }
.bw-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bw-ideas-head { margin-top: 0; }
.bw-ideas-title { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.015em; margin: 0 0 8px; color: #17181C; }
@media (max-width: 640px) { .bw-card { width: 250px; } @keyframes bw-scroll { to { transform: translateY(calc(-100% + 156px)); } } }
@media (prefers-reduced-motion: reduce) {
  .bw-rows { -webkit-mask: none; mask: none; }
  .bw-row { overflow-x: auto; }
  .bw-track { animation: none; }
  .bw-card:hover .bw-tall { animation: none; }
}

/* ── Launch film: the one button, under the hero paragraph; it plays the film in the hero, with sound ── */
.hero-again-row { flex-wrap: wrap; gap: 10px 12px; margin: 0 0 22px; }
.lf-open {
    display: inline-flex; align-items: center; gap: 12px; margin: 0; min-height: 48px;
    padding: 6px 20px 6px 6px; font: inherit; color: var(--n-800, #2a2c33); text-align: left;
    background: rgba(255, 255, 255, .9); border: 1px solid var(--n-300, #d4d6dd); border-radius: 300px;
    cursor: pointer; box-shadow: 0 1px 2px rgba(23, 24, 28, .06), 0 6px 16px -6px rgba(23, 24, 28, .14);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lf-open:hover { border-color: var(--n-500, #8b8f9b); background: #fff; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(23, 24, 28, .06), 0 12px 24px -10px rgba(23, 24, 28, .22); }
.lf-open:focus-visible { outline: 2px solid var(--accent, #6A4BFF); outline-offset: 3px; }
.lf-thumb { position: relative; width: 72px; height: 40px; border-radius: 999px; overflow: hidden; flex: none; background: #e9e9ef; }
.lf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 24px; height: 24px; border-radius: 50%; background: rgba(23, 24, 28, .86);
    display: inline-flex; align-items: center; justify-content: center;
}
.lf-play svg { width: 9px; height: 9px; margin-left: 1px; fill: #fff; }
.lf-text { display: flex; flex-direction: column; line-height: 1.2; }
.lf-text b { font-size: 15px; font-weight: 650; }
.lf-text small { font-size: 12.5px; color: var(--n-600, #666B7A); font-weight: 500; }