/* =========================================================
   AC-v2 Section: Before the Myth (#before-the-myth)
   Spec:  AC-v2-site-architecture-190426.md §5.6
          AC-beforeTheMyth-spec-190426.md (full component contract)
   Theme: dark, sits over the sticky ET chamber backdrop.
   Role:  Second tale inside the Eternal Tales block. The only
          Eternal Tales tale with a three-era image selector;
          AOoS and VotF are single-image two-column.
   Built: 20.04.26. Structural build; polish deferred to the
          whole-page refinement pass per
          feedback_core_build_then_refine.md.
   CSS prefix: btm- to match section--btm in HTML.

   Behaviour model
   ---------------
   - 767+:  chip row above the media card. Peek-stack front card
            with two narrow slivers on the right. Click/tap or
            keyboard arrows switch era. Auto-advance (JS).
   - 576-:  chip row is hidden, dots appear beneath the card,
            swipe gestures drive era change. Only a single 6 px
            sliver peeks on the right.
   - Cross-fade: outgoing era fades/scales out, incoming arrives
                 from the right peek position. Caption and
                 Paragraph B cross-fade over 200 ms starting
                 100 ms in. Paragraph A never animates.
                 JS writes [data-era="N"] onto .btm-selector to
                 drive the transitions; the CSS just describes
                 states.

   Accessibility
   -------------
   - Chips are <button> with aria-controls + aria-selected.
   - Card carries aria-live="polite" so screen readers hear the
     new caption + Para B when era changes.
   - All motion gated behind prefers-reduced-motion: reduce;
     reduced-motion path does an instant swap (no fade/slide).
   ========================================================= */

/* ---------- Section wrapper ----------
   Sits inside .et-chamber so background is transparent (inherits
   the global .et-chamber > .section transparency rule). Padding
   matches AOoS spacing for consistent rhythm between tale cards. */
.section--btm {
  /* 09.05.26 (revised): padding-top 15px so the inter-card gaps
     matched; padding-bottom falls through to .section's base.
     06.07.26: when BtM moved up to slot 2 the 80px "hero
     compensation" from .section--aoos briefly moved here with it -
     and the user immediately flagged the intro -> BtM gap as
     massive against the others. The compensation is now RETIRED
     entirely (it was tuned for the old order and the old white
     intro card): every tale section runs the same 15px top, so
     every inter-card gap resolves to the same
     section-padding-bottom + 15px at every viewport. The paired
     scroll-margin jump correction went with it. */
  padding-top: 15px;
}

.section--btm .section__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}

/* ---------- Card shell ----------
   Glass panel matched to AOoS (section-aoos.css): subtle authority
   tint + soft blur over the chamber backdrop so the card reads as a
   floating layer rather than an opaque slab. Rim a whisper of copper
   for palette consistency. Updated 21.04.26 to mirror AOoS glass.
   Prior: solid var(--soft-surface) panel per spec §5.6. */
.btm-card {
  background: rgba(15, 20, 25, 0.38);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(255, 107, 74, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s-7);
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: var(--s-8);
  align-items: start;
}

/* ---------- Media column (left at 1440) ----------
   Holds the chips row above, the peek-stack panel, and the caption
   row below. */
.btm-media {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

/* ---------- Chips row ----------
   Three era chips. Date-only label (e.g. "32,050 BCE"). Active chip
   is Playfair weight 700 in copper; inactive is weight 500 in quiet
   text. Hover picks up accent-soft (#E85838) per palette. */
.btm-chips {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.btm-chip {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 107, 74, 0.25);
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--body-small);
  line-height: 1.2;
  color: var(--quiet-text);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-standard),
              border-color var(--t-fast) var(--ease-standard),
              background-color var(--t-fast) var(--ease-standard);
}

.btm-chip:hover,
.btm-chip:focus-visible {
  color: var(--accent-soft);
  border-color: var(--accent-soft);
}

.btm-chip[aria-selected="true"] {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
  background: rgba(255, 107, 74, 0.08);
}

.btm-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Peek-stack panel ----------
   A fixed-aspect stage. Three figures stack absolutely inside; the
   active figure sits flush, the next two peek from the right at
   12 px and 8 px wide slivers (1440). Mixed-aspect masters
   cover-crop to this stage aspect so the card itself holds its
   shape across era changes. Aspect ~3:2 matches the Era 2 native
   aspect; Eras 1 and 3 crop slightly to fit. */
