/* Gradient Background Component - Converted from Figma Design */
/* Node ID: 2282:13338 */
/* Enhanced with Clockwise Rotation Animation */

:root {
  --transform-inner-width: 1728;
  --transform-inner-height: 1117;
}

/* Keyframes for clockwise rotation */
@keyframes rotate-clockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.gradient-background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  background: linear-gradient(to bottom,
    #ffffff 0%,
    #fdfcff 48.558%,
    #ffffff 100%);
  overflow: hidden;
  z-index: 0;
}

.rotating-gradients-wrapper {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  animation: rotate-clockwise 50s linear infinite;
  transform-origin: center center;
}

.gradient-background-container:hover .rotating-gradients-wrapper {
  animation-play-state: paused;
}

/* Ellipse wrapper positioning */
.ellipse-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blue gradient ellipse (top right) */
.ellipse-blue-wrapper {
  height: calc(1px * ((var(--transform-inner-width) * 0.38138148188591003) + (var(--transform-inner-height) * 0.9244177341461182)));
  left: 476px;
  top: -395px;
  width: calc(1px * ((var(--transform-inner-height) * 0.38138148188591003) + (var(--transform-inner-width) * 0.9244177341461182)));
}

.ellipse-blue-rotate {
  flex: none;
  transform: rotate(22.419deg);
}

.ellipse-blue-inner {
  height: 1350.432px;
  position: relative;
  width: 1312.393px;
}

.ellipse-blue-inner img {
  display: block;
  width: 100%;
  height: 100%;
}

.ellipse-blue-inner-image {
  position: absolute;
  inset: -80% -80%;
  background: radial-gradient(circle at center,
    #B8D4F0 0%,
    #D6E8F8 40%,
    #E8F2FC 75%,
    rgba(232, 242, 252, 0.6) 90%,
    rgba(232, 242, 252, 0.2) 100%);
  filter: blur(80px);
}

.ellipse-blue-inner-image img {
  display: none;
}

/* Light blue gradient ellipse (top left) */
.ellipse-light-blue-wrapper {
  height: calc(1px * ((var(--transform-inner-width) * 0.38138148188591003) + (var(--transform-inner-height) * 0.9244177341461182)));
  left: 0;
  top: -369.19px;
  width: calc(1px * ((var(--transform-inner-height) * 0.38138148188591003) + (var(--transform-inner-width) * 0.9244177341461182)));
}

.ellipse-light-blue-rotate {
  flex: none;
  transform: rotate(22.419deg);
}

.ellipse-light-blue-inner {
  height: 1115.524px;
  position: relative;
  width: 1084.103px;
}

.ellipse-light-blue-inner img {
  display: block;
  width: 100%;
  height: 100%;
}

.ellipse-light-blue-inner-image {
  position: absolute;
  inset: -80% -80%;
  background: radial-gradient(circle at center,
    #B8D4F0 0%,
    #D6E8F8 40%,
    #E8F2FC 75%,
    rgba(232, 242, 252, 0.7) 90%,
    rgba(232, 242, 252, 0.3) 100%);
  filter: blur(80px);
}

.ellipse-light-blue-inner-image img {
  display: none;
}

/* Pink/red gradient ellipse (bottom left) - Hidden to match Figma design */
.ellipse-pink-wrapper {
  display: none;
  height: calc(1px * ((var(--transform-inner-width) * 0.8769325017929077) + (var(--transform-inner-height) * 0.48061349987983704)));
  left: -432px;
  top: -342.46px;
  width: calc(1px * ((var(--transform-inner-height) * 0.8769325017929077) + (var(--transform-inner-width) * 0.48061349987983704)));
}

.ellipse-pink-rotate {
  flex: none;
  transform: rotate(241.275deg);
}

.ellipse-pink-inner {
  height: 2149.385px;
  position: relative;
  width: 1878.721px;
}

.ellipse-pink-inner img {
  display: block;
  width: 100%;
  height: 100%;
}

.ellipse-pink-inner-image {
  position: absolute;
  inset: -35% -35%;
  background: radial-gradient(circle at center,
    rgba(254, 156, 156, 0.45) 0%,
    rgba(254, 156, 156, 0.35) 40%,
    rgba(245, 200, 200, 0.2) 75%,
    rgba(220, 210, 220, 0.12) 90%,
    rgba(230, 225, 235, 0.03) 100%);
  filter: blur(55px);
}

.ellipse-pink-inner-image img {
  display: none;
}

/* Purple gradient ellipse (far left) - Hidden to match Figma design */
.ellipse-purple-wrapper {
  display: none;
  height: calc(1px * ((var(--transform-inner-width) * 0.5379592776298523) + (var(--transform-inner-height) * 0.8429708480834961)));
  left: -432px;
  top: -649px;
  width: calc(1px * ((var(--transform-inner-height) * 0.5379592776298523) + (var(--transform-inner-width) * 0.8429708480834961)));
}

.ellipse-purple-rotate {
  flex: none;
  transform: rotate(327.455deg);
}

.ellipse-purple-inner {
  height: 1687.599px;
  position: relative;
  width: 1475.086px;
}

.ellipse-purple-inner img {
  display: block;
  width: 100%;
  height: 100%;
}

.ellipse-purple-inner-image {
  position: absolute;
  inset: -25% -25%;
  background: radial-gradient(circle at center,
    rgba(200, 190, 255, 0.3) 0%,
    rgba(220, 215, 255, 0.25) 40%,
    rgba(235, 230, 255, 0.15) 75%,
    rgba(245, 240, 255, 0.1) 90%,
    rgba(250, 248, 255, 0.02) 100%);
  filter: blur(40px);
}

.ellipse-purple-inner-image img {
  display: none;
}

/* Noise texture overlay */
.noise-texture-overlay {
  position: absolute;
  height: 1117px;
  left: 0;
  top: 0;
  width: 1728px;
}

.noise-texture-overlay img {
  position: absolute;
  inset: 0;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.49;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* Responsive adjustments */
@media (max-width: 1728px) {
  .gradient-background-container {
    min-height: 100vh;
  }

  .noise-texture-overlay {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 768px) {
  /* Disable rotation animation on mobile devices */
  .rotating-gradients-wrapper {
    animation: none !important;
  }

  .ellipse-blue-wrapper {
    left: 200px;
    top: -200px;
  }

  .ellipse-light-blue-wrapper {
    top: -200px;
  }

  .ellipse-pink-wrapper {
    left: -200px;
    top: -150px;
  }

  .ellipse-purple-wrapper {
    left: -200px;
    top: -300px;
  }
}