/*
 * Shoppy Carousel — auto-scrolling marquee of phone frames, each screen
 * filled by a custom image. Tokens mirror the Shoppy landing (Option I).
 *
 * Scaling: frame sizes are expressed as calc(var(--sc-u) * Npx), where
 * --sc-u = phone-width / 230 (the design's base unit). Breakpoints only
 * change --sc-w and the edge-fade width; the frame reflows proportionally.
 */

.shoppy-carousel {
  /* tokens */
  --sc-bg: #ffffff;
  --sc-phone-frame: #0f0d0a;
  --sc-soft: #f0ede5;
  --sc-soft2: #e7e3d8;
  --sc-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* layout knobs (overridden per breakpoint / shortcode) */
  --sc-w: 247;               /* phone width, unitless px */
  --sc-u: calc(var(--sc-w) / 230);
  --sc-edge: 160px;          /* edge fade width */
  --sc-gap: 16px;            /* half-gap around each phone */
  --sc-speed: 40s;

  position: relative;
  overflow: hidden;
  /* Flush: no padding of its own, spacing is up to the page layout.
     Explicit 0 hardens against themes that pad `section` globally. */
  padding: 0;
  background: var(--sc-bg);
  font-family: var(--sc-sans);
}

/* ── Edge fades ─────────────────────────────────────────── */
.shoppy-carousel .sc-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sc-edge);
  z-index: 2;
  pointer-events: none;
}
.shoppy-carousel .sc-fade--left {
  left: 0;
  background: linear-gradient(90deg, var(--sc-bg), transparent);
}
.shoppy-carousel .sc-fade--right {
  right: 0;
  background: linear-gradient(270deg, var(--sc-bg), transparent);
}

/* ── Track ──────────────────────────────────────────────── */
@keyframes sc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.shoppy-carousel .sc-track {
  display: flex;
  width: max-content;
  animation: sc-marquee var(--sc-speed) linear infinite;
}
.shoppy-carousel .sc-track:hover {
  animation-play-state: paused;
}
.shoppy-carousel .sc-item {
  padding: 0 var(--sc-gap);
}

/* ── Phone frame ────────────────────────────────────────── */
.shoppy-carousel .sc-phone {
  width: calc(var(--sc-w) * 1px);
  height: calc(var(--sc-w) * 2.04px);
  border-radius: calc(var(--sc-u) * 30px);
  background: var(--sc-phone-frame);
  padding: calc(var(--sc-u) * 5px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}
.shoppy-carousel .sc-screen {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--sc-u) * 26px);
  overflow: hidden;
  position: relative;
}

/* ── Screen image ───────────────────────────────────────── */
/* The whole screen is the image; without one, a neutral gradient shows. */
.shoppy-carousel .sc-screenshot {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(160deg, var(--sc-soft2), var(--sc-soft));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ── Hardware island ────────────────────────────────────── */
.shoppy-carousel .sc-island {
  width: calc(var(--sc-u) * 46px);
  height: calc(var(--sc-u) * 16px);
  background: var(--sc-phone-frame);
  border-radius: calc(var(--sc-u) * 10px);
  position: absolute;
  left: 50%;
  top: calc(var(--sc-u) * 4px);
  transform: translateX(-50%);
}

/* ── Breakpoints (mirror the design's t/m configs) ─────── */
@media (max-width: 900px) {
  .shoppy-carousel {
    --sc-w: 218;
    --sc-edge: 90px;
  }
}
@media (max-width: 520px) {
  .shoppy-carousel {
    --sc-w: 192;
    --sc-edge: 48px;
    --sc-gap: 10px;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .shoppy-carousel .sc-track {
    animation: none;
  }
}