/* Анимации лендинга Temfy - Трекер привычек (разметка — scripts/build-habits.mjs, поведение — habits-demo.js).
   Телефон — общий с демо клинера (swipe-demo.css: .sd, .sd-phone, .sd-screen, .sd-status, .sd-try); размеры — в em от --w.
   Экран — в стиле приложения: белый фон, чёрные кольца отметок. */

/* ---------- 1) Демо в hero: список привычек на сегодня ---------- */
.hd .sd-phone { background: #111114; box-shadow: 0 3em 6em rgba(0,0,0,.22), 0 .6em 1.6em rgba(0,0,0,.12), inset 0 0 0 .12em rgba(255,255,255,.1); }
.hd-screen { background: #fff; color: #111; text-align: left; }
.hd-head { display: flex; align-items: center; justify-content: space-between; padding: .6em 1.5em 0; height: 4.2em; }
.hd-head > b { font-size: 2.3em; font-weight: 800; letter-spacing: -.03em; }
.hd-prog { position: relative; width: 3.6em; height: 3.6em; display: grid; place-items: center; }
.hd-prog svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hd-prog circle { fill: none; stroke-width: 3.2; }
.hd-prog .bg { stroke: #ececf0; }
.hd-prog .fg { stroke: #111; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 - 94.25 * var(--p, 0)); transition: stroke-dashoffset .6s cubic-bezier(.3,.7,.3,1); }
.hd-prog em { font-style: normal; font-size: .9em; font-weight: 700; color: #8e8e93; font-variant-numeric: tabular-nums; }
.hd-prog em b { color: #111; }
.hd-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4em; padding: .9em 1.3em 0; text-align: center; }
.hd-days span { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.hd-days small { font-size: .8em; color: #8e8e93; font-weight: 600; min-height: 1em; }
.hd-days b { width: 2.7em; height: 2.7em; border-radius: 50%; display: grid; place-items: center; border: .14em solid #e2e2e7; font-size: 1em; font-weight: 600; font-variant-numeric: tabular-nums; }
.hd-days .on b { background: #111; border-color: #111; color: #fff; }
.hd-list { list-style: none; margin: 1.4em 1.1em 0; padding: 0; display: grid; gap: .65em; }
.hd-list li {
  position: relative; display: grid; grid-template-columns: 2.4em 1fr 3.1em; align-items: center; gap: .6em;
  padding: .75em .8em .75em .9em; border-radius: 1.3em; background: #f3f3f6; cursor: pointer;
  transition: background .3s ease, transform .25s ease;
}
.hd-list li:active { transform: scale(.98); }
.hd-emo { font-size: 1.65em; line-height: 1; text-align: center; }
.hd-name { display: flex; flex-direction: column; gap: .2em; min-width: 0; font-size: 1.1em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-name small { font-size: .78em; font-weight: 600; color: #8e8e93; font-variant-numeric: tabular-nums; }
.hd-name small b { transition: color .3s ease; }
.hd-list li.done .hd-name small b { color: #ff7a1a; }
.hd-ring { position: relative; width: 3.1em; height: 3.1em; }
.hd-ring svg { width: 100%; height: 100%; display: block; }
.hd-ring circle { fill: none; stroke-width: 2.6; }
.hd-ring .bg { stroke: #d6d6dc; }
.hd-ring .fg { stroke: #111; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1); }
.hd-ring .ck { fill: none; stroke: #111; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .3s ease .35s; }
.hd-list li.done .fg, .hd-list li.done .ck { stroke-dashoffset: 0; }
.hd-list li.done .hd-ring { animation: hd-pop .5s ease .3s; }
@keyframes hd-pop { 50% { transform: scale(1.14); } }
/* «Касание»: круг расходится от кольца */
.hd-ring::after { content: ""; position: absolute; inset: -.3em; border-radius: 50%; background: rgba(17,17,17,.14); opacity: 0; transform: scale(.4); pointer-events: none; }
.hd-list li.tap .hd-ring::after { animation: hd-tap .6s ease-out; }
@keyframes hd-tap { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
.hd-toast {
  position: absolute; left: 1.3em; right: 1.3em; bottom: 7em; z-index: 5; display: flex; align-items: center; gap: .6em;
  padding: .9em 1.1em; border-radius: 1.4em; background: #111; color: #fff; font-weight: 700; font-size: 1em; line-height: 1.25;
  opacity: 0; transform: translateY(1.5em) scale(.95); transition: opacity .4s ease, transform .55s cubic-bezier(.2,1.4,.4,1); pointer-events: none;
}
.hd-toast span { font-size: 1.6em; line-height: 1; }
.hd.all-done .hd-toast { opacity: 1; transform: none; }
.hd-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5.8em; padding: .7em 2.2em 1.6em;
  display: flex; align-items: flex-start; justify-content: space-between; background: rgba(255,255,255,.94); border-top: .08em solid #eee;
}
.hd-tabs span { display: flex; flex-direction: column; align-items: center; gap: .25em; width: 6em; font-size: .78em; color: #9a9aa0; font-weight: 600; white-space: nowrap; }
.hd-tabs span svg { width: 1.9em; height: 1.9em; fill: currentColor; stroke: none; }
.hd-tabs span:first-child svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hd-tabs .on { color: #111; }
.hd-tabs i { width: 3.4em; height: 3.4em; margin-top: -.4em; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 1.5em; font-weight: 300; line-height: 1; transform: scale(.7); }
.hd .sd-try { bottom: 7.2em; }
.hd.all-done .sd-try { opacity: 0; animation: none; }

/* Мини-версия на главной: вместо подписей — «скелетон» */
.hd-mini .hd-name i, .hd-mini .hd-head > b i { display: block; height: .7em; border-radius: .35em; background: #dedee4; }
.hd-mini .hd-name i { width: 70%; margin: .2em 0 .1em; }
.hd-mini .hd-head > b i { width: 6em; height: .9em; }
.hd-mini .hd-days small { display: none; }
.hd-mini .hd-list li { cursor: default; }
.hd-mini .hd-toast { justify-content: center; }

/* ---------- 2) Виджет на экране «Домой» ---------- */
.hw-home {
  position: relative; max-width: 560px; margin: 0 auto; padding: 26px 22px; border-radius: 34px; overflow: hidden; isolation: isolate;
  /* «обои» экрана «Домой» — светлые, в монохроме, как иконка */
  background:
    radial-gradient(80% 70% at 10% 0%, #ffffff, transparent 70%),
    radial-gradient(70% 70% at 100% 100%, #c4c4cc, transparent 70%),
    linear-gradient(160deg, #e9e9ee, #d2d2d9);
  box-shadow: 0 30px 70px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.06);
}
.hw-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0 10px; }
.hw-apps i { aspect-ratio: 1; border-radius: 22%; background: rgba(255,255,255,.7); box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.hw-widget {
  margin: 20px 0; padding: 16px 16px 14px; border-radius: 26px; color: #fff;
  background: rgba(17,17,20,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.hw-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 38px); align-items: center; gap: 6px; padding: 5px 0; }
.hw-head span { text-align: center; color: #8e8e98; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hw-name { display: flex; align-items: center; gap: 8px; min-width: 0; padding-inline-end: 4px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-name i { font-style: normal; font-size: 20px; flex: none; }
.hw-c { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); display: grid; place-items: center; transition: border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.2,1.6,.4,1); }
.hw-c svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 1; transform: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.6,.4,1); }
.hw-c.v { border-color: #fff; }
.hw-c.s { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.hw-c.s svg { fill: rgba(255,255,255,.7); stroke: none; width: 16px; height: 16px; }
/* Состояние «до анимации» (ставит скрипт) */
.hw-home.reset .hw-c { border-color: rgba(255,255,255,.22); background: none; }
.hw-home.reset .hw-c svg { opacity: 0; transform: scale(.3); }
.hw-c.pop { transform: scale(1.18); }
.hw-c.late { position: relative; }
.hw-c.late::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: rgba(255,255,255,.3); opacity: 0; pointer-events: none; }
.hw-c.late.tap::after { animation: hd-tap .7s ease-out; }
@media (max-width: 480px) {
  .hw-home { padding: 18px 12px; border-radius: 26px; }
  .hw-apps { gap: 12px; padding: 0 6px; }
  .hw-widget { padding: 12px 10px 10px; border-radius: 20px; margin: 14px 0; }
  .hw-row { grid-template-columns: minmax(0, 1fr) repeat(5, 30px); gap: 3px; }
  .hw-c { width: 28px; height: 28px; }
  .hw-c svg { width: 15px; height: 15px; }
  .hw-name { font-size: 13.5px; gap: 6px; }
  .hw-name i { font-size: 17px; }
  .hw-head span { font-size: 12.5px; }
}
@media (max-width: 340px) { .hw-row { grid-template-columns: minmax(0, 1fr) repeat(5, 26px); } .hw-c { width: 25px; height: 25px; } .hw-name i { display: none; } }

/* ---------- 3) Статистика ---------- */
.hs {
  position: relative; max-width: 760px; margin: 0 auto; padding: 22px; border-radius: 24px;
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0,0,0,.08);
}
.hs-tiles { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; }
.hs-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 120px; padding: 16px 18px;
  border-radius: 18px; overflow: hidden; background: var(--bg); border: 1px solid var(--border);
}
.hs-tile b { font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--text); }
.hs-tile > span:last-child { color: var(--muted); font-size: 14px; }
.hs-flame { position: absolute; inset-inline-end: 12px; top: 10px; font-size: 40px; line-height: 1; transform-origin: 50% 90%; }
.hs.run .hs-flame { animation: hs-flame 1.1s ease-in-out 3; }
@keyframes hs-flame { 30% { transform: scale(1.12, .92) rotate(-4deg); } 60% { transform: scale(.94, 1.08) rotate(3deg); } }
.hs-cal { margin-top: 14px; padding: 16px 16px 12px; border-radius: 18px; background: #fff; color: #111; border: 1px solid var(--border); }
.hs-month { display: block; font-size: 16px; margin: 0 0 10px 4px; }
.hs-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 6px; justify-items: center; }
.hs-grid span { position: relative; width: 100%; max-width: 46px; aspect-ratio: 1; display: grid; place-items: center; }
.hs-grid svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hs-grid circle { fill: none; stroke: #111; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 - 94.25 * var(--p)); transition: stroke-dashoffset .7s cubic-bezier(.3,.7,.3,1); }
.hs-grid span::before { content: ""; position: absolute; inset: 6.5%; border-radius: 50%; border: 2px solid #e4e4e9; }
.hs-grid .pad::before { display: none; }
.hs-grid b { position: relative; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hs-grid .skip svg { position: static; width: 46%; height: 46%; transform: none; fill: #b8b8c0; }
.hs.reset .hs-grid circle { stroke-dashoffset: 94.25; transition: none; }
@media (max-width: 640px) {
  .hs { padding: 14px; }
  .hs-tiles { grid-template-columns: 1fr; gap: 8px; }
  .hs-tile { min-height: 0; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 14px 16px; }
  .hs-tile.streak { padding-inline-end: 60px; }
  .hs-tile b { font-size: 32px; }
  .hs-flame { top: 50%; margin-top: -17px; font-size: 32px; }
  .hs-cal { padding: 12px 8px 8px; }
  .hs-grid { gap: 5px 3px; }
  .hs-grid b { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-list li, .hd-ring .fg, .hd-ring .ck, .hd-toast, .hd-prog .fg, .hw-c, .hw-c svg, .hs-grid circle { transition: none; }
  .hd-list li.done .hd-ring, .hs.run .hs-flame { animation: none; }
}