/* showcase.css — кадры программы в окнах главной (.app-window[data-showcase]): карусель с плавной сменой и
   медленным «наездом камеры», подпись кадра и точки-переключатели. Дополняет preview.css, ничего в нём не меняет.
   Без JS и при «уменьшить движение» остаётся первый кадр — как обычная картинка. */

/* у картинок есть width/height (без сдвига вёрстки при загрузке) — высота по ширине */
.app-window[data-showcase] img{height:auto;}
.app-window[data-showcase] .sc-viewport{position:relative;overflow:hidden;outline:none;}
.app-window[data-showcase] .sc-viewport:focus-visible{box-shadow:inset 0 0 0 2px rgba(167,139,250,.9);}

.sc-frame{display:block;width:100%;height:auto;opacity:0;transform:scale(1.06);filter:blur(6px) brightness(.88);
  transition:opacity 1.15s cubic-bezier(.22,.61,.36,1),filter 1.15s cubic-bezier(.22,.61,.36,1),transform 7s cubic-bezier(.16,.7,.24,1);
  will-change:opacity,transform;backface-visibility:hidden;}
.app-window[data-showcase] .sc-frame:not(:first-child){position:absolute;inset:0;height:100%;object-fit:cover;object-position:top center;}
.sc-frame.is-active{opacity:1;transform:scale(1);filter:none;}
.sc-frame.is-leaving{opacity:0;transform:scale(.985);filter:blur(2px) brightness(.8);
  transition:opacity .95s cubic-bezier(.4,0,.2,1),filter .95s cubic-bezier(.4,0,.2,1),transform .95s cubic-bezier(.4,0,.2,1);}
/* Первый показ — без вспышки: картинка уже видна, «наезд» начинается мягко */
.app-window[data-showcase]:not(.sc-ready) .sc-frame:first-child{opacity:1;transform:none;filter:none;}

/* блик, пробегающий по окну при смене кадра */
.sc-sheen{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.10) 48%,rgba(196,181,253,.14) 52%,transparent 65%);
  transform:translateX(-60%);}
.sc-sheen.run{animation:sc-sheen 1.3s cubic-bezier(.22,.61,.36,1);}
@keyframes sc-sheen{0%{opacity:0;transform:translateX(-60%);}20%{opacity:1;}100%{opacity:0;transform:translateX(60%);}}

/* подпись и точки */
.sc-ui{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:16px;pointer-events:none;background:linear-gradient(to top,rgba(8,8,14,.55),rgba(8,8,14,0));}
.sc-cap{pointer-events:none;max-width:70%;padding:7px 13px;border-radius:999px;background:rgba(14,14,22,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .45s ease,transform .45s ease;}
.sc-cap.swap{opacity:0;transform:translateY(6px);}
.sc-dots{pointer-events:auto;display:flex;gap:6px;padding:0 8px;border-radius:999px;background:rgba(14,14,22,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);}
/* кнопка выше полоски — по ней легко попасть пальцем; полоска и прогресс — ::before и <i> по центру */
.sc-dot{position:relative;width:22px;height:18px;padding:0;border:0;background:transparent;cursor:pointer;
  transition:width .4s cubic-bezier(.22,.61,.36,1);}
.sc-dot::before,.sc-dot i{position:absolute;left:0;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;}
.sc-dot::before{content:'';right:0;background:rgba(255,255,255,.28);transition:background .3s ease;}
.sc-dot:hover::before{background:rgba(255,255,255,.5);}
.sc-dot:focus-visible{outline:2px solid #a78bfa;outline-offset:1px;border-radius:4px;}
.sc-dot.on{width:38px;}
.sc-dot i{width:0;background:#c4b5fd;}
.sc-dot.on i{width:100%;}
.sc-dot.on.play i{width:0;animation:sc-progress var(--sc-dur,5200ms) linear forwards;}
.sc-paused .sc-dot.on.play i{animation-play-state:paused;}
@keyframes sc-progress{from{width:0;}to{width:100%;}}

/* обёртка окна наклоняется при прокрутке (transform ставит showcase.js; на самом окне transform занят появлением) */
.sc-tilt{will-change:transform;}

@media (max-width:700px){
  .sc-ui{padding:10px;}
  .sc-cap{font-size:11.5px;padding:5px 10px;max-width:60%;}
  .sc-dots{gap:4px;padding:0 6px;}
  .sc-dot{width:16px;height:24px;}
  .sc-dot::before,.sc-dot i{height:4px;margin-top:-2px;}
  .sc-dot.on{width:28px;}
}
@media (prefers-reduced-motion:reduce){
  .sc-frame,.sc-frame.is-leaving{transition:opacity .2s linear;transform:none!important;filter:none!important;}
  .sc-sheen{display:none;}
}