/* interactive.css — the hover/tap emblem on the lab's About page (a1-interactive). Adds to
   about.css rather than editing it: this page keeps the five reading rows below exactly as they
   ship, and this file only concerns the new big emblem above them.

   Markup shape (see about.html): five radios, then .emblem-stage (the big emblem + five label
   hit-zones stacked over it), then .meaning-panel (five copy blocks in one grid cell) — all three
   siblings under .meaning-group, in that order, so plain sibling combinators (~) reach from any
   radio to both the emblem and the panel, and :has() on .meaning-group/.emblem-stage can look at
   descendants on either side. No JavaScript; the CSP here forbids it. */

.about-interactive{padding-block:clamp(20px,2.5vw,36px) 12px} /* sits right under the horizon; a full section gap left the emblem a screen away */
.meaning-group{display:flex;flex-direction:column;align-items:center;gap:40px}

/* Radios carry the actual selection + keyboard nav (arrow keys move within name="meaning"
   natively); visually hidden but still focusable, so focus-visible + a loud outline on the zone
   is the only visible sign of keyboard focus. */
.meaning-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- The big emblem ---------------------------------------------------------------------- */
.emblem-stage{position:relative;width:min(50vh,80vw);max-width:540px;aspect-ratio:1;margin-inline:auto} /* sized to sit fully on the first screen */
.emblem-big{display:block;width:100%;height:100%}
.emblem-base{fill:var(--line)}
.emblem-ink{fill:var(--ink);opacity:0}
.emblem-draw{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;opacity:0}
/* Cue: a region tints from the base's pale --line toward the warmer mid-tone --scroll (already
   used for the hero ridges) the instant the pointer is over it — before any commitment to ink.
   Hover-only (not tied to :checked), so it reads as "this responds to you", distinct from the
   fuller ink reveal. No transform/scale: a clipped <use> scaled independently of its clip-path
   risks the clip and the content drifting apart, so "lifts" is done tonally instead. */
.emblem-lift{fill:var(--scroll);opacity:0;transition:opacity .2s ease}

/* ---- Hit zones ---------------------------------------------------------------------------
   Plain rectangles positioned by percentage of the emblem's own box, clamped to a 40px floor.
   Stacking order below (source order + z-index) makes the stem win over the bars it crosses,
   and the horn corners win over the bars behind them, per the owner's brief. */
.zone{position:absolute;display:block;margin:0;cursor:pointer;z-index:1}
.z-sky{left:0;top:0;width:100%;height:clamp(40px,40.03%,999px)}
.z-earth{left:0;top:41.47%;width:100%;height:clamp(40px,12.76%,999px)}
.z-roots{left:0;top:55.82%;width:100%;height:clamp(40px,44.18%,999px);bottom:0}
.z-tree{left:50%;top:0;height:100%;width:clamp(40px,6.22%,120px);transform:translateX(-50%);z-index:2}
.z-horns{width:clamp(40px,33.49%,999px);z-index:2}
.z-horns.hz-tl,.z-horns.hz-tr{top:0;height:clamp(40px,40.03%,999px)}
.z-horns.hz-bl,.z-horns.hz-br{top:55.82%;height:clamp(40px,44.18%,999px)}
.z-horns.hz-tl,.z-horns.hz-bl{left:0}
.z-horns.hz-tr,.z-horns.hz-br{right:0}

/* Keyboard focus ring on whichever zone its radio belongs to — same device as the site's own
   .gallery-track focus style (site.css). */
#m-sky:focus-visible ~ .emblem-stage .z-sky,
#m-earth:focus-visible ~ .emblem-stage .z-earth,
#m-roots:focus-visible ~ .emblem-stage .z-roots,
#m-tree:focus-visible ~ .emblem-stage .z-tree,
#m-horns:focus-visible ~ .emblem-stage .z-horns{outline:2px solid var(--deep);outline-offset:-2px}

