/* Flowspace — motion.css
   Three levels of motion, never more than the task needs:
   1 micro (100–250 ms): presses, checks, count-ups
   2 transitions (250–500 ms): pages, modals, flashcards, note changes
   3 ambient (5–60 s): orbs, particles, breathing ring, clock
   Study atmosphere (body[data-atmos]): off · minimal · calm · flow.
   prefers-reduced-motion switches every animation off. */

:root {
  --mo-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mo-fast: 160ms;
  --mo-mid: 380ms;
  --mo-accent: 124, 58, 237;          /* violet */
  --mo-warm: 245, 158, 11;            /* amber */
  --mo-orb-alpha: .07;
}
.dark { --mo-orb-alpha: .09; }

/* ---------- Level 1: micro interactions ---------- */
.dash-act, .nav-btn, .ne-btn, .lab-grade, .pd-card, .seg button, .theme-switch, .mo-btn { transition: transform var(--mo-fast) var(--mo-ease), background-color var(--mo-fast), border-color var(--mo-fast), color var(--mo-fast); }
.dash-act:active, .nav-btn:active, .ne-btn:active, .lab-grade:active, .pd-card:active, .seg button:active, .theme-switch:active, .mo-btn:active { transform: scale(.97); }

/* numbers that count up keep their width steady */
.mo-counting { font-variant-numeric: tabular-nums; }

/* task completion: the card breathes in once and a check draws itself */
.k-card.mo-done { position: relative; animation: moPress .42s var(--mo-ease); }
.mo-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; pointer-events: none; animation: moFadeAway 1.8s ease forwards; }
.mo-check circle { fill: rgba(16,185,129,.14); }
.mo-check path { fill: none; stroke: #10b981; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; animation: moDraw .45s .08s var(--mo-ease) forwards; }
@keyframes moPress { 0% { transform: scale(1); } 40% { transform: scale(.985); } 100% { transform: scale(1); } }
@keyframes moDraw { to { stroke-dashoffset: 0; } }
@keyframes moFadeAway { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Level 2: transitions ---------- */
/* page switch: the content settles in, the sidebar and header stay put */
.mo-enter > * { animation: moSettle var(--mo-mid) var(--mo-ease) both; animation-delay: calc(var(--mo-i, 0) * 60ms); }
.mo-enter-fade { animation: moFade .28s ease both; }
@keyframes moSettle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes moFade { from { opacity: 0; } to { opacity: 1; } }

/* modals open with a small lift (only on open, not on every re-render) */
.mo-open > * { animation: moModal .26s var(--mo-ease) both; }
@keyframes moModal { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* AI thinking: three dots that bob, instead of a spinner */
.mo-think { display: inline-flex; align-items: center; gap: 5px; height: 14px; vertical-align: middle; }
.mo-think i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mo-accent)); opacity: .35; animation: moBob 1.2s ease-in-out infinite; }
.mo-think i:nth-child(2) { animation-delay: .15s; } .mo-think i:nth-child(3) { animation-delay: .3s; }
.mo-think.is-big { gap: 8px; height: 40px; } .mo-think.is-big i { width: 10px; height: 10px; }
.lab-steps li.is-active b .mo-think { margin-left: 8px; }
@keyframes moBob { 0%, 100% { transform: translateY(0); opacity: .3; } 40% { transform: translateY(-5px); opacity: .9; } }

/* a new AI note is revealed section by section */
.mo-reveal > * { animation: moSettle .5s var(--mo-ease) both; animation-delay: calc(var(--mo-i, 0) * 45ms); }

/* after "Rebuild with AI", what changed glows briefly */
.mo-changed { animation: moChanged 1.6s ease both; border-radius: 8px; }
@keyframes moChanged { 0% { opacity: .6; background: rgba(var(--mo-accent), .14); box-shadow: 0 0 0 6px rgba(var(--mo-accent), .14); } 50% { opacity: 1; } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }

