/*
  #2528: Tutorials -- shared/tutorials.js's teach card, practice hint, toast, and the
  Guide's Tutorials cards.

  A component sheet, the menu_unlock.css shape: no :root and no body rule. It
  reads the bottom bar's own tokens from shared/nav.css, which every page that
  loads this also loads, so the card is the bar's colours in both themes
  without a second palette -- and it sits in the same family as the menu
  unlock card, the app's other earned moment.

  Load-bearing:
    - both teach-card buttons and the Skip button are at least 44px tall;
    - `.tutorial-pulse` never changes the pulsed element's box (outline + shadow,
      no border, no size): the element is the page's own and its layout is
      not this file's to move;
    - under reduced motion the pulse is a steady ring, not an animation;
    - "tap here" is its OWN colour, hot pink #FF2E93, used for nothing else
      in the app. The owner, 2026-09-23: with the nav accent the pulse was
      "what we use for other things right now .. like gold", so it did not
      say "tap this". One pink reads on both grounds (light #F2F1EC, dark
      #15171C), so it needs no theme branch.
*/

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  /* The owner, 2026-09-25: the card "feels sort of sudden". The dim fades in
     and the card rises into place after it, so it arrives as an introduction. */
  animation: tutorial-overlay-in 280ms ease-out both;
}

.tutorial-overlay > .tutorial-card {
  animation: tutorial-card-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1.15) 120ms both;
}

@keyframes tutorial-overlay-in {
  from { background: rgba(0, 0, 0, 0); }
  to { background: rgba(0, 0, 0, 0.45); }
}

@keyframes tutorial-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-overlay,
  .tutorial-overlay > .tutorial-card { animation: none; }
}

