/* =========================================================
   BEGIN BAND — meridian plate  (shared by every page's .cta-band)
   A single back-view figure traced from a simple meridian diagram — body
   outline plus a few long, smooth channel lines, no points — injected by
   assets/ce-meridian-band.js from assets/meridians/plate.svg. On the gold
   band the lines are deep earth brown and the travelling pulses cream, so
   they read as light moving over the gold.
   Desktop: the figure stands in the empty right half. Phones: it gets its own
   column down the right edge, about half of it on screen, copy narrowed to
   clear it.
   On reveal the outline draws itself, then the channels draw in one after
   another; afterwards cream pulses run down the channels one body area at a
   time — back, left arm, left leg, right leg, right arm — like a treatment
   moving over the body, top to bottom, on a 14s cycle. The plate trails the
   scroll (parallax) and melts into the gold at every edge.
   ========================================================= */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band .wrap { position: relative; z-index: 2; }
.begin-map {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.begin-map svg {
  /* The band is short: sized so the head sits inside it and the legs melt out
     through the bottom edge. */
  position: absolute; left: var(--map-x, 76%); top: 64%;
  height: var(--map-h, 130%); width: auto; max-width: none; overflow: visible;
  transform: translate(-50%, -50%) translate3d(0, var(--map-shift, 0px), 0) scale(var(--map-scale, 1));
  opacity: var(--map-opacity, 0.9);
  will-change: transform;
  /* The plate is cropped to the figure, so the mask is wide: arms and hands stay
     present, and the fade works on the head and the legs. */
  -webkit-mask-image: radial-gradient(ellipse 92% 50% at 50% 42%, #000 36%, transparent 100%);
          mask-image: radial-gradient(ellipse 92% 50% at 50% 42%, #000 36%, transparent 100%);
}
/* Rest state: undrawn. pathLength="1" on every path makes dash units fractions of the path. */
.begin-map .outline  { stroke: var(--earth, #2B2521); stroke-width: 1.15; opacity: .36; stroke-dasharray: 1; stroke-dashoffset: 1; }
.begin-map .meridian { stroke: var(--earth, #2B2521); stroke-width: 1.05; opacity: .58; stroke-dasharray: 1; stroke-dashoffset: 1; }
.begin-map .meridian.central { stroke-width: 1.6; opacity: .82; }   /* the spinal / central channel leads */
.begin-map .flow     { stroke: #FFF6E0; stroke-width: 2.1; opacity: 0; stroke-dasharray: .06 .94; stroke-dashoffset: 1; }
/* Entrance: outline → channels (staggered by --i). */
.begin-map.in .outline  { animation: meridianDraw 2.4s cubic-bezier(.4, 0, .2, 1) forwards; }
.begin-map.in .meridian { animation: meridianDraw 1.6s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.8s + var(--i) * 70ms); }
/* Treatment sequence: the pulse paths are grouped by body area (--phase 0…4:
   back → left arm → left leg → right leg → right arm). Each area's pulses run
   together, top → bottom, during a 2.8s slot of a 14s cycle, then the next area
   fires; the cycle repeats. The dash travels in the first 20% of the animation
   and sits invisible for the rest, and the per-phase delay staggers the slots. */
.begin-map.in.flow-on .flow { animation: meridianFlow 14s linear infinite; animation-delay: calc(3.2s + var(--phase, 0) * 2.8s); }
@keyframes meridianDraw  { to { stroke-dashoffset: 0; } }
@keyframes meridianFlow  { 0% { stroke-dashoffset: 1; opacity: 0; } 1.5% { opacity: .9; } 18.5% { opacity: .9; } 20% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* Copy carries a gold halo in case the plate ever reaches it. */
.cta-band .eyebrow, .cta-band h2, .cta-band .lede { text-shadow: 0 0 2px var(--gold), 0 0 14px var(--gold), 0 0 32px var(--gold); }

@media (max-width: 820px) {
  /* Phones: the figure gets its own column down the right edge. The copy is
     capped at 72% so headline, lede and buttons end before it. The plate is
     sized from the band's height (a little larger than it, so the crown crops
     slightly and the legs run out the bottom) and its centre — which IS the
     figure's centre — sits at 98% of the band's width, so about half the body
     is on screen. The mask softens the inner edge toward the copy. */
  .cta-band h2, .cta-band .lede, .cta-band .row { max-width: 72%; }
  .begin-map svg {
    height: 114%; width: auto; left: 98%; top: 54%;
    opacity: calc(var(--map-opacity, 0.9) * .8);
    -webkit-mask-image: radial-gradient(ellipse 70% 54% at 50% 48%, #000 42%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 54% at 50% 48%, #000 42%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .begin-map svg { transform: translate(-50%, -50%); }
  .begin-map .outline, .begin-map .meridian { animation: none !important; stroke-dashoffset: 0; }
  .begin-map .flow { display: none; }
}