/* ============================================================================
   Kinema — House-style utility classes
   The signature surfaces that make anything look "Kinema" instantly.
   These wrap the raw tokens into the app's real class vocabulary.
   ============================================================================ */

/* ── Atmospheric "liquid glass" background (the app's signature bg) ────────── */
.kinema-bg {
  background-color: var(--kinema-gray-900);
  background-image:
    radial-gradient(55% 45% at 4% 0%,    rgba(29, 243, 240, 0.10), transparent 60%),
    radial-gradient(52% 45% at 100% 4%,  rgba(246, 24, 160, 0.08), transparent 60%),
    radial-gradient(90% 65% at 50% 106%, rgba(85, 75, 211, 0.16), transparent 66%);
}

/* ── Gradient text (use on ONE hero keyword) ──────────────────────────────── */
.kinema-gradient-text {
  background: var(--kinema-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Frosted-glass surfaces (three production levels) ──────────────────────── */
.kinema-glass-bar {
  background: var(--kinema-glass-bar);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.kinema-glass-panel {
  background: var(--kinema-glass-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kinema-glass-card {
  background: var(--kinema-glass-card); /* no blur — for dense lists (perf) */
}