/* Chord Lens guide pages (P328b): the page rail (D429), scroll reveals and annotated product shots, run by
   /assets/guide.js. The rail's look and the heading rise are the home page's own (motion.css); this file only
   adds what a guide page does differently. Every hidden start state sits under html.lp-motion, which guide.js
   adds only when motion is allowed, so the page reads in full without it. */

@import url("motion.css?v=5");

/* No Lenis here: anchors (the rail, the "On this page" chips) glide natively unless motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Page rail (D429) ----------------------------------------------- */

/* At rest: the line, its ticks and the lit dot. No clock: a guide is not a song. */
.lp-map--guide .lp-map__time { display: none; }

/* The playhead follows the scroll under reduced motion too; it only jumps, it never animates. */
html .lp-map--guide .lp-map__fill,
html .lp-map--guide .lp-map__head { display: block; }

/* The ticks the reader has passed, and the one in view, light up with the line. */
.lp-map--guide .lp-map__item:has(~ .lp-map__item [aria-current])::after,
.lp-map--guide .lp-map__item:has([aria-current])::after { background: var(--lp-hot); }

.lp-map--guide .lp-map__name {
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms, color 200ms;
}

/* The number (or FAQ) is the landing's red label colour at rest and when current; the title keeps its ink. */
.lp-map--guide .lp-map__no { color: var(--lp-hot); }

.lp-map--guide .lp-map__name[aria-current] {
  color: var(--lp-ink);
  font-weight: 700;
}

/* Pointing at it or tabbing into it opens the titles on a glass panel over the page: fixed, so nothing reflows. */
.lp-map--guide::before {
  content: '';
  position: absolute;
  inset: -22px -16px -22px auto;
  z-index: -1;
  width: var(--lp-map-panel, 260px);
  border: 1px solid #ffffff14;
  border-radius: 14px;
  background: #0c0d12cc;
  box-shadow: 0 20px 50px #0009;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}

@supports (backdrop-filter: blur(1px)) {
  .lp-map--guide::before {
    background: #0c0d1299;
    backdrop-filter: blur(18px);
  }
}

.lp-map--guide:is(:hover, :focus-within)::before {
  opacity: 1;
  /* While open, the panel holds the hover, so the pointer can cross the gaps between titles. */
  pointer-events: auto;
}

.lp-map--guide:is(:hover, :focus-within) .lp-map__name { opacity: 1; }

/* ---- Scroll reveals ------------------------------------------------- */

/* Headings rise with motion.css' .lp-reveal; the blocks under them fade up once, as they enter. */
.lp-motion main .is-waiting {
  transition: opacity 700ms var(--lp-ease-out), translate 700ms var(--lp-ease-out);
}

.lp-motion main .is-waiting:not(.is-in) {
  opacity: 0;
  translate: 0 32px;
}

/* ---- Annotated product shots ---------------------------------------- */

.lp-shot { margin: 48px 0 0; }

.lp-shot__img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-shot__frame { position: relative; }

.lp-shot__notes {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

/* The landing's hand note (.lp-hand). */
.lp-shot__note {
  font-family: var(--lp-hand);
  font-size: 22px;
  line-height: 1.2;
  color: var(--lp-gold);
}

.lp-shot__dot,
.lp-shot__arrows { display: none; }

/* Narrow screens (and the default once guide.js has placed them): numbered notes under the image, a
   matching numbered dot on each spot. */
.lp-shot.is-placed .lp-shot__notes { counter-reset: lp-shot-note; }

.lp-shot.is-placed .lp-shot__note {
  counter-increment: lp-shot-note;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.lp-shot.is-placed .lp-shot__note::before,
.lp-shot.is-placed .lp-shot__dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lp-gold);
  color: #05060a;
  font: 700 12px/1 var(--lp-mono);
}

.lp-shot.is-placed .lp-shot__note::before {
  content: counter(lp-shot-note);
  translate: 0 -2px;
}

.lp-shot.is-placed .lp-shot__dot {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 11px;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  /* --dx and --dy (guide.js) move a dot off a neighbour it would cover. */
  translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px));
  box-shadow: 0 0 0 3px #05060acc, 0 0 16px #ffd16680;
}

/* Wide screens: each note sits in the margin on its side, outside the image, with a hand arrow to its spot.
   The figure makes room only on the sides that have notes. */
@supports selector(:has(a)) {
  @media (min-width: 1024px) {
    .lp-shot.is-placed {
      --pl: 0px;
      --pr: 0px;
      --pt: 0px;
      --pb: 0px;
      --side: clamp(170px, 15vw, 230px);
      --edge: 76px;
      --gap: 28px;
      position: relative;
      padding: var(--pt) var(--pr) var(--pb) var(--pl);
    }

    .lp-shot.is-placed:has(.lp-shot__note[data-side="left"]) { --pl: var(--side); }
    .lp-shot.is-placed:has(.lp-shot__note[data-side="right"]) { --pr: var(--side); }
    .lp-shot.is-placed:has(.lp-shot__note[data-side="top"]) { --pt: var(--edge); }
    .lp-shot.is-placed:has(.lp-shot__note[data-side="bottom"]) { --pb: var(--edge); }

    .lp-shot.is-placed .lp-shot__notes { margin: 0; }
    .lp-shot.is-placed .lp-shot__dot,
    .lp-shot.is-placed .lp-shot__note::before { display: none; }

    .lp-shot.is-placed .lp-shot__note {
      position: absolute;
      display: block;
      rotate: -3deg;
    }

    /* Left and right notes: in their margin, centred on the spot's height. */
    .lp-shot.is-placed .lp-shot__note:is([data-side="left"], [data-side="right"]) {
      top: calc(var(--pt) + (100% - var(--pt) - var(--pb)) * var(--y) / 100);
      width: calc(var(--side) - var(--gap));
      translate: 0 -50%;
    }

    .lp-shot.is-placed .lp-shot__note[data-side="left"] { left: 0; text-align: right; }
    .lp-shot.is-placed .lp-shot__note[data-side="right"] { right: 0; text-align: left; }

    /* Top and bottom notes: in their band, centred on the spot's width. */
    .lp-shot.is-placed .lp-shot__note:is([data-side="top"], [data-side="bottom"]) {
      /* --nl (guide.js) is the centre once the row's notes are kept clear of each other. */
      left: var(--nl, calc(var(--pl) + (100% - var(--pl) - var(--pr)) * var(--x) / 100));
      width: max-content;
      max-width: 280px;
      translate: -50% 0;
      text-align: center;
    }

    .lp-shot.is-placed .lp-shot__note[data-side="top"] { bottom: calc(100% - var(--pt) + 14px); }
    .lp-shot.is-placed .lp-shot__note[data-side="bottom"] { top: calc(100% - var(--pb) + 14px); }

    .lp-shot.is-placed .lp-shot__arrows {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    /* The hero arrow's stroke (hero.css .lp-hero__arrow), with a shadow to hold it over the screenshot. */
    .lp-shot__arrows path {
      fill: none;
      stroke: var(--lp-gold);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1 2;
      stroke-dashoffset: 0;
      filter: drop-shadow(0 1px 2px #000c);
      transition: stroke-dashoffset 700ms var(--lp-ease-inout) 300ms;
    }

    .lp-motion .lp-shot.is-waiting:not(.is-in) .lp-shot__arrows path { stroke-dashoffset: 1; }
  }
}