/* ============================================================
   Scrollable product-screen device frames
   Used to embed real, full-length VISTA app screenshots that
   visitors can scroll through inside a monitor / browser shell.
   Screens live in /assets/screens/*@2x.png (regenerated by the
   capture pipeline in tools/capture).
   ============================================================ */

.screen-device {
  --bezel: #1b1b20;
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* monitor bezel — iMac-style, PROPORTIONAL: thin black bezel, aluminum chin below the display.
   All furniture sizes are % of the device width so small and huge monitors keep the same proportions. */
.screen-monitor {
  width: 100%;
  position: relative;
  background: #0a0b0e;
  border-radius: 14px;
  overflow: hidden;
  padding: 1.3% 1.3% 0;
  box-shadow: 0 34px 70px rgba(17, 28, 46, 0.24), 0 4px 10px rgba(17, 28, 46, 0.12);
}
/* camera dot in the top bezel */
.screen-monitor::before {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #2c3038;
  z-index: 1;
}
/* aluminum chin — in flow below the display, bleeds to the outer edges, height = 8% of width */
.screen-monitor::after {
  content: "";
  display: block;
  width: auto;
  margin: 1.3% -2.5% -1.5px;
  aspect-ratio: 1000 / 80;
  background: linear-gradient(180deg, #f2f3f6 0%, #dfe2e7 55%, #c3c8d0 100%);
  box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.45);
}

.screen-inner {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

/* browser chrome bar */
.screen-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #eef1f6;
  border-bottom: 1px solid #e0e4ec;
}
.screen-dots {
  display: flex;
  gap: 6px;
}
.screen-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
}
.screen-dots span:nth-child(1) { background: #ff5f57; }
.screen-dots span:nth-child(2) { background: #febc2e; }
.screen-dots span:nth-child(3) { background: #28c840; }
.screen-url {
  flex: 1;
  font-size: 0.72rem;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e0e4ec;
  border-radius: 6px;
  padding: 4px 12px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen-url::before {
  content: "🔒 ";
  opacity: 0.55;
}

/* scrollable viewport holding the full-length screenshot */
.screen-viewport {
  aspect-ratio: 16 / 9;       /* widescreen monitor — keeps the screen short so scrolling is meaningful */
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.screen-viewport img {
  width: 100%;
  display: block;
}
/* slim, on-brand scrollbar */
.screen-viewport::-webkit-scrollbar { width: 9px; }
.screen-viewport::-webkit-scrollbar-track { background: transparent; }
.screen-viewport::-webkit-scrollbar-thumb {
  background: rgba(34, 62, 145, 0.28);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.screen-viewport::-webkit-scrollbar-thumb:hover { background: rgba(34, 62, 145, 0.5); background-clip: padding-box; }

/* monitor stand — aluminum wedge on an oval foot, proportional to the device width */
.screen-stand {
  position: relative;
  width: 16%;
  aspect-ratio: 100 / 54;
  margin-top: -1px;
}
.screen-stand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #e5e8ec 0%, #cdd1d8 55%, #adb3bd 100%);
  clip-path: polygon(25% 0, 75% 0, 89% 100%, 11% 100%);
}
.screen-stand::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -2px;
  width: 190%;
  aspect-ratio: 100 / 4.6;
  background: linear-gradient(180deg, #dfe2e7 0%, #b9bfc9 70%, #99a0ac 100%);
  border-radius: 50px / 10px;
  box-shadow: 0 12px 20px -8px rgba(17, 28, 46, 0.35);
}

/* caption + scroll hint */
.screen-caption {
  margin-top: 2.75rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-mid, #5b6472);
}
.screen-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #223e91;
  opacity: 0.8;
}
.screen-hint svg { animation: screen-bounce 1.8s ease-in-out infinite; }
@keyframes screen-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* on dark sections */
.screen-device.on-dark .screen-caption { color: rgba(255, 255, 255, 0.65); }
.screen-device.on-dark .screen-hint { color: #a3e64b; opacity: 0.9; }

@media (max-width: 640px) {
  .screen-monitor { border-radius: 12px; }
  .screen-stand, .screen-stand::after { display: none; }
}