/*
  ویترین سایت در صفحه‌ی کیس — همراه partials/device_showcase.html و js/device-showcase.js.
  همه‌ی کلاس‌ها پیشوند sc- دارند: .stage و .screen در app.css برای صحنه‌ی هیرو گرفته شده‌اند.
*/

.sc {
  position: relative;
  padding-block: var(--space-16) var(--space-16);
  background:
    radial-gradient(60% 50% at 50% 0%, rgb(242 104 60 / .16), transparent 70%),
    var(--ink);
  color: var(--ink-paper);
  overflow: clip;
}

.sc-showcase-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
}
.sc-showcase-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.sc-soon {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-line);
  background: var(--ink-surface);
  color: var(--accent-bright);
  font-size: var(--fs-caption);
  font-weight: 500;
  vertical-align: middle;
}
.sc-showcase-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sc .btn-sm { min-height: 40px; padding: 8px 18px; font-size: var(--fs-small); }
.sc .btn-ghost { color: var(--ink-paper); }
.sc-ext-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sc-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: sc-pulse 1.8s ease-out infinite;
}
@keyframes sc-pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .6); }
  100% { box-shadow: 0 0 0 9px rgb(255 255 255 / 0); }
}

/* ---- کلید دسکتاپ/موبایل -------------------------------------------------- */
.sc-seg {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: var(--radius-pill);
  background: var(--ink-surface);
  border: 1px solid var(--ink-line);
}
.sc-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 6px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.sc-seg-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sc-seg-btn:hover { color: var(--ink-paper); }
.sc-seg-btn[aria-pressed="true"] { background: var(--ink-paper); color: var(--ink); }
.sc-seg-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* ---- صحنه: دو قاب روی هم، فقط یکی دیده می‌شود ------------------------------ */
.sc-stage {
  display: grid;
  place-items: center;
}
.sc-device {
  grid-area: 1 / 1;
  margin: 0;
  transition: opacity .45s var(--ease, ease), transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .45s;
}
.sc-stage[data-active="desktop"] .sc-device-mobile,
.sc-stage[data-active="mobile"] .sc-device-desktop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.94) translateY(16px);
}
.sc-stage[data-active="desktop"] .sc-device-desktop,
.sc-stage[data-active="mobile"] .sc-device-mobile { transition-delay: .08s, .08s, 0s; }

.sc-screen {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(15 23 32 / .35) transparent;
  background: #fff;
}
.sc-screen img { width: 100%; height: auto; max-width: none; }
.sc-screen:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }

/* دسکتاپ: پنجره‌ی مرورگر */
.sc-device-desktop {
  width: min(100%, 1120px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow:
    0 1px 0 rgb(255 255 255 / .1) inset,
    0 40px 80px -30px rgb(0 0 0 / .7),
    0 0 0 1px rgb(0 0 0 / .4);
}
.sc-browser-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 16px;
  background: #eceef0;
  border-bottom: 1px solid #d9dce0;
}
.sc-dots {
  position: absolute;
  left: 16px;
  display: flex;
  gap: 7px;
}
.sc-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.sc-dots i:nth-child(2) { background: #febc2e; }
.sc-dots i:nth-child(3) { background: #28c840; }
.sc-url-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: min(50%, 360px);
  justify-content: center;
  height: 26px;
  padding-inline: 14px;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  font-family: var(--font-display);
  font-size: 13px;
}
.sc-url-pill svg { width: 13px; height: 13px; fill: none; stroke: #16a34a; stroke-width: 2.2; }
.sc-device-desktop .sc-screen { aspect-ratio: 16 / 10; }

/* موبایل: قاب گوشی */
.sc-phone {
  position: relative;
  width: min(340px, 82vw);
  padding: 12px;
  border-radius: 56px;
  background: linear-gradient(160deg, #2a2b30, #0c0c0e 60%);
  box-shadow:
    0 0 0 1.5px #3a3b40 inset,
    0 0 0 6px #050506 inset,
    0 50px 90px -30px rgb(0 0 0 / .75);
}
.sc-device-mobile .sc-screen {
  aspect-ratio: 390 / 844;
  border-radius: 44px;
  scrollbar-width: none;
}
.sc-device-mobile .sc-screen::-webkit-scrollbar { display: none; }
.sc-island {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 2;
  width: 96px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: #000;
  transform: translateX(-50%);
  pointer-events: none;
}

.sc-showcase-hint {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--ink-muted);
}

/* ---- پنجره‌ی نسخه‌ی زنده ---------------------------------------------------- */
.sc-live {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(10 14 20 / .94);
  color: var(--ink-paper);
}
.sc-live[open] { display: flex; flex-direction: column; animation: sc-fade .3s ease; }
.sc-live::backdrop { background: rgb(10 14 20 / .6); backdrop-filter: blur(6px); }
@keyframes sc-fade { from { opacity: 0; } }
.sc-live-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ink-line);
}
.sc-live-bar .sc-url-pill { min-width: 0; background: var(--ink-surface); color: var(--ink-paper); }
.sc-live-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  background: var(--ink-surface);
  color: var(--ink-paper);
  cursor: pointer;
}
.sc-live-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sc-live-close:hover { background: var(--accent); border-color: var(--accent); }
.sc-live-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
}
/* اندازه‌ی واقعی قاب را JS می‌دهد (iframe ۱۴۴۰ یا ۳۹۰ پیکسلی، scale‌شده تا جا شود) */
.sc-live-frame {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .8);
}
.sc-live-stage[data-view="mobile"] .sc-live-frame {
  border-radius: 40px;
  box-shadow: 0 0 0 10px #0c0c0e, 0 0 0 11.5px #3a3b40, 0 40px 80px -20px rgb(0 0 0 / .8);
}
.sc-live-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
  background: #fff;
}
.sc-live-note { color: var(--ink-muted); text-align: center; }
/* قاب گوشی با box-shadow کشیده شده و جای layout نمی‌گیرد؛ متن زیرش فاصله می‌خواهد */
.sc-live-stage[data-view="mobile"] .sc-live-note { margin-top: var(--space-4); }
.sc-live-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: #fff;
  color: var(--muted);
  font-size: var(--fs-small);
}
.sc-live-frame[data-loading] .sc-live-loading { display: flex; }
.sc-live-loading i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: sc-spin .8s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .sc-showcase-bar { flex-direction: column; align-items: stretch; }
  .sc-seg { align-self: center; }
  .sc-showcase-actions { justify-content: center; }
  .sc-live-bar .sc-url-pill { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-device, .sc-live[open] { transition: none; animation: none; }
  .sc-live-dot { animation: none; }
}