/* Social clips — real footage + platform-faithful chrome in HTML/SVG.
 * Anatomy per platform (icon silhouettes, rail placement, caption/audio rows,
 * progress) is what makes each one recognizable; no wordmarks, no numbers,
 * no accounts. Sized in cqw against a 390px reference phone. Below ~160px the
 * chrome is dropped and the tile is footage only. */

.clip {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 9 / 16;
  isolation: isolate;
}
.clip-inner {
  position: absolute; inset: 0;
  border-radius: var(--radius-clip);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-float);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .clip:hover .clip-inner { transform: translateY(-4px); box-shadow: var(--shadow-float-hover); }
}
.clip-inner > img, .clip-inner > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.clip-inner > video { opacity: 0; transition: opacity 260ms var(--ease-out); }
.clip.is-playing .clip-inner > video { opacity: 1; }

/* the real control: a full-tile button; decorative chrome never receives pointer events */
.clip-play {
  position: absolute; inset: 0; z-index: 5;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-clip);
  color: #fff;
}
.clip-play:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.clip-play .glyph {
  position: absolute; left: 50%; top: 50%; width: 12cqw; height: 12cqw;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 160ms var(--ease-out);
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6));
}
.clip-play:focus-visible .glyph { opacity: 1; }
.clip.is-playing .clip-play .glyph .play { display: none; }
.clip:not(.is-playing) .clip-play .glyph .pause { display: none; }

/* ---- overlay ---- */
.ov {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 4.1cqw; line-height: 1.3; letter-spacing: -0.01em;
  text-shadow: 0 0.3cqw 1.2cqw rgba(0,0,0,0.45);
}
.ov-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.26) 18%, rgba(0,0,0,0.05) 34%, transparent 46%);
}
.ov-i { width: 8.2cqw; height: 8.2cqw; display: block; filter: drop-shadow(0 0.4cqw 1.2cqw rgba(0,0,0,0.5)); }
.ov-i--sm { width: 4.2cqw; height: 4.2cqw; }
.ov-rail { position: absolute; right: 3.6cqw; display: flex; flex-direction: column; align-items: center; }
.ov-act { display: flex; flex-direction: column; align-items: center; }
.ov-meta { position: absolute; left: 4cqw; }
.ov-cap { margin: 0; font-size: 3.9cqw; line-height: 1.32; }
.ov-cap b { font-weight: 600; }
.ov-audio { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.5cqw; opacity: 0.92; margin-top: 1.8cqw; white-space: nowrap; overflow: hidden; }
.ov-audio .ov-i--sm { flex: none; }
.ov-thumb {
  width: 9.5cqw; height: 9.5cqw; border-radius: 2cqw; border: 0.5cqw solid rgba(255,255,255,0.9);
  background-size: cover; background-position: center;
}
.ov-top { position: absolute; top: 3.6cqw; left: 4cqw; right: 4cqw; display: flex; align-items: center; }
.ov-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 0.7cqw; background: rgba(255,255,255,0.25); }
.ov-progress::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(.34); transform-origin: left; background: rgba(255,255,255,0.95); }
.clip.is-playing .ov-progress::after { animation: ov-progress var(--clip-dur, 3s) linear infinite; }
@keyframes ov-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.no-motion .clip.is-playing .ov-progress::after { animation: none; }

/* -- TikTok: filled icons, tall right rail with the spinning disc, tabs on top -- */
.ov--tiktok .ov-rail { bottom: 14cqw; gap: 5cqw; }
.ov--tiktok .ov-i { width: 8.8cqw; height: 8.8cqw; }
.ov--tiktok .ov-disc {
  width: 11cqw; height: 11cqw; border-radius: 50%; margin-top: 1.5cqw;
  background: radial-gradient(circle, #1a1a1a 0 20%, transparent 21%), var(--art) center/cover;
  box-shadow: 0 0 0 2.4cqw #141414, 0 0 0 2.9cqw #2a2a2a;
}
.clip.is-playing .ov--tiktok .ov-disc { animation: ov-spin 1.2s linear infinite; }
@keyframes ov-spin { to { transform: rotate(360deg); } }
html.no-motion .clip.is-playing .ov--tiktok .ov-disc { animation: none; }
.ov--tiktok .ov-meta { bottom: 8.5cqw; right: 20cqw; }
.ov--tiktok .ov-top { justify-content: center; gap: 5cqw; font-size: 4.1cqw; }
.ov--tiktok .ov-tab { opacity: 0.72; }
.ov--tiktok .ov-tab--on { opacity: 1; font-weight: 700; position: relative; }
.ov--tiktok .ov-tab--on::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -1.6cqw; height: 0.6cqw; background: #fff; border-radius: 1cqw; }

/* -- Reels: outlined icons, paper plane, audio thumb, "Reels" header + camera -- */
.ov--reels .ov-rail { bottom: 12cqw; gap: 5.2cqw; }
.ov--reels .ov-meta { bottom: 7cqw; right: 18cqw; }
.ov--reels .ov-top { justify-content: space-between; }
.ov--reels .ov-title { font-weight: 700; font-size: 5.4cqw; letter-spacing: -0.02em; }
.ov--reels .ov-thumb { margin-top: 1cqw; }

/* -- Shorts: thumbs up/down, remix, kebab, red progress, search + kebab on top -- */
.ov--shorts .ov-rail { bottom: 12cqw; gap: 4.6cqw; }
.ov--shorts .ov-i { width: 8cqw; height: 8cqw; }
.ov--shorts .ov-meta { bottom: 8cqw; right: 20cqw; }
.ov--shorts .ov-cap { font-size: 4cqw; }
.ov--shorts .ov-top { justify-content: flex-end; gap: 4cqw; }
.ov--shorts .ov-progress { height: 0.9cqw; background: rgba(255,255,255,0.3); }
.ov--shorts .ov-progress::after { background: #ff0000; }

/* below the legibility floor, and for background tiles: footage only */
.clip--bg .ov, .clip--bg .clip-play .glyph { display: none; }
@container (max-width: 158px) { .ov { display: none; } }