/* ─────────────────────────────────────────────────────────────
   Blue Sky Gradient Animated
   Light: sky/blue/indigo 100
   Dark:  sky/blue/indigo 800 / 30
   Без blur, без общей opacity
───────────────────────────────────────────────────────────── */

.blue-sky-gradient-animated{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  /* Light: градация светлый → темнее → светлый → чуть темнее */
  background-image: linear-gradient(120deg,
    rgba(224,242,254,0.85) 0%,    /* sky-100 (очень светлый) */
    rgba(191,219,254,0.85) 35%,   /* blue-200 (темнее) */
    rgba(224,231,255,0.85) 70%,   /* indigo-100 (светлый) */
    rgba(186,230,253,0.85) 100%   /* sky-200 (чуть темнее) */
  );

  background-size: 320% 320%;
  background-position: 0% 50%;
  animation: blueSkyGradientDrift 28s ease-in-out infinite;
}

html.dark .blue-sky-gradient-animated,
.dark .blue-sky-gradient-animated{
  /* Dark: тот же принцип (светлее/темнее), только из 800-х */
  background-image: linear-gradient(120deg,
    rgba(7,89,133,0.45) 0%,       /* sky-800/45 (чуть светлее) */
    rgba(30,64,175,0.60) 35%,     /* blue-800/60 (темнее/сильнее) */
    rgba(55,48,163,0.45) 70%,     /* indigo-800/45 (чуть светлее) */
    rgba(7,89,133,0.55) 100%      /* sky-800/55 (среднее) */
  );
}

/* ─────────────────────────────────────────────────────────────
   Violet Sky Gradient Animated
   Light: violet/fuchsia/indigo 100
   Dark:  violet/fuchsia/indigo 800 / 30
   Без blur, без общей opacity
───────────────────────────────────────────────────────────── */

.violet-sky-gradient-animated{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  /* Light (200) */
  background-image: linear-gradient(120deg,
    rgba(232, 227, 253, 0.85) 0%,   /* violet-200 */
    rgba(241, 214, 248, 0.85) 40%,  /* fuchsia-200 */
    rgba(199,210,254,0.85) 75%,  /* indigo-100 */
    rgba(232, 227, 253, 0.85) 100%
  );


  background-size: 320% 320%;
  background-position: 0% 50%;

  animation: violetSkyGradientDrift 32s ease-in-out infinite;
}

html.dark .violet-sky-gradient-animated,
.dark .violet-sky-gradient-animated{
  /* Dark (800/60) */
  background-image: linear-gradient(120deg,
    rgba(91,33,182,0.60) 0%,     /* violet-800/60 */
    rgba(134,25,143,0.60) 40%,   /* fuchsia-800/60 */
    rgba(55,48,163,0.60) 75%,    /* indigo-800/60 */
    rgba(91,33,182,0.60) 100%
  );
}

/* Плавный дрейф (медленнее и спокойнее, чем daily_message) */
@keyframes blueSkyGradientDrift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes violetSkyGradientDrift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}