/* Живая демонстрация свайпа Temfy cleaner (лендинг /photocleaner/ и главная).
   Размер задаёт --w (ширина телефона), всё внутри — в em от неё, поэтому мини-версия на главной
   рисуется тем же кодом. Разметку собирает scripts/build-nixo.mjs (или index.html), поведение — swipe-demo.js. */
.sd {
  --w: 280px;
  --sd-accent: #6d3bdf;
  width: var(--w); max-width: 100%;
  font-size: calc(var(--w) / 27);
  position: relative; user-select: none; -webkit-user-select: none;
}
.sd-phone {
  position: relative; aspect-ratio: 598 / 1300; border-radius: 3.9em;
  background: #1a1428; padding: .55em;
  box-shadow: 0 3.5em 8em rgba(0,0,0,.55), 0 0 0 .1em rgba(139,92,246,.3), inset 0 0 0 .12em rgba(255,255,255,.08);
}
.sd-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 3.35em;
  background: #f2f1f7; color: #1c1c1e;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.2; direction: ltr; isolation: isolate;
}
.sd-status { display: flex; align-items: center; justify-content: space-between; height: 4.2em; padding: 0 2.3em 0 2.9em; font-size: 1em; font-weight: 600; }
.sd-status svg { height: 1em; width: auto; display: block; }
.sd-island { position: absolute; left: 50%; top: 1em; width: 8.4em; height: 2.45em; margin-left: -4.2em; border-radius: 2em; background: #000; }
.sd-top { display: flex; align-items: center; justify-content: space-between; padding: .3em 1.1em 0; height: 3.4em; }
.sd-back { width: 2.9em; height: 2.9em; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 .3em 1em rgba(60,40,120,.08); }
.sd-back svg { width: 1.2em; height: 1.2em; color: var(--sd-accent); }
.sd-freed {
  display: inline-flex; align-items: baseline; gap: .25em; padding: .7em 1.1em; border-radius: 2em;
  background: #fff; color: var(--sd-accent); font-weight: 700; font-size: 1em; white-space: nowrap;
  box-shadow: 0 .3em 1em rgba(60,40,120,.08); font-variant-numeric: tabular-nums;
}
.sd-freed b::before { content: "−"; }
.sd-freed.bump { animation: sd-bump .45s ease; }
@keyframes sd-bump { 40% { transform: scale(1.12); background: #efe8ff; } }
.sd-chips { display: flex; gap: .45em; padding: 1.4em 1.1em 0; white-space: nowrap; overflow: hidden; }
.sd-chips span {
  flex: none; display: inline-flex; align-items: center; gap: .3em; padding: .4em .75em; border-radius: 1em;
  border: .08em solid #8e8e93; font-size: .82em; font-weight: 600;
}
.sd-chips span.on { border-color: var(--sd-accent); background: #e9e3fb; color: var(--sd-accent); }
.sd-chips svg { width: 1em; height: 1em; }

.sd-deck { position: absolute; left: 1.6em; right: 1.6em; top: 12em; bottom: 6.9em; touch-action: pan-y; cursor: grab; }
.sd-deck:active { cursor: grabbing; }
.sd-card {
  position: absolute; inset: 0; border-radius: 1.6em; overflow: hidden; background: #ddd;
  box-shadow: 0 .2em .5em rgba(40,20,90,.12), 0 1.2em 2.4em rgba(40,20,90,.14);
  transform-origin: 50% 90%; will-change: transform;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, filter .45s ease;
}
.sd-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.sd-card[data-depth="1"] { transform: translateY(-1.1em) scale(.94); filter: brightness(.92); }
.sd-card[data-depth="2"] { transform: translateY(-2.1em) scale(.88); filter: brightness(.85); }
.sd-card[data-depth="3"] { transform: translateY(-2.1em) scale(.88); opacity: 0; }
.sd-tag {
  position: absolute; left: .9em; top: .9em; display: inline-flex; align-items: center; gap: .35em;
  padding: .45em .75em; border-radius: 1em; font-size: .85em; font-weight: 700; color: #fff;
  background: rgba(20,14,40,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap;
}
.sd-tag i { width: .55em; height: .55em; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 0 .2em rgba(255,90,110,.3); }
.sd-dur { position: absolute; right: .9em; bottom: .9em; padding: .3em .6em; border-radius: .6em; font-size: .85em; font-weight: 700; color: #fff; background: rgba(0,0,0,.45); display: inline-flex; align-items: center; gap: .3em; }
.sd-dur svg { width: .8em; height: .8em; fill: currentColor; }
.sd-stamp {
  position: absolute; top: 46%; padding: .55em 1.1em; border-radius: .7em; font-weight: 800; font-size: 1.25em;
  letter-spacing: .04em; color: #fff; opacity: 0; white-space: nowrap; pointer-events: none;
  box-shadow: 0 .4em 1.2em rgba(0,0,0,.18);
}
.sd-stamp.keep { right: 1em; background: #4cc26a; transform: rotate(-8deg); }
.sd-stamp.del { left: 1em; background: #ff4d5e; transform: rotate(8deg); }
.sd-count { position: absolute; left: 0; right: 0; bottom: 4.2em; text-align: center; color: #8e8e93; font-size: .95em; font-variant-numeric: tabular-nums; }

.sd-float {
  position: absolute; left: 50%; top: 42%; z-index: 5; transform: translateX(-50%);
  padding: .5em 1em; border-radius: 1.4em; background: #ff4d5e; color: #fff; font-weight: 800; font-size: 1.2em;
  white-space: nowrap; pointer-events: none; box-shadow: 0 .6em 1.6em rgba(255,77,94,.4);
}

.sd-result {
  position: absolute; left: 1.6em; right: 1.6em; top: 15em; z-index: 6; padding: 2.4em 1.4em 2.2em;
  border-radius: 2em; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(14em 14em at 100% 0, rgba(255,255,255,.14), transparent 60%), linear-gradient(150deg, #8b5cf6, #4c1fbf 70%, #2f1388);
  box-shadow: 0 1.6em 3.6em rgba(76,31,191,.45);
  opacity: 0; transform: translateY(3em) scale(.9); pointer-events: none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,1.4,.4,1);
}
.sd-result.show { opacity: 1; transform: none; }
.sd-result .party { font-size: 2.6em; line-height: 1; display: block; }
.sd-result b { display: inline-block; margin-top: .25em; font-size: 4.6em; font-weight: 900; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.sd-result small { font-size: 1.6em; font-weight: 800; margin-left: .15em; }
.sd-result span.lbl { display: block; margin-top: .6em; font-size: 1.05em; color: rgba(255,255,255,.75); }
.sd-confetti { position: absolute; left: 50%; top: 40%; width: .7em; height: 1em; border-radius: .15em; z-index: 7; pointer-events: none; }

.sd-hint { direction: ltr; display: flex; justify-content: center; gap: 1.6em; margin-top: 1.6em; font-size: 1.3em; color: rgba(255,255,255,.6); white-space: nowrap; }
.sd-hint .l { color: #ff8a96; } .sd-hint .r { color: #7fe39a; }
.sd-try { position: absolute; left: 50%; bottom: 1.4em; transform: translateX(-50%); z-index: 4; padding: .45em .9em; border-radius: 1em; background: rgba(28,28,30,.78); color: #fff; font-size: .85em; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.sd.is-live .sd-try { opacity: 1; animation: sd-try 2.4s ease-in-out 1.2s 2; }
.sd.touched .sd-try { opacity: 0; animation: none; }
@keyframes sd-try { 50% { transform: translateX(-50%) translateY(-.3em); } }

@media (prefers-reduced-motion: reduce) {
  .sd-card, .sd-result { transition: none; }
  .sd.is-live .sd-try { animation: none; }
}