/* ═══════════════════════════════════════════════════════════════════════
   ASSET-IDENTITY-V1 — one visual identity for Reels & Cuts, both surfaces.
   (Roughy 2026-07-25: "we need this beautiful sparkle identical in both
   places… SP is beautiful, they just should be better in SP.")

   The rendering PATHS differ (SP builds desktop unified-cards, DC builds a
   phone feed) — Roughy is fine with two render paths. What must NOT differ
   is the IDENTITY: a Reel looks like a Reel and a Cut looks like a Cut
   whether you're on desktop or phone. That identity lives here, once, keyed
   on two surface-agnostic classes any card root can wear:

       .asset-reel   the definition — a multi-hue SPECTRUM edge + reel badge.
                     .asset-reel.is-active adds the "you're building this"
                     shimmer.
       .asset-cut    the render, the invitation — a deep CINEMATIC black
                     frame + warm gold glint + clapper badge.

   Both SP's .unified-card and DC's .cut-slide add these classes to their own
   card element. The spectrum, the frame, the badges are defined ONCE here —
   change the look in one place, both surfaces move together. No drift.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ai-spectrum: linear-gradient(135deg, #7c5cff, #2ec5ff 32%, #33d9a6 55%, #ffd23f 78%, #ff5c8a);
  --ai-cut-matte: #050505;
  --ai-cut-glint: #e8b64c;
}

/* ─────────────────────────  REEL  ───────────────────────── */
/* Spectrum edge via a padded gradient border so the card's own content keeps
   clean corners inside a multi-hue frame. Works on any positioned card root. */
.asset-reel {
  position: relative;
  border: 2px solid transparent !important;
  border-radius: 14px;
  background-image:
    linear-gradient(var(--ai-card-bg, #17141f), var(--ai-card-bg, #17141f)),
    var(--ai-spectrum);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
/* the reel badge — a drawn dc-icon on a dark chip ringed in spectrum */
.ai-badge {
  position: absolute; top: 8px; left: 8px; z-index: 6;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 6px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  line-height: 1;
}
.asset-reel .ai-badge {
  color: #fff;
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(rgba(12,10,20,0.78), rgba(12,10,20,0.78)),
    var(--ai-spectrum);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.ai-badge svg { width: 14px; height: 14px; }
.asset-reel .ai-badge svg [stroke], .asset-reel .ai-badge svg { stroke: #fff; }

/* ACTIVE reel — the one you're building. Slow spectrum sweep + glow. */
.asset-reel.is-active {
  background-size: 100% 100%, 300% 300%;
  animation: aiReelShimmer 5.5s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(124,92,255,0.30);
}
.asset-reel.is-active .ai-badge::after { content: " · Building"; opacity: 0.85; }
@keyframes aiReelShimmer {
  0%,100% { background-position: 0% 0%, 0% 50%; }
  50%     { background-position: 0% 0%, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .asset-reel.is-active { animation: none; box-shadow: 0 0 0 3px rgba(124,92,255,0.55); }
}

/* ─────────────────────────  CUT  ───────────────────────── */
/* Deep cinematic matte + a single warm gold glint catching the top edge,
   echoing the black-framed share clip people are invited to view. */
.asset-cut {
  position: relative;
  background-color: var(--ai-cut-matte) !important;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 60px rgba(0,0,0,0.85),
    0 6px 22px rgba(0,0,0,0.5);
}
.asset-cut::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(232,182,76,0.16), transparent 30%);
  mix-blend-mode: screen;
}
.asset-cut .ai-badge {
  color: var(--ai-cut-glint);
  background: rgba(5,5,5,0.72);
  border: 1px solid rgba(232,182,76,0.4);
}
.asset-cut .ai-badge svg { width: 13px; height: 13px; }
.asset-cut .ai-badge svg [stroke], .asset-cut .ai-badge svg { stroke: var(--ai-cut-glint); }

/* cinematic spec strip — runtime · asset count, like a film's specs */
.ai-filmmeta {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 6;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  font-size: 0.68rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.82);
  font-variant-numeric: tabular-nums;
}
.ai-filmmeta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(232,182,76,0.7); }

/* ─────────────────────────  PDF  ───────────────────────── */
/* PDF-CARD-V1 (Roughy 2026-07-26): document identity — a slate badge on the
   page-1 miniature. Restrained (a document, not a hero asset). */
.ai-badge-pdf {
  color: #e8eaed;
  background: rgba(40,44,52,0.82);
  border: 1px solid rgba(180,190,205,0.35);
}
.ai-badge-pdf svg { width: 13px; height: 13px; }
.ai-badge-pdf svg [stroke], .ai-badge-pdf svg path, .ai-badge-pdf svg rect { stroke: #c8cdd4; }
.is-pdf .unified-card,
.unified-card.is-pdf { box-shadow: inset 0 0 0 1px rgba(180,190,205,0.14); }