.btm-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #1a1617;
  box-shadow: var(--shadow-lift);
}

.btm-stage__figure {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  transform: translateX(0);
  transition: opacity var(--t-standard) var(--ease-standard),
              transform var(--t-standard) var(--ease-standard);
  pointer-events: none;
  will-change: opacity, transform;
}

.btm-stage__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Active era: flush, visible, interactive. Sits at the BOTTOM of the
   peek-stack z-order: the next-sliver and after-next-sliver layers
   cover its rightmost 20 px, producing the "front card plus two
   slivers" silhouette the spec calls for. Without explicit z-indexes
   DOM order would put the after-next sliver on top of the next
   sliver (era-3 last in DOM > era-2), inverting the visual stack. */
.btm-selector[data-era="1"] .btm-stage__figure[data-era="1"],
.btm-selector[data-era="2"] .btm-stage__figure[data-era="2"],
.btm-selector[data-era="3"] .btm-stage__figure[data-era="3"] {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 1;
}

/* Next era (after active, looping): first sliver, 12 px at 1440.
   z-index: 3 keeps it above the after-next sliver where they overlap
   in the 12 px zone, so only 12 px of the NEXT image peeks through
   on the rightmost strip. */
.btm-selector[data-era="1"] .btm-stage__figure[data-era="2"],
.btm-selector[data-era="2"] .btm-stage__figure[data-era="3"],
.btm-selector[data-era="3"] .btm-stage__figure[data-era="1"] {
  opacity: 1;
  transform: translateX(calc(100% - 12px));
  z-index: 3;
}

/* Era after next: sits 20 px in from the right edge, so the 8 px strip
   from 1420-1428 is visible to the left of the next sliver (1428-1440).
   z-index: 2 keeps it above the active card but below the next sliver. */
.btm-selector[data-era="1"] .btm-stage__figure[data-era="3"],
.btm-selector[data-era="2"] .btm-stage__figure[data-era="1"],
.btm-selector[data-era="3"] .btm-stage__figure[data-era="2"] {
  opacity: 1;
  transform: translateX(calc(100% - 20px));
  filter: brightness(0.75);
  z-index: 2;
}

/* ---------- Caption block ----------
   Date | title, then italic location underneath. Cross-fades with
   the image on era change. */
/* 18.05.26 (revised x2): caption restructured to a 3-line stack:
   TITLE / DATE / LOCATION. Old .btm-caption__primary + sep wrappers
   are no longer used; title / date / location are direct sibling
   spans rendered as block-flow lines. */
.btm-caption {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--primary-text);
  /* 23.05.26: back to left-aligned per user (title / date / location). */
  text-align: left;
  transition: opacity var(--t-fast) var(--ease-standard);
}

.btm-caption__title {
  display: block;
  font-weight: 700;
  font-style: italic;
  /* 19.05.26: +15% on var(--body-lead). */
  font-size: calc(var(--body-lead) * 1.15);
  line-height: 1.3;
  color: var(--primary-text);
  letter-spacing: 0.01em;
}

.btm-caption__date {
  display: block;
  margin-top: var(--s-1);
  font-weight: 500;
  /* 19.05.26: +15% on previous clamp(14px, 0.3vw + 13px, 16px). */
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.3;
  color: var(--primary-text);
  letter-spacing: 0.02em;
}

.btm-caption__location {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--body-small);
  font-style: italic;
  font-weight: 500;
  color: var(--quiet-text);
}

/* 09.05.26 fix: the opacity-0 + .btm-selector[data-era] toggle pair
   that lived here is removed. The new v30 markup uses
   .et-card--btm[data-era="N"] as the era root and toggles captions
   via `visibility: hidden / visible` in section-et-card.css. The old
   rule kept setting `opacity: 0` on every caption unconditionally.
   The visibility-visible rule still fired on the active caption but
   the opacity-0 was a parallel kill-switch, so all three captions
   stayed invisible at every viewport. The pre-v30 selector
   `.btm-selector[data-era="N"]` no longer exists in the DOM, so the
   opacity-1 reveal rule was a dead override.
   .btm-captions retains its position: relative + min-height pair so
   the grid stack has a sensible reserved minimum, alongside the new
   display: grid that lives in section-et-card.css. */
.btm-captions { position: relative; min-height: 3.5em; }

