/* Flowing prism / silk banner backgrounds */

.section-banner.prism-animated {
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 125% 125%;
  animation: banner-bg-flow 32s ease-in-out infinite;
  will-change: background-position;
}

@keyframes banner-bg-flow {
  0% {
    background-position: 0% 45%;
  }
  25% {
    background-position: 85% 25%;
  }
  50% {
    background-position: 100% 75%;
  }
  75% {
    background-position: 15% 90%;
  }
  100% {
    background-position: 0% 45%;
  }
}

/* Shifting color wash over the photo */
.section-banner.prism-animated::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 25% 35%, rgba(214, 98, 248, 0.45), transparent 68%),
    radial-gradient(ellipse 50% 40% at 75% 55%, rgba(107, 23, 130, 0.5), transparent 70%),
    radial-gradient(ellipse 45% 38% at 45% 85%, rgba(240, 212, 247, 0.35), transparent 72%),
    radial-gradient(ellipse 40% 35% at 90% 20%, rgba(190, 73, 223, 0.3), transparent 65%);
  animation: banner-mesh-drift 24s ease-in-out infinite;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

@keyframes banner-mesh-drift {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(4%, -3%) rotate(2deg) scale(1.05);
  }
  66% {
    transform: translate(-3%, 4%) rotate(-1.5deg) scale(1.03);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

.section-banner.prism-animated::before {
  z-index: 1;
  background: linear-gradient(
    125deg,
    rgba(107, 23, 130, 0.55) 0%,
    rgba(190, 73, 223, 0.4) 45%,
    rgba(107, 23, 130, 0.5) 100%
  );
  animation: banner-overlay-pulse 20s ease-in-out infinite;
}

@keyframes banner-overlay-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

.section-banner.prism-animated .prism-bubbles {
  z-index: 2;
}

.section-banner.prism-animated .container {
  z-index: 3;
}

.section-banner.prism-animated h2 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

/* Floating 3D spheres (Measured by Practice banner, etc.) */
.section-banner--float::before {
  background: linear-gradient(
    125deg,
    rgba(107, 23, 130, 0.42) 0%,
    rgba(190, 73, 223, 0.28) 50%,
    rgba(107, 23, 130, 0.38) 100%
  );
}

.section-banner--float {
  animation-duration: 26s;
}

.banner-spheres {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.banner-sphere {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(244, 225, 249, 0.55) 35%,
    rgba(190, 73, 223, 0.35) 70%,
    rgba(107, 23, 130, 0.2) 100%
  );
  box-shadow:
    inset -6px -10px 20px rgba(107, 23, 130, 0.12),
    inset 4px 4px 12px rgba(255, 255, 255, 0.5),
    0 16px 48px rgba(107, 23, 130, 0.18);
  animation: sphere-float 14s ease-in-out infinite;
  will-change: transform;
}

.banner-sphere--1 {
  width: clamp(72px, 14vw, 140px);
  height: clamp(72px, 14vw, 140px);
  left: 5%;
  top: 18%;
  animation-duration: 17s;
  animation-delay: 0s;
}

.banner-sphere--2 {
  width: clamp(100px, 18vw, 200px);
  height: clamp(100px, 18vw, 200px);
  right: -3%;
  top: 8%;
  opacity: 0.9;
  animation-duration: 22s;
  animation-delay: -4s;
  filter: blur(0.5px);
}

.banner-sphere--3 {
  width: clamp(56px, 10vw, 110px);
  height: clamp(56px, 10vw, 110px);
  left: 28%;
  bottom: 5%;
  animation-duration: 13s;
  animation-delay: -2s;
  animation-name: sphere-float-b;
}

.banner-sphere--4 {
  width: clamp(40px, 7vw, 80px);
  height: clamp(40px, 7vw, 80px);
  right: 22%;
  top: 42%;
  opacity: 0.75;
  animation-duration: 19s;
  animation-delay: -7s;
}

.banner-sphere--5 {
  width: clamp(88px, 15vw, 160px);
  height: clamp(88px, 15vw, 160px);
  left: 42%;
  top: -8%;
  opacity: 0.65;
  filter: blur(1px);
  animation-duration: 25s;
  animation-delay: -11s;
}

.banner-sphere--6 {
  width: clamp(32px, 5vw, 56px);
  height: clamp(32px, 5vw, 56px);
  right: 38%;
  bottom: 12%;
  opacity: 0.6;
  animation-duration: 11s;
  animation-delay: -5s;
  animation-name: sphere-float-c;
}

@keyframes sphere-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(14px, -18px) scale(1.04);
  }
  66% {
    transform: translate(-10px, 12px) scale(0.98);
  }
}

@keyframes sphere-float-b {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-16px, -14px) scale(1.06);
  }
}

@keyframes sphere-float-c {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.55;
  }
  50% {
    transform: translate(10px, -16px);
    opacity: 0.8;
  }
}

.section-banner--float .prism-bubbles {
  z-index: 2;
}

.section-banner--float .container {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .section-banner.prism-animated {
    animation: none;
    background-size: cover;
    background-position: center;
  }

  .section-banner.prism-animated::after,
  .section-banner.prism-animated::before {
    animation: none;
  }

  .banner-sphere {
    animation: none;
  }
}