/* Soft blob background — 3 drifting gradients, no JS.
   Applied via .landing-blob-bg wrapper on the body of the landing page. */

/* HTML hidden attribute must beat Tailwind display classes (e.g. grid, flex). */
[hidden] {
  display: none !important;
}

.landing-blob-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.landing-blob-bg::before,
.landing-blob-bg::after,
.landing-blob-bg > .blob-3 {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.38;
  pointer-events: none;
  will-change: transform;
}

.landing-blob-bg::before {
  width: 60vw;
  height: 60vw;
  top: -10vw;
  left: -15vw;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.7), transparent 60%);
  animation: blob-drift-a 48s ease-in-out infinite alternate;
}

.landing-blob-bg::after {
  width: 50vw;
  height: 50vw;
  top: 30vw;
  right: -10vw;
  background: radial-gradient(circle at center, rgba(236, 72, 153, 0.55), transparent 60%);
  animation: blob-drift-b 56s ease-in-out infinite alternate;
}

.landing-blob-bg > .blob-3 {
  width: 45vw;
  height: 45vw;
  top: 70vw;
  left: 20vw;
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.45), transparent 60%);
  animation: blob-drift-c 64s ease-in-out infinite alternate;
}

@keyframes blob-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vw, 6vw) scale(1.1); }
}

@keyframes blob-drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6vw, 4vw) scale(0.95); }
}

@keyframes blob-drift-c {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4vw, -8vw) scale(1.08); }
}

/* Persona-tab progress indicator. Two layers under active tab:
   - ::before — статичная фоновая полоска под активным табом (всегда видна, светлая)
   - ::after — прогресс-бар, заполняется слева направо за 5 сек */
.persona-tab {
  position: relative;
}

.persona-tab.active::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(99, 102, 241, 0.25);
  border-radius: 2px;
}

.persona-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-600, #6366f1);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  animation: tab-progress 5s linear forwards;
}

.persona-tab.active.paused::after {
  animation-play-state: paused;
}

@keyframes tab-progress {
  to { transform: scaleX(1); }
}

/* Reduce motion — kill all blob drift and tab progress animations */
@media (prefers-reduced-motion: reduce) {
  .landing-blob-bg::before,
  .landing-blob-bg::after,
  .landing-blob-bg > .blob-3 {
    animation: none;
  }
  .persona-tab.active::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* Mobile — softer blobs to keep text contrast */
@media (max-width: 640px) {
  .landing-blob-bg::before,
  .landing-blob-bg::after,
  .landing-blob-bg > .blob-3 {
    opacity: 0.22;
    filter: blur(50px);
  }
}