/* ---------- Dots (mobile only) ----------
   Hidden at 767+; shown at 576 and below. Lives in the DOM at all
   widths so JS doesn't need to mount/unmount. */
.btm-dots {
  display: none;
  justify-content: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.btm-dot {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(190, 183, 170, 0.35);
  border: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-standard),
              transform var(--t-fast) var(--ease-standard);
}

.btm-dot[aria-selected="true"] {
  background: var(--accent);
  transform: scale(1.2);
}

.btm-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Copy column (right at 1440) ----------
   Title, subtitle, Paragraph A (static), Paragraph B (cross-fade). */
.btm-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-1);
}

.btm-copy__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  color: var(--accent);
  letter-spacing: -0.005em;
}

.btm-copy__subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--h4);
  line-height: 1.5;
  color: var(--soft-text);
  max-width: 42ch;
}

/* Paragraph A: tale-level, static. */
.btm-copy__body-a {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--body);
  line-height: 1.75;
  color: var(--soft-text);
  max-width: 52ch;
}

/* Paragraph B: era-specific, cross-fades with [data-era]. Same
   absolute-positioning trick as the caption: one slot, one visible. */
.btm-copy__body-b {
  position: relative;
  min-height: 9em;
  max-width: 52ch;
}

.btm-copy__body-b p {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--body);
  line-height: 1.75;
  color: var(--soft-text);
  transition: opacity var(--t-fast) var(--ease-standard);
}

.btm-selector[data-era="1"] .btm-copy__body-b p[data-era="1"],
.btm-selector[data-era="2"] .btm-copy__body-b p[data-era="2"],
.btm-selector[data-era="3"] .btm-copy__body-b p[data-era="3"] {
  opacity: 1;
}

/* ---------- Attribution line (outside the card) ----------
   Matches AOoS pattern. Very quiet Inter italic below the card. */
/* =========================================================
   Responsive step-downs
   Golden master at 1440; scale at 1200, 991, 767, 576, 400.
   Text-leads stacking at 767 and below per project convention
   (feedback_mobile_stack_text_leads.md). At 576 the chips row
   collapses to dots + swipe.
   ========================================================= */

@media (max-width: 1200px) {
  .btm-card {
    gap: var(--s-7);
    padding: var(--s-6);
  }
  .btm-copy__title { font-size: 40px; }
}

@media (max-width: 991px) {
  .btm-card {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: var(--s-6);
  }
  .btm-copy__title { font-size: 36px; }
  /* Peek slivers narrow a touch for smaller stages.
     Next: 10 px visible; after-next: 7 px visible to its left.
     After-next sits at (next-offset + after-next-width) = 10 + 7 = 17 px
     from the right so the two bands don't overlap under the new z-order. */
  .btm-selector[data-era="1"] .btm-stage__figure[data-era="2"],
  .btm-selector[data-era="2"] .btm-stage__figure[data-era="3"],
  .btm-selector[data-era="3"] .btm-stage__figure[data-era="1"] {
    transform: translateX(calc(100% - 10px));
  }
  .btm-selector[data-era="1"] .btm-stage__figure[data-era="3"],
  .btm-selector[data-era="2"] .btm-stage__figure[data-era="1"],
  .btm-selector[data-era="3"] .btm-stage__figure[data-era="2"] {
    transform: translateX(calc(100% - 17px));
  }
}

/* Stack: text leads, image follows. Grid flip via `order` so DOM
   stays in the intended reading order for the card (image block
   first in DOM for the visual hero at 1440, but flipped here so
   text reads first on narrower viewports).
   Flip point moved from 767 to 760 on 23.04.26 as part of the
   stagger fix (AOoS 780, VotF 770, BtM 760, Our Stories 740) so
   scroll anchoring can keep up with height changes when the viewport
   crosses the stack boundary. See project_stagger_breakpoint_fix_230426. */
@media (max-width: 760px) {
  /* .section--btm padding inherits from base (15/15); no override. */
  .btm-card {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding: var(--s-5);
  }
  .btm-copy { order: 1; }
  .btm-media { order: 2; }
  .btm-copy__title { font-size: 30px; }
  .btm-copy__subtitle { font-size: 16px; }
  .btm-copy__body-a,
  .btm-copy__body-b p { font-size: 15px; line-height: 1.7; }
  .btm-copy__body-b { min-height: 11em; }
  /* Tighter stage aspect at narrower widths so the card doesn't
     steal too much vertical space. */
  .btm-stage { aspect-ratio: 4 / 3; }
}

