/* Magic Vibes — меш-градієнт сплешу.
   Без бібліотек, без canvas, без WebGL. Три плями рухаються по власних
   орбітах із некратними періодами, тому візерунок не повторюється помітно.

   Правила, які тримають 60 fps:
   • анімуються тільки transform і opacity — жодного перерахунку макета;
   • blur-фільтра немає: мʼякість дає сам radial-gradient із прозорим краєм;
   • шар меша ізольовано через contain та will-change;
   • на мобільному лишається дві плями і довші періоди;
   • prefers-reduced-motion зупиняє рух і лишає статичний кадр. */

.splash {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #2A2352;            /* bg/dark */
  border-radius: 48px;            /* radius/blob; на головній — 0 */
}

.splash__mesh {
  position: absolute;
  inset: -20%;                    /* запас, щоб краї плям не заходили в кадр */
  z-index: 0;
  contain: paint;
  pointer-events: none;
}

.splash__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.splash__blob--violet {
  width: 68%;
  aspect-ratio: 1.3;
  top: -12%;
  left: -10%;
  background: radial-gradient(circle at 50% 50%,
              rgba(124, 92, 230, .95) 0%,
              rgba(124, 92, 230, .55) 45%,
              rgba(124, 92, 230, 0) 70%);
  animation: drift-a 34s ease-in-out infinite;
}

.splash__blob--orange {
  width: 60%;
  aspect-ratio: 1.15;
  bottom: -16%;
  right: -8%;
  background: radial-gradient(circle at 50% 50%,
              rgba(240, 138, 75, .92) 0%,
              rgba(240, 138, 75, .5) 45%,
              rgba(240, 138, 75, 0) 70%);
  animation: drift-b 43s ease-in-out infinite;
}

.splash__blob--peach {
  width: 44%;
  aspect-ratio: 1.2;
  top: -6%;
  right: 6%;
  background: radial-gradient(circle at 50% 50%,
              rgba(255, 210, 174, .7) 0%,
              rgba(255, 210, 174, .35) 45%,
              rgba(255, 210, 174, 0) 70%);
  animation: drift-c 27s ease-in-out infinite;
}

/* Орбіти. Зсув не більший за 12 % ширини екрана: рух має бути помітним
   тільки якщо на нього дивитися спеціально. */
@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(6%, 4%, 0) scale(1.06); }
  66%  { transform: translate3d(-3%, 7%, 0) scale(.97); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  40%  { transform: translate3d(-7%, -5%, 0) scale(1.08); }
  75%  { transform: translate3d(4%, -2%, 0) scale(.96); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-5%, 6%, 0) scale(1.05); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Фото в підложці: край розчиняється в меші */
.splash__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 40%;
  z-index: 1;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 62%);
          mask-image: linear-gradient(to right, transparent 0%, #000 62%);
}

@media (max-width: 720px) {
  .splash__photo {
    inset: auto 0 0 0;
    width: 100%;
    height: 45%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  }
  .splash__blob--peach { display: none; }
  .splash__blob--violet { animation-duration: 52s; }
  .splash__blob--orange { animation-duration: 64s; }
}

.splash__content { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .splash__blob { animation: none; }
}

/* Світлий варіант меша для секцій на білому */
.mesh-light { background: #FFFFFF; }
.mesh-light .splash__blob--violet {
  background: radial-gradient(circle at 50% 50%, rgba(220, 207, 240, .9) 0%, rgba(220, 207, 240, 0) 70%);
}
.mesh-light .splash__blob--orange {
  background: radial-gradient(circle at 50% 50%, rgba(255, 210, 174, .85) 0%, rgba(255, 210, 174, 0) 70%);
}
.mesh-light .splash__blob--peach {
  background: radial-gradient(circle at 50% 50%, rgba(207, 224, 245, .8) 0%, rgba(207, 224, 245, 0) 70%);
}