/* ---- Hovering a region: an instant preview, independent of any checked radio or running hold
   (see the pen-draw section below for what a tap now does — it no longer sticks by itself). While
   any zone is being hovered, the hover takes over from whatever the tour/hold is showing; moving
   off hands back to the tour (or an active hold), instantly, picking up wherever it has got to.

   Wrapped in (hover:hover) — real pointer devices only. A touch tap has no true hover, and on a
   touch screen a tap can leave a stray :hover match stuck on the tapped label until something else
   is tapped (the classic mobile "sticky hover"): without this guard that stuck match would both
   lock the preview on and — via the :not(:has(.zone:hover)) gates below — freeze the tour/hold
   forever, reintroducing the exact "stays there and autoplay stops" bug this file now fixes. The
   base/held/hidden rules below carry the same (hover:hover) split for the same reason. */
@media (hover:hover){
  .emblem-stage:has(.z-sky:hover) .ink-sky,
  .emblem-stage:has(.z-sky:hover) ~ .meaning-panel .copy-sky{opacity:1}
  .emblem-stage:has(.z-earth:hover) .ink-earth,
  .emblem-stage:has(.z-earth:hover) ~ .meaning-panel .copy-earth{opacity:1}
  .emblem-stage:has(.z-roots:hover) .ink-roots,
  .emblem-stage:has(.z-roots:hover) ~ .meaning-panel .copy-roots{opacity:1}
  .emblem-stage:has(.z-tree:hover) .ink-tree,
  .emblem-stage:has(.z-tree:hover) ~ .meaning-panel .copy-tree{opacity:1}
  .emblem-stage:has(.z-horns:hover) .ink-horns,
  .emblem-stage:has(.z-horns:hover) ~ .meaning-panel .copy-horns{opacity:1}

  /* The tonal "lift" cue (see .emblem-lift above): each zone tints its own masked outline on hover. */
  .emblem-stage:has(.z-sky:hover) .lift-sky,
  .emblem-stage:has(.z-earth:hover) .lift-earth,
  .emblem-stage:has(.z-roots:hover) .lift-roots,
  .emblem-stage:has(.z-tree:hover) .lift-tree,
  .emblem-stage:has(.z-horns:hover) .lift-horns{opacity:1}
}

/* ---- The description panel: five copies in one grid cell, so the tallest reserves the height
   and switching meanings never shifts the page. Stacked below the emblem on phones, beside it
   from 760px up. */
.meaning-panel{display:grid;max-width:46ch}
.meaning-copy{grid-area:1/1;opacity:0;transition:opacity .25s ease;pointer-events:none}
.meaning-copy .eyebrow{display:block;margin-bottom:14px;color:var(--ash)}
.meaning-copy .about-row-title-wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 14px;margin-bottom:14px}
.meaning-panel{text-align:center}

@media (min-width:760px){
  .meaning-group{flex-direction:row;align-items:center;justify-content:center;gap:56px;max-width:960px;margin-inline:auto}
  .meaning-panel{text-align:left;max-width:36ch}
  .meaning-copy .about-row-title-wrap{justify-content:flex-start}
}