/* At 576 and below: swipe + dots mode. Chips row hidden, dots shown
   under the stage. Peek sliver drops to 6 px (single sliver visible). */
@media (max-width: 576px) {
  /* .section--btm padding inherits from base (15/15); no override. */
  .btm-card {
    padding: var(--s-4);
    gap: var(--s-5);
  }
  .btm-chips { display: none; }
  .btm-dots { display: flex; }

  /* Single 6 px sliver for "next"; the "after next" is hidden so the
     stack reads as a simple carousel with one peek. */
  .btm-selector[data-era="1"] .btm-stage__figure[data-era="2"],
  .btm-selector[data-era="2"] .btm-stage__figure[data-era="3"],
  .btm-selector[data-era="3"] .btm-stage__figure[data-era="1"] {
    transform: translateX(calc(100% - 6px));
  }
  .btm-selector[data-era="1"] .btm-stage__figure[data-era="3"],
  .btm-selector[data-era="2"] .btm-stage__figure[data-era="1"],
  .btm-selector[data-era="3"] .btm-stage__figure[data-era="2"] {
    opacity: 0;
  }

  .btm-copy__title { font-size: 26px; }
  .btm-copy__subtitle { font-size: 15px; }
  .btm-copy__body-a,
  .btm-copy__body-b p { font-size: 14px; line-height: 1.7; }
  .btm-copy__body-b { min-height: 13em; }
}

@media (max-width: 400px) {
  .btm-card { padding: var(--s-3); }
  .btm-copy__title { font-size: 24px; }
  .btm-caption__primary { font-size: 16px; }
}

/* =========================================================
   Reduced motion
   Instant swap on era change; no fades or slides. Auto-advance is
   disabled in JS when this media query matches.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .btm-stage__figure,
  .btm-caption,
  .btm-copy__body-b p,
  .btm-chip {
    transition: none;
  }
  /* Hard cut: next/next-next slivers hidden entirely so there's no
     "peek" for a user who has asked us not to animate. */
  .btm-selector[data-era="1"] .btm-stage__figure[data-era="2"],
  .btm-selector[data-era="1"] .btm-stage__figure[data-era="3"],
  .btm-selector[data-era="2"] .btm-stage__figure[data-era="1"],
  .btm-selector[data-era="2"] .btm-stage__figure[data-era="3"],
  .btm-selector[data-era="3"] .btm-stage__figure[data-era="1"],
  .btm-selector[data-era="3"] .btm-stage__figure[data-era="2"] {
    opacity: 0;
    transform: none;
  }
}

/* =========================================================
   Cover-led card (06.07.26)
   The card gained the Before the Myth cover artwork as its
   media header (see index.html + section-featured.css
   --card-media / --card-cover) when the standalone featured
   banner merged into this card. Two consequences here:
   - padding-top drops to 0 so the cover sits flush with the
     card's top edge, same as the intro card's video header;
   - the era stage steps back to a supporting-gallery role:
     inset to ~2/3 of the card column and centred, with a
     radius so it reads as a framed gallery inside the story
     rather than the card's hero image. Every stage behaviour
     (cross-fade, dots, captions, per-era prose, the era 2
     play overlay) is unchanged - the stage is just smaller.
   ========================================================= */

/* (06.07.26: the .et-card--btm padding-top: 0 that lived here moved
   to section-et-card.css - that file loads AFTER this one, so its
   base .et-card 5px top padding won the cascade tie and left a 5px
   glass strip above the cover, which the user read as a faint
   border at the top of the card.) */

/* Duo layout (06.07.26 pm, replaces the centred 440px inset from
   earlier the same day): the era stage sits LEFT of the era text
   (caption + per-era story prose) in a two-column grid inside
   .et-card__bottom, compacting the card per user. Selectors carry
   the .et-card--btm .btm-duo prefix deliberately: section-et-card.css
   loads AFTER this file and its .et-card--btm .btm-captions /
   .btm-era-bar / .et-card__body rules would beat equal-specificity
   overrides on source order. */
