/* Живые превью в карточках приложений на главной: телефон «выглядывает» из цветной шапки карточки.
   Клинер — свайп колоды (swipe-demo.*), Nutri — скан блюда (previews.js). Превью — декор: клики проходят
   сквозь него к ссылке-карточке, жестов нет. */
.project-preview {
  position: relative; height: 270px; margin: -24px -24px 20px; overflow: hidden; pointer-events: none;
  border-radius: 19px 19px 0 0; isolation: isolate;
}
.project-preview::before {
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background: radial-gradient(closest-side at 30% 30%, rgba(255,255,255,.28), transparent 70%);
  animation: pv-sheen 12s ease-in-out infinite alternate;
}
@keyframes pv-sheen { to { transform: translate(25%, 15%); } }
.project-preview.pv-cleaner { background: linear-gradient(150deg, #9b74ff, #5a2ad6 60%, #34148f); }
.project-preview.pv-nutri {
  /* цвета иконки Temfy Nutri: тёмный фон, сиреневое и бирюзовое свечение (как nutri.css: --accent/--accent-2) */
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(123,97,255,.55), transparent 70%),
    radial-gradient(55% 60% at 95% 30%, rgba(92,200,214,.4), transparent 70%),
    radial-gradient(50% 50% at 50% 110%, rgba(52,180,140,.3), transparent 70%),
    #14161c;
}
.project-preview .sd {
  --w: 196px; position: absolute; left: 50%; top: 30px; margin-left: calc(var(--w) / -2);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.project-preview .sd-phone { box-shadow: 0 2em 4em rgba(10,0,40,.35), inset 0 0 0 .12em rgba(255,255,255,.1); }
.project.live:hover .project-preview .sd { transform: translateY(-10px); }
.project-preview .sd-deck { cursor: default; }

/* Мини-клинер на главной: без фильтров, плашки — иконками */
.sd-mini .sd-deck { top: 8.6em; }
.sd-mini .sd-stamp { font-size: 1.6em; padding: .35em .55em; line-height: 0; }
.sd-mini .sd-stamp svg { width: 1em; height: 1em; }
.sd-mini .sd-result { top: 13em; }

/* Мини-Nutri: скан блюда */
.ns-screen {
  background: radial-gradient(80% 50% at 50% 35%, rgba(155,151,255,.22), transparent 70%), #14161c; color: #f5f7fb;
}
.ns-screen .sd-status { color: #fff; }
.ns-frame { position: absolute; left: 2em; right: 2em; top: 10.5em; aspect-ratio: 1; }
.ns-frame img { position: absolute; inset: .5em; width: calc(100% - 1em); height: calc(100% - 1em); animation: ns-spin 40s linear infinite; }
@keyframes ns-spin { to { transform: rotate(360deg); } }
.ns-frame i { position: absolute; width: 3em; height: 3em; border: .32em solid #5cc8d6; }
.ns-frame i:nth-of-type(2), .ns-frame i:nth-of-type(4) { border-color: #9b97ff; }
.ns-frame i:nth-of-type(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 1em 0 0 0; }
.ns-frame i:nth-of-type(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 1em 0 0; }
.ns-frame i:nth-of-type(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 1em; }
.ns-frame i:nth-of-type(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 1em 0; }
.ns-laser {
  position: absolute; left: .6em; right: .6em; top: 0; height: 22%; opacity: 0;
  background: linear-gradient(to bottom, rgba(92,200,214,0), rgba(92,200,214,.45));
  border-bottom: .2em solid #8edce6; box-shadow: 0 .4em 1.6em rgba(92,200,214,.7);
}
.ns-chip {
  position: absolute; z-index: 2; padding: .6em .9em; border-radius: .9em; background: #252935; color: #f5f7fb;
  border: .08em solid rgba(255,255,255,.1); box-shadow: 0 .8em 1.8em rgba(0,0,0,.4); font-weight: 800; font-size: 1.25em; white-space: nowrap;
  opacity: 0; transform: scale(.6) translateY(1em); transition: opacity .35s ease, transform .5s cubic-bezier(.2,1.6,.4,1);
}
.ns-chip i { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .35em; vertical-align: .12em; }
.ns-chip small { font-size: .75em; font-weight: 600; color: #9aa4bd; margin-left: .15em; }
.ns-chip.p { left: .8em; top: 8.6em; } .ns-chip.p i { background: #c77dff; }
.ns-chip.c { right: .6em; top: 18.5em; } .ns-chip.c i { background: #38bdf8; }
.ns-chip.f { left: 3.2em; top: 31.2em; } .ns-chip.f i { background: #f6b25c; }
.ns-kcal {
  position: absolute; left: 50%; bottom: 7.5em; transform: translateX(-50%) scale(.8); opacity: 0;
  display: flex; align-items: center; gap: .6em; padding: .7em 1.3em .7em .8em; border-radius: 2em;
  background: rgba(37,41,53,.85); border: .08em solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,1.4,.4,1); white-space: nowrap;
}
.ns-kcal svg { width: 3em; height: 3em; transform: rotate(-90deg); }
.ns-kcal circle { fill: none; stroke-width: 5; }
.ns-kcal .bg { stroke: rgba(255,255,255,.12); }
.ns-kcal .fg { stroke: url(#nsGrad); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; transition: stroke-dashoffset 1.2s cubic-bezier(.3,.7,.3,1); }
.ns-kcal b { font-size: 2em; font-weight: 900; font-variant-numeric: tabular-nums; }
.ns-kcal span { font-size: 1.1em; opacity: .85; font-weight: 600; }
.ns.on .ns-chip, .ns.on .ns-kcal { opacity: 1; transform: none; }
.ns.on .ns-kcal { transform: translateX(-50%); }
.ns.on .ns-chip.c { transition-delay: .15s; } .ns.on .ns-chip.f { transition-delay: .3s; }
.ns.on .ns-kcal .fg { stroke-dashoffset: 30; }


/* Скан в превью: калории — вверху, под «островком» (низ телефона обрезан шапкой карточки) */
.project-preview .ns-kcal { top: 4.2em; bottom: auto; padding: .4em 1em .4em .5em; }
.project-preview .ns-kcal svg { width: 2.4em; height: 2.4em; }
.project-preview .ns-frame { top: 9.5em; }
.project-preview .ns-chip.p { top: 8.4em; }

@media (max-width: 560px) {
  .project-preview { height: 250px; }
  .project-preview .sd { --w: 184px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-preview::before, .ns-frame img { animation: none !important; }
  .project-preview .sd { transition: none; }
}
/* Тёмный корпус на тёмной шапке Nutri — светлая кромка, чтобы телефон читался */
.project-preview.pv-nutri .sd-phone { background: #23262f; box-shadow: 0 2em 4em rgba(0,0,0,.5), 0 0 0 .12em rgba(155,151,255,.45), 0 0 3em rgba(92,200,214,.18); }