/* =========================================================
   Mizunara Studio
   Base / Global
========================================================= */

/* =========================================================
   SECTION DESCRIPTION
========================================================= */

.section-description {
  max-width: 700px;

  margin: 0 auto 50px;

  opacity: 0.85;

  line-height: 1.7;

  text-align: center;
}

/* =========================================================
   GLASS
========================================================= */

.glass {
  border: 1px solid var(--border);

  background: var(--glass);

  box-shadow: var(--shadow);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);
}

/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

body {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(216, 180, 254, 0.28),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 30%,
      rgba(212, 180, 131, 0.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 85%,
      rgba(233, 213, 255, 0.35),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #faf7ff,
      #fff7fc
    );
}

/* =========================================================
   AMBIENT BACKGROUND CONTAINER
========================================================= */

.ambient-bg {
  position: fixed;

  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}

/* =========================================================
   AMBIENT ORBS
========================================================= */

.ambient-orb {
  position: absolute;

  border-radius: 50%;

  opacity: 0.42;

  filter: blur(70px);

  animation:
    ambientMove
    18s
    ease-in-out
    infinite
    alternate;
}

/* =========================================================
   ORB 1
========================================================= */

.orb-1 {
  top: 8%;
  left: -8%;

  width: 360px;
  height: 360px;

  background: #d8b4fe;
}

/* =========================================================
   ORB 2
========================================================= */

.orb-2 {
  top: 18%;
  right: -10%;

  width: 420px;
  height: 420px;

  background: #d4b483;

  animation-delay: 4s;
}

/* =========================================================
   ORB 3
========================================================= */

.orb-3 {
  bottom: 5%;
  left: 12%;

  width: 380px;
  height: 380px;

  background: #f5c2e7;

  animation-delay: 7s;
}

/* =========================================================
   ORB 4
========================================================= */

.orb-4 {
  right: 24%;
  bottom: 18%;

  width: 300px;
  height: 300px;

  background: #ffffff;

  animation-delay: 10s;
}

/* =========================================================
   AMBIENT ANIMATION
========================================================= */

@keyframes ambientMove {
  from {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(45px, -35px, 0)
      scale(1.12);
  }
}

/* =========================================================
   ANCHOR OFFSET
   Evita que el navbar sticky cubra los títulos
========================================================= */

section[id] {
  scroll-margin-top: 125px;
}

@media (max-width: 768px) {
  section[id] {
    scroll-margin-top: 105px;
  }
}