/* =========================================================================
   The plans page's "After you subscribe" section (2026-10-10).

   The FAQ's sibling, mirrored: on the left a list of five steps in the
   order a member meets them, the active one raised on glass with a bar
   that fills while its scene plays; on the right a glass stage with a
   liquid-glass island naming the step. When a bar fills, the next step
   takes over. Hover or focus pauses it. Scenes cross-fade through a blur
   and replay each time they return. js/pricing.js (benefits()) drives it.
   ========================================================================= */

@property --bn-acc { syntax: "<integer>"; inherits: false; initial-value: 86; }
@property --bn-streak { syntax: "<integer>"; inherits: false; initial-value: 7; }

.bn {
  --bn-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bn-dur: 4s;
  --bn-card: color-mix(in srgb, var(--paper-raised) 90%, transparent);
  --bn-edge: color-mix(in srgb, var(--ink) 9%, transparent);
  /* The scene cards reuse faq.css's .fq-card, which reads these. */
  --fq-card: var(--bn-card);
  --fq-edge: var(--bn-edge);
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
}

.bn-head { max-width: 40rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.bn .bn-head h2 { margin: 0.45rem 0 0.5rem; font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.04em; line-height: 1.04; }
.bn-lede { margin: 0; color: var(--ink-soft); font-size: 1rem; }

.bn-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}

/* ------------------------------------------------------------------ list */

.bn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.bn-item { position: relative; border-radius: 20px; transition: background 0.45s var(--bn-ease), box-shadow 0.45s var(--bn-ease); }
.bn-item.is-active {
  background: var(--glass-fill);
  box-shadow: var(--glass-hi), 0 0 0 0.5px var(--bn-edge), 0 24px 50px -30px rgba(10, 10, 14, 0.45);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.bn-q {
  display: grid;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: inherit;
  color: inherit;
  font: inherit;
}
.bn-q:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -2px; }
.bn-when { font: 600 0.72rem/1.2 var(--sans); color: var(--ink-faint); transition: color 0.3s; }
.bn-title {
  margin-top: 0.2rem;
  font: 600 1.12rem/1.25 var(--display);
  letter-spacing: -0.022em;
  color: var(--ink-faint);
  transition: color 0.35s var(--bn-ease);
}
.bn-q:hover .bn-title { color: var(--ink-soft); }
.bn-item.is-active .bn-when { color: var(--accent); }
.bn-item.is-active .bn-title { color: var(--ink); }

/* The text opens by animating its grid row, then rises out of a blur. */
.bn-text {
  display: block;
  max-height: 0;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  opacity: 0;
  filter: blur(4px);
  transition: max-height 0.55s var(--bn-ease), opacity 0.3s var(--bn-ease), filter 0.3s var(--bn-ease), margin 0.55s var(--bn-ease);
}
.bn-item.is-active .bn-text { max-height: 7rem; margin-top: 0.45rem; opacity: 1; filter: none; transition-delay: 0s, 0.12s, 0.12s, 0s; }

/* The bar under the active step: the time left on its scene. */
.bn-bar {
  display: block;
  height: 3px;
  margin-top: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s, margin 0.55s var(--bn-ease);
}
.bn-bar u { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; }
/* The bar is only the clock that hands over to the next step: never shown. */
.bn-bar { height: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .bn.is-live .bn-item.is-active .bn-bar u { animation: bnBar var(--bn-dur) linear both; }
  .bn.is-paused .bn-item.is-active .bn-bar u { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .bn-bar { display: none; } }
@keyframes bnBar { to { transform: scaleX(1); } }

/* ----------------------------------------------------------------- stage */

.bn-stage {
  position: relative;
  min-height: 480px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.bn-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bn-glow i {
  position: absolute;
  width: 72%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent);
  filter: blur(10px);
}
.bn-glow i:nth-child(1) { right: -20%; top: -28%; }
.bn-glow i:nth-child(2) { left: -24%; bottom: -32%; opacity: 0.65; }
@media (prefers-reduced-motion: no-preference) {
  .bn-glow i:nth-child(1) { animation: bnDrift 17s ease-in-out infinite alternate; }
  .bn-glow i:nth-child(2) { animation: bnDrift 23s ease-in-out -6s infinite alternate-reverse; }
}
@keyframes bnDrift { to { transform: translate(-12%, 10%) scale(1.12); } }

/* The island: a capsule of liquid glass. A frosted, saturated lens over the
   dot grid, a lit rim drawn by a masked gradient, and a soft inner glow. */
.bn-island {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border-radius: 99px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--paper-raised) 38%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.04);
  backdrop-filter: blur(20px) saturate(190%) brightness(1.04);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -6px 14px -8px rgba(255, 255, 255, 0.35),
    0 12px 30px -14px rgba(10, 10, 14, 0.45);
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.bn-island::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
[data-theme="dark"] .bn-island {
  background: color-mix(in srgb, #fff 9%, transparent);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -6px 14px -8px rgba(255, 255, 255, 0.12), 0 14px 34px -14px rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] .bn-island::before { opacity: 0.45; }
.bn-island-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 65%, transparent); }
.bn-island-text { display: inline-block; }
.bn-island-text.is-swap { animation: bnSwap 0.55s var(--bn-ease) both; }
@keyframes bnSwap { from { opacity: 0; filter: blur(6px); transform: translateY(5px); } to { opacity: 1; filter: none; transform: none; } }

