/**
 * Long Sang — cinematic portfolio visual tokens (SSoT for showreel HTML + React shell).
 * Mood: near-B&W stage · warm paper white accent only · sharp chrome · mono labels.
 */
:root {
  --cine-bg: #040006;
  --cine-fg: #fffaf6;
  --cine-muted: rgba(244, 238, 233, 0.68);
  --cine-line: rgba(244, 238, 233, 0.26);
  --cine-border: rgba(244, 238, 233, 0.44);
  --cine-border-hover: rgba(244, 238, 233, 0.86);
  --cine-surface: rgba(4, 0, 6, 0.48);
  --cine-surface-hover: rgba(4, 0, 6, 0.66);
  --cine-bg-overlay: 0.10;
  --cine-ease: cubic-bezier(0.6, 0, 0.3, 1);
  --cine-radius: 0;
  --cine-display: "Playfair Display", "YuMincho", "Hiragino Mincho ProN", Georgia, serif;
  --cine-mono: "JetBrains Mono", ui-monospace, monospace;
  --cine-sans: "DM Sans", system-ui, sans-serif;
  --cine-be-vietnam: "Be Vietnam Pro", "DM Sans", system-ui, sans-serif;
  --cine-space-grotesk: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --cine-sora: "Sora", "DM Sans", system-ui, sans-serif;
  --cine-manrope: "Manrope", "DM Sans", system-ui, sans-serif;
  --cine-archivo: "Archivo", "DM Sans", system-ui, sans-serif;
  --cine-noto-sans: "Noto Sans", "DM Sans", system-ui, sans-serif;

  /* Aliases used by showreel pages */
  --bg: var(--cine-bg);
  --fg: var(--cine-fg);
  --muted: var(--cine-muted);
  --line: var(--cine-line);
  --ease: var(--cine-ease);
  --serif: var(--cine-display);
  --mono: var(--cine-mono);
  --sans: var(--cine-sans);

  /* Mono stroke icons — warm paper on dark, no glow */
  --cine-ico: var(--cine-fg);
  --cine-ico-muted: rgba(244, 238, 233, 0.82);
  --cine-ico-size: 15px;
  --cine-ico-size-sm: 13px;

  /* DEV Fix cluster position (title + subtitle). Set by showreel-field-styles.js */
  --cluster-ox: 0px;
  --cluster-oy: 0px;
}

/* Title/sub cluster offset — left/top so it does not fight parallax transform on #title */
#title,
#subtitle {
  position: relative;
  left: var(--cluster-ox, 0px);
  top: var(--cluster-oy, 0px);
}

/* Shared icon chrome (showreel HTML shells) */
.cine-ico {
  display: inline-block;
  flex-shrink: 0;
  width: var(--cine-ico-size);
  height: var(--cine-ico-size);
  color: var(--cine-ico-muted);
  vertical-align: middle;
  pointer-events: none;
}
.cine-ico-sm {
  width: var(--cine-ico-size-sm);
  height: var(--cine-ico-size-sm);
}
.cine-ico-mark {
  width: 18px;
  height: 18px;
  color: var(--cine-ico);
  opacity: 0.85;
}