/* ======================================== */
/* SELECT CART GLOBAL BACKGROUND FOUNDATION */
/* ======================================== */

body::before {

  content: "";
  position: fixed;
  inset: 0;
  z-index: -50;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7f5ff 45%,
    #f3efff 100%
  );

}



/* ======================================== */
/* BACKGROUND DRIFT LAYERS */
/* ======================================== */

.select-cart-bg-layer,
.select-cart-bg-layer-2 {

  position: fixed;

  top: -50vh;
  left: -50vw;

  width: 200vw;
  height: 200vh;

  pointer-events: none;

}



/* Desktop blur */
.select-cart-bg-layer {
  z-index: -40;
  filter: blur(102px);
}

.select-cart-bg-layer-2 {
  z-index: -39;
  filter: blur(102px);
}



/* Mobile blur reduction for visibility */
@media (max-width: 767px) {

  .select-cart-bg-layer {
    filter: blur(45px);
  }

  .select-cart-bg-layer-2 {
    filter: blur(45px);
  }

}



/* ======================================== */
/* BLOB BASE STYLING */
/* ======================================== */

.select-cart-bg-layer::before,
.select-cart-bg-layer::after,
.select-cart-bg-layer-2::before {

  content: "";
  position: absolute;

  width: min(900px, 60vw);
  height: min(900px, 60vw);

  border-radius: 50%;

}



/* Larger mobile blobs */
@media (max-width: 767px) {

  .select-cart-bg-layer::before,
  .select-cart-bg-layer::after,
  .select-cart-bg-layer-2::before {

    width: 85vw;
    height: 85vw;

  }

}



/* ======================================== */
/* DESKTOP BLOBS */
/* ======================================== */

/* Purple */
.select-cart-bg-layer::before {

  background: radial-gradient(
    circle,
    rgba(123,97,255,0.55) 0%,
    rgba(123,97,255,0.35) 40%,
    transparent 70%
  );

  animation: selectCartDriftPurple 38s ease-in-out infinite alternate;

}

/* Pink */
.select-cart-bg-layer::after {

  background: radial-gradient(
    circle,
    rgba(255,111,216,0.50) 0%,
    rgba(255,111,216,0.30) 40%,
    transparent 70%
  );

  animation: selectCartDriftPink 44s ease-in-out infinite alternate;

}

/* Blue */
.select-cart-bg-layer-2::before {

  background: radial-gradient(
    circle,
    rgba(80,140,255,0.50) 0%,
    rgba(80,140,255,0.30) 40%,
    transparent 70%
  );

  animation: selectCartDriftBlue 41s ease-in-out infinite alternate;

}



/* ======================================== */
/* MOBILE VISIBILITY BOOST */
/* stronger colors */
/* ======================================== */

@media (max-width: 767px) {

  /* Purple */
  .select-cart-bg-layer::before {

    background: radial-gradient(
      circle,
      rgba(123,97,255,0.85) 0%,
      rgba(123,97,255,0.60) 35%,
      rgba(123,97,255,0.25) 55%,
      transparent 75%
    );

  }

  /* Pink */
  .select-cart-bg-layer::after {

    background: radial-gradient(
      circle,
      rgba(255,111,216,0.80) 0%,
      rgba(255,111,216,0.55) 35%,
      rgba(255,111,216,0.25) 55%,
      transparent 75%
    );

  }

  /* Blue */
  .select-cart-bg-layer-2::before {

    background: radial-gradient(
      circle,
      rgba(80,140,255,0.85) 0%,
      rgba(80,140,255,0.55) 35%,
      rgba(80,140,255,0.25) 55%,
      transparent 75%
    );

  }

}



/* ======================================== */
/* DESKTOP ANIMATION */
/* ======================================== */

@keyframes selectCartDriftPurple {

  0%   { transform: translate(5vw, 10vh); }
  25%  { transform: translate(80vw, 20vh); }
  50%  { transform: translate(30vw, 85vh); }
  75%  { transform: translate(70vw, 60vh); }
  100% { transform: translate(15vw, 40vh); }

}

@keyframes selectCartDriftPink {

  0%   { transform: translate(85vw, 75vh); }
  25%  { transform: translate(10vw, 20vh); }
  50%  { transform: translate(60vw, 10vh); }
  75%  { transform: translate(20vw, 80vh); }
  100% { transform: translate(75vw, 45vh); }

}

@keyframes selectCartDriftBlue {

  0%   { transform: translate(40vw, 5vh); }
  25%  { transform: translate(70vw, 85vh); }
  50%  { transform: translate(10vw, 50vh); }
  75%  { transform: translate(85vw, 25vh); }
  100% { transform: translate(35vw, 70vh); }

}



/* ======================================== */
/* SELECT CART GLASS CONTAINER */
/* ======================================== */

.select-cart-glass {

  position: relative;
  z-index: 10;

  background: rgba(255,255,255,0.12);

  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);

  border-radius: 20px;

  padding: 15px;

  box-shadow:
    0 5px 20px rgba(80,60,255,0.045),
    0 1px 5px rgba(0,0,0,0.025);

  border-top: 1px solid rgba(255,255,255,0.65);
  border-left: 1px solid rgba(255,255,255,0.55);

  border-right: 1px solid rgba(0,0,0,0.045);
  border-bottom: 1px solid rgba(0,0,0,0.065);

}

@media (min-width: 768px) {

  .select-cart-glass {
    padding: 50px;
  }

}



/* enhanced glass sheen */
.select-cart-glass::before {

  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.20) 30%,
    rgba(255,255,255,0.06) 55%,
    rgba(0,0,0,0.025) 75%,
    rgba(0,0,0,0.065) 100%
  );

  pointer-events: none;

}



/* ======================================== */
/* Floating Animated Menu Bar */
/* ======================================== */

#menu-animation {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 9999;

  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}

#menu-animation.hidden {

  transform: translateY(-100%);
  opacity: 0;

  transition: transform 2s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 2s cubic-bezier(0.65, 0, 0.35, 1);

}

#menu-animation.visible {

  transform: translateY(0);
  opacity: 1;

  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);

}