/* ==========================================================================
   S-05 THE GAP, Financial X-Ray rebuild (2026-09-13)
   The Tooth Place "empathy" section (dark, copy only) on Arbor's navy.
   Quinten: highlighting and bolded words so the idea pops, and the pull
   line is the mic drop. Reveals lifted from ag-motion (stagger, .in-view);
   NEW here: a gold highlight that sweeps in when its paragraph reveals, and
   the mic drop, which arrives last and largest. Tokens only.
   ========================================================================== */
.lp-gap {
  position: relative; z-index: 0;
  /* 2026-09-13 Quinten: this section is now the WHITE one (paper); the team
     section below took the navy. Every colour re-keyed for a light ground. */
  background: var(--paper);
  color: var(--arbor-text);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
  text-align: left;   /* Quinten 2026-09-13: left-aligned; centred under 900 (6C) */
}
.lp-gap div, .lp-gap p { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-gap__inner {
  max-width: 900px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
}
.lp-gap__p {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.55; text-wrap: pretty; max-width: 100%;
}
/* the bolded words: full white, heavier */
.lp-gap b { font-weight: 700; color: var(--lp-navy); }
/* the highlight: a gold marker behind the words that sweeps in on reveal */
.lp-gap mark {
  color: var(--lp-navy); font-weight: 700;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--lp-gold) 42%, transparent),
    color-mix(in srgb, var(--lp-gold) 42%, transparent)) no-repeat 0 50% / 0% 100%;
  /* the marker covers the WHOLE height of the word (Quinten 2026-09-13), with
     a little air above and below the glyphs; it still sweeps in left to right */
  padding-block: 0.06em; padding-inline: 0.12em; margin-inline: -0.12em;
  border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size 0.9s ease-out 0.3s;
}
.in-view mark, .in-view .lp-gap__p mark { background-size: 100% 100%; }

/* the mic drop: the last line, display face, gold on the payload */
/* .lp-gap p zeroes margins (the bare reset guard); this one wins on specificity */
.lp-gap .lp-gap__drop {
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.625rem);
  line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance;
  color: var(--lp-navy); max-width: 900px; margin-inline: auto;
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity 0.9s ease-out 0.42s, transform 0.9s ease-out 0.42s;
}
/* gold is decorative on paper (AG-PALETTE): the payload takes the darker gold, 5:1 on paper */
.lp-gap__drop b { color: var(--lp-gold-dark); font-weight: 600; }
.lp-gap__drop mark {
  color: var(--lp-navy);
  background-image: linear-gradient(0deg,
    color-mix(in srgb, var(--lp-gold) 48%, transparent),
    color-mix(in srgb, var(--lp-gold) 48%, transparent));
  transition-delay: 0.9s;
}
.lp-gap__drop.in-view { opacity: 1; transform: none; }

/* The graph line under the drop (Quinten 2026-09-13): a zig-zag that
   goes down a bit, up a bit more, down more, up more, and ends on an apex
   arrow. It never reaches the text: its highest point is the arrow, and the
   box sits a clear margin below the drop. Draws in after the drop lands,
   then a light-gold pulse runs it left to right on a 2.1s loop. Every time
   the pulse reaches the arrow, the corner mark pulses gold (:has below). */
.lp-gap__graph {
  display: block; overflow: visible;
  width: min(320px, 70%); height: auto;
  margin-top: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  fill: var(--lp-gold);
}
.lp-gap__graph-line, .lp-gap__graph-pulse {
  fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.lp-gap__graph-line {
  stroke: var(--lp-gold-dark);
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s ease-out 1.4s;
}
/* on paper the pulse is the LIGHT gold running over the dark-gold line */
.lp-gap__graph-pulse {
  stroke: var(--lp-gold-light); stroke-width: 3.5;
  stroke-dasharray: 18 200; stroke-dashoffset: 18;
  opacity: 0;
}
.lp-gap__graph-apex {
  fill: var(--lp-gold-dark); opacity: 0;
  transition: opacity 0.3s ease-out 2.1s;   /* the draw ends at 1.4 + 0.9 */
}
.lp-gap__drop.in-view + .lp-gap__graph .lp-gap__graph-line { stroke-dashoffset: 0; }
.lp-gap__drop.in-view + .lp-gap__graph .lp-gap__graph-apex { opacity: 1; }
/* One pulse per 4.2s: the dash travels the line in the first 2.1s (18 to
   -100), then sits off the end for 2.1s (the wait). Starts after the apex. */
.lp-gap__drop.in-view + .lp-gap__graph .lp-gap__graph-pulse {
  opacity: 1;
  animation: lp-gap-pulse 4.2s linear 2.4s infinite;
}
@keyframes lp-gap-pulse {
  0%   { stroke-dashoffset: 18; }
  50%  { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}
/* The corner mark answers the pulse the moment it ends: the tail leaves the
   arrow at 50% of the loop, so the mark rises from 46% and peaks at 54%,
   fill and outline together, then settles by 72%. Same clock, same delay. */
.lp-gap:has(.lp-gap__drop.in-view) .lp-gap__wm {
  animation: lp-gap-wm 4.2s ease-in-out 2.4s infinite;
}
@keyframes lp-gap-wm {
  0%, 46% { fill-opacity: 0.66; stroke-opacity: 0.85;
            filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lp-gold) 45%, transparent)); }
  54%     { fill-opacity: 0.92; stroke-opacity: 1;
            filter: drop-shadow(0 0 22px color-mix(in srgb, var(--lp-gold) 85%, transparent)); }
  72%, 100% { fill-opacity: 0.66; stroke-opacity: 0.85;
            filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lp-gold) 45%, transparent)); }
}