.bn-scene {
  position: absolute;
  inset: 56px 0 44px;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(10px);
  filter: blur(10px);
  transition: opacity 0.45s var(--bn-ease), transform 0.7s var(--bn-ease), filter 0.5s var(--bn-ease), visibility 0s 0.5s;
}
.bn-scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition: opacity 0.55s 0.12s var(--bn-ease), transform 0.8s 0.12s var(--bn-ease), filter 0.6s 0.12s var(--bn-ease), visibility 0s;
}

.bn-dots {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bn-dots i {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  transition: width 0.5s var(--bn-spring), background 0.3s;
}
.bn-dots i.is-on { width: 22px; background: var(--accent); }

/* A raised glass card, shared by the scenes (fq-card from faq.css). */
.bn .fq-card { width: min(370px, 100%); }

/* ------------------------------------------------ scene 1: the library */

.bn-library { display: grid; justify-items: center; gap: 1.1rem; width: min(400px, 100%); }
.bn-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; width: 100%; }
.bn-book {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.15rem;
  aspect-ratio: 4 / 4.6;
  padding: 0.75rem 0.7rem;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    var(--bn-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 0.5px var(--bn-edge), 0 16px 34px -22px rgba(10, 10, 14, 0.5);
}
.bn-book-mark { position: absolute; top: 0.45rem; left: 0.7rem; font-size: 1.6rem; line-height: 1; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.bn-book b { font: 650 0.78rem/1.15 var(--display); letter-spacing: -0.015em; }
.bn-book small { font-size: 0.64rem; color: var(--ink-faint); }
.bn-lock {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper-raised) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 0.5px var(--bn-edge);
  color: var(--ink-soft);
}
.bn-lock svg { width: 13px; height: 13px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bn-lock rect { fill: currentColor; stroke: none; }
.bn-shackle { transform-origin: 11px 7px; }
.bn-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.82rem/1 var(--sans);
}
.bn-count { font: 650 1.05rem/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------- scene 2: the lesson */

.bn-lesson { position: relative; width: min(296px, 62%); margin-right: 9.5rem; }
.bn-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px var(--bn-edge), 0 30px 60px -28px rgba(10, 10, 14, 0.6);
}
.bn-board i { position: relative; display: block; background: var(--sq-light, #ecdab9); }
.bn-board i.d { background: var(--sq-dark, #c5a076); }
.bn-board img { position: absolute; inset: 4%; width: 92%; height: 92%; }
/* Last-move squares, lit once the pawn has moved. */
.bn-board i.is-from::after,
.bn-board i.is-to::after { content: ""; position: absolute; inset: 0; background: rgba(245, 211, 74, 0.5); opacity: 1; }
.bn-board .bn-mover { z-index: 2; }
.bn-arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bn-arrow path { fill: none; stroke: color-mix(in srgb, #2f8f4e 88%, transparent); stroke-width: 0.2; stroke-linecap: round; }
.bn-arrow .bn-arrow-head { fill: color-mix(in srgb, #2f8f4e 88%, transparent); stroke: none; }
.bn-bubble {
  position: absolute;
  left: calc(100% + 14px);
  bottom: 22%;
  width: 200px;
  padding: 0.75rem 0.85rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper-raised) 62%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 0.5px var(--bn-edge), 0 24px 44px -20px rgba(10, 10, 14, 0.55);
}
[data-theme="dark"] .bn-bubble { background: color-mix(in srgb, var(--paper-raised) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 0.5px var(--bn-edge), 0 24px 44px -20px rgba(0, 0, 0, 0.8); }
.bn-bubble-move { display: inline-block; margin-bottom: 0.3rem; padding: 0.22rem 0.42rem; border-radius: 6px; background: var(--accent); color: #fff; font: 700 0.7rem/1 var(--sans); }
.bn-bubble p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink); }

/* ---------------------------------------------- scene 3: the review */

.bn-review-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.bn-review-top b { display: block; font: 650 1.05rem/1.1 var(--display); letter-spacing: -0.025em; }
.bn-review-top small { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--ink-faint); }
.bn-acc { position: relative; width: 54px; height: 54px; }
.bn-acc svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bn-acc-track { fill: none; stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 4; }
.bn-acc-ring { fill: none; stroke: #81b64c; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 16.7; }
.bn-acc-num { position: absolute; inset: 0; display: grid; place-items: center; font: 650 0.95rem/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; counter-reset: acc var(--bn-acc); }
.bn-acc-num::after { content: counter(acc); }
.bn-eval { display: block; width: 100%; height: 84px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); overflow: visible; }
.bn-eval-mid { stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.bn-eval-area { fill: color-mix(in srgb, var(--ink) 8%, transparent); }
.bn-eval-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bn-eval-dot { fill: #e6912c; stroke: var(--paper-raised); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.bn-turn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; margin-top: 0.8rem; font-size: 0.8rem; font-weight: 600; }
.bn-turn em { font-style: normal; font-size: 0.74rem; font-weight: 600; color: #4c8f2c; }
[data-theme="dark"] .bn-turn em { color: #95c96a; }
.bn-tag { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font: 800 0.7rem/1 var(--sans); }
.bn-tag--mistake { background: #e6912c; }
.bn-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 0.5px solid var(--bn-edge); }
.bn-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem 0.3rem 0.3rem; border-radius: 99px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }
.bn-chip i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #fff; font: 800 0.6rem/1 var(--sans); font-style: normal; }

/* ------------------------------------------------ scene 4: the week */

.bn-week-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.bn-week-top b { display: block; font: 650 1.05rem/1.1 var(--display); letter-spacing: -0.025em; }
.bn-week-top small { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--ink-faint); }
.bn-streak { counter-reset: st var(--bn-streak); font-variant-numeric: tabular-nums; }
.bn-streak::after { content: counter(st); }
.bn-flame { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.bn-flame svg { width: 22px; height: 22px; fill: currentColor; transform-origin: 50% 90%; }
.bn-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
.bn-days span { display: grid; justify-items: center; gap: 0.3rem; font-size: 0.66rem; font-weight: 600; color: var(--ink-faint); }
.bn-days i {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 34px;
  border-radius: 10px;
  background: var(--accent);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.bn-days i::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 34%; height: 18%;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.bn-xp { margin-top: 1.1rem; padding-top: 0.95rem; border-top: 0.5px solid var(--bn-edge); }
.bn-xp-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
.bn-xp-top small { font-size: 0.7rem; color: var(--ink-faint); font-weight: 600; }
.bn-level { display: inline-grid; perspective: 400px; transform-style: preserve-3d; }
.bn-level b {
  grid-area: 1 / 1;
  padding: 0.32rem 0.5rem;
  border-radius: 7px;
  font: 700 0.72rem/1 var(--sans);
  backface-visibility: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.bn-level b:last-child { transform: rotateX(180deg); background: var(--ink); color: var(--paper); }
.bn-xp-bar { position: relative; display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.bn-xp-bar u { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0.14); }
.bn-due { display: flex; align-items: center; gap: 0.45rem; margin: 0.9rem 0 0; font-size: 0.72rem; color: var(--ink-faint); }
.bn-due-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }

/* ------------------------------------------- scene 5: the settings */

.bn-settings { width: min(360px, 100%); }
.bn-group {
  border-radius: 18px;
  overflow: hidden;
  background: var(--bn-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 0.5px var(--bn-edge), 0 30px 60px -30px rgba(10, 10, 14, 0.5);
}
.bn-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.78rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 500;
}
.bn-row:first-child { grid-template-columns: 28px 1fr auto 14px; }
.bn-row + .bn-row::before { content: ""; position: absolute; top: 0; left: 3.3rem; right: 0; height: 0.5px; background: var(--bn-edge); }
.bn-row em { font-style: normal; color: var(--ink-faint); font-weight: 500; }
.bn-row-chev { width: 14px; height: 14px; fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bn-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 1rem; line-height: 1; }
.bn-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bn-ico--grey { background: #8e8e93; }
.bn-ico--ok { background: var(--ok, #34c759); }
.bn-kept { color: var(--ok) !important; font-weight: 600 !important; }

/* The iOS switch, turning off: the knob slides, the green drains away. */
.bn-switch {
  position: relative;
  width: 46px; height: 28px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.bn-switch i {
  position: absolute;
  top: 2px; left: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.bn-settings-note { margin: 0.7rem 0 0 1rem; font-size: 0.74rem; color: var(--ink-faint); }

/* ------------------------------------------------- the choreography */

@media (prefers-reduced-motion: no-preference) {
  /* 1. Library: the covers rise in, each lock springs open and fades,
        then the count rolls up in the pill. */
  .bn-scene.is-active .bn-book { animation: bnTile 0.75s calc(0.15s + var(--n, 0) * 0.07s) var(--bn-spring) both; }
  .bn-scene.is-active .bn-shackle { animation: bnShackle 0.55s calc(0.9s + var(--n, 0) * 0.12s) var(--bn-spring) both; }
  .bn-scene.is-active .bn-lock { animation: bnUnlock 0.5s calc(1.45s + var(--n, 0) * 0.12s) var(--bn-ease) both; }
  .bn-scene.is-active .bn-pill { animation: bnPop 0.6s 2.1s var(--bn-spring) both; }

  /* 2. Lesson: the arrow draws c7–c6, the pawn makes the move, the
        reason rises beside the board. */
  .bn-scene.is-active .bn-arrow path:first-child { stroke-dasharray: 1.2; animation: bnDraw 0.6s 0.55s var(--bn-ease) both; }
  .bn-scene.is-active .bn-arrow { animation: bnFadeOut 0.4s 1.9s var(--bn-ease) both; }
  .bn-scene.is-active .bn-arrow-head { animation: bnPop 0.35s 1s var(--bn-spring) both; transform-box: fill-box; transform-origin: center; }
  .bn-scene.is-active .bn-mover img { animation: bnMove 0.55s 1.55s var(--bn-ease) both; }
  .bn-scene.is-active .bn-board i.is-from::after,
  .bn-scene.is-active .bn-board i.is-to::after { animation: bnFade 0.3s 1.8s both; }
  .bn-scene:not(.is-active) .bn-board i::after { opacity: 0; }
  .bn-scene.is-active .bn-bubble { animation: bnRise 0.75s 2.05s var(--bn-ease) both; }

  /* 3. Review: the eval line draws, the turning point drops in, the
        ring sweeps while accuracy counts up, the chips follow. */
  .bn-scene.is-active .bn-eval-line { animation: bnLine 1.6s 0.3s var(--bn-ease) both; }
  .bn-scene.is-active .bn-eval-area { animation: bnFade 0.8s 1s var(--bn-ease) both; }
  .bn-scene.is-active .bn-eval-dot { animation: bnPop 0.5s 1.05s var(--bn-spring) both; }
  .bn-scene.is-active .bn-acc-ring { animation: bnRing 1.6s 0.4s var(--bn-ease) both; }
  .bn-scene.is-active .bn-acc-num { animation: bnAcc 1.6s 0.4s var(--bn-ease) both; }
  .bn-scene.is-active .bn-turn { animation: bnRise 0.6s 1.45s var(--bn-ease) both; }
  .bn-scene.is-active .bn-chip { animation: bnPop 0.5s calc(1.8s + var(--n, 0) * 0.1s) var(--bn-spring) both; }

  /* 4. Week: the days light one by one as the streak counts to seven, the
        XP bar fills and the level turns over. */
  .bn-scene.is-active .bn-days i { animation: bnDay 0.5s calc(0.3s + var(--n, 0) * 0.13s) var(--bn-spring) both; }
  .bn-scene.is-active .bn-streak { animation: bnStreak 0.95s 0.3s steps(7, end) both; }
  .bn-scene.is-active .bn-flame svg { animation: bnFlicker 0.6s 1.25s var(--bn-spring) both; }
  .bn-scene.is-active .bn-xp-bar u { animation: bnXp 2s 1.2s var(--bn-ease) both; }
  .bn-scene.is-active .bn-level { animation: bnFlip 0.8s 2.15s var(--bn-ease) both; }
  .bn-scene.is-active .bn-due { animation: bnRise 0.6s 2.6s var(--bn-ease) both; }

  /* 5. Settings: the rows settle, the renewal switch turns off, the
        records row ticks "Kept". */
  .bn-scene.is-active .bn-row { animation: bnRise 0.6s calc(0.2s + var(--n, 0) * 0.09s) var(--bn-ease) both; }
  .bn-scene.is-active .bn-switch { animation: bnSwitchBg 0.45s 1.25s var(--bn-ease) both; }
  .bn-scene.is-active .bn-switch i { animation: bnKnob 0.5s 1.2s var(--bn-spring) both; }
  .bn-scene.is-active .bn-kept { animation: bnPop 0.5s 1.75s var(--bn-spring) both; }
  .bn-scene.is-active .bn-settings-note { animation: bnRise 0.6s 2s var(--bn-ease) both; }
}

/* Without motion: the end of each scene. */
@media (prefers-reduced-motion: reduce) {
  .bn-scene { transition: none; filter: none; transform: none; }
  .bn-lock, .bn-arrow { opacity: 0; }
  .bn-mover img { transform: translateY(108.7%); }
  .bn-level { transform: rotateX(180deg); }
  .bn-xp-bar u { transform: scaleX(0.14); }
}

@keyframes bnTile { from { opacity: 0; transform: translateY(16px) scale(0.92); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bnShackle { 0% { transform: none; } 100% { transform: translateY(-2.4px) rotate(28deg); } }
@keyframes bnUnlock { to { opacity: 0; transform: scale(0.6); } }
@keyframes bnPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes bnRise { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bnFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes bnDraw { from { stroke-dashoffset: 1.2; } to { stroke-dashoffset: 0; } }
@keyframes bnMove { from { transform: none; } to { transform: translateY(108.7%); } }
@keyframes bnLine { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bnRing { from { stroke-dashoffset: 119.4; } to { stroke-dashoffset: 16.7; } }
@keyframes bnAcc { from { --bn-acc: 0; } to { --bn-acc: 86; } }
@keyframes bnStreak { from { --bn-streak: 0; } to { --bn-streak: 7; } }
@keyframes bnDay { from { opacity: 0.15; transform: scale(0.55); filter: saturate(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bnFlicker { 0% { transform: scale(1); } 45% { transform: scale(1.28) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes bnXp {
  0%   { transform: scaleX(0.62); }
  45%  { transform: scaleX(1); }
  52%  { transform: scaleX(1); opacity: 1; }
  56%  { transform: scaleX(0); opacity: 0.4; }
  100% { transform: scaleX(0.14); opacity: 1; }
}
@keyframes bnFlip { from { transform: rotateX(0); } to { transform: rotateX(180deg); } }
@keyframes bnSwitchBg { from { background: var(--ok, #34c759); } to { background: color-mix(in srgb, var(--ink) 14%, transparent); } }
@keyframes bnKnob { from { transform: translateX(18px); } to { transform: none; } }

/* --------------------------------------------------------------- phones */

@media (max-width: 860px) {
  .bn-body { grid-template-columns: 1fr; }
  .bn-stage { order: -1; min-height: 470px; }
}
@media (max-width: 420px) {
  .bn-stage { min-height: 530px; border-radius: 24px; }
  .bn-scene { padding: 1rem; }
  .bn-lesson { width: 82%; margin-right: 0; }
  .bn-bubble { position: relative; left: auto; bottom: auto; width: 92%; margin: -1.4rem auto 0; }
  .bn-q { padding: 0.85rem 1rem; }
}