/* ---- Holding a tap, hiding the rest, and the autoplay tour running underneath ---------------
   Tapping (or clicking) a region checks its radio. That used to make the selection stick forever;
   now it instead holds the tapped region on screen for ~6s and then hands back to the tour, which
   has kept ticking underneath the whole time. Three layers, each its own rule, so the cascade —
   not JS — decides which wins:
     1. BASE — every ink/copy/draw plays its tour-* animation always, gated only by hover (below).
        This is the unconditional, 20s-looping layer; nothing about :checked touches it.
     2. HELD — the checked region's own ink/copy/draw gets a second, one-shot animation (~6s, no
        fill-mode) APPENDED after the tour animation in the same `animation` list. Per spec, when
        two animations in a list target the same property, the one later in the list wins while
        it's active — so the held animation outranks the tour for ~6s, then (having no fill-mode)
        simply stops applying, and the tour's value — which never stopped advancing — shows again.
     3. HIDDEN — every OTHER region gets the same treatment with a flat "stay at 0" one-shot, so
        only the held region is visible while a hold is running.
   The trick that keeps the tour from desyncing (verified by pixel checks, not just computed
   style): the held/hidden rules repeat the EXACT same tour-* name, duration and list position the
   base rule uses, before appending their own animation. Per the Animations spec, when the computed
   `animation-name` list changes, an entry that keeps the same name at the same list index is NOT
   restarted — only the newly-appended entry starts fresh. So the base rule and the held/hidden
   rules must never disagree about the tour's own name or timing, or the tour would jump. Held and
   hidden rules key off an ID selector (#m-sky:checked …), which always outranks the class-based
   base rule on specificity, with no reliance on source order.

   Deliberately NO fill-mode on the held/hidden one-shots, same lesson as the single-shot pulse this
   replaces: a fill-mode would make the animation's start/end value override the cascade for as
   long as its gate selector matches — which here is forever, since nothing un-checks a radio by
   itself — pinning the hold or the hide in place long after the ~6s should have ended, since an
   active CSS animation always wins over a plain cascaded value or an earlier animation in the
   list, no matter specificity. With no fill-mode, each one-shot only governs opacity while it's
   actually mid-run; the moment it finishes — or the gate stops matching (hover, or a different
   radio taking over) — its effect disappears and whatever the tour is doing at that instant shows
   through, or the hover rules above take over instantly.

   Hovering detaches all three layers alike (base, held and hidden rules all carry
   :not(:has(.zone:hover))), so mid-hold a hover still previews instantly, and leaving hover hands
   back to the tour/hold exactly as before — but ONLY on a device with a real hover (a mouse or
   trackpad). A touch tap has no true hover, and on a touch screen a tap can leave a stray :hover
   match stuck on the tapped label until something else is tapped — the classic mobile "sticky
   hover". Left unguarded, that stuck match would permanently fail :not(:has(.zone:hover)) and
   freeze base/held/hidden alike, reintroducing the exact "stays there and autoplay stops" bug this
   file now fixes. So each of the three layers below is written twice: once under (hover:hover),
   with the hover gate exactly as described above, and once under (hover:none), with no hover gate
   at all — the tour/hold simply always run there, since there is nothing for them to hand off to.

   Both the ramped show/draw below and the tour itself are skipped under reduced motion (separate
   media block): the hold still runs for the same ~6s there, just as a hard instant switch, with no
   pen draw at all — see that block. */
@keyframes emblem-hold-hide{0%,100%{opacity:0}}