.et-card--btm .btm-duo {
  display: grid;
  /* 06.07.26 (late v11): image column widened to ~53% and balanced
     against the text, per user ("the image can be a bit wider").
     With the stretch rule below, the wider image column also runs
     taller (narrower text wraps longer), so the stage lands close
     to square. */
  grid-template-columns: minmax(0, 8fr) minmax(0, 7fr);
  gap: var(--s-5);
  /* 06.07.26 (late v3): align-items: start removed (back to the
     stretch default). The stage now fills the full row height - see
     the media rule below - so the left column no longer carries a
     block of empty card below a fixed-aspect image while the text
     column runs longer ("a lot of wasted space", per user). */
  /* 06.07.26 (late v11): the era browser is now a self-contained
     panel lifted above the (black) BtM card, per user - its own
     faintly-raised surface, hairline edge, inner padding, and a
     lift shadow so it reads as raised and separate from the story
     prose around it. The outer margin aligns the panel edge with
     the card's prose column (matching .et-card__body's inset); the
     inner padding then insets the image + text from the panel edge.
     Row-stretch default kept (no align-items: start) so the media's
     height: 100% still fills the text column height and the image
     stays balanced against the text. */
  margin: clamp(2px, 0.4vw, 6px) clamp(24px, 4.2vw, 46px) 0;
  padding: clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* 06.07.26 (late v3): in the two-column layout the stage abandons
   its aspect-ratio and stretches to the text column's height; the
   era images object-fit: cover into whatever frame results, so the
   image edge and the text edge always land together and the row
   reads as one composed unit. Scoped to 768+ because in the stacked
   phone layout the stage is the only thing in its row - with
   aspect-ratio: auto and absolutely-positioned era figures inside,
   its height would collapse to zero there. */
@media (min-width: 768px) {
  .et-card--btm .btm-duo .et-card__media {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
  }
}

.et-card--btm .btm-duo .et-card__media {
  width: 100%;
  margin: 0;
  border-radius: var(--radius-md);
}

/* The era bar centred itself for the old full-width layout; in the
   right-hand column everything reads left-aligned. Its horizontal
   padding also goes - the duo supplies the insets. */
.et-card--btm .btm-duo .btm-era-bar {
  align-items: flex-start;
  /* 06.07.26 (late v13): bottom padding bumped from s-3 (12px) to a
     full line-break gap so the caption (title/date/location) reads
     as a distinct block above the era prose, per user. */
  padding: 0 0 clamp(16px, 2vw, 24px);
}

.et-card--btm .btm-duo .btm-captions {
  text-align: left;
}

.et-card--btm .btm-duo .et-card__body {
  padding: 0;
}

/* 06.07.26 (late v11): the era-format slot is empty + unused (its
   markers were retired). Its margin-top was silently padding the
   bottom of the text column, and via the media stretch, the whole
   panel - hide it so the panel sizes tightly to real content. */
.et-card--btm .btm-duo .btm-era-format-slot {
  display: none;
}

/* 06.07.26 (late v11): the book's format icons + "Releasing" line
   now read as a footer BELOW the lifted era panel, not a ragged
   continuation of its left column. Extra top margin clears the
   panel's lift shadow so the footer sits as its own quiet row. */
.et-card--btm .et-card__release {
  margin-top: clamp(22px, 2.6vw, 32px);
}

@media (max-width: 767px) {
  /* Phones: stack, stage on top, text beneath - the pre-duo reading
     order. */
  .et-card--btm .btm-duo {
    grid-template-columns: 1fr;
  }

  /* 06.07.26 late: when stacked, the stage otherwise stretched to
     the full card column (~700px on a small tablet / large phone
     just under the breakpoint) - far too dominant for a supporting
     gallery, per user. Capped and centred instead. */
  .et-card--btm .btm-duo .et-card__media {
    max-width: min(400px, 100%);
    margin: 0 auto;
  }
}

/* Era 2 "Watch the animation" text action (06.07.26 pm): replaces
   the play-disc overlay that sat on the era 2 image (user flagged
   the doubled play-disc pattern against the intro card's video
   header). Same coral uppercase action voice as the media-header
   action lines (.featured-panel__action, section-featured.css). */
.btm-watch {
  margin: var(--s-3) 0 0;
}

.btm-watch__btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--body-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.btm-watch__btn::after {
  content: "\2192"; /* -> */
  display: inline-block;
  margin-left: var(--s-2);
  transition: transform var(--t-standard) var(--ease-standard);
}

.btm-watch__btn:hover::after,
.btm-watch__btn:focus-visible::after {
  transform: translateX(4px);
}

.btm-watch__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btm-watch__btn::after {
    transition: none;
  }
}