@charset "UTF-8";

/* ========================================
   Background Base
======================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -6;
  pointer-events: none;
  background:
    radial-gradient(
      108vw 108vw at var(--orb-x) var(--orb-y),
      rgba(190,210,255,.42) 0%,
      rgba(190,210,255,.26) 24%,
      rgba(190,210,255,.12) 44%,
      rgba(190,210,255,0) 70%
    ),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
  filter: blur(10px) saturate(118%);
  transform: translateZ(0);
}

body.menu-open::before {
  transform: scale(1.03);
  opacity: .94;
}

body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: .14;
  background-image: radial-gradient(rgba(0,0,0,.06) .5px, transparent .6px);
  background-size: 10px 10px;
  mix-blend-mode: soft-light;
}


/* ========================================
   Gradient Orbs（固定・動かない）
======================================== */
.bg-orbs {
  position: fixed;
  inset: -12%;
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
  filter: blur(16px) saturate(145%);
  transform: translateZ(0);
}

.bg-orb {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}

.bg-orb.-a {
  width: 104vw;
  height: 84vw;
  min-width: 600px;
  min-height: 600px;
  background: radial-gradient(circle at 50% 50%,
    rgba(90,160,255,.1) 0%,
    rgba(90,160,255,.1) 38%,
    rgba(90,160,255,0) 100%);
  transform: translate3d(80vw, 32vh, 0) scale(1.1);
  border-radius: 58% 42% 64% 36% / 38% 62% 40% 60%;
}

.bg-orb.-b {
  width: 60vw;
  height: 50vw;
  min-width: 440px;
  min-height: 440px;
  background: radial-gradient(circle at 50% 50%,
    rgba(212,176,255,.1) 0%,
    rgba(212,176,255,.1) 44%,
    rgba(212,176,255,0) 100%);
  transform: translate3d(10vw, 44vh, 0) scale(1.1);
  border-radius: 68% 32% 54% 46% / 36% 64% 34% 66%;
}

.bg-orb.-c {
  width: 28vw;
  height: 28vw;
  min-width: 340px;
  min-height: 340px;
  background: radial-gradient(circle at 50% 50%,
    rgba(164,230,198,.3) 0%,
    rgba(164,230,198,.3) 44%,
    rgba(164,230,198,0) 100%);
  transform: translate3d(-4vw, 42vh, 0) scale(1.1);
  border-radius: 48% 52% 70% 30% / 36% 64% 42% 58%;
}


/* ========================================
   Liquid Background（固定・動かない）
======================================== */
.liquid-bg {
  position: fixed;
  inset: -18%;
  z-index: -4;
  pointer-events: none;
  filter: blur(55px) saturate(140%);
}

.liquid-blob {
  position: absolute;
  opacity: .22;
}

.blob1 {
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle,
    rgba(110,170,255,1) 0%,
    rgba(110,170,255,.7) 40%,
    rgba(110,170,255,0) 70%);
  transform: translate(18vw, 18vh);
  border-radius: 50%;
}

.blob2 {
  width: 27vw;
  height: 27vw;
  background: radial-gradient(circle,
    rgba(210,180,255,.8) 0%,
    rgba(210,180,255,.5) 40%,
    rgba(210,180,255,0) 70%);
  transform: translate(58vw, 32vh);
  border-radius: 60% 40% 55% 45% / 45% 65% 35% 55%;
}

.blob3 {
  width: 24vw;
  height: 24vw;
  background: radial-gradient(circle,
    rgba(180,235,205,.8) 0%,
    rgba(180,235,205,.4) 40%,
    rgba(180,235,205,0) 70%);
  transform: translate(72vw, 10vh);
  border-radius: 42% 58% 38% 62% / 60% 40% 65% 35%;
}

.blob4 {
  width: 30vw;
  height: 30vw;
  background: radial-gradient(circle,
    rgba(180,210,255,.6) 0%,
    rgba(180,210,255,.3) 40%,
    rgba(180,210,255,0) 70%);
  transform: translate(28vw, 52vh);
  border-radius: 65% 35% 45% 55% / 35% 60% 40% 65%;
}

.blob5 {
  width: 22vw;
  height: 22vw;
  background: radial-gradient(circle,
    rgba(210,210,255,.6) 0%,
    rgba(210,210,255,.3) 40%,
    rgba(210,210,255,0) 70%);
  transform: translate(76vw, 56vh);
  border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%;
}


/* ========================================
   Responsive
======================================== */
@media (max-width: 767px) {
  .bg-orb.-a {
    width: 110vw;
    height: 110vw;
    min-width: 320px;
    min-height: 320px;
  }

  .bg-orb.-b {
    width: 78vw;
    height: 78vw;
    min-width: 240px;
    min-height: 240px;
  }

  .bg-orb.-c {
    width: 62vw;
    height: 62vw;
    min-width: 180px;
    min-height: 180px;
  }

  .blob1 { width: 46vw; height: 46vw; }
  .blob2 { width: 32vw; height: 32vw; }
  .blob3 { width: 28vw; height: 28vw; }
  .blob4 { width: 38vw; height: 38vw; }
  .blob5 { width: 24vw; height: 24vw; }
}