/* ================================
   THEME GRADIENT MOTION
================================ */

.theme-gradient-motion {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #050816 0%,
      #08142f 35%,
      #0b1736 65%,
      #050d21 100%
    );

  color: #ffffff;

  isolation: isolate;

  padding: clamp(80px, 8vw, 140px) 0;
}

/* ================================
   ANIMATED LIGHT BLOBS
================================ */

.theme-gradient-motion::before,
.theme-gradient-motion::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .25;
  pointer-events: none;
}

.theme-gradient-motion::before {
  top: -180px;
  left: -120px;

  background: rgba(47, 128, 255, .35);

  animation: gradientFloatOne 14s ease-in-out infinite;
}

.theme-gradient-motion::after {
  bottom: -220px;
  right: -140px;

  background: rgba(124, 58, 237, .30);

  animation: gradientFloatTwo 18s ease-in-out infinite;
}

/* ================================
   MOVING OVERLAY
================================ */

.theme-gradient-motion .motion-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.04), transparent 18%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.03), transparent 22%);

  animation: meshMove 18s linear infinite;

  pointer-events: none;
}

/* ================================
   CONTENT LAYER
================================ */

.theme-gradient-motion > * {
  position: relative;
  z-index: 2;
}

/* ================================
   TYPOGRAPHY
================================ */

.theme-gradient-motion .section-label {
  color: #66aaff;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 14px;
}

.theme-gradient-motion .section-heading {
  color: #ffffff;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.theme-gradient-motion .section-text {
  color: rgba(255,255,255,.76);
  font-size: 18px;
  line-height: 1.8;
  max-width: 760px;
}

/* ================================
   BUTTONS
================================ */

.theme-gradient-motion .button,
.theme-gradient-motion .kt-button {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);

  color: #ffffff;
  border-radius: 999px;

  transition: all .35s ease;
}

.theme-gradient-motion .button:hover,
.theme-gradient-motion .kt-button:hover {
  transform: translateY(-2px);

  border-color: rgba(47,128,255,.45);

  box-shadow:
    0 0 30px rgba(47,128,255,.18);
}

/* ================================
   CARDS
================================ */

.theme-gradient-motion .card-glass,
.theme-gradient-motion .card-stylist,
.theme-gradient-motion .kt-blocks-info-box-link-wrap {
  background: rgba(255,255,255,.05) !important;

  border: 1px solid rgba(255,255,255,.08) !important;

  backdrop-filter: blur(18px);

  box-shadow:
    0 12px 40px rgba(0,0,0,.25);

  border-radius: 22px !important;
}

.theme-gradient-motion .card-glass:hover,
.theme-gradient-motion .card-stylist:hover,
.theme-gradient-motion .kt-blocks-info-box-link-wrap:hover {
  transform: translateY(-8px);

  border-color: rgba(47,128,255,.25) !important;

  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 35px rgba(47,128,255,.08);
}

/* ================================
   ICONS
================================ */

.theme-gradient-motion .kt-info-svg-icon {
  background:
    linear-gradient(
      135deg,
      rgba(47,128,255,.14),
      rgba(124,58,237,.08)
    );

  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 0 30px rgba(47,128,255,.10);
}

.theme-gradient-motion .icon svg,
.theme-gradient-motion .kt-info-svg-icon svg {
  opacity: .92;
}

/* ================================
   ANIMATIONS
================================ */

@keyframes gradientFloatOne {
  0%, 100% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(60px,40px);
  }
}

@keyframes gradientFloatTwo {
  0%, 100% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(-60px,-50px);
  }
}

@keyframes meshMove {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 767px) {
  .theme-gradient-motion .section-heading {
    font-size: 38px;
  }

  .theme-gradient-motion .section-text {
    font-size: 16px;
  }

  .theme-gradient-motion::before,
  .theme-gradient-motion::after {
    width: 380px;
    height: 380px;
  }
}

/* ================================
   REDUCED MOTION
================================ */

@media (prefers-reduced-motion: reduce) {
  .theme-gradient-motion::before,
  .theme-gradient-motion::after,
  .theme-gradient-motion .motion-overlay {
    animation: none !important;
  }
}