@media (prefers-reduced-motion:no-preference){
  .emblem-draw{stroke-dasharray:1;stroke-dashoffset:1}

  @keyframes emblem-hold-show{
    0%,5.83%{opacity:0}
    8.33%{opacity:1}
    100%{opacity:1}
  }
  @keyframes emblem-hold-draw{
    0%{stroke-dashoffset:1;opacity:1}
    5.83%{stroke-dashoffset:0;opacity:1}
    8.33%{stroke-dashoffset:0;opacity:0}
    100%{stroke-dashoffset:0;opacity:0}
  }

  /* Auto-tour: with nothing hovered, the emblem explains itself on a loop — sky, earth, roots,
     tree, horns, ~4s each, pen-drawn in and crossfaded to the next, forever, so a visitor who
     never discovers hover or taps still sees every meaning. A single 20s @keyframes per region
     (sky owns 0-20%, earth 20-40%, …), each with a short draw-in/crossfade at its edges and a long
     hold in between. It runs unconditionally — nothing about :checked gates it, see the comment
     above — so it keeps ticking underneath a hold, only ever detached by hovering a zone. */
  @keyframes tour-sky{
    0%,0%{opacity:0}
    1%,19%{opacity:1}
    21%,100%{opacity:0}
  }
  @keyframes tour-draw-sky{
    0%,0%{stroke-dashoffset:1;opacity:0}
    0.05%{stroke-dashoffset:1;opacity:1}
    0.7%{stroke-dashoffset:0;opacity:1}
    1%,100%{stroke-dashoffset:0;opacity:0}
  }
  @keyframes tour-earth{
    0%,19%{opacity:0}
    21%,39%{opacity:1}
    41%,100%{opacity:0}
  }
  @keyframes tour-draw-earth{
    0%,19%{stroke-dashoffset:1;opacity:0}
    19.05%{stroke-dashoffset:1;opacity:1}
    20.4%{stroke-dashoffset:0;opacity:1}
    21%,100%{stroke-dashoffset:0;opacity:0}
  }
  @keyframes tour-roots{
    0%,39%{opacity:0}
    41%,59%{opacity:1}
    61%,100%{opacity:0}
  }
  @keyframes tour-draw-roots{
    0%,39%{stroke-dashoffset:1;opacity:0}
    39.05%{stroke-dashoffset:1;opacity:1}
    40.4%{stroke-dashoffset:0;opacity:1}
    41%,100%{stroke-dashoffset:0;opacity:0}
  }
  @keyframes tour-tree{
    0%,59%{opacity:0}
    61%,79%{opacity:1}
    81%,100%{opacity:0}
  }
  @keyframes tour-draw-tree{
    0%,59%{stroke-dashoffset:1;opacity:0}
    59.05%{stroke-dashoffset:1;opacity:1}
    60.4%{stroke-dashoffset:0;opacity:1}
    61%,100%{stroke-dashoffset:0;opacity:0}
  }
  @keyframes tour-horns{
    0%,79%{opacity:0}
    81%,99%{opacity:1}
    100%,100%{opacity:0}
  }
  @keyframes tour-draw-horns{
    0%,79%{stroke-dashoffset:1;opacity:0}
    79.05%{stroke-dashoffset:1;opacity:1}
    80.4%{stroke-dashoffset:0;opacity:1}
    81%,100%{stroke-dashoffset:0;opacity:0}
  }

  /* Real pointer devices: hover can detach these layers (see the (hover:hover) note above). */
  @media (hover:hover){
    /* 1. BASE — unconditional tour, detached only by hover. */
    .meaning-group:not(:has(.zone:hover)) .ink-sky,
    .meaning-group:not(:has(.zone:hover)) .copy-sky{animation:tour-sky 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .draw-sky{animation:tour-draw-sky 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .ink-earth,
    .meaning-group:not(:has(.zone:hover)) .copy-earth{animation:tour-earth 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .draw-earth{animation:tour-draw-earth 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .ink-roots,
    .meaning-group:not(:has(.zone:hover)) .copy-roots{animation:tour-roots 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .draw-roots{animation:tour-draw-roots 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .ink-tree,
    .meaning-group:not(:has(.zone:hover)) .copy-tree{animation:tour-tree 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .draw-tree{animation:tour-draw-tree 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .ink-horns,
    .meaning-group:not(:has(.zone:hover)) .copy-horns{animation:tour-horns 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .draw-horns{animation:tour-draw-horns 20s linear infinite}

    /* 2. HELD — the tapped region: tour name/timing repeated verbatim, then the ~6s show/draw
       appended so it wins while active and releases cleanly back to the (still-running) tour. */
    #m-sky:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-sky,
    #m-sky:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-sky{
      animation:tour-sky 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-sky:checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-sky{
      animation:tour-draw-sky 20s linear infinite, emblem-hold-draw 6s linear 1}
    #m-earth:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-earth,
    #m-earth:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-earth{
      animation:tour-earth 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-earth:checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-earth{
      animation:tour-draw-earth 20s linear infinite, emblem-hold-draw 6s linear 1}
    #m-roots:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-roots,
    #m-roots:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-roots{
      animation:tour-roots 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-roots:checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-roots{
      animation:tour-draw-roots 20s linear infinite, emblem-hold-draw 6s linear 1}
    #m-tree:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-tree,
    #m-tree:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-tree{
      animation:tour-tree 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-tree:checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-tree{
      animation:tour-draw-tree 20s linear infinite, emblem-hold-draw 6s linear 1}
    #m-horns:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-horns,
    #m-horns:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-horns{
      animation:tour-horns 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-horns:checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-horns{
      animation:tour-draw-horns 20s linear infinite, emblem-hold-draw 6s linear 1}

    /* 3. HIDDEN — every other region while one is held: same tour name/timing, plus a flat ~6s
       "stay at 0" one-shot, so only the held region shows. */
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-sky,
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-sky{
      animation:tour-sky 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-sky{
      animation:tour-draw-sky 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-earth,
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-earth{
      animation:tour-earth 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-earth{
      animation:tour-draw-earth 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-roots,
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-roots{
      animation:tour-roots 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-roots{
      animation:tour-draw-roots 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-tree,
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-tree{
      animation:tour-tree 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-tree{
      animation:tour-draw-tree 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-horns,
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-horns{
      animation:tour-horns 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage:not(:has(.zone:hover)) .draw-horns{
      animation:tour-draw-horns 20s linear infinite, emblem-hold-hide 6s linear 1}
  }

  /* Touch-only devices: no real hover, and a tap can leave a stray :hover match stuck — so
     these never key off :hover at all; the tour/hold run unconditionally here. */
  @media (hover:none){
    /* 1. BASE — unconditional tour (no hover concept on this device, so no hover gate at all). */
    .meaning-group .ink-sky,
    .meaning-group .copy-sky{animation:tour-sky 20s linear infinite}
    .meaning-group .draw-sky{animation:tour-draw-sky 20s linear infinite}
    .meaning-group .ink-earth,
    .meaning-group .copy-earth{animation:tour-earth 20s linear infinite}
    .meaning-group .draw-earth{animation:tour-draw-earth 20s linear infinite}
    .meaning-group .ink-roots,
    .meaning-group .copy-roots{animation:tour-roots 20s linear infinite}
    .meaning-group .draw-roots{animation:tour-draw-roots 20s linear infinite}
    .meaning-group .ink-tree,
    .meaning-group .copy-tree{animation:tour-tree 20s linear infinite}
    .meaning-group .draw-tree{animation:tour-draw-tree 20s linear infinite}
    .meaning-group .ink-horns,
    .meaning-group .copy-horns{animation:tour-horns 20s linear infinite}
    .meaning-group .draw-horns{animation:tour-draw-horns 20s linear infinite}

    /* 2. HELD — the tapped region: tour name/timing repeated verbatim, then the ~6s show/draw
       appended so it wins while active and releases cleanly back to the (still-running) tour. */
    #m-sky:checked ~ .emblem-stage .ink-sky,
    #m-sky:checked ~ .emblem-stage ~ .meaning-panel .copy-sky{
      animation:tour-sky 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-sky:checked ~ .emblem-stage .draw-sky{
      animation:tour-draw-sky 20s linear infinite, emblem-hold-draw 6s linear 1}
    #m-earth:checked ~ .emblem-stage .ink-earth,
    #m-earth:checked ~ .emblem-stage ~ .meaning-panel .copy-earth{
      animation:tour-earth 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-earth:checked ~ .emblem-stage .draw-earth{
      animation:tour-draw-earth 20s linear infinite, emblem-hold-draw 6s linear 1}
    #m-roots:checked ~ .emblem-stage .ink-roots,
    #m-roots:checked ~ .emblem-stage ~ .meaning-panel .copy-roots{
      animation:tour-roots 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-roots:checked ~ .emblem-stage .draw-roots{
      animation:tour-draw-roots 20s linear infinite, emblem-hold-draw 6s linear 1}
    #m-tree:checked ~ .emblem-stage .ink-tree,
    #m-tree:checked ~ .emblem-stage ~ .meaning-panel .copy-tree{
      animation:tour-tree 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-tree:checked ~ .emblem-stage .draw-tree{
      animation:tour-draw-tree 20s linear infinite, emblem-hold-draw 6s linear 1}
    #m-horns:checked ~ .emblem-stage .ink-horns,
    #m-horns:checked ~ .emblem-stage ~ .meaning-panel .copy-horns{
      animation:tour-horns 20s linear infinite, emblem-hold-show 6s linear 1}
    #m-horns:checked ~ .emblem-stage .draw-horns{
      animation:tour-draw-horns 20s linear infinite, emblem-hold-draw 6s linear 1}

    /* 3. HIDDEN — every other region while one is held: same tour name/timing, plus a flat ~6s
       "stay at 0" one-shot, so only the held region shows. */
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage .ink-sky,
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage ~ .meaning-panel .copy-sky{
      animation:tour-sky 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage .draw-sky{
      animation:tour-draw-sky 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage .ink-earth,
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage ~ .meaning-panel .copy-earth{
      animation:tour-earth 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage .draw-earth{
      animation:tour-draw-earth 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage .ink-roots,
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage ~ .meaning-panel .copy-roots{
      animation:tour-roots 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage .draw-roots{
      animation:tour-draw-roots 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage .ink-tree,
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage ~ .meaning-panel .copy-tree{
      animation:tour-tree 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage .draw-tree{
      animation:tour-draw-tree 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage .ink-horns,
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage ~ .meaning-panel .copy-horns{
      animation:tour-horns 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage .draw-horns{
      animation:tour-draw-horns 20s linear infinite, emblem-hold-hide 6s linear 1}
  }
}

/* Reduced motion: no pen, no crossfade ramp — the tour still runs (a visitor who can't see
   hover/tap shouldn't be the one group who never learns the emblem has five meanings), just as a
   hard, instant switch every 4s, same cadence as the animated tour. A tap still holds its region
   for ~6s — flat, no ramp — before releasing back to that instant tour, using the same
   base/held/hidden structure as above, minus the draw layer (there is none under reduced motion). */
@media (prefers-reduced-motion:reduce){
  @keyframes emblem-hold-show-rm{0%,100%{opacity:1}}

  /* Each pair of adjacent stops is kept 0.01% apart (never exactly equal) — a keyframes rule
     with two stops sharing the identical offset (e.g. one at "20%" from this segment and another
     at "20%" from the next) interpolated incorrectly in testing: a point well inside the supposedly
     flat 0%-20% span read a fractional opacity instead of a flat 0. Offsetting by 0.01% (2ms of a
     20s cycle — imperceptible) sidesteps that instead of relying on exact-duplicate offsets. */
  @keyframes tour-rm-sky{
    0%,20%{opacity:1}
    20.01%,100%{opacity:0}
  }
  @keyframes tour-rm-earth{
    0%,19.99%{opacity:0}
    20%,40%{opacity:1}
    40.01%,100%{opacity:0}
  }
  @keyframes tour-rm-roots{
    0%,39.99%{opacity:0}
    40%,60%{opacity:1}
    60.01%,100%{opacity:0}
  }
  @keyframes tour-rm-tree{
    0%,59.99%{opacity:0}
    60%,80%{opacity:1}
    80.01%,100%{opacity:0}
  }
  @keyframes tour-rm-horns{
    0%,79.99%{opacity:0}
    80%,100%{opacity:1}
  }

  /* Real pointer devices: hover can detach these layers (see the (hover:hover) note above). */
  @media (hover:hover){
    /* 1. BASE — unconditional tour, detached only by hover. */
    .meaning-group:not(:has(.zone:hover)) .ink-sky,
    .meaning-group:not(:has(.zone:hover)) .copy-sky{animation:tour-rm-sky 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .ink-earth,
    .meaning-group:not(:has(.zone:hover)) .copy-earth{animation:tour-rm-earth 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .ink-roots,
    .meaning-group:not(:has(.zone:hover)) .copy-roots{animation:tour-rm-roots 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .ink-tree,
    .meaning-group:not(:has(.zone:hover)) .copy-tree{animation:tour-rm-tree 20s linear infinite}
    .meaning-group:not(:has(.zone:hover)) .ink-horns,
    .meaning-group:not(:has(.zone:hover)) .copy-horns{animation:tour-rm-horns 20s linear infinite}

    /* 2. HELD — the tapped region: tour name/timing repeated verbatim, then the ~6s show/draw
       appended so it wins while active and releases cleanly back to the (still-running) tour. */
    #m-sky:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-sky,
    #m-sky:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-sky{
      animation:tour-rm-sky 20s linear infinite, emblem-hold-show-rm 6s linear 1}
    #m-earth:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-earth,
    #m-earth:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-earth{
      animation:tour-rm-earth 20s linear infinite, emblem-hold-show-rm 6s linear 1}
    #m-roots:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-roots,
    #m-roots:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-roots{
      animation:tour-rm-roots 20s linear infinite, emblem-hold-show-rm 6s linear 1}
    #m-tree:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-tree,
    #m-tree:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-tree{
      animation:tour-rm-tree 20s linear infinite, emblem-hold-show-rm 6s linear 1}
    #m-horns:checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-horns,
    #m-horns:checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-horns{
      animation:tour-rm-horns 20s linear infinite, emblem-hold-show-rm 6s linear 1}

    /* 3. HIDDEN — every other region while one is held: same tour name/timing, plus a flat ~6s
       "stay at 0" one-shot, so only the held region shows. */
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-sky,
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-sky{
      animation:tour-rm-sky 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-earth,
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-earth{
      animation:tour-rm-earth 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-roots,
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-roots{
      animation:tour-rm-roots 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-tree,
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-tree{
      animation:tour-rm-tree 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage:not(:has(.zone:hover)) .ink-horns,
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage:not(:has(.zone:hover)) ~ .meaning-panel .copy-horns{
      animation:tour-rm-horns 20s linear infinite, emblem-hold-hide 6s linear 1}
  }

  /* Touch-only devices: no real hover, and a tap can leave a stray :hover match stuck — so
     these never key off :hover at all; the tour/hold run unconditionally here. */
  @media (hover:none){
    /* 1. BASE — unconditional tour (no hover concept on this device, so no hover gate at all). */
    .meaning-group .ink-sky,
    .meaning-group .copy-sky{animation:tour-rm-sky 20s linear infinite}
    .meaning-group .ink-earth,
    .meaning-group .copy-earth{animation:tour-rm-earth 20s linear infinite}
    .meaning-group .ink-roots,
    .meaning-group .copy-roots{animation:tour-rm-roots 20s linear infinite}
    .meaning-group .ink-tree,
    .meaning-group .copy-tree{animation:tour-rm-tree 20s linear infinite}
    .meaning-group .ink-horns,
    .meaning-group .copy-horns{animation:tour-rm-horns 20s linear infinite}

    /* 2. HELD — the tapped region: tour name/timing repeated verbatim, then the ~6s show/draw
       appended so it wins while active and releases cleanly back to the (still-running) tour. */
    #m-sky:checked ~ .emblem-stage .ink-sky,
    #m-sky:checked ~ .emblem-stage ~ .meaning-panel .copy-sky{
      animation:tour-rm-sky 20s linear infinite, emblem-hold-show-rm 6s linear 1}
    #m-earth:checked ~ .emblem-stage .ink-earth,
    #m-earth:checked ~ .emblem-stage ~ .meaning-panel .copy-earth{
      animation:tour-rm-earth 20s linear infinite, emblem-hold-show-rm 6s linear 1}
    #m-roots:checked ~ .emblem-stage .ink-roots,
    #m-roots:checked ~ .emblem-stage ~ .meaning-panel .copy-roots{
      animation:tour-rm-roots 20s linear infinite, emblem-hold-show-rm 6s linear 1}
    #m-tree:checked ~ .emblem-stage .ink-tree,
    #m-tree:checked ~ .emblem-stage ~ .meaning-panel .copy-tree{
      animation:tour-rm-tree 20s linear infinite, emblem-hold-show-rm 6s linear 1}
    #m-horns:checked ~ .emblem-stage .ink-horns,
    #m-horns:checked ~ .emblem-stage ~ .meaning-panel .copy-horns{
      animation:tour-rm-horns 20s linear infinite, emblem-hold-show-rm 6s linear 1}

    /* 3. HIDDEN — every other region while one is held: same tour name/timing, plus a flat ~6s
       "stay at 0" one-shot, so only the held region shows. */
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage .ink-sky,
    :is(#m-earth,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage ~ .meaning-panel .copy-sky{
      animation:tour-rm-sky 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage .ink-earth,
    :is(#m-sky,#m-roots,#m-tree,#m-horns):checked ~ .emblem-stage ~ .meaning-panel .copy-earth{
      animation:tour-rm-earth 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage .ink-roots,
    :is(#m-sky,#m-earth,#m-tree,#m-horns):checked ~ .emblem-stage ~ .meaning-panel .copy-roots{
      animation:tour-rm-roots 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage .ink-tree,
    :is(#m-sky,#m-earth,#m-roots,#m-horns):checked ~ .emblem-stage ~ .meaning-panel .copy-tree{
      animation:tour-rm-tree 20s linear infinite, emblem-hold-hide 6s linear 1}
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage .ink-horns,
    :is(#m-sky,#m-earth,#m-roots,#m-tree):checked ~ .emblem-stage ~ .meaning-panel .copy-horns{
      animation:tour-rm-horns 20s linear infinite, emblem-hold-hide 6s linear 1}
  }
}