/* ヒーローぼかし円（TOP・下層ページ共通） */
@property --hero-blob-a {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(255, 75, 95);
}

@property --hero-blob-b {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(255, 130, 145);
}

.page-hero {
  position: relative;
  overflow: visible;
}

.page-hero > :not(.hero-visual) {
  position: relative;
  z-index: 2;
}

.hero-visual {
  --hero-visual-w: min(800px, 38vw);
  --hero-visual-h: min(560px, 38vw);
  --hero-blob-main: min(118%, 560px);
  --hero-blob-sub: min(82%, 380px);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  width: var(--hero-visual-w);
  height: var(--hero-visual-h);
  aspect-ratio: 1 / 1;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 1;
  pointer-events: none;
}

/* TOP ヒーロー：home.css の .hero > * より優先して absolute を維持 */
.hero .hero-visual {
  position: absolute;
  z-index: 1;
}

/* 下層ページ：サイズはここで調整 */
.page-hero .hero-visual {
  --hero-visual-w: min(560px, 30vw);
  --hero-visual-h: min(400px, 30vw);
  --hero-blob-main: min(110%, 400px);
  --hero-blob-sub: min(78%, 260px);
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-visual::before {
  width: var(--hero-blob-main);
  height: var(--hero-blob-main);
  right: -6%;
  top: 42%;
  transform: translateY(-50%) translateZ(0);
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--hero-blob-a) 88%, white) 0%,
    color-mix(in srgb, var(--hero-blob-b) 52%, transparent) 44%,
    transparent 72%
  );
  filter: blur(40px) saturate(2.22);
  animation: hero-blob-hero-main 26s ease-in-out infinite;
}

.hero-visual::after {
  width: var(--hero-blob-sub);
  height: var(--hero-blob-sub);
  left: 5%;
  bottom: -15%;
  transform: translateZ(0);
  background: radial-gradient(
    circle at 44% 48%,
    color-mix(in srgb, var(--hero-blob-a) 72%, white) 0%,
    color-mix(in srgb, var(--hero-blob-b) 48%, transparent) 46%,
    transparent 74%
  );
  filter: blur(40px) saturate(2.18);
  animation: hero-blob-hero-main 26s ease-in-out infinite;
  animation-delay: -13s;
}

@keyframes hero-blob-hero-main {
  0%,
  10% {
    --hero-blob-a: rgb(255, 75, 95);
    --hero-blob-b: rgb(255, 130, 145);
  }
  18% {
    --hero-blob-a: rgb(255, 150, 88);
    --hero-blob-b: rgb(255, 195, 130);
  }
  25%,
  33% {
    --hero-blob-a: rgb(255, 205, 55);
    --hero-blob-b: rgb(255, 235, 140);
  }
  41% {
    --hero-blob-a: rgb(130, 205, 205);
    --hero-blob-b: rgb(175, 230, 245);
  }
  50%,
  58% {
    --hero-blob-a: rgb(45, 150, 255);
    --hero-blob-b: rgb(145, 205, 255);
  }
  66% {
    --hero-blob-a: rgb(50, 188, 155);
    --hero-blob-b: rgb(125, 225, 195);
  }
  75%,
  83% {
    --hero-blob-a: rgb(52, 200, 110);
    --hero-blob-b: rgb(145, 235, 175);
  }
  91% {
    --hero-blob-a: rgb(215, 115, 95);
    --hero-blob-b: rgb(240, 165, 145);
  }
  100% {
    --hero-blob-a: rgb(255, 75, 95);
    --hero-blob-b: rgb(255, 130, 145);
  }
}

@media (max-width: 900px) {
  .hero-visual {
    right: 0;
    top: auto;
    bottom: clamp(40px, 8vw, 80px);
    transform: none;
    width: min(520px, 74vw);
    height: min(520px, 50vw);
    opacity: 1;
  }

  .page-hero .hero-visual {
    width: min(400px, 68vw);
    height: min(320px, 46vw);
    bottom: clamp(24px, 6vw, 56px);
  }

  .hero-visual::before {
    right: 0;
    top: -155%;
    width: 50%;
    height: 50%;
    transform: translateZ(0);
  }

  .page-hero .hero-visual::before {
    top: -140%;
    width: 46%;
    height: 46%;
  }

  .hero-visual::after {
    width: 30%;
    height: 30%;
    left: 35%;
    bottom: 160%;
  }

  .page-hero .hero-visual::after {
    width: 26%;
    height: 26%;
    left: 38%;
    bottom: 145%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual::before {
    animation: none;
    filter: blur(40px) saturate(1.22);
    --hero-blob-a: rgb(255, 75, 95);
    --hero-blob-b: rgb(255, 130, 145);
    background: radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--hero-blob-a) 88%, white) 0%,
      color-mix(in srgb, var(--hero-blob-b) 52%, transparent) 44%,
      transparent 72%
    );
  }

  .hero-visual::after {
    animation: none;
    animation-delay: 0s;
    filter: blur(36px) saturate(1.18);
    --hero-blob-a: rgb(255, 75, 95);
    --hero-blob-b: rgb(255, 130, 145);
    background: radial-gradient(
      circle at 44% 48%,
      color-mix(in srgb, var(--hero-blob-a) 72%, white) 0%,
      color-mix(in srgb, var(--hero-blob-b) 48%, transparent) 46%,
      transparent 74%
    );
  }
}