/* aimlink.ai Explainer page (support/explainer/index.html). Load after site.css and nav.css. Script: assets/explainer-page.js.

   The Explainer is the films, on the frame of the Contact page (dark hero, light content, dark footer):
   1. Hero (data-rhythm="hero"): the statement on night with the rings of the target as hairlines. The introduction film
      hangs over the hero's hard edge, as the form does on Contact. Beside it: what the film is, and the chapters.
   2. A chapter for each app (GO, CLUB, TARGET), all built the same way: the app, a statement, a few sentences, what a shooter
      gets and what a club gets, the way on, and the app's own film.
   3. Short guides: the seven vertical how-to films as a strip you can swipe (a list that long is a strip, not a grid).
   4. More on the channel, and the way to the FAQ.
   Every film is click to play (assets/explainer-page.js): our own picture and a play button, and nothing is asked of YouTube until
   it is pressed. Without JS the picture is a link to the film. Reduced motion keeps colour and opacity only. Type and space
   come from the tokens. */

@layer sections {
  /* ───────────────────────── Top: hero and the introduction ───────────────────────── */
  .xp-top {
    --xp-cw: calc(min(100vw, var(--container) + 2 * var(--gutter)) - 2 * var(--gutter));    /* the container's inner width */
    --xp-fw: var(--xp-cw);                                                                  /* the film's width */
    --xp-over: calc(var(--xp-fw) * 9 / 16 * 0.42);                                          /* how far it reaches up into the hero */
    position: relative; isolation: isolate;
  }
  @media (min-width: 900px) {
    .xp-top { --xp-fw: calc(var(--xp-cw) * 0.58); --xp-over: calc(var(--xp-fw) * 9 / 16 * 0.62); }
  }
  .xp-hero { position: relative; isolation: isolate; overflow: clip; background: var(--color-night); color: var(--text); padding-bottom: calc(var(--xp-over) + var(--space-5)); }
  @media (min-width: 900px) { .xp-hero { padding-bottom: var(--space-7); } }
  .xp-hero-copy { display: grid; justify-items: start; }
  .xp-hero .hl { display: block; }
  .xp-hero .lede { margin-top: var(--gap-head); color: var(--text); opacity: 0.92; max-width: 28ch; }
  .xp-hero .w { display: inline-block; animation: rise var(--duration-reveal) var(--ease-out) both; animation-delay: calc(120ms + var(--i) * var(--motion-stagger)); }
  .xp-hero .lede { animation: rise var(--duration-reveal) var(--ease-out) 420ms both; }
  .xp-rings {
    position: absolute; z-index: -1; left: -30vw; bottom: -44vw; width: 70vw; aspect-ratio: 1; pointer-events: none;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(5.5% - 1px), rgb(160 224 32 / 0.16) calc(5.5% - 1px) 5.5%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0 56%, transparent 71%);
    mask-image: radial-gradient(circle at 50% 50%, black 0 56%, transparent 71%);
  }
  @media (min-width: 900px) { .xp-rings { left: auto; right: 38vw; bottom: -34vw; width: 46vw; } }

  .xp-intro { background: var(--bg); color: var(--text); padding-top: 0; }
  .xp-intro-grid { display: grid; gap: var(--gap-action); }
  .xp-feature { margin: 0; margin-top: calc(-1 * var(--xp-over)); min-width: 0; animation: xp-ride 700ms var(--ease-out) 160ms both; }
  @keyframes xp-ride { from { opacity: 0; transform: perspective(1400px) translateY(9%) rotateX(9deg) scale(0.97); } }
  .xp-intro-copy { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
  .xp-intro-copy > p:not(.xp-note) { font-size: var(--type-body-size); line-height: 1.6; color: var(--text-muted); max-width: 46ch; text-wrap: pretty; }
  @media (min-width: 900px) {
    .xp-intro-grid { grid-template-columns: minmax(0, 1fr) var(--xp-fw); column-gap: var(--space-7); align-items: start; }
    .xp-feature { grid-column: 2; grid-row: 1; }
    .xp-intro-copy { grid-column: 1; grid-row: 1; padding-top: var(--space-8); }
  }
  /* the three apps and what passes between them: a night panel, so the lime lines are on dark */
  .xp-apps { min-width: 0; margin: var(--space-3) 0 0; padding: var(--space-5) var(--space-5) var(--space-4); border-radius: var(--radius-panel); background: var(--color-night); color: var(--color-snow); display: grid; gap: var(--space-4); max-width: 30rem; }
  .xp-apps-row { display: flex; align-items: flex-start; }
  .xp-node { flex: none; display: grid; justify-items: center; gap: var(--space-2); width: 4.25rem; font: var(--type-title-weight) 1.25rem/1 var(--font-display); letter-spacing: var(--type-title-tracking); text-transform: uppercase; }
  .xp-node img { width: 56px; height: 56px; border-radius: var(--radius-icon); }
  .xp-link { position: relative; flex: 1 1 0; min-width: 0; height: 56px; }
  .xp-link > span { position: absolute; left: 0; right: 0; bottom: -0.15rem; text-align: center; font: 700 0.6875rem/1.2 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-snow-2); }
  .xp-apps:not(.has-beam) .xp-link::before { content: ""; position: absolute; left: 0; right: 0; top: 42%; height: 1.5px; background: rgb(160 224 32 / 0.28); }
  /* narrow phones (320 to 479 px): the three nodes and the two links must fit inside the panel, so the nodes and their labels shrink */
  @media (max-width: 479.98px) {
    .xp-apps { padding: var(--space-4) var(--space-3) var(--space-3); }
    .xp-node { width: 3.25rem; font-size: 1.0625rem; gap: var(--space-1); }
    .xp-node img { width: 44px; height: 44px; }
    .xp-link { height: 44px; }
    .xp-link > span { left: -4px; right: -4px; bottom: -0.45rem; font-size: 0.625rem; letter-spacing: 0.04em; line-height: 1.15; text-wrap: balance; }
  }
  .xp-apps figcaption { font-size: var(--type-small-size); line-height: 1.5; color: var(--color-snow-2); }
  .xp-jump { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
  .xp-jump-label { font: 700 var(--type-label-size)/1.3 var(--font-text); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-subtle); }
  .xp-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .xp-jump .chip { text-decoration: none; }

  /* ───────────────────────── Films: click to play ───────────────────────── */
  .xp-video { --mu-fx-beam-r: var(--radius-media); position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden; background: var(--color-night); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
  .xp-video--tall { aspect-ratio: 9 / 16; }
  .xp-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .xp-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .xp-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(12 20 28 / 0.55)); pointer-events: none; }
  .xp-btn {
    position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
    background: var(--color-lime); color: var(--color-moss); box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.6);
    transition: transform var(--duration-hover) var(--ease-out), background-color var(--duration-hover) var(--ease-hover);
  }
  .xp-btn .icon { width: 48px; height: 48px; }
  .xp-video--tall .xp-btn { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .xp-video--tall .xp-btn .icon { width: 38px; height: 38px; }
  @media (hover: hover) and (pointer: fine) { .xp-play:hover .xp-btn { transform: scale(1.08); background: var(--color-mint); } }
  .xp-play:active .xp-btn { transform: scale(var(--motion-press-scale)); transition-duration: var(--duration-press); }
  .xp-play:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: -4px; box-shadow: inset 0 0 0 6px var(--color-lime); }
  .xp-dur { position: absolute; z-index: 1; left: var(--space-3); bottom: var(--space-3); padding: 2px 9px 1px; border-radius: var(--radius-pill); background: rgb(12 20 28 / 0.78); color: var(--color-snow); font: 700 0.8125rem/1.5 var(--font-text); letter-spacing: 0.02em; }
  .xp-video > .mu-fx-beam { z-index: 2; }
  .xp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  /* after the press: the picture stays, the play mark turns into a spinner, and a line says what is going on. The player loads behind
     the picture; when it is there the picture fades out (200 ms). After 8 seconds without a player the line offers YouTube. */
  .xp-play[aria-disabled="true"] { cursor: progress; }
  .xp-video.is-loading .xp-btn .icon { opacity: 0; }
  .xp-video.is-loading .xp-btn::before {
    content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 3px solid rgb(12 51 20 / 0.28); border-top-color: var(--color-moss);
    animation: xp-spin 760ms linear infinite;
  }
  .xp-video--tall.is-loading .xp-btn::before { inset: 11px; }
  @keyframes xp-spin { to { transform: rotate(360deg); } }
  .xp-status {
    position: absolute; z-index: 3; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); margin: 0; padding: 6px 12px 5px; border-radius: var(--radius-pill);
    background: rgb(12 20 28 / 0.86); color: var(--color-snow); font: 700 0.8125rem/1.4 var(--font-text); text-align: center; text-wrap: balance;
  }
  .xp-status a { color: var(--color-lime); text-decoration: underline; text-decoration-thickness: var(--line-underline); text-underline-offset: 0.2em; white-space: nowrap; }
  .xp-status a:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; border-radius: 2px; }
  .xp-video.is-loading .xp-dur { opacity: 0; }
  .xp-video.is-handover .xp-play { opacity: 0; transition: opacity var(--duration-exit) var(--ease-out); pointer-events: none; }
  .xp-note { font-size: var(--type-small-size); line-height: 1.45; color: var(--text-subtle); }
  .xp-note a { color: var(--text-muted); text-decoration: underline; text-decoration-thickness: var(--line-underline); text-underline-offset: 0.2em; }
  @media (hover: hover) and (pointer: fine) { .xp-note a:hover { color: var(--text); } }
  .xp-note a:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; border-radius: 2px; }

  /* ───────────────────────── The chapters ───────────────────────── */
  .xp-chapter { background: var(--bg); color: var(--text); }
  .xp-chapter--paper { background: var(--bg-alt); }
  .xp-chapter-grid { display: grid; gap: var(--gap-action); }
  @media (min-width: 900px) {
    .xp-chapter-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-7); align-items: start; }
    .xp-chapter-video { position: sticky; top: calc(var(--nav-space) + var(--space-4)); }
  }
  .xp-chapter-copy { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
  .xp-chapter-video { margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
  .xp-chapter-video figcaption { display: grid; gap: var(--space-1); font-size: var(--type-small-size); color: var(--text-muted); }
  .xp-app { display: flex; align-items: center; gap: var(--space-3); font: var(--type-title-weight) var(--type-title-size)/1 var(--font-display); letter-spacing: var(--type-title-tracking); text-transform: uppercase; }
  .xp-app img { width: 44px; height: 44px; border-radius: var(--radius-icon); }
  .xp-blurb { max-width: 52ch; font-size: var(--type-body-size); line-height: 1.65; color: var(--text-muted); text-wrap: pretty; }
  .xp-lists { display: grid; gap: var(--space-5); margin-top: var(--space-2); }
  .xp-list-title { font: 700 var(--type-label-size)/1.3 var(--font-text); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text); margin-bottom: var(--space-2); }
  .xp-lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .xp-lists li { position: relative; padding-left: var(--space-5); font-size: var(--type-body-size); line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
  .xp-lists li::before { content: ""; position: absolute; left: 0.2rem; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-fern); }
  .xp-chapter-actions { margin-top: var(--space-2); }
  .xp-stores { justify-content: flex-start; }
  .xp-beta { font-size: var(--type-small-size); line-height: 1.5; color: var(--text-muted); max-width: 46ch; }
  .xp-beta a { color: var(--text); text-decoration: underline; text-decoration-thickness: var(--line-underline); text-underline-offset: 0.2em; text-decoration-color: var(--text-subtle); }
  @media (hover: hover) and (pointer: fine) { .xp-beta a:hover { text-decoration-color: var(--accent-strong); } }
  .xp-beta a:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; border-radius: 2px; }

  /* ───────────────────────── The guides: a strip ───────────────────────── */
  .xp-guides { background: var(--bg-alt); color: var(--text); }
  .xp-guides-head { display: grid; gap: var(--space-3); margin-bottom: var(--gap-action); }
  .xp-strip-wrap { margin-bottom: var(--gap-action); }
  /* the strip runs to the edges of the screen; its first card lines up with the container */
  .xp-strip {
    --xp-edge: calc((100vw - min(100vw, var(--container) + 2 * var(--gutter))) / 2 + var(--gutter));
    list-style: none; margin: 0; padding: var(--space-2) var(--xp-edge) var(--space-4); display: flex; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--xp-edge); scrollbar-width: thin; scrollbar-color: var(--color-grey-4) transparent;
  }
  .xp-guide { flex: 0 0 clamp(11.5rem, 22vw, 14.5rem); scroll-snap-align: start; display: grid; gap: var(--space-2); align-content: start; }
  .xp-guide-title { font: 700 var(--type-body-size)/1.3 var(--font-text); color: var(--text); text-wrap: balance; }
  .xp-guide-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-small-size); color: var(--text-muted); }
  .xp-tag { display: inline-block; padding: 3px 10px 2px; border-radius: var(--radius-pill); font: 700 0.6875rem/1.4 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); background: var(--color-stone); }
  .xp-tag[data-cat="go"] { background: var(--color-lime); }
  .xp-tag[data-cat="club"] { background: var(--color-orange); }
  .xp-tag[data-cat="target"] { background: var(--color-yellow); }
  .xp-tag[data-cat="all"] { background: var(--color-mist); }
  .xp-guides .xp-note { margin-top: calc(-1 * var(--space-2)); }

  /* ───────────────────────── The close ───────────────────────── */
  .xp-more { background: var(--bg); color: var(--text); }
  .xp-more-grid { display: grid; gap: var(--gap-group); }
  @media (min-width: 900px) { .xp-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
  .xp-more-grid > div { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
  .xp-yt { width: 100%; max-width: 22rem; margin-top: var(--space-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); background: var(--bg); }
  .xp-yt .yt-txt span { color: var(--text-muted); }
  @media (hover: hover) and (pointer: fine) { .xp-yt:hover { box-shadow: inset 0 0 0 1px var(--accent-strong); } }
  .xp-yt:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-strong); outline: var(--line-focus) solid var(--focus); outline-offset: 2px; }
  .xp-still-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
}

/* ───────────────────────── Reduced motion: colour and opacity only ───────────────────────── */
@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .xp-hero .w, .xp-hero .lede, .xp-feature { animation: none; }
    .xp-btn { transition: background-color var(--duration-hover) var(--ease-hover); }
    .xp-video.is-loading .xp-btn::before { animation-duration: 1800ms; }
    .xp-play:hover .xp-btn, .xp-play:active .xp-btn { transform: none; }
  }
}

/* The tilting films (assets/rb.js) are promoted to their own layer by assets/explainer-page.js while the pointer is over them, not
   all the time: ten permanent layers cost memory for nothing. Unlayered, so it wins over the rule in rb.css. */
.xp-video.rb-tilt { will-change: auto; }