/* Анимация лендинга «Pomodor Task tracker app» / Temfy Focus (разметка — scripts/build-pomodoro.mjs, поведение — pomodoro-demo.js).
   Телефон — общий с демо клинера (swipe-demo.css: .sd, .sd-phone, .sd-screen, .sd-status); размеры — в em от --w.
   Экран — как в приложении и на иконке: белый фон, чёрное кольцо таймера на светло-сером, зелёные отметки выполненного.
   Без JS — конечное состояние (осталось 18:42); скрипт проигрывает отсчёт с 25:00 и дальше тикает по секунде. */
.pm .sd-phone { background: #111; box-shadow: 0 3.5em 8em rgba(0,0,0,.26), 0 0 0 .1em rgba(0,0,0,.12), inset 0 0 0 .12em rgba(255,255,255,.08); }
.pm-screen { background: #fff; color: #111114; text-align: center; display: flex; flex-direction: column; }
.pm-top { display: flex; justify-content: flex-end; padding: .1em 1.3em 0; }
.pm-sound svg { width: 2.2em; height: 2.2em; fill: none; stroke: #111114; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pm-task { display: flex; align-items: center; justify-content: center; gap: .45em; padding: .3em 1.2em 0; }
.pm-task span { font-size: 1.5em; }
.pm-task b { font-size: 1.25em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pm-dots { display: flex; justify-content: center; gap: .45em; margin-top: .7em; }
.pm-dots i { width: .7em; height: .7em; border-radius: 50%; background: #e3e3e6; }
.pm-dots i.on { background: #12b04a; }

/* Кольцо: серая дорожка и чёрная дуга оставшегося времени (pathLength=1 → stroke-dashoffset = прошедшая доля) */
.pm-ring { position: relative; width: 17em; height: 17em; margin: 1.4em auto 0; }
.pm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pm-ring circle { fill: none; stroke-width: 2.6; }
.pm-track { stroke: #e6e6e8; }
.pm-arc { stroke: #111114; stroke-linecap: round; stroke-dasharray: 1; }
.pm-time { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; }
.pm-time small { font-size: .82em; color: #6e6e78; }
.pm-time b { font-size: 3.5em; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pm-end { align-self: center; margin-top: 1.2em; padding: .65em 2.6em; border-radius: 2em; background: #111114; color: #fff; font-size: .95em; font-weight: 600; }

/* Задачи на сегодня */
.pm-list { margin: auto .9em 1.6em; padding: .8em .7em .5em; border-radius: 1.4em; background: #f4f4f5; text-align: left; }
.pm-h { margin: 0 0 .5em .4em; font-size: .8em; font-weight: 700; color: #6e6e78; }
.pm-row { display: flex; align-items: center; gap: .6em; padding: .55em .5em; border-radius: 1em; }
.pm-row.on { background: #fff; box-shadow: 0 .3em 1em rgba(0,0,0,.06); }
.pm-emo { font-size: 1.3em; flex: none; }
.pm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.pm-info b { font-size: .9em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-info small { font-size: .68em; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-play { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: #111114; display: grid; place-items: center; }
.pm-play svg { width: 1em; height: 1em; fill: #fff; }

/* Проигрывание: нажатие на задачу — короткий «пульс» строки и точки текущего помодоро */
.pm.play .pm-row.on { animation: pm-press .6s ease; }
@keyframes pm-press { 40% { transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .pm.play .pm-row.on { animation: none; } }