/* flashcards: a real flip, then mastered cards leave right, review cards drop back into the stack */
.lab-rv-stage { perspective: 1400px; }
.lab-rv-card.mo-flip-out { animation: moFlipOut .16s ease-in forwards; }
.lab-rv-card.mo-flip-in { animation: moFlipIn .3s var(--mo-ease) both; }
.lab-rv-card.mo-out-right { animation: moOutRight .28s ease-in forwards; }
.lab-rv-card.mo-out-back { animation: moOutBack .28s ease-in forwards; }
.lab-rv-card.mo-in { animation: moCardIn .36s var(--mo-ease) both; }
@keyframes moFlipOut { to { transform: rotateY(90deg); opacity: .6; } }
@keyframes moFlipIn { from { transform: rotateY(-90deg); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes moOutRight { to { transform: translateX(80px) rotate(3deg); opacity: 0; } }
@keyframes moOutBack { to { transform: translateY(14px) scale(.94); opacity: 0; } }
@keyframes moCardIn { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Level 3: ambient ---------- */
/* huge soft orbs drifting over 40–60 s, with pauses; radial gradients instead of blur filters */
.glow-bg .orb { display: block; position: absolute; border-radius: 50%; opacity: 0; transition: opacity 2s ease; will-change: transform; }
.glow-bg .o1 { width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(var(--mo-accent), var(--mo-orb-alpha)), transparent 62%); animation: moDrift1 52s ease-in-out infinite; }
.glow-bg .o2 { width: 60vmax; height: 60vmax; right: -22vmax; bottom: -28vmax; background: radial-gradient(circle, rgba(236,72,153, calc(var(--mo-orb-alpha) * .8)), transparent 62%); animation: moDrift2 61s ease-in-out infinite; }
.glow-bg .o3 { width: 48vmax; height: 48vmax; left: 35vw; top: 30vh; background: radial-gradient(circle, rgba(var(--mo-warm), calc(var(--mo-orb-alpha) * .6)), transparent 62%); animation: moDrift3 44s ease-in-out infinite; }
.glow-bg .o4 { display: none; }
.dark .glow-bg .o3 { background: radial-gradient(circle, rgba(59,130,246, calc(var(--mo-orb-alpha) * .7)), transparent 62%); }
.dark .glow-bg::before { display: none; }
@keyframes moDrift1 { 0%, 12% { transform: translate(0, 0); } 45%, 55% { transform: translate(9vw, 7vh); } 88%, 100% { transform: translate(0, 0); } }
@keyframes moDrift2 { 0%, 10% { transform: translate(0, 0); } 40%, 52% { transform: translate(-8vw, -6vh); } 90%, 100% { transform: translate(0, 0); } }
@keyframes moDrift3 { 0%, 15% { transform: translate(0, 0) scale(1); } 50%, 60% { transform: translate(-6vw, 5vh) scale(1.08); } 100% { transform: translate(0, 0) scale(1); } }
body[data-atmos="calm"] .glow-bg .orb, body[data-atmos="flow"] .glow-bg .orb { opacity: 1; }
body[data-atmos="flow"] { --mo-orb-alpha: .1; }
.dark body[data-atmos="flow"] { --mo-orb-alpha: .12; }
/* reading and writing get a quieter room */
body.mo-quiet .glow-bg .orb { opacity: .45; }

/* dust particles (Flow only) */
#mo-dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
body[data-atmos="flow"]:not(.mo-quiet) #mo-dust { opacity: 1; }

/* the clock's colon breathes once a second */
#mo-clock { display: none; }
body.mo-clock #mo-clock { display: block; }
body.mo-clock #topbar-time { display: none; }
.mo-colon { display: inline-block; animation: moColon 1s ease-in-out infinite; }
@keyframes moColon { 0% { opacity: 1; } 45% { opacity: .35; } 100% { opacity: 1; } }

/* breathing ring behind the Focus Tools display (about 6 breaths a minute) */
.mo-ring-host { position: relative; isolation: isolate; }
.mo-breath { position: absolute; left: 50%; top: 50%; width: min(78vw, 520px); aspect-ratio: 1; margin: calc(min(78vw, 520px) / -2) 0 0 calc(min(78vw, 520px) / -2); border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1s ease;
  background: radial-gradient(circle, transparent 54%, rgba(var(--mo-accent), .22) 56%, rgba(var(--mo-accent), .08) 64%, transparent 70%); }
.mo-breath.is-on { opacity: 1; animation: moBreathe 10s ease-in-out infinite; }
.mo-sweep { position: absolute; left: 50%; top: 50%; width: min(70vw, 460px); aspect-ratio: 1; margin: calc(min(70vw, 460px) / -2) 0 0 calc(min(70vw, 460px) / -2); border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background: conic-gradient(from 0deg, rgba(var(--mo-accent), .3), transparent 25%); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 69%, transparent 70%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 69%, transparent 70%); }
.mo-sweep.is-on { opacity: 1; animation: moSpin 60s linear infinite; }
body[data-atmos="off"] .mo-breath, body[data-atmos="minimal"] .mo-breath, body[data-atmos="off"] .mo-sweep { display: none; }
@keyframes moBreathe { 0% { transform: scale(.9); opacity: .35; } 40% { transform: scale(1.04); opacity: 1; } 50% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(.9); opacity: .35; } }
@keyframes moSpin { to { transform: rotate(360deg); } }

