/* SPDX-License-Identifier: LicenseRef-PolyForm-Shield-1.0.0 */
/*
 * lsd-mockups.css — device + browser frame mockups (component-shape utilities)
 * ---------------------------------------------------------------------------
 * Structural primitives, NOT animations. Each frame is a pure-CSS shape that
 * wraps arbitrary screen content (an image, an iframe, a markup placeholder).
 *
 * Tokens consumed: --accent, --bg, --ink, --border-color
 *
 * Usage:
 *   <div class="lsd-mockup lsd-mockup--iphone">
 *     <div class="lsd-mockup__screen">...content...</div>
 *   </div>
 */

.lsd-mockup {
  --mockup-radius: 36px;
  --mockup-bezel: 12px;
  --mockup-frame: color-mix(in oklch, var(--ink, #111) 88%, transparent);
  position: relative;
  display: inline-block;
  background: var(--mockup-frame);
  border-radius: var(--mockup-radius);
  padding: var(--mockup-bezel);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px color-mix(in oklch, white 8%, transparent);
}

.lsd-mockup__screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--mockup-radius) - var(--mockup-bezel));
  background: var(--bg, #0a0716);
  width: 100%;
  height: 100%;
  min-height: 200px;
}

/* iPhone 15 Pro — tall aspect, dynamic-island notch */
.lsd-mockup--iphone {
  --mockup-radius: 44px;
  --mockup-bezel: 10px;
  width: 280px;
  aspect-ratio: 9 / 19.5;
}
.lsd-mockup--iphone::before {
  content: '';
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 28px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}

/* Android — slightly squarer */
.lsd-mockup--android {
  --mockup-radius: 36px;
  width: 280px;
  aspect-ratio: 9 / 18;
}

/* Browser / Safari — horizontal with chrome bar */
.lsd-mockup--browser {
  --mockup-radius: 12px;
  --mockup-bezel: 8px;
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 10;
}
.lsd-mockup--browser .lsd-mockup__screen {
  padding-top: 32px;
}
.lsd-mockup--browser::before {
  content: '';
  position: absolute;
  left: var(--mockup-bezel); right: var(--mockup-bezel);
  top: var(--mockup-bezel); height: 32px;
  background: color-mix(in oklch, white 6%, transparent);
  border-top-left-radius: calc(var(--mockup-radius) - var(--mockup-bezel));
  border-top-right-radius: calc(var(--mockup-radius) - var(--mockup-bezel));
  background-image:
    radial-gradient(circle at 14px 50%, #ff5f57 4.5px, transparent 5px),
    radial-gradient(circle at 34px 50%, #febc2e 4.5px, transparent 5px),
    radial-gradient(circle at 54px 50%, #28c840 4.5px, transparent 5px);
  z-index: 2;
}

/* Terminal — monospace dark surface */
.lsd-mockup--terminal {
  --mockup-radius: 10px;
  display: block;
  width: 100%;
  max-width: 640px;
}
.lsd-mockup--terminal .lsd-mockup__screen {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
  color: color-mix(in oklch, var(--accent, #6cf) 90%, white 10%);
  padding: 48px 18px 18px;
  min-height: 240px;
}
.lsd-mockup--terminal::before {
  content: '';
  position: absolute;
  left: var(--mockup-bezel); right: var(--mockup-bezel);
  top: var(--mockup-bezel); height: 32px;
  background: color-mix(in oklch, white 6%, transparent);
  border-top-left-radius: 6px; border-top-right-radius: 6px;
  background-image:
    radial-gradient(circle at 14px 50%, #ff5f57 4.5px, transparent 5px),
    radial-gradient(circle at 34px 50%, #febc2e 4.5px, transparent 5px),
    radial-gradient(circle at 54px 50%, #28c840 4.5px, transparent 5px);
  z-index: 2;
}

/* ─── Video-text — image/video clipped to text bounds via background-clip.
 * Structural rather than animation; the value scrolls if you give it
 * `background-position` over time. */
.lsd-text--video-clip {
  background-image:
    linear-gradient(120deg,
      var(--accent, #6af) 0%,
      var(--accent-2, #f6c) 50%,
      var(--accent-3, #fc6) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 900;
  animation: lsd-text-video-clip 8s ease-in-out infinite;
}
@keyframes lsd-text-video-clip {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lsd-text--video-clip { animation: none; }
}