/* Motion — classes set by js/ui/motion.js (afterRender, stampOut, syncNav, markFabOpen) and by main.js (.view-enter, .dir-back).
   Only transform and opacity animate. Entrance animations use fill-mode `backwards`: at rest every element is fully visible,
   and nothing waits at opacity 0 for JS (classes are added synchronously before the first paint).
   - .view-enter     whole view: a short fade on navigation (direction: .dir-back on browser back/forward)
   - .w-enter        widget entrance, staggered by --wi (0…7) × --stagger, direction-aware via --dir
   - .ev-enter       calendar blocks / agenda rows / month pills in time order (--ei)
   - .greet-btn.is-entering  greeting letters arrive (--li)
   - progress, week-strip bars, chart bars, rings grow inside an entering widget
   - .is-stamping / .stamp / .is-leaving   the "Odbyta" ink seal, then the row leaves (FLIP closes the gap)
   - .nav-ind        sliding active-tab pill (phone) and underline (desktop)
   - html.fab-open   the FAB "+" turns while the add sheet is open
   - html.theme-fade fallback cross-fade when the View Transitions API is missing (js/core/theme.js)
   Shared keyframes: pulse (sync dot, live dot), spin (splash spinner). */
@layer motion {
  .view { --dir: 1; }
  .view.dir-back { --dir: -1; }
  .view.view-enter { animation: view-in 160ms ease-out backwards; }
  @keyframes view-in { from { opacity: 0; } }

  /* ---- widgets ---- */
  .w-enter { animation: w-in var(--t-enter) var(--ease-out) backwards; animation-delay: calc(var(--wi, 0) * var(--stagger)); }
  @keyframes w-in { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 12px), 10px, 0) scale(.985); } }

  /* things that grow inside an entering widget */
  .w-enter .progress > span { animation: grow-x 720ms var(--ease-out) backwards; animation-delay: calc(var(--wi, 0) * var(--stagger) + 140ms); }
  @keyframes grow-x { from { transform: scaleX(0); } }
  .w-enter .ws-bar i { transform-origin: bottom; animation: grow-y 560ms var(--ease-settle) backwards; }
  .w-enter .ws-day:nth-child(1) .ws-bar i { animation-delay: 160ms; } .w-enter .ws-day:nth-child(2) .ws-bar i { animation-delay: 190ms; }
  .w-enter .ws-day:nth-child(3) .ws-bar i { animation-delay: 220ms; } .w-enter .ws-day:nth-child(4) .ws-bar i { animation-delay: 250ms; }
  .w-enter .ws-day:nth-child(5) .ws-bar i { animation-delay: 280ms; } .w-enter .ws-day:nth-child(6) .ws-bar i { animation-delay: 310ms; }
  .w-enter .ws-day:nth-child(7) .ws-bar i { animation-delay: 340ms; }
  @keyframes grow-y { from { transform: scaleY(0); } }
  .w-enter .chart rect { transform-box: fill-box; transform-origin: 50% 100%; animation: grow-y 620ms var(--ease-out) 160ms backwards; }
  .w-enter .ring svg { animation: ring-in 760ms var(--ease-out) 120ms backwards; }
  @keyframes ring-in { from { opacity: 0; transform: rotate(-70deg) scale(.9); } }

  /* ---- calendar: blocks in time order ---- */
  .ev-enter { animation: ev-in 300ms var(--ease-out) backwards; animation-delay: calc(120ms + var(--ei, 0) * 28ms); }
  @keyframes ev-in { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); } }

  /* ---- greeting (dashboard) ---- */
  .greet-btn.is-entering .gl { animation: letter-in 420ms var(--ease-out) backwards; animation-delay: calc(60ms + var(--li, 0) * 22ms); }
  @keyframes letter-in { from { opacity: 0; transform: translate3d(0, .35em, 0) rotate(6deg); } }
  .greet-btn.is-entering .greet-mark { animation: mark-in 620ms var(--ease-settle) backwards; }
  @keyframes mark-in { from { opacity: 0; transform: scale(.4) rotate(-40deg); } }
  .gm-rays { transform-box: fill-box; transform-origin: center; animation: rays-turn 40s linear infinite; }
  @keyframes rays-turn { to { transform: rotate(360deg); } }
  .gm-rise { animation: rise 1.1s var(--ease-out) backwards; }
  @keyframes rise { from { transform: translateY(5px); opacity: .2; } }
  .gm-sink { animation: sink 1.1s var(--ease-out) backwards; }
  @keyframes sink { from { transform: translateY(-5px); } }
  .gm-star { transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; }
  .gm-star + .gm-star { animation-delay: 1.4s; }
  @keyframes twinkle { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .25; transform: scale(.6); } }

  /* ---- press feedback ---- */
  :is(.row-btn, .tl-main, .student-card, .ws-day, .ds-day, .chip-btn, .segmented button, .menu-item, .alist button, .alist a, .insight-cta, .stat.card-link, .greet-btn, .role-card, .price-card .btn, .token-chip, .mcell) {
    transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast), border-color var(--t-base), color var(--t-fast);
  }
  :is(.row-btn, .tl-main, .ws-day, .ds-day, .chip-btn, .segmented button, .menu-item, .alist button, .alist a, .stat.card-link, .role-card, .token-chip, .mcell):active { transform: scale(.98); }
  .student-card:active { transform: scale(.985); }
  .tabbar a:active .ico { transform: scale(.86); }

  /* ---- hover (desktop) ---- */
  @media (hover: hover) and (pointer: fine) {
    .tl-item .tl-bar, .ag .ag-bar { transition: transform var(--t-base) var(--ease-settle); }
    .tl-item:hover .tl-bar, .ag:hover .ag-bar { transform: scaleY(1.18); }
    .row-btn:hover .row-ico, .contact:hover .ico { transform: translateX(2px); transition: transform var(--t-base) var(--ease-out); }
    .stat.card-link:hover .stat-value { transform: translateX(-3px); }
    .stat.card-link .stat-value { transition: transform var(--t-base) var(--ease-out); }
    .ws-day:hover:not(.is-today) { transform: translateY(-2px); }
    .more-link::after { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
    .more-link:hover::after { transform: translateX(3px); }
  }

  /* ---- confirm: the ink seal, then the row leaves ---- */
  .is-stamping { position: relative; isolation: isolate; }
  .is-stamping::before {
    content: ""; position: absolute; inset: 0 -6px; z-index: -1; border-radius: var(--r-ctl); background: var(--good-soft); pointer-events: none;
    animation: stamp-wash 560ms var(--ease-out) both;
  }
  @keyframes stamp-wash { from { opacity: 0; } 30% { opacity: 1; } }
  .stamp {
    position: absolute; z-index: 3; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px 6px 8px; border: 2px solid var(--good-ink); border-radius: 10px; color: var(--good-ink); background: var(--surface);
    font-size: var(--fs-mark); font-weight: 700; letter-spacing: var(--ls-mark); text-transform: uppercase; white-space: nowrap; pointer-events: none;
    transform: translate(-50%, -50%) rotate(-8deg); animation: stamp-in 420ms var(--ease-stamp) both;
  }
  @keyframes stamp-in {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-16deg) scale(1.9); }
    55% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(.92); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  }
  .is-leaving { animation: row-leave 200ms ease-in forwards; pointer-events: none; }
  @keyframes row-leave { to { opacity: 0; transform: translate3d(28px, 0, 0); } }

  /* ---- navigation indicator ---- */
  .has-ind { position: relative; }
  .nav-ind { position: absolute; left: 0; pointer-events: none; transform: translateX(var(--x, 0)); transform-origin: left center; }
  .tabbar ul.has-ind a::before { display: none; }
  .tabbar .nav-ind { top: 6px; width: 52px; height: 30px; border-radius: var(--r-pill); background: var(--accent-soft); z-index: 0; }
  .tabbar a { z-index: 1; }
  .mast-nav.has-ind a::after { display: none; }
  .mast-nav .nav-ind { bottom: -1px; width: var(--w, 0); height: 2px; background: var(--ink); }

  /* ---- FAB ---- */
  .tabbar .fab .ico { transition: transform 360ms var(--ease-settle); }
  .fab-open .tabbar .fab .ico { transform: rotate(135deg); }

  /* ---- sheets: content settles after the sheet ---- */
  .overlay.open .sheet-head, .overlay.open .sheet-body > * { animation: sheet-in 380ms var(--ease-spring) backwards; }
  .overlay.open .sheet-head { animation-delay: 40ms; }
  .overlay.open .sheet-body > * { animation-delay: 80ms; }
  @keyframes sheet-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

  /* ---- theme cross-fade (View Transitions API, fallback .theme-fade) ---- */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; animation-timing-function: ease; }
  .theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
    transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, fill 280ms ease, stroke 280ms ease !important;
  }

  /* loops */
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; flex: none; animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  @keyframes spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
    .live-dot, .avbtn .sync, .sync-chip .dot, .gm-rays, .gm-star, .greet-clock .colon { animation: none !important; }
    .dash-head::before { transform: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}