/* ============================================================
   Studio Quattro — Effects
   Restraint by default. The "artistic side" (glow, blur, grain,
   gradients) lives in imagery, not in chrome. Chrome stays clean.
   ============================================================ */
:root {
  /* ---- Shadows (soft, sparse — editorial paper, not material UI) ---- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(38,38,38,0.06);
  --shadow-md:  0 8px 24px rgba(38,38,38,0.10);
  --shadow-lg:  0 24px 60px rgba(38,38,38,0.16);

  /* ---- Accent glows (the cinematic "glow" motif) ---- */
  --glow-pink: 0 0 60px rgba(254,55,106,0.45);
  --glow-blue: 0 0 60px rgba(13,5,242,0.40);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   520ms; /* @kind other */

  /* ---- Overlays / protection ---- */
  --scrim-dark:  linear-gradient(180deg, rgba(38,38,38,0) 40%, rgba(38,38,38,0.72) 100%); /* @kind other */
  --scrim-top:   linear-gradient(180deg, rgba(38,38,38,0.55) 0%, rgba(38,38,38,0) 45%); /* @kind other */

  /* ---- Grain overlay opacity (apply film grain to imagery) ---- */
  --grain-opacity: 0.06; /* @kind other */

  /* ---- Blur ---- */
  --blur-sm: 6px;  /* @kind other */
  --blur-md: 16px; /* @kind other */
  --blur-lg: 40px; /* @kind other */
}

/* Film-grain utility — layer over cinematic imagery */
.sq-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}