/* the drop and its runway sit on the 900 measure's left edge on desktop */
.lp-gap__wrap { max-width: 900px; margin-inline: auto; }
.lp-gap .lp-gap__drop, .lp-gap .lp-gap__graph { margin-inline: 0; }
@media (max-width: 900px) {
  .lp-gap { text-align: center; }
  .lp-gap__inner { align-items: center; }
  .lp-gap .lp-gap__drop, .lp-gap .lp-gap__graph { margin-inline: auto; }
}

/* The corner mark, as the old page had it (lp.css 5 .lp-watermark, v11.6):
   the tree, bottom right, faint, gold here since the mark file is a mask.
   overflow: clip on the section so it can hang off the edge without pushing
   the document wider (the v11.6 lesson). */
.lp-gap { overflow: clip; }
.lp-gap__wm {
  position: absolute; z-index: -1; pointer-events: none;
  right: -3%; bottom: -6%;
  width: min(520px, 44%); height: auto;
  /* PURE WHITE with the gold outline and the glow (Quinten 2026-09-14): the
     mark was gold-on-gold at 10%; on the light gray ground the white face
     carries it and the gold does the drawing. The outline is heavier (2.5px)
     so it reads as a line, not a hairline, and the glow is a real gold
     drop-shadow rather than the old opacity swell. Both still ride the 4.2s
     clock below, so the mark answers the graph's pulse exactly as before. */
  fill: #FFFFFF; fill-opacity: 0.66;
  stroke: var(--lp-gold); stroke-opacity: 0.85; stroke-width: 2.5px;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lp-gold) 45%, transparent));
}
.lp-gap__wm path { vector-effect: non-scaling-stroke; }
/* The mark fades as the column narrows (Quinten 2026-09-14: "makes it a bit
   hard to read the text when the screen gets smaller, maybe make it faded a
   bit"). Once the copy centres it runs straight over the mark: measured 2 of
   4 text blocks overlapping it at 700 and 1000, 1 at 390. Element opacity
   multiplies the fill, stroke and glow the 4.2s beat animates, so the pulse
   is untouched, only quieter. Desktop, where the copy sits left of it, is
   unchanged. */
@media (max-width: 1200px) { .lp-gap__wm { opacity: 0.5; } }
@media (max-width: 900px)  { .lp-gap__wm { width: 62%; right: -12%; opacity: 0.3; } }

/* THE GRAY SECTION (Quinten 2026-09-14, five turns: "make the background
   grey ... the normal text to white", then "less grey", "less grey", "less
   grey, more white background"). Landed as a LIGHT gray ground, #E4E4E4, a
   step off the paper, and at that brightness the copy keeps the dark set it
   had on paper: body text 10.8:1, bold navy, gold markers with navy words,
   the mic-drop navy with its dark-gold payload (4.1:1 at display size), the
   graph dark gold. Nothing else in the section changes. The mid-gray passes
   (#6E6E6E, #767676, #8C8C8C, white copy) are in the ledger, superseded. */
:root { --lp-gray-section: #D2D2D2; }   /* a step greyer again (Quinten 2026-09-14); dark copy holds at 9.2:1 */
.lp-gap { background: var(--lp-gray-section); }

@media (prefers-reduced-motion: reduce) {
  .lp-gap mark { transition: none; background-size: 100% 100%; }
  .lp-gap__drop { transition: none; opacity: 1; transform: none; }
  .lp-gap__graph-line { transition: none; stroke-dashoffset: 0; }
  .lp-gap__graph-pulse, .lp-gap__wm { animation: none !important; }
  .lp-gap__graph-pulse { opacity: 0; }
  .lp-gap__graph-apex { transition: none; opacity: 1; }
}