/* Gir, motion and feedback, round 2 (2026-11-15): screens, presses, the board.
   One curve (--ease from app.css), durations 120 / 200 / 300, and 340 for the page push. Reduced motion and the
   in-app switch (app.css) turn every duration to 1ms, so nothing here needs its own off switch. */
:root { --t-page: 340ms; --ease-in: cubic-bezier(.4, 0, 1, 1); }

/* ---------- screens ----------
   Forward pushes in from the left (Hebrew reads right to left, so "next" is to the left), back comes from the
   right, tabs cross-fade with a small rise. The nav (rail, tab bar) and its moving pill stay put. */
::view-transition-group(*) { animation-duration: var(--t-page); animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: var(--t2) var(--ease-in) both vt-fade-out; }
::view-transition-new(root) { animation: var(--t-page) var(--ease) both vt-fade-in; }
html[data-dir="forward"]::view-transition-old(root) { animation-name: vt-out-fwd; }
html[data-dir="forward"]::view-transition-new(root) { animation-name: vt-in-fwd; }
html[data-dir="back"]::view-transition-old(root) { animation-name: vt-out-back; }
html[data-dir="back"]::view-transition-new(root) { animation-name: vt-in-back; }
html[data-dir="side"]::view-transition-new(root) { animation-name: vt-rise; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-out-fwd { to { opacity: 0; transform: translateX(28px) scale(.99); } }
@keyframes vt-in-fwd { from { opacity: 0; transform: translateX(-36px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(-28px) scale(.99); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(36px); } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(10px); } }
.rail { view-transition-name: rail; }
.tabbar { view-transition-name: tabbar; }

/* The title you tapped (the next lesson, a lesson row, a topic bar) grows into the title of the page it opens.
   app.js puts .vt-hero on the tapped title just before the page changes; the new page's h1 carries the same name. */
.vt-hero { view-transition-name: hero-title; }
.lesson-head h1, .head h1 { view-transition-name: hero-title; }
::view-transition-old(hero-title), ::view-transition-new(hero-title) { height: 100%; object-fit: none; object-position: right center; }

/* ---------- the active nav item: a pill that slides to the tab you chose ---------- */
.nav a, .tabbar a { position: relative; isolation: isolate; }
.nav a[aria-current="page"] { background: transparent; }
.nav .ind { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-m); background: var(--board-soft); view-transition-name: nav-ind; }
.tabbar .ind { position: absolute; z-index: -1; top: 4px; inset-inline: calc(50% - 32px); height: 32px; border-radius: 999px; background: var(--board-soft); view-transition-name: tab-ind; }
.tabbar a[aria-current="page"] .ic { animation: pop var(--t2) var(--ease); }

/* ---------- presses ----------
   Everything already goes down when pressed (app.css). Choices also pop when chosen, and the faces nod. */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }
.pick.pop, .seg3 button.pop, .overall button.pop { animation: pop var(--t2) var(--ease); }
.overall button.pop svg { animation: pop-face 300ms var(--ease); }
@keyframes pop-face { 40% { transform: scale(1.18) rotate(-6deg); } }
.btn.primary:active, .btn.chalk:active { transform: translateY(1px) scale(.97); }

/* ---------- lists come in one row after another ---------- */
.list > li { animation: rise var(--t3) var(--ease) both; }
.list > li:nth-child(2) { animation-delay: 30ms; }
.list > li:nth-child(3) { animation-delay: 60ms; }
.list > li:nth-child(4) { animation-delay: 90ms; }
.list > li:nth-child(5) { animation-delay: 120ms; }
.list > li:nth-child(6) { animation-delay: 150ms; }
.list > li:nth-child(7) { animation-delay: 180ms; }
.list > li:nth-child(8) { animation-delay: 210ms; }
.list > li:nth-child(n+9) { animation-delay: 240ms; }
.saved li { animation: rise var(--t3) var(--ease) both; animation-delay: 500ms; }
.saved li:nth-child(2) { animation-delay: 560ms; }
.saved li:nth-child(3) { animation-delay: 620ms; }

/* ---------- answers slide in when shown ---------- */
.qs:not(.hidden-answers) .a, .reveal[open] > :not(summary), .reveal-in { animation: answer-in var(--t2) var(--ease) both; }
@keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- the next lesson, written on a board ----------
   The home screen's one focal point is a small classroom board: deep green, chalk-white title, and the yellow chalk
   line drawing itself under it. The same board as the dark theme and the teaching mode. */
.next {
  --board-bg: #23463b; --chalk-ink: #eef3f0; --chalk-dim: #b8cbc2;
  background-color: var(--board-bg);
  background-image: radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, .055), transparent 60%);
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 rgba(0, 0, 0, .12), var(--shadow-2);
  color: var(--chalk-ink);
  overflow: hidden;
}
:root[data-theme="dark"] .next { --board-bg: #21392f; border-color: #2f4a3f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .next { --board-bg: #21392f; border-color: #2f4a3f; } }
.next .k { color: var(--chalk); }
.next h2 { color: var(--chalk-ink); }
.next .meta, .next .acts { color: var(--chalk-dim); }
.next .board-line { height: 14px; margin: -2px 0 10px; max-width: 320px; }
.next .board-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.next .board-line .chalk-draw { animation-delay: 250ms; }
.btn.chalk { --bg: #f3f6f4; --fg: #1c2925; --bd: transparent; min-height: 50px; padding: 0 24px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.btn.chalk:hover { --bg: #ffffff; }
@media (hover: none) { .btn.chalk:hover { --bg: #f3f6f4; } }
@media (max-width: 700px) { .next .btn.chalk { width: 100%; } }

/* ---------- the year chart: bars grow from their first month, today's chalk line draws itself down ---------- */
.chart .tb { transform-origin: right center; animation: bar-in 600ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
@keyframes bar-in { from { opacity: 0; transform: scaleX(.2); } }
.chart .tb .fill { transform-origin: right center; animation: grow 900ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 500ms); }
.chart .now-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 800ms var(--ease) 700ms forwards; }
.chart .now .lbl { animation: rise var(--t3) var(--ease) 1.2s both; }

/* ---------- the lesson timeline ----------
   Its parts grow in turn; it stays at the top while the lesson is read, and marks the part being read. */
.tl a { transform-origin: right center; animation: bar-in 450ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 100ms);
  transition: border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), transform var(--t1) var(--ease); }
.tl a.on { border-color: var(--board); box-shadow: inset 0 -3px 0 var(--board); }
.tl-sentinel { height: 1px; }
.timeline { position: sticky; top: env(safe-area-inset-top); z-index: 15; padding: 10px 0 6px; margin-top: 22px; background: var(--paper); transition: box-shadow var(--t2) var(--ease); }
.timeline.stuck { box-shadow: 0 12px 14px -14px rgba(24, 48, 40, .5); }
.timeline.stuck .tl-legend { display: none; }
.seg { scroll-margin-top: 90px; }

/* ---------- teaching mode ----------
   A part slides in from the side it comes from; the ring breathes in the last ten seconds. */
.present .seg-back { animation: seg-back var(--t3) var(--ease); }
@keyframes seg-back { from { opacity: 0; transform: translateX(16px); } }
.present .clock .ring.soon { animation: breathe 1s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.present .dots i { transition: background var(--t2) var(--ease), transform var(--t2) var(--ease); }
.present .dots i.on { transform: scaleY(1.4); }