.tutorial-card {
  width: 100%;
  /* #2532: 380px made the card edge to edge on a 390-wide phone, and it read
     as a second screen over the first rather than a card being shown. 300px
     leaves the dimmed page visible at both sides. */
  max-width: 300px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--milim-nav-rule, #D9D5CB);
  background: var(--milim-nav-surface, #FBFAF7);
  color: var(--milim-nav-ink, #1D2027);
  font-family: var(--ui, system-ui, -apple-system, sans-serif);
}

.tutorial-kicker {
  margin: 0;
  font-size: 0.8125rem; /* #3029: was 0.75rem */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--milim-nav-current, #2A4FC4);
}

.tutorial-title {
  margin: 4px 0 12px;
  font-size: clamp(1.3125rem, calc(1rem + 1vw), 1.625rem); /* #3029: was 1.25rem; stays above the sentence */
  line-height: 1.25;
}

.tutorial-sentence {
  margin: 12px 0 16px;
  font-size: clamp(1.0625rem, calc(0.8rem + 1.1vw), 1.375rem); /* #3029: was 1rem */
  line-height: 1.4;
}

/* The phone-shaped frame the clip plays in: a 390x844 recording, so the
   frame keeps that shape and never crops the screen it shows. */
.tutorial-frame {
  position: relative;
  width: min(62%, 200px);
  margin: 0 auto;
  aspect-ratio: 390 / 844;
  border-radius: 22px;
  border: 5px solid var(--milim-nav-ink, #1D2027);
  overflow: hidden;
  background: var(--milim-nav-rule, #D9D5CB);
  box-sizing: border-box;
}

.tutorial-clip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tutorial-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.tutorial-actions button,
.tutorial-skip {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Accent text on the card's surface, the pairing nav.css draws its current
   item in -- menu_unlock.css's reason, in either theme. */
.tutorial-try {
  border: 2px solid var(--milim-nav-current, #2A4FC4);
  background: transparent;
  color: var(--milim-nav-current, #2A4FC4);
}

.tutorial-later {
  border: 1px solid var(--milim-nav-rule, #D9D5CB);
  background: transparent;
  color: var(--milim-nav-muted, #5B5F66);
}

/* ---- DO: the pulse on the page's own element, and the hint above the bar -- */

.tutorial-pulse {
  outline: 4px solid #FF2E93;
  outline-offset: 4px;
  animation: tutorial-pulse 1.2s ease-out infinite;
}

@keyframes tutorial-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 46, 147, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(255, 46, 147, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 147, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-pulse { animation: none; }
}

.tutorial-hint,
.tutorial-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Above the bottom bar (nav.css) and the iOS home indicator. */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483200;
  width: min(calc(100% - 32px), 380px);
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid var(--milim-nav-rule, #D9D5CB);
  background: var(--milim-nav-surface, #FBFAF7);
  color: var(--milim-nav-ink, #1D2027);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-family: var(--ui, system-ui, -apple-system, sans-serif);
}

.tutorial-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 16px;
  font-weight: 600;
  /* The same pink as the ring: the words and the thing to tap belong together. */
  border: 2px solid #FF2E93;
}

/* #3028: the band sits NEXT TO what it names. shared/tutorials.js `placeHint` measures the
   ringed element and sets --tutorial-hint-top (the band's top edge) and
   --tutorial-hint-arrow-x (where the pointer leaves the band, from the band's left edge),
   and says which side of the target the band is on: `.is-below` (band under the target,
   pointer on its top edge) or `.is-above` (band over the target, pointer on its bottom
   edge). With none of these classes the band stays where `.tutorial-hint` pins it, above
   the bottom bar -- which is what a target with no room beside it gets. This is the
   same bottom/top switch the feedback sheet's rule below makes, set from the page's
   geometry instead of from a class. */
.tutorial-hint.tutorial-hint-near {
  bottom: auto;
  top: var(--tutorial-hint-top, auto);
}

.tutorial-hint-near::before {
  content: "";
  position: absolute;
  left: calc(var(--tutorial-hint-arrow-x, 50%) - 2px);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  box-sizing: border-box;
  background: var(--milim-nav-surface, #FBFAF7);
  border: 2px solid transparent;
  transform: rotate(45deg);
}

.tutorial-hint-near.is-below::before {
  top: -9px;
  border-top-color: #FF2E93;
  border-left-color: #FF2E93;
}

.tutorial-hint-near.is-above::before {
  bottom: -9px;
  border-bottom-color: #FF2E93;
  border-right-color: #FF2E93;
}

/* Carries the top safe-area inset for placeHint to read; draws nothing. */
.tutorial-inset-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding-top: env(safe-area-inset-top, 0px);
  visibility: hidden;
}

.tutorial-skip {
  border: 0;
  background: transparent;
  color: var(--milim-nav-muted, #5B5F66);
}

.tutorial-toast {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  font-size: 0.9rem;
}

/* #2532: inside the teach card the clip is smaller than on the Guide. The
   52%/150px pass (#2534) measured 300x503 at 390x844 (~60%) but was never
   checked at the smaller iPhone SE screen (375x667) -- there the card is the
   same fixed height (its width does not depend on the viewport) and 503px of
   667 is ~75%, past this ticket's own 70% target. Re-measured in a real
   Chrome render (a harness page linking this file unmodified, see the PR):
   at 42%/128px the card is 282x440, 52.2% of 844 and 66.0% of 667 -- both
   under target, with headroom rather than sitting on the line. The Guide's
   Tutorials cards keep the larger frame on purpose: there the clip IS the
   page's content, not something laid over another screen. */
.tutorial-card .tutorial-frame {
  width: min(42%, 128px);
}

/* ---- the Guide's Tutorials cards -------------------------------------------- */

.tutorial-entry .tutorial-frame {
  margin: 8px auto 12px;
}

/* A locked tutorial: the same outline for every one, and nothing in it. */
.tutorial-silhouette {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: transparent;
  opacity: 0.55;
}

.tutorial-silhouette-mark {
  font-size: 3rem;
  font-weight: 700;
  color: var(--milim-nav-muted, #5B5F66);
}

.tutorial-locked-note {
  text-align: center;
  color: var(--milim-nav-muted, #5B5F66);
}

/* #2775: the "Send a report" tutorial's second step is inside the feedback sheet,
   whose backdrop (nav.css, z-index 2147483400) sits ABOVE the hint bar
   (2147483200) and whose panel covers the bottom of the screen -- so the hint
   that says what to do next ("Write hello, or a real comment, then tap Send
   report") was hidden behind the very sheet it is about. While the sheet is
   open the hint moves to the top edge, above the backdrop; Skip stays
   reachable, and the pulse ring on Send is drawn inside the sheet as before. */
.milim-feedback-open .tutorial-hint {
  bottom: auto;
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 2147483500;
}

/* #3028: a band placed by placeHint inside the open sheet goes just above the sheet's
   panel (the page is dimmed there), not to the top edge -- that is only the fallback
   above, for a band with no room. More specific than the rule above, so it wins. */
.milim-feedback-open .tutorial-hint.tutorial-hint-near {
  top: var(--tutorial-hint-top, calc(12px + env(safe-area-inset-top, 0px)));
}

/* ---- #2848: the speed-slider demo (shared/tutorials.js `speedSliderDemo`) --------
   An in-page, SILENT animation in place of a recorded clip: zoom onto the thin
   line above the Hebrew, drag its dot left and right, and an audio wave that
   scrolls slower and faster. One 10s loop; every keyframe below is on the same
   clock so the dot, the finger, the wave and the labels stay in step. It reads
   the bottom bar's tokens like the rest of this sheet, so it needs no theme
   branch. Under reduced motion nothing moves: the zoomed still shows the line,
   the dot in the middle, the normal wave, and both labels. */

.tutorial-frame.tutorial-frame-demo,
.tutorial-card .tutorial-frame.tutorial-frame-demo,
.tutorial-entry .tutorial-frame.tutorial-frame-demo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-width: 2px;
  border-radius: 14px;
  background: var(--milim-nav-surface, #FBFAF7);
}

.sm-svg { display: block; width: 100%; height: 100%; }
.sm-svg text { font: 600 12px var(--ui, system-ui, -apple-system, sans-serif); } /* #3029: was 10px */

.sm-phone { fill: none; stroke: var(--milim-nav-rule, #D9D5CB); stroke-width: 1.5; }
.sm-bar { fill: var(--milim-nav-rule, #D9D5CB); }
.sm-text { fill: var(--milim-nav-muted, #5B5F66); opacity: 0.45; }
.sm-speaker path { fill: var(--milim-nav-ink, #1D2027); opacity: 0.7; }
.sm-line { stroke: var(--milim-nav-muted, #5B5F66); stroke-width: 1; stroke-linecap: round; opacity: 0.7; }
.sm-pip { fill: var(--milim-nav-current, #2A4FC4); }
.sm-finger { fill: var(--milim-nav-ink, #1D2027); opacity: 0; }
.sm-well { fill: none; stroke: var(--milim-nav-rule, #D9D5CB); stroke-width: 1.5; }
.sm-wave-bars { stroke: var(--milim-nav-current, #2A4FC4); stroke-width: 3; stroke-linecap: round; fill: none; }
.sm-label { fill: var(--milim-nav-current, #2A4FC4); }

/* Still frame (reduced motion, and before the animation starts): zoomed in,
   normal wave, both labels. */
.sm-screen { transform-origin: 120px 30px; transform: scale(2); }
.sm-wave-slow, .sm-wave-fast { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .sm-screen { animation: sm-zoom 10s ease-in-out infinite; }
  .sm-mover { animation: sm-drag 10s ease-in-out infinite; }
  .sm-finger { animation: sm-finger 10s ease-in-out infinite; }
  .sm-panel { animation: sm-panel 10s ease-in-out infinite; }
  .sm-wave-normal { animation: sm-show-normal 10s linear infinite; }
  .sm-wave-slow { animation: sm-show-slow 10s linear infinite; }
  .sm-wave-fast { animation: sm-show-fast 10s linear infinite; }
  .sm-wave-normal .sm-wave-bars { animation: sm-scroll 0.9s linear infinite; }
  .sm-wave-slow .sm-wave-bars { animation: sm-scroll 2.1s linear infinite; }
  .sm-wave-fast .sm-wave-bars { animation: sm-scroll 0.45s linear infinite; }
  .sm-label-slower { animation: sm-show-slow 10s linear infinite; }
  .sm-label-faster { animation: sm-show-fast 10s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-label { opacity: 1; }
}

/* The screen starts whole, zooms onto the line, holds through the drags, and
   zooms back out for the loop. (The dot's and finger's positions are in the
   zoomed screen's units: the line is 80 wide there, so +-40 is its ends.) */
@keyframes sm-zoom {
  0%, 6% { transform: scale(1); }
  16%, 90% { transform: scale(2); }
  100% { transform: scale(1); }
}

@keyframes sm-panel {
  0%, 12% { opacity: 0; }
  20%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes sm-drag {
  0%, 22% { transform: translateX(0); }
  34%, 46% { transform: translateX(-38px); }
  58%, 70% { transform: translateX(38px); }
  80%, 100% { transform: translateX(0); }
}

@keyframes sm-finger {
  0%, 18% { opacity: 0; }
  22%, 80% { opacity: 0.35; }
  84%, 100% { opacity: 0; }
}

@keyframes sm-show-normal {
  0%, 24% { opacity: 1; }
  28%, 46% { opacity: 0; }
  50%, 54% { opacity: 1; }
  58%, 72% { opacity: 0; }
  78%, 100% { opacity: 1; }
}

@keyframes sm-show-slow {
  0%, 26% { opacity: 0; }
  32%, 44% { opacity: 1; }
  48%, 100% { opacity: 0; }
}

@keyframes sm-show-fast {
  0%, 54% { opacity: 0; }
  60%, 70% { opacity: 1; }
  76%, 100% { opacity: 0; }
}

@keyframes sm-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-48px); }
}

/* ---- #2873: the other four tutorials' demos (shared/tutorials.js `DEMOS`) ------------
   send-a-report, path-and-node, open-a-skill and go-over-a-unit, in the speed
   slider's language: one 10s silent loop, a zoom onto the ONE control that
   matters, a finger and a pink "tap here" ring, and a numbered step list that is
   never zoomed. Every shape is generic (a flag, a block on a plinth, a pill, a row
   of unit tiles) so an icon change in the app cannot make one wrong. The plinth's
   colours are the path's own (shared/iso_art.js's slate / gold / silver), which
   the real nodes keep in both themes; everything else reads the bottom bar's
   tokens. Under reduced motion nothing moves: the still is the zoomed control
   with every step lit. Timeline per demo, in % of the 10s loop:
     rp-  send-a-report   flag zoom 18-30, tap 24, sheet 36-44, typed 44-56, Send 58-80, tap 66
     pn-  path-and-node   zoom 18, tap node 30, story open 32-38 and STAYS open, tap Play 60, Play lit 60-86 (#3012)
     os-  open-a-skill    zoom 18, tap node 28, info 30-36, Play tap 56, go 58-72
     gu-  go-over-a-unit  zoom 16, tap node 24, units 26-32, tap unit 44, Play in 46-52, tap 64 */

.md-stage { transform-origin: 0 0; }
.md-stage-send-a-report { transform: translate(-244px, -4px) scale(2.4); }
.md-stage-path-and-node { transform: translate(-48px, -39px) scale(1.4); }
.md-stage-open-a-skill { transform: translate(-60px, -61px) scale(1.5); }
.md-stage-go-over-a-unit { transform: translate(-48px, -32px) scale(1.4); }

/* The step list: opaque, under the stage's window, never zoomed. */
.md-steps-bg { fill: var(--milim-nav-surface, #FBFAF7); }
.md-steps-rule { stroke: var(--milim-nav-rule, #D9D5CB); stroke-width: 1; }
.md-step-dot { fill: var(--milim-nav-current, #2A4FC4); }
.md-svg .md-step-num { fill: var(--milim-nav-surface, #FBFAF7); font-size: 9px; } /* #3029: was 8px */
.md-svg .md-step-text { fill: var(--milim-nav-ink, #1D2027); font-size: 11px; } /* #3029: was 9.5px */

/* The path's shapes. */
.md-f { stroke: #16181C; stroke-width: 1; stroke-linejoin: round; }
.md-slate.md-top { fill: #8A93A8; } .md-slate.md-left { fill: #646E85; } .md-slate.md-right { fill: #454C60; }
.md-gold.md-top { fill: #FFD772; } .md-gold.md-left { fill: #E0A82E; } .md-gold.md-right { fill: #B9821A; }
.md-silver.md-top { fill: #EEF2F7; } .md-silver.md-left { fill: #B7C1CF; } .md-silver.md-right { fill: #8A93A8; }
.md-blue.md-top { fill: #9ED6F8; } .md-blue.md-left { fill: #6CC0F5; } .md-blue.md-right { fill: #3F97D0; }
.md-teal.md-top { fill: #A9E3D2; } .md-teal.md-left { fill: #7CCDB8; } .md-teal.md-right { fill: #4FA38E; }
.md-ghost { fill: none; stroke: var(--milim-nav-muted, #5B5F66); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.md-link { stroke: var(--milim-nav-muted, #5B5F66); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }

/* Controls. */
.md-flag-pole { stroke: var(--milim-nav-ink, #1D2027); stroke-width: 1.6; stroke-linecap: round; }
.md-flag-cloth { fill: transparent; stroke: var(--milim-nav-ink, #1D2027); stroke-width: 1.6; stroke-linejoin: round; }
.md-sheet-bg { fill: var(--milim-nav-surface, #FBFAF7); stroke: var(--milim-nav-rule, #D9D5CB); stroke-width: 1.5; }
.md-field { fill: none; stroke: var(--milim-nav-rule, #D9D5CB); stroke-width: 1.5; }
.md-type { fill: var(--milim-nav-muted, #5B5F66); opacity: 0.6; transform-box: fill-box; transform-origin: 0 50%; }
.md-send, .md-pill { transform-box: fill-box; transform-origin: center; }
.md-send-bg { fill: var(--milim-nav-current, #2A4FC4); }
.md-send-glyph { fill: var(--milim-nav-surface, #FBFAF7); }
.md-send-tick { fill: none; stroke: var(--milim-nav-surface, #FBFAF7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.md-pill-bg { fill: transparent; stroke: var(--milim-nav-current, #2A4FC4); stroke-width: 1.6; }
.md-pill-glyph { fill: var(--milim-nav-current, #2A4FC4); }
.md-chip { transform-box: fill-box; transform-origin: center; }
.md-chip-bg { fill: transparent; stroke: var(--milim-nav-muted, #5B5F66); stroke-width: 1.2; stroke-dasharray: 3 2; opacity: 0.8; }
.md-chip.is-read .md-chip-bg { stroke: var(--milim-nav-current, #2A4FC4); stroke-dasharray: none; opacity: 1; }
.md-chip-tick { fill: none; stroke: var(--milim-nav-current, #2A4FC4); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.md-level { fill: none; stroke: var(--milim-nav-muted, #5B5F66); stroke-width: 1.2; stroke-linejoin: round; }

/* Finger, tap ring, and the "it opened" ring. */
.md-finger { opacity: 0; }
.md-finger circle { fill: var(--milim-nav-ink, #1D2027); stroke: var(--milim-nav-surface, #FBFAF7); stroke-width: 1; }
.md-ring { fill: none; stroke: #FF2E93; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.md-go { fill: none; stroke: var(--milim-nav-current, #2A4FC4); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Stills. Every demo starts on the path (or, for send-a-report, the screen); the
   two that end on what a tap opens show that in the still. */
.md-open, .md-sheet { opacity: 0; }
.md-stage-open-a-skill .md-open, .md-stage-go-over-a-unit .md-open, .md-stage-path-and-node .md-open { opacity: 1; }
.md-stage-open-a-skill .md-path-bits, .md-stage-go-over-a-unit .md-path-bits, .md-stage-path-and-node .md-path-bits { opacity: 0; }
.md-stage-go-over-a-unit .md-chip-1 .md-chip-bg { fill: var(--milim-nav-current, #2A4FC4); stroke-dasharray: none; opacity: 1; }
.md-stage-go-over-a-unit .md-chip-1 .md-chip-tick { stroke: var(--milim-nav-surface, #FBFAF7); }

/* ---- #2897 / #2890: the four-square mark, and the word grid -------------------
   Same language again. opens-a-game zooms onto a story's four-square badge, a game
   unlocks beside it, the story is tapped. find-in-grid is NOT zoomed (the grid is
   the whole subject): a blank 5x5 grid -- no letters, so it cannot go stale -- and a
   pill that follows a held finger along a row, a diagonal, backwards, and back again
   to undo, then three taps. Timelines, in % of the 10s loop:
     ob-  opens-a-game  zoom 16, look 26-34, game 42-48, tap story 64
          (#2920: no finger on the badge itself -- a finger there read as 'tap the mark to unlock')
     wg-  find-in-grid  row 4-22, diagonal 24-40, backwards 42-54, undo 56-70, taps 74 78 82 86 */

.md-stage-opens-a-game { transform: translate(-78.4px, -27.2px) scale(1.6); }
.md-stage-find-in-grid { transform: translate(0px, 0px) scale(1); }

.md-badge-bg { fill: var(--milim-nav-current, #2A4FC4); stroke: #16181C; stroke-width: 0.8; }
.md-badge-sq { fill: var(--milim-nav-surface, #FBFAF7); }
.md-badge { transform-box: fill-box; transform-origin: center; }
.ob-ghost { opacity: 0; }

.wg-cell { fill: none; stroke: var(--milim-nav-muted, #5B5F66); stroke-width: 1.2; opacity: 0.75; }
.wg-cap { fill: var(--milim-nav-current, #2A4FC4); fill-opacity: 0.28; stroke: var(--milim-nav-current, #2A4FC4); stroke-width: 1.6;
          opacity: 0; transform-box: fill-box; transform-origin: 0 50%; }
.wg-pick { fill: var(--milim-nav-current, #2A4FC4); fill-opacity: 0.35; stroke: var(--milim-nav-current, #2A4FC4); stroke-width: 1.6; opacity: 0; }
/* The still: one found word, on the diagonal. */
.wg-cap-2 { opacity: 1; }

/* ---- #2970: Practise and the HE/EN switch ------------------------------------
   hebrew-buttons is NOT zoomed in motion (the two tools and the node fit one view): a
   ring on Practise, then a finger taps the switch and its knob slides across and the
   pill fills. Timeline, in % of the 10s loop: ring on Practise 16 (delay 1.6s), finger
   to the switch 48-60, tap 52 (ring delay 5.2s), knob + fill 54-90. The still is the
   zoomed pair with the switch off. */
.md-stage-hebrew-buttons { transform: translate(-60px, -33px) scale(1.5); }
.hb-tool-bg { fill: transparent; stroke: var(--milim-nav-current, #2A4FC4); stroke-width: 1.6; }
.hb-tool-line { fill: var(--milim-nav-current, #2A4FC4); }
.hb-sw-bg { fill: transparent; stroke: var(--milim-nav-current, #2A4FC4); stroke-width: 1.6; }
.hb-knob { fill: var(--milim-nav-current, #2A4FC4); }
.hb-practise, .hb-knob { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .md-stage, .md-step, .md-ring, .md-finger, .md-open, .md-path-bits, .md-node-body, .md-sheet, .md-go,
  .md-pill, .md-pill-bg, .md-pill-glyph, .md-chip, .md-chip-bg, .md-chip-tick, .md-type, .md-send, .md-send-glyph, .md-send-tick, .md-flag-cloth,
  .md-badge, .ob-game, .ob-ghost, .ob-link, .wg-cap, .wg-pick, .hb-practise, .hb-knob, .hb-sw-bg {
    animation-duration: 10s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: linear;
  }
  .md-stage { animation-timing-function: ease-in-out; }
  .md-ring-1 { animation-name: md-ring; animation-delay: 2.4s; }
  .md-ring-2 { animation-name: md-ring; animation-delay: 6.6s; }
  .md-stage-path-and-node .md-ring-1 { animation-delay: 3s; }
  .md-stage-path-and-node .md-ring-2 { animation-delay: 6s; }
  .md-stage-open-a-skill .md-ring-1 { animation-delay: 2.8s; }
  .md-stage-open-a-skill .md-ring-2 { animation-delay: 5.6s; }
  .md-stage-go-over-a-unit .md-ring-1 { animation-delay: 2.4s; }
  .md-stage-go-over-a-unit .md-ring-2 { animation-delay: 4.4s; }
  .md-stage-go-over-a-unit .md-ring-3 { animation-name: md-ring; animation-delay: 6.4s; } /* had no name, so its ring on Play never showed */
  .md-stage-opens-a-game .md-ring-1 { display: none; } /* #2920: no tap ripple on the badge, it is a sign, not a button */
  .md-stage-opens-a-game .md-ring-2 { animation-delay: 6.4s; }
  .md-stage-find-in-grid .md-ring-3, .md-stage-find-in-grid .md-ring-4 { animation-name: md-ring; }
  .md-stage-find-in-grid .md-ring-1 { animation-delay: 7.4s; }
  .md-stage-find-in-grid .md-ring-2 { animation-delay: 7.8s; }
  .md-stage-find-in-grid .md-ring-3 { animation-delay: 8.2s; }
  .md-stage-find-in-grid .md-ring-4 { animation-delay: 8.6s; }
  .md-stage-hebrew-buttons .md-ring-1 { animation-delay: 1.6s; }
  .md-stage-hebrew-buttons .md-ring-2 { animation-delay: 5.2s; }

  /* send-a-report */
  .md-stage-send-a-report { animation-name: rp-stage; }
  .md-stage-send-a-report .md-finger-a { animation-name: rp-finger-a; }
  .md-stage-send-a-report .md-finger-b { animation-name: rp-finger-b; }
  .md-stage-send-a-report .md-flag-cloth { animation-name: rp-flag; }
  .md-stage-send-a-report .md-sheet { animation-name: rp-sheet; }
  .md-stage-send-a-report .md-type-1 { animation-name: rp-type-1; }
  .md-stage-send-a-report .md-type-2 { animation-name: rp-type-2; }
  .md-stage-send-a-report .md-send { animation-name: rp-press; }
  .md-stage-send-a-report .md-send-glyph { animation-name: rp-glyph; }
  .md-stage-send-a-report .md-send-tick { animation-name: rp-tick; }
  .md-stage-send-a-report ~ .md-steps .md-step-1 { animation-name: rp-row-1; }
  .md-stage-send-a-report ~ .md-steps .md-step-2 { animation-name: rp-row-2; }

  /* path-and-node */
  .md-stage-path-and-node { animation-name: pn-stage; }
  .md-stage-path-and-node .md-path-bits { animation-name: pn-bits; }
  .md-stage-path-and-node .md-open { animation-name: pn-open; }
  .md-stage-path-and-node .md-node-body { animation-name: pn-press; }
  .md-stage-path-and-node .md-play { animation-name: pn-play; }
  .md-stage-path-and-node .md-play .md-pill-bg { animation-name: pn-fill; }
  .md-stage-path-and-node .md-play .md-pill-glyph { animation-name: pn-glyph; }
  .md-stage-path-and-node .md-finger-a { animation-name: pn-finger-a; }
  .md-stage-path-and-node .md-finger-b { animation-name: pn-finger-b; }
  .md-stage-path-and-node ~ .md-steps .md-step-1 { animation-name: pn-row-1; }
  .md-stage-path-and-node ~ .md-steps .md-step-2 { animation-name: pn-row-2; }

  /* open-a-skill */
  .md-stage-open-a-skill { animation-name: os-stage; }
  .md-stage-open-a-skill .md-path-bits { animation-name: os-bits; }
  .md-stage-open-a-skill .md-open { animation-name: os-open; }
  .md-stage-open-a-skill .md-node-skill .md-node-body { animation-name: os-press; }
  .md-stage-open-a-skill .md-finger-a { animation-name: os-finger-a; }
  .md-stage-open-a-skill .md-finger-b { animation-name: os-finger-b; }
  .md-stage-open-a-skill .md-play { animation-name: os-play; }
  .md-stage-open-a-skill .md-play .md-pill-bg { animation-name: os-fill; }
  .md-stage-open-a-skill .md-play .md-pill-glyph { animation-name: os-glyph; }
  .md-stage-open-a-skill .md-go { animation-name: os-go; }
  .md-stage-open-a-skill ~ .md-steps .md-step-1 { animation-name: os-row-1; }
  .md-stage-open-a-skill ~ .md-steps .md-step-2 { animation-name: os-row-2; }

  /* go-over-a-unit */
  .md-stage-go-over-a-unit { animation-name: gu-stage; }
  .md-stage-go-over-a-unit .md-path-bits { animation-name: gu-bits; }
  .md-stage-go-over-a-unit .md-open { animation-name: gu-open; }
  .md-stage-go-over-a-unit .md-node-body { animation-name: gu-press; }
  .md-stage-go-over-a-unit .md-finger-a { animation-name: gu-finger-a; }
  .md-stage-go-over-a-unit .md-finger-b { animation-name: gu-finger-b; }
  .md-stage-go-over-a-unit .md-finger-c { animation-name: gu-finger-c; }
  .md-stage-go-over-a-unit .md-chip-1 { animation-name: gu-pop; }
  .md-stage-go-over-a-unit .md-chip-1 .md-chip-bg { animation-name: gu-chip-fill; }
  .md-stage-go-over-a-unit .md-chip-1 .md-chip-tick { animation-name: gu-chip-tick; }
  .md-stage-go-over-a-unit .md-play { animation-name: gu-play-in, gu-play-press; }
  .md-stage-go-over-a-unit .md-play .md-pill-bg { animation-name: gu-fill; }
  .md-stage-go-over-a-unit .md-play .md-pill-glyph { animation-name: gu-glyph; }
  .md-stage-go-over-a-unit .md-go { animation-name: gu-go; }
  .md-stage-go-over-a-unit ~ .md-steps .md-step-1 { animation-name: gu-row-1; }
  .md-stage-go-over-a-unit ~ .md-steps .md-step-2 { animation-name: gu-row-2; }
  .md-stage-go-over-a-unit ~ .md-steps .md-step-3 { animation-name: gu-row-3; }

  /* opens-a-game */
  .md-stage-opens-a-game { animation-name: ob-stage; }
  .md-stage-opens-a-game .md-node-story .md-node-body { animation-name: ob-press; }
  .md-stage-opens-a-game .md-badge { animation-name: ob-pop; }
  .md-stage-opens-a-game .ob-ghost { animation-name: ob-ghost; }
  .md-stage-opens-a-game .ob-link { animation-name: ob-link; }
  .md-stage-opens-a-game .ob-game { animation-name: ob-game; }
  .md-stage-opens-a-game .md-finger-b { animation-name: ob-finger-b; }
  .md-stage-opens-a-game ~ .md-steps .md-step-1 { animation-name: ob-row-1; }
  .md-stage-opens-a-game ~ .md-steps .md-step-2 { animation-name: ob-row-2; }
  .md-stage-opens-a-game ~ .md-steps .md-step-3 { animation-name: ob-row-3; }

  /* find-in-grid */
  .md-stage-find-in-grid .wg-cap-1 { animation-name: wg-cap-1; }
  .md-stage-find-in-grid .wg-cap-2 { animation-name: wg-cap-2; }
  .md-stage-find-in-grid .wg-cap-3 { animation-name: wg-cap-3; }
  .md-stage-find-in-grid .wg-cap-4 { animation-name: wg-cap-4; }
  .md-stage-find-in-grid .wg-pick-1 { animation-name: wg-pick-1; }
  .md-stage-find-in-grid .wg-pick-2 { animation-name: wg-pick-2; }
  .md-stage-find-in-grid .wg-pick-3 { animation-name: wg-pick-3; }
  .md-stage-find-in-grid .md-finger-a { animation-name: wg-finger; }
  .md-stage-find-in-grid ~ .md-steps .md-step-1 { animation-name: wg-row-1; }
  .md-stage-find-in-grid ~ .md-steps .md-step-2 { animation-name: wg-row-2; }
  .md-stage-find-in-grid ~ .md-steps .md-step-3 { animation-name: wg-row-3; }
  .md-stage-find-in-grid ~ .md-steps .md-step-4 { animation-name: wg-row-4; }

  /* hebrew-buttons */
  .md-stage-hebrew-buttons .hb-practise { animation-name: hb-pop; }
  .md-stage-hebrew-buttons .hb-knob { animation-name: hb-knob; }
  .md-stage-hebrew-buttons .hb-sw-bg { animation-name: hb-fill; }
  .md-stage-hebrew-buttons .md-finger-a { animation-name: hb-finger; }
  .md-stage-hebrew-buttons ~ .md-steps .md-step-1 { animation-name: hb-row-1; }
  .md-stage-hebrew-buttons ~ .md-steps .md-step-2 { animation-name: hb-row-2; }
}

/* The tap ring: starts at its delay, so each ring is one tap on the shared clock. */
@keyframes md-ring {
  0% { opacity: 0; transform: scale(0.6); }
  1% { opacity: 0.95; transform: scale(0.8); }
  5%, 100% { opacity: 0; transform: scale(2.8); }
}

/* -- send-a-report -- */
@keyframes rp-stage {
  0%, 8% { transform: translate(0px, 0px) scale(1); }
  18%, 30% { transform: translate(-244px, -4px) scale(2.4); }
  42%, 50% { transform: translate(0px, 0px) scale(1); }
  58%, 80% { transform: translate(-193px, -223px) scale(2.2); }
  92%, 100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes rp-finger-a {
  0%, 14% { opacity: 0; transform: translate(180px, 48px); }
  20%, 30% { opacity: 0.4; transform: translate(164px, 27px); }
  34%, 100% { opacity: 0; transform: translate(164px, 27px); }
}
@keyframes rp-finger-b {
  0%, 54% { opacity: 0; transform: translate(172px, 152px); }
  62%, 70% { opacity: 0.4; transform: translate(148px, 132px); }
  76%, 100% { opacity: 0; transform: translate(148px, 132px); }
}
@keyframes rp-flag {
  0%, 23% { fill: transparent; }
  25%, 36% { fill: var(--milim-nav-current, #2A4FC4); }
  42%, 100% { fill: transparent; }
}
@keyframes rp-sheet {
  0%, 36% { opacity: 0; transform: translateY(44px); }
  44%, 88% { opacity: 1; transform: translateY(0px); }
  96%, 100% { opacity: 0; transform: translateY(44px); }
}
@keyframes rp-type-1 { 0%, 44% { transform: scaleX(0); } 52%, 100% { transform: scaleX(1); } }
@keyframes rp-type-2 { 0%, 50% { transform: scaleX(0); } 56%, 100% { transform: scaleX(1); } }
@keyframes rp-press {
  0%, 64% { transform: scale(1); }
  66% { transform: scale(0.88); }
  70%, 100% { transform: scale(1); }
}
@keyframes rp-glyph { 0%, 68% { opacity: 1; } 72%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes rp-tick { 0%, 68% { opacity: 0; } 72%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes rp-row-1 { 0%, 6% { opacity: 0.4; } 12%, 38% { opacity: 1; } 44%, 100% { opacity: 0.4; } }
@keyframes rp-row-2 { 0%, 40% { opacity: 0.4; } 46%, 90% { opacity: 1; } 96%, 100% { opacity: 0.4; } }

/* -- path-and-node -- */
@keyframes pn-stage {
  0%, 8% { transform: translate(0px, 0px) scale(1); }
  18%, 86% { transform: translate(-48px, -39px) scale(1.4); }
  96%, 100% { transform: translate(0px, 0px) scale(1); }
}
/* #3012: the story opens (32-38) and stays open to the end of the loop (it only gives way as the
   stage zooms back out, 96-100): the second tap is Play, which starts the story -- it never closes it. */
@keyframes pn-bits { 0%, 32% { opacity: 1; } 38%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pn-open { 0%, 32% { opacity: 0; } 38%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pn-press {
  0%, 28% { transform: translateY(0px); }
  30% { transform: translateY(2px); }
  34%, 100% { transform: translateY(0px); }
}
@keyframes pn-finger-a {
  0%, 18% { opacity: 0; transform: translate(152px, 100px); }
  26%, 32% { opacity: 0.4; transform: translate(121px, 63px); }
  36%, 100% { opacity: 0; transform: translate(121px, 63px); }
}
@keyframes pn-finger-b {
  0%, 46% { opacity: 0; transform: translate(152px, 100px); }
  54%, 62% { opacity: 0.4; transform: translate(121px, 121.5px); }
  66%, 100% { opacity: 0; transform: translate(121px, 121.5px); }
}
@keyframes pn-play {
  0%, 59% { transform: scale(1); }
  60.5% { transform: scale(0.9); }
  64%, 100% { transform: scale(1); }
}
@keyframes pn-fill {
  0%, 59% { fill: transparent; }
  61%, 86% { fill: var(--milim-nav-current, #2A4FC4); }
  94%, 100% { fill: transparent; }
}
@keyframes pn-glyph {
  0%, 59% { fill: var(--milim-nav-current, #2A4FC4); }
  61%, 86% { fill: var(--milim-nav-surface, #FBFAF7); }
  94%, 100% { fill: var(--milim-nav-current, #2A4FC4); }
}
@keyframes pn-row-1 { 0%, 6% { opacity: 0.4; } 12%, 36% { opacity: 1; } 42%, 100% { opacity: 0.4; } }
@keyframes pn-row-2 { 0%, 38% { opacity: 0.4; } 44%, 90% { opacity: 1; } 96%, 100% { opacity: 0.4; } }

/* -- open-a-skill -- */
@keyframes os-stage {
  0%, 8% { transform: translate(0px, 0px) scale(1); }
  18%, 86% { transform: translate(-60px, -61px) scale(1.5); }
  96%, 100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes os-bits { 0%, 30% { opacity: 1; } 36%, 86% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes os-open { 0%, 30% { opacity: 0; } 36%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes os-press {
  0%, 26% { transform: translateY(0px); }
  28% { transform: translateY(2px); }
  32%, 100% { transform: translateY(0px); }
}
@keyframes os-finger-a {
  0%, 14% { opacity: 0; transform: translate(152px, 104px); }
  22%, 30% { opacity: 0.4; transform: translate(121px, 78px); }
  34%, 100% { opacity: 0; transform: translate(121px, 78px); }
}
@keyframes os-finger-b {
  0%, 38% { opacity: 0; transform: translate(121px, 88px); }
  44% { opacity: 0.4; transform: translate(121px, 88px); }
  52%, 58% { opacity: 0.4; transform: translate(121px, 125px); }
  62%, 100% { opacity: 0; transform: translate(121px, 125px); }
}
@keyframes os-play {
  0%, 55% { transform: scale(1); }
  57% { transform: scale(0.9); }
  61%, 100% { transform: scale(1); }
}
@keyframes os-fill {
  0%, 55% { fill: transparent; }
  58%, 76% { fill: var(--milim-nav-current, #2A4FC4); }
  86%, 100% { fill: transparent; }
}
@keyframes os-glyph {
  0%, 55% { fill: var(--milim-nav-current, #2A4FC4); }
  58%, 76% { fill: var(--milim-nav-surface, #FBFAF7); }
  86%, 100% { fill: var(--milim-nav-current, #2A4FC4); }
}
@keyframes os-go {
  0%, 56% { opacity: 0; transform: scale(1); }
  58% { opacity: 0.7; transform: scale(1); }
  74%, 100% { opacity: 0; transform: scale(6); }
}
@keyframes os-row-1 { 0%, 6% { opacity: 0.4; } 12%, 34% { opacity: 1; } 40%, 100% { opacity: 0.4; } }
@keyframes os-row-2 { 0%, 36% { opacity: 0.4; } 42%, 90% { opacity: 1; } 96%, 100% { opacity: 0.4; } }

/* -- go-over-a-unit -- */
@keyframes gu-stage {
  0%, 8% { transform: translate(0px, 0px) scale(1); }
  16%, 84% { transform: translate(-48px, -32px) scale(1.4); }
  94%, 100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes gu-bits { 0%, 26% { opacity: 1; } 32%, 84% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes gu-open { 0%, 26% { opacity: 0; } 32%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes gu-press {
  0%, 22% { transform: translateY(0px); }
  24% { transform: translateY(2px); }
  28%, 100% { transform: translateY(0px); }
}
@keyframes gu-finger-a {
  0%, 12% { opacity: 0; transform: translate(152px, 88px); }
  20%, 26% { opacity: 0.4; transform: translate(121px, 55px); }
  30%, 100% { opacity: 0; transform: translate(121px, 55px); }
}
@keyframes gu-finger-b {
  0%, 32% { opacity: 0; transform: translate(121px, 70px); }
  38% { opacity: 0.4; transform: translate(121px, 70px); }
  42%, 48% { opacity: 0.4; transform: translate(95px, 88px); }
  52%, 100% { opacity: 0; transform: translate(95px, 88px); }
}
@keyframes gu-finger-c {
  0%, 52% { opacity: 0; transform: translate(96px, 94px); }
  56% { opacity: 0.4; transform: translate(96px, 94px); }
  62%, 68% { opacity: 0.4; transform: translate(121px, 107px); }
  72%, 100% { opacity: 0; transform: translate(121px, 107px); }
}
@keyframes gu-pop { 0%, 43% { transform: scale(1); } 46% { transform: scale(1.18); } 50%, 100% { transform: scale(1); } }
@keyframes gu-chip-fill {
  0%, 43% { fill: transparent; stroke-dasharray: none; }
  46%, 88% { fill: var(--milim-nav-current, #2A4FC4); stroke-dasharray: none; }
  94%, 100% { fill: transparent; stroke-dasharray: none; }
}
@keyframes gu-chip-tick {
  0%, 43% { stroke: var(--milim-nav-current, #2A4FC4); }
  46%, 88% { stroke: var(--milim-nav-surface, #FBFAF7); }
  94%, 100% { stroke: var(--milim-nav-current, #2A4FC4); }
}
@keyframes gu-play-in { 0%, 46% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes gu-play-press {
  0%, 63% { transform: scale(1); }
  65% { transform: scale(0.9); }
  69%, 100% { transform: scale(1); }
}
@keyframes gu-fill {
  0%, 64% { fill: transparent; }
  66%, 78% { fill: var(--milim-nav-current, #2A4FC4); }
  86%, 100% { fill: transparent; }
}
@keyframes gu-glyph {
  0%, 64% { fill: var(--milim-nav-current, #2A4FC4); }
  66%, 78% { fill: var(--milim-nav-surface, #FBFAF7); }
  86%, 100% { fill: var(--milim-nav-current, #2A4FC4); }
}
@keyframes gu-go {
  0%, 65% { opacity: 0; transform: scale(1); }
  67% { opacity: 0.7; transform: scale(1); }
  82%, 100% { opacity: 0; transform: scale(6); }
}
@keyframes gu-row-1 { 0%, 4% { opacity: 0.4; } 10%, 30% { opacity: 1; } 36%, 100% { opacity: 0.4; } }
@keyframes gu-row-2 { 0%, 30% { opacity: 0.4; } 36%, 52% { opacity: 1; } 58%, 100% { opacity: 0.4; } }
@keyframes gu-row-3 { 0%, 52% { opacity: 0.4; } 58%, 90% { opacity: 1; } 96%, 100% { opacity: 0.4; } }

/* -- opens-a-game -- */
@keyframes ob-stage {
  0%, 8% { transform: translate(0px, 0px) scale(1); }
  16%, 86% { transform: translate(-78.4px, -27.2px) scale(1.6); }
  96%, 100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes ob-pop { 0%, 27% { transform: scale(1); } 30% { transform: scale(1.35); } 34%, 100% { transform: scale(1); } }
@keyframes ob-ghost { 0%, 34% { opacity: 0; } 38%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes ob-link { 0%, 34% { opacity: 0; } 38%, 86% { opacity: 0.55; } 92%, 100% { opacity: 0; } }
@keyframes ob-game { 0%, 42% { opacity: 0; } 48%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes ob-press {
  0%, 62% { transform: translateY(0px); }
  64% { transform: translateY(2px); }
  68%, 100% { transform: translateY(0px); }
}
@keyframes ob-finger-b {
  0%, 54% { opacity: 0; transform: translate(126px, 78px); }
  62%, 66% { opacity: 0.4; transform: translate(100px, 54px); }
  70%, 100% { opacity: 0; transform: translate(100px, 54px); }
}
@keyframes ob-row-1 { 0%, 10% { opacity: 0.4; } 16%, 34% { opacity: 1; } 40%, 100% { opacity: 0.4; } }
@keyframes ob-row-2 { 0%, 34% { opacity: 0.4; } 40%, 58% { opacity: 1; } 64%, 100% { opacity: 0.4; } }
@keyframes ob-row-3 { 0%, 56% { opacity: 0.4; } 62%, 90% { opacity: 1; } 96%, 100% { opacity: 0.4; } }

/* -- find-in-grid -- (each pill starts at one cell, 0.22 / 0.17 of its length, and
   grows with the finger; scaleX(1) is the full four cells) */
@keyframes wg-cap-1 {
  0%, 4% { opacity: 0; transform: scaleX(0.22); }
  5% { opacity: 1; transform: scaleX(0.22); }
  14%, 20% { opacity: 1; transform: scaleX(1); }
  22%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes wg-cap-2 {
  0%, 24% { opacity: 0; transform: scaleX(0.17); }
  25% { opacity: 1; transform: scaleX(0.17); }
  35%, 38% { opacity: 1; transform: scaleX(1); }
  40%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes wg-cap-3 {
  0%, 38% { opacity: 0; transform: scaleX(0.22); }
  39% { opacity: 1; transform: scaleX(0.22); }
  49%, 52% { opacity: 1; transform: scaleX(1); }
  54%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes wg-cap-4 {
  0%, 54% { opacity: 0; transform: scaleX(0.22); }
  55% { opacity: 1; transform: scaleX(0.22); }
  60%, 61% { opacity: 1; transform: scaleX(1); }
  65%, 68% { opacity: 1; transform: scaleX(0.48); }
  70%, 100% { opacity: 0; transform: scaleX(0.48); }
}
@keyframes wg-pick-1 { 0%, 73% { opacity: 0; } 74%, 91% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes wg-pick-2 { 0%, 77% { opacity: 0; } 78%, 91% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes wg-pick-3 { 0%, 81% { opacity: 0; } 82%, 85% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes wg-finger {
  0%, 3% { opacity: 0; transform: translate(80px, 36px); }
  4%, 5% { opacity: 0.4; transform: translate(80px, 36px); }
  14%, 20% { opacity: 0.4; transform: translate(140px, 36px); }
  21%, 22% { opacity: 0; transform: translate(140px, 36px); }
  23% { opacity: 0; transform: translate(100px, 16px); }
  24%, 25% { opacity: 0.4; transform: translate(100px, 16px); }
  35%, 38% { opacity: 0.4; transform: translate(160px, 76px); }
  39% { opacity: 0; transform: translate(160px, 76px); }
  40% { opacity: 0; transform: translate(160px, 96px); }
  41%, 42% { opacity: 0.4; transform: translate(160px, 96px); }
  49%, 52% { opacity: 0.4; transform: translate(100px, 96px); }
  53% { opacity: 0; transform: translate(100px, 96px); }
  54% { opacity: 0; transform: translate(80px, 16px); }
  55% { opacity: 0.4; transform: translate(80px, 16px); }
  60%, 61% { opacity: 0.4; transform: translate(80px, 76px); }
  65%, 68% { opacity: 0.4; transform: translate(80px, 36px); }
  69%, 72% { opacity: 0; transform: translate(80px, 36px); }
  73% { opacity: 0; transform: translate(160px, 16px); }
  73.5%, 75.5% { opacity: 0.4; transform: translate(160px, 16px); }
  76%, 77% { opacity: 0; transform: translate(160px, 16px); }
  77.1% { opacity: 0; transform: translate(140px, 36px); }
  77.5%, 79.5% { opacity: 0.4; transform: translate(140px, 36px); }
  80%, 81% { opacity: 0; transform: translate(140px, 36px); }
  81.1% { opacity: 0; transform: translate(120px, 56px); }
  81.5%, 83.5% { opacity: 0.4; transform: translate(120px, 56px); }
  84%, 85% { opacity: 0; transform: translate(120px, 56px); }
  85.5%, 87.5% { opacity: 0.4; transform: translate(120px, 56px); }
  88%, 100% { opacity: 0; transform: translate(120px, 56px); }
}
@keyframes wg-row-1 { 0%, 2% { opacity: 0.4; } 6%, 21% { opacity: 1; } 24%, 100% { opacity: 0.4; } }
@keyframes wg-row-2 { 0%, 22% { opacity: 0.4; } 26%, 53% { opacity: 1; } 56%, 100% { opacity: 0.4; } }
@keyframes wg-row-3 { 0%, 54% { opacity: 0.4; } 58%, 70% { opacity: 1; } 73%, 100% { opacity: 0.4; } }
@keyframes wg-row-4 { 0%, 72% { opacity: 0.4; } 76%, 92% { opacity: 1; } 96%, 100% { opacity: 0.4; } }

/* -- hebrew-buttons -- */
@keyframes hb-pop { 0%, 14% { transform: scale(1); } 18% { transform: scale(1.2); } 24%, 100% { transform: scale(1); } }
@keyframes hb-knob {
  0%, 52% { transform: translateX(0px); }
  58%, 90% { transform: translateX(14px); }
  98%, 100% { transform: translateX(0px); }
}
@keyframes hb-fill {
  0%, 52% { fill: transparent; }
  58%, 90% { fill: var(--milim-nav-current, #2A4FC4); fill-opacity: 0.3; }
  98%, 100% { fill: transparent; }
}
@keyframes hb-finger {
  0%, 44% { opacity: 0; transform: translate(100px, 90px); }
  50%, 56% { opacity: 0.4; transform: translate(76px, 62px); }
  60%, 100% { opacity: 0; transform: translate(76px, 62px); }
}
@keyframes hb-row-1 { 0%, 6% { opacity: 0.4; } 12%, 40% { opacity: 1; } 46%, 100% { opacity: 0.4; } }
@keyframes hb-row-2 { 0%, 42% { opacity: 0.4; } 48%, 92% { opacity: 1; } 98%, 100% { opacity: 0.4; } }