/* Слайдер-витрина моделей на /images и /studio (showcase.js). Токены — из shell.css. */
.sc{ position:relative; margin:4px 0 26px; padding:22px 0 6px; border-radius:24px; isolation:isolate;
  background:radial-gradient(120% 140% at 0% 0%, rgba(125,92,245,.20), transparent 55%),
             radial-gradient(90% 120% at 100% 100%, rgba(255,107,74,.10), transparent 60%),
             rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07); overflow:hidden; }
.sc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:0 22px 16px; flex-wrap:wrap; }
.sc-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vio2,#a274ff); margin-bottom:8px; }
.sc-eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 0 rgba(162,116,255,.6); animation:sc-ping 2.2s ease-out infinite; }
@keyframes sc-ping{ 0%{ box-shadow:0 0 0 0 rgba(162,116,255,.55) } 80%,100%{ box-shadow:0 0 0 9px rgba(162,116,255,0) } }
.sc-title{ font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-.02em; color:#fff;
  font-size:clamp(19px,2.4vw,26px); line-height:1.15; margin:0; }
.sc-title em{ font-style:normal; background:linear-gradient(90deg,#a274ff,#ff8a6b); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.sc-lead{ color:var(--mut,#9d9da8); font-size:13.5px; line-height:1.5; margin:6px 0 0; max-width:620px; }
.sc-prompt{ margin-top:10px; font-size:12.5px; color:#cfcfe0; max-width:680px; line-height:1.45;
  padding:8px 12px; border-radius:12px; background:rgba(0,0,0,.28); border:1px dashed rgba(255,255,255,.12); }
.sc-prompt b{ color:#fff; font-weight:600; }
.sc-ctrl{ display:flex; gap:8px; }
.sc-btn{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:#fff; font-size:18px; cursor:pointer; transition:background .2s, border-color .2s, transform .2s; }
.sc-btn:hover{ background:rgba(125,92,245,.28); border-color:var(--vio2,#a274ff); transform:translateY(-1px); }

.sc-viewport{ position:relative; }
.sc-viewport::before, .sc-viewport::after{ content:''; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none; }
.sc-viewport::before{ left:0; background:linear-gradient(90deg, var(--bg,#0b0b0e), transparent); opacity:.85; }
.sc-viewport::after{ right:0; background:linear-gradient(270deg, var(--bg,#0b0b0e), transparent); opacity:.85; }
.sc-track{ display:flex; gap:14px; overflow-x:auto; padding:6px 22px 18px; scrollbar-width:none; cursor:grab; }
.sc-track::-webkit-scrollbar{ display:none; }
.sc-track.drag{ cursor:grabbing; }

.sc-card{ position:relative; flex:0 0 auto; width:208px; aspect-ratio:3/4; border-radius:20px; overflow:hidden;
  background:#15151b; border:1px solid rgba(255,255,255,.08); cursor:pointer; padding:0; text-align:left; color:#fff;
  transform:translateZ(0); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.sc-card:hover, .sc-card:focus-visible{ transform:translateY(-6px); border-color:rgba(162,116,255,.7);
  box-shadow:0 18px 40px -12px rgba(125,92,245,.55), 0 0 0 1px rgba(162,116,255,.35); outline:none; }
.sc-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.sc-card:hover .sc-media{ transform:scale(1.07); }
.sc-blur{ position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px); object-fit:cover;
  filter:blur(22px) saturate(1.3) brightness(.65); }
.sc-card video.sc-media{ object-fit:contain; }
.sc-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(6,6,10,.92) 100%); }
.sc-top{ position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; gap:6px; }
.sc-chip{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); background:rgba(10,10,16,.55); border:1px solid rgba(255,255,255,.14); white-space:nowrap; }
.sc-chip.new{ background:linear-gradient(135deg,#ff6b4a,#ff9a62); border:0; color:#fff; }
.sc-chip.play{ background:rgba(125,92,245,.6); border:0; }
.sc-body{ position:absolute; left:0; right:0; bottom:0; padding:12px 13px 13px; }
.sc-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; line-height:1.2; letter-spacing:-.01em; }
.sc-sub{ font-size:11.5px; color:rgba(255,255,255,.66); margin-top:3px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-go{ margin-top:9px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:6px 11px; border-radius:999px; background:var(--grad,linear-gradient(135deg,#7d5cf5,#a274ff));
  opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; }
.sc-card:hover .sc-go, .sc-card:focus-visible .sc-go{ opacity:1; transform:none; }

/* Модель без примера: живой градиент вместо превью */
.sc-mesh{ position:absolute; inset:-30%; filter:blur(28px); opacity:.9;
  background:conic-gradient(from var(--a,0deg) at 50% 50%, var(--c1), var(--c2), var(--c3), var(--c1));
  animation:sc-spin 14s linear infinite; }
@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes sc-spin{ to{ --a:360deg } }
.sc-mono{ position:absolute; top:44%; left:0; right:0; transform:translateY(-50%); text-align:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:36px; letter-spacing:-.03em; padding:0 10px; word-break:break-word; color:rgba(255,255,255,.92);
  text-shadow:0 6px 30px rgba(0,0,0,.35); }

@media (hover:none){ .sc-go{ opacity:1; transform:none; } }
@media (max-width:640px){
  .sc{ border-radius:18px; padding-top:16px; }
  .sc-head{ padding:0 14px 12px; }
  .sc-ctrl{ display:none; }
  .sc-track{ padding:4px 14px 14px; gap:10px; scroll-snap-type:x mandatory; }
  .sc-card{ width:156px; border-radius:16px; scroll-snap-align:start; }
  .sc-name{ font-size:13.5px; }
  .sc-lead{ display:none; }
  .sc-prompt{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; }
  .sc-prompt.open{ -webkit-line-clamp:unset; display:block; }
  .sc-mono{ font-size:30px; }
  .sc-viewport::before, .sc-viewport::after{ width:18px; }
}
@media (prefers-reduced-motion:reduce){
  .sc-mesh, .sc-eyebrow::before{ animation:none; }
  .sc-card, .sc-media{ transition:none; }
}