@charset "utf-8";

/* ── Hero slide keyframes ───────────────────────────────────────────────── */
@keyframes slide1 {
  0%  { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0; }
  90% { opacity: 0; }
  100%{ opacity: 1; }
}
@keyframes slide2 {
  0%  { opacity: 0; }
  25% { opacity: 0; }
  35% { opacity: 1; }
  60% { opacity: 1; }
  70% { opacity: 0; }
  100%{ opacity: 0; }
}
@keyframes slide3 {
  0%  { opacity: 0; }
  60% { opacity: 0; }
  70% { opacity: 1; }
  90% { opacity: 1; }
  100%{ opacity: 0; }
}

/* Slow drift for the gradient blobs within each slide */
@keyframes slideFloat1 {
  0%   { background-position: 30% 50%,  70% 30%; }
  50%  { background-position: 38% 44%,  62% 36%; }
  100% { background-position: 30% 50%,  70% 30%; }
}
@keyframes slideFloat2 {
  0%   { background-position: 50% 40%,  30% 70%; }
  50%  { background-position: 44% 46%,  36% 64%; }
  100% { background-position: 50% 40%,  30% 70%; }
}
@keyframes slideFloat3 {
  0%   { background-position: 70% 60%,  40% 30%; }
  50%  { background-position: 62% 54%,  48% 36%; }
  100% { background-position: 70% 60%,  40% 30%; }
}

/* Common */
.slide1, .slide2, .slide3 {
  width: 100%; height: 100%;
  position: absolute; right: 0; top: 0; z-index: -1;
  background-size: 200% 200%, 200% 200%;
  overflow: hidden;
}

/* Slide 1 — purple / blue */
.slide1 {
  background-image:
    radial-gradient(ellipse at var(--p, 30% 50%), rgba(124,58,237,0.38) 0%, transparent 55%),
    radial-gradient(ellipse at var(--q, 70% 30%), rgba(37, 99,235,0.30) 0%, transparent 55%);
  animation:
    slide1      15s linear    infinite,
    opa1         1s linear,
    slideFloat1 22s ease-in-out infinite;
}

/* Slide 2 — teal / indigo */
.slide2 {
  background-image:
    radial-gradient(ellipse at var(--p, 50% 40%), rgba(13,148,136,0.38) 0%, transparent 55%),
    radial-gradient(ellipse at var(--q, 30% 70%), rgba(79, 70,229,0.28) 0%, transparent 55%);
  animation:
    slide2      15s linear    infinite,
    slideFloat2 26s ease-in-out infinite;
}

/* Slide 3 — pink / purple */
.slide3 {
  background-image:
    radial-gradient(ellipse at var(--p, 70% 60%), rgba(219,39,119,0.38) 0%, transparent 55%),
    radial-gradient(ellipse at var(--q, 40% 30%), rgba(124,58,237,0.28) 0%, transparent 55%);
  animation:
    slide3      15s linear    infinite,
    slideFloat3 30s ease-in-out infinite;
}