/* SMAU FILE
 * Path: css/smau-cues.css
 *
 * Owns:
 *   - #smau-cue-tint — the wash of colour a mind can ask for over the whole
 *     screen (js/smau.cues.js, the `screen` cue).
 *
 * Strict Mode:
 *   - One element. It never takes a pointer event and never sits above a
 *     modal's own scrim.
 *
 * Notes:
 *   - Adding a colour is a name in SCREEN_VALUES and a rule here. That is the
 *     whole extension point, on purpose.
 *   - The tint is LIGHT, not paint: it must never make text unreadable, so
 *     every value stays under 0.2 alpha and uses screen/overlay blending
 *     rather than a flat cover.
 */

#smau-cue-tint {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease, background 1.6s ease;
  mix-blend-mode: overlay;
  background: transparent;
}

#smau-cue-tint[data-tint="clear"] {
  opacity: 0;
  background: transparent;
}

#smau-cue-tint[data-tint="warm"] {
  opacity: 1;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 186, 110, 0.18), rgba(255, 138, 76, 0.08) 70%, transparent);
}

#smau-cue-tint[data-tint="cold"] {
  opacity: 1;
  background: radial-gradient(120% 100% at 50% 0%, rgba(126, 196, 255, 0.16), rgba(78, 140, 214, 0.08) 70%, transparent);
}

#smau-cue-tint[data-tint="dusk"] {
  opacity: 1;
  background: linear-gradient(180deg, rgba(120, 96, 190, 0.18), rgba(38, 30, 70, 0.12));
}

#smau-cue-tint[data-tint="amber"] {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255, 176, 59, 0.17), rgba(180, 96, 20, 0.07));
}

#smau-cue-tint[data-tint="rose"] {
  opacity: 1;
  background: radial-gradient(110% 90% at 50% 110%, rgba(255, 122, 158, 0.18), transparent 75%);
}

#smau-cue-tint[data-tint="storm"] {
  opacity: 1;
  background: linear-gradient(180deg, rgba(96, 108, 128, 0.19), rgba(24, 30, 40, 0.14));
}

@media (prefers-reduced-motion: reduce) {
  #smau-cue-tint { transition: none; }
}