/* session complete: a small burst, not confetti */
.mo-burst { position: fixed; z-index: 120; width: 0; height: 0; pointer-events: none; }
.mo-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mo-accent)); animation: moBurst .95s var(--mo-ease) forwards; }
.mo-burst i:nth-child(3n) { background: #ec4899; } .mo-burst i:nth-child(4n) { background: #f59e0b; width: 4px; height: 4px; }
@keyframes moBurst { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; } }

/* ---------- Study atmosphere picker (Focus Tools) ---------- */
.mo-atmos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-top: 12px; border-radius: 12px; background: var(--tint); }
.mo-atmos button { padding: 7px 4px; border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.mo-atmos button.is-on { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mo-atmos-desc { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--text-muted); min-height: 2.9em; }

/* ---------- Focus Mode ---------- */
.mo-focus-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--text-main); border: 1px solid var(--border-color); background: var(--bg-card); }
.mo-focus-btn:hover { border-color: rgba(var(--mo-accent), .5); }
.mo-focus-btn svg { width: 15px; height: 15px; color: rgb(var(--mo-accent)); }
@media (max-width: 640px) { .mo-focus-btn span { display: none; } .mo-focus-btn { padding: 0 9px; } }

#mo-focus { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px;
  background: color-mix(in srgb, var(--bg-app) 86%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--text-main); opacity: 0; transition: opacity .5s ease; }
#mo-focus.is-open { opacity: 1; }
#mo-focus[hidden] { display: none; }
body.mo-focusing #sidebar, body.mo-focusing > main { filter: saturate(.6); }
.mo-f-top { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mo-f-label { font: 700 10px/1 Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--mo-accent)); }
.mo-f-x { width: 36px; height: 36px; border-radius: 12px; background: var(--tint); font-size: 15px; color: var(--text-muted); }
.mo-f-x:hover { color: var(--text-main); }
.mo-f-dial { position: relative; width: min(74vw, 340px); aspect-ratio: 1; display: grid; place-items: center; }
.mo-f-dial svg.mo-f-arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mo-f-arc circle { fill: none; stroke-width: 1.2; }
.mo-f-arc .bg { stroke: var(--border-color); }
.mo-f-arc .fg { stroke: rgb(var(--mo-accent)); stroke-linecap: round; transition: stroke-dashoffset .9s linear; }
.mo-f-dial .mo-breath { width: 118%; margin: -59% 0 0 -59%; }
.mo-f-time { font: 700 clamp(52px, 13vw, 84px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mo-f-state { font-size: 12px; color: var(--text-muted); margin-top: 8px; text-align: center; }
.mo-f-task { font-size: 16px; font-weight: 600; text-align: center; max-width: 34ch; text-wrap: balance; }
.mo-f-meta { font-size: 12px; color: var(--text-muted); margin-top: -10px; }
.mo-f-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mo-f-ctl button { height: 38px; padding: 0 16px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); }
.mo-f-ctl button.is-primary { background: rgb(var(--mo-accent)); border-color: rgb(var(--mo-accent)); color: #fff; }
.mo-f-done { text-align: center; animation: moSettle .5s var(--mo-ease) both; }
.mo-f-done b { display: block; font-size: 44px; line-height: 1; color: #10b981; }
.mo-f-done h3 { font-size: 22px; font-weight: 700; margin-top: 10px; }
.mo-f-done p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.mo-f-bottom { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(360px, calc(100% - 32px)); }
.mo-f-bottom .mo-atmos { margin-top: 0; }

/* ---------- reduced motion: a static app ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-enter > *, .mo-enter-fade, .mo-open > *, .mo-reveal > *, .mo-changed, .k-card.mo-done, .mo-check path, .mo-colon, .mo-think i,
  .lab-rv-card.mo-flip-out, .lab-rv-card.mo-flip-in, .lab-rv-card.mo-out-right, .lab-rv-card.mo-out-back, .lab-rv-card.mo-in, .mo-f-done { animation: none !important; }
  .mo-check path { stroke-dashoffset: 0; }
  .glow-bg .orb { animation: none !important; }
  .mo-breath, .mo-sweep, #mo-dust, .mo-burst { display: none !important; }
  #mo-focus { transition: none; }
}