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

/* ---------- 1) Демо в hero: лента цитат ---------- */
.qd .sd-phone { background: #0b0b0d; box-shadow: 0 3.5em 8em rgba(0,0,0,.6), 0 0 0 .1em rgba(255,255,255,.14), inset 0 0 0 .12em rgba(255,255,255,.08); }
.qd-screen { background: #fff; color: #111; text-align: left; }
.qd-nav { display: flex; justify-content: space-between; align-items: center; height: 2.6em; padding: 0 1.5em; }
.qd-ic svg { width: 1.75em; height: 1.75em; display: block; fill: none; stroke: #111; stroke-width: 1.7; stroke-linejoin: round; }
.qd-title { display: block; padding: .15em 1.35em 0; font-size: 2.55em; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.qd-chips { margin-top: .9em; overflow: hidden; }
.qd-chips-in { display: flex; gap: .45em; padding: 0 1.5em; width: max-content; transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.qd-chips span {
  flex: none; padding: .45em .85em; border-radius: 1.2em; border: .09em solid #d9d9de; font-size: .95em; font-weight: 500; color: #6e6e73;
  white-space: nowrap; transition: border-color .35s ease, color .35s ease, background .35s ease;
}
.qd-chips span.on { border-color: #111; color: #111; background: #fff; box-shadow: inset 0 0 0 .05em #111; }
.qd-chips .pen { display: grid; place-items: center; padding: .45em .7em; }
.qd-chips .pen svg { width: 1.1em; height: 1.1em; fill: none; stroke: #6e6e73; stroke-width: 2; stroke-linejoin: round; }

.qd-feed { position: absolute; left: 0; right: 0; top: 14.6em; bottom: 6.6em; overflow: hidden; touch-action: pan-x; cursor: grab; }
.qd-feed:active { cursor: grabbing; }
.qd-track { height: 100%; transition: transform .75s cubic-bezier(.65,0,.3,1); will-change: transform; }
.qd-track.jump { transition: none; }
.qd-q { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 2em 2em; box-sizing: border-box; }
.qd-mark { font-family: "Times New Roman", Times, serif; font-size: 4.6em; line-height: .5; height: .42em; color: #111; }
.qd-q p { margin: .35em 0 .6em; font-family: "Times New Roman", Times, serif; font-size: 2.1em; line-height: 1.2; color: #111; }
.qd-q small { font-size: 1.05em; color: #8e8e93; }
/* Цитата проявляется, когда долистали до неё */
.qd.is-live .qd-q p, .qd.is-live .qd-q small, .qd.is-live .qd-q .qd-mark { opacity: 0; transform: translateY(.6em); transition: opacity .5s ease .25s, transform .7s cubic-bezier(.2,.8,.2,1) .25s; }
.qd.is-live .qd-q small { transition-delay: .45s; }
.qd.is-live .qd-q[data-on] p, .qd.is-live .qd-q[data-on] small, .qd.is-live .qd-q[data-on] .qd-mark { opacity: 1; transform: none; }

.qd-bar { position: absolute; left: 1.6em; right: 1.6em; bottom: 1.9em; display: flex; align-items: center; justify-content: space-between; }
.qd-like, .qd-share { width: 3.4em; height: 3.4em; border-radius: 50%; background: #f2f2f5; display: grid; place-items: center; cursor: pointer; }
.qd-like svg, .qd-share svg { width: 1.6em; height: 1.6em; fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: fill .25s ease, stroke .25s ease; }
.qd-like.on svg { fill: #ff2d55; stroke: #ff2d55; }
.qd-like.pop { animation: qd-pop .5s ease; }
@keyframes qd-pop { 40% { transform: scale(1.25); } }
.qd-pro { display: inline-flex; align-items: center; gap: .35em; height: 3em; padding: 0 1.35em; border-radius: 1.5em; background: #111; color: #fff; font-weight: 800; font-size: 1.05em; letter-spacing: .04em; }
.qd-pro svg { width: 1.2em; height: 1.2em; fill: #ffd60a; }
.qd .sd-try { bottom: 6.9em; }

/* ---------- 2) Виджеты на экране «Домой» ---------- */
.qw-home {
  position: relative; max-width: 380px; margin: 0 auto; padding: 22px 20px 24px; border-radius: 40px; overflow: hidden; isolation: isolate;
  font-size: clamp(11px, 3.4vw, 13px);
  background:
    radial-gradient(70% 60% at 15% 0%, #4b4b63, transparent 70%),
    radial-gradient(60% 60% at 100% 100%, #6b5a4e, transparent 70%),
    linear-gradient(160deg, #2a2a35, #18181d);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.07);
}
.qw-time { text-align: center; color: #fff; font-size: 3.6em; font-weight: 300; letter-spacing: -.02em; line-height: 1; margin: .1em 0 .35em; font-variant-numeric: tabular-nums; }
.qw-time b { font-weight: 300; display: inline-block; }
.qw-time b.tick { animation: qw-tick .6s ease; }
@keyframes qw-tick { 40% { transform: translateY(-.15em); opacity: .4; } }
.qw-w { position: relative; margin: 0 0 2em; border-radius: 1.6em; padding: 1.25em 1.35em; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.qw-w p { margin: 0 0 .5em; font-family: "Times New Roman", Times, serif; line-height: 1.22; transition: opacity .35s ease; }
.qw-w small { font-size: .9em; transition: opacity .35s ease; }
.qw-w figcaption { position: absolute; left: 0; right: 0; bottom: -1.65em; text-align: center; color: rgba(255,255,255,.85); font-size: .85em; font-weight: 500; }
.qw-medium { min-height: 9.6em; background: #0b0b0d; color: #fff; box-shadow: 0 .4em 1.4em rgba(0,0,0,.35); }
.qw-medium p { font-size: 1.55em; }
.qw-medium small { color: rgba(255,255,255,.55); }
.qw-small { aspect-ratio: 1; margin: 0; background: #fff; color: #111; padding: 1em 1.05em; }
.qw-small p { font-size: 1.05em; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.qw-small small { color: #8e8e93; font-size: .8em; }
.qw-w.out p, .qw-w.out small { opacity: 0; }
.qw-w .wd { display: inline-block; opacity: 0; transform: translateY(.35em); animation: qw-word .45s ease forwards; animation-delay: calc(var(--k) * 70ms); }
@keyframes qw-word { to { opacity: 1; transform: none; } }
.qw-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em; margin: 0 0 2em; }
.qw-apps i { aspect-ratio: 1; border-radius: 26%; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.qw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; margin-bottom: 1.6em; }
.qw-apps.two { grid-template-columns: repeat(2, 1fr); margin: 0; }

/* ---------- 3) Темы ---------- */
.qt { position: relative; max-width: 760px; margin: 0 auto 6px; padding: 26px; border-radius: 22px; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--border); }
.qt-title { display: block; font-size: 20px; letter-spacing: -.3px; }
.qt-sub { margin: 4px 0 18px; color: var(--muted); font-size: 14.5px; }
.qt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .qt-grid { grid-template-columns: repeat(2, 1fr); } .qt { padding: 20px 16px; } }
.qt-tile {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,.02); transition: border-color .3s ease, background .3s ease, transform .2s ease;
  user-select: none; -webkit-user-select: none; min-width: 0;
}
.qt-tile:active { transform: scale(.97); }
.qt-tile b { font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
.qt-tile small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.qt-emo { font-size: 22px; line-height: 1; margin-bottom: 6px; }
.qt-check { position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); display: grid; place-items: center; transition: background .3s ease, border-color .3s ease; }
.qt-check svg { width: 14px; height: 14px; fill: none; stroke: #111; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .3s ease .1s; }
.qt-tile.on { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); }
.qt-tile.on .qt-check { background: #fff; border-color: #fff; }
.qt-tile.on .qt-check svg { stroke-dashoffset: 0; }
.qt-tile.pop { animation: qt-pop .45s ease; }
@keyframes qt-pop { 40% { transform: scale(1.04); } }
.qt-count { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.qt-count b { color: var(--text); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .qd-track, .qd-chips-in { transition: none; }
  .qw-w .wd { animation: none; opacity: 1; transform: none; }
}