/*
 * ページの背景：ページの明るい部分の後ろに、Catppuccin Latte の淡い光（空色・ラベンダー・ピンク・ティール）を置く。
 * この層は画面に固定されていて、内容はその上をスクロールする。明るいセクションは透けていて、
 * カードはすりガラスなので、光が少し透けて見える。紺色の部分は透けない。
 *
 * 光を強く・弱くしたいときは、下の色の "/" の後ろの数字（0〜1）を変える。
 */
:root {
  --page-color: #eff1f5; /* 光の下にある地の色（Latte Base） */
  --glass: rgb(255 255 255 / 0.6); /* すりガラスのカード */
  --glass-blur: blur(16px);
}

body {
  background: var(--page-color);
}

.site-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45vw 45vw at 8% 12%, rgb(4 165 229 / 0.12), transparent 70%),
    radial-gradient(50vw 50vw at 92% 28%, rgb(114 135 253 / 0.16), transparent 70%),
    radial-gradient(55vw 45vw at 75% 95%, rgb(234 118 203 / 0.1), transparent 70%),
    radial-gradient(40vw 40vw at 18% 88%, rgb(23 146 153 / 0.1), transparent 70%);
}

/*
 * 薄いグレーの帯も光の一部にするので、セクションの区切りは余白だけ（境目は見えない）。
 * グレー（surface）の色は、写真の仮置きなど小さな部分には引き続き使う。
 */
.section--gray,
.rcs-blocks .has-surface-background-color {
  background-color: transparent !important;
}

/* 光を隠してしまう白い部分 */
.trust {
  background: transparent;
}

/* すりガラスのカードと絞り込みボタン */
.card,
.strength,
.filter-link,
.wp-block-group.is-style-rcs-card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* 番号付きカードは、右下に向かって分野の色がほんのり入るすりガラス */
ol.is-style-rcs-steps > li {
  background: linear-gradient(135deg, var(--glass) 50%, color-mix(in oklab, var(--step-color) 10%, var(--glass)));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* 紺色の帯の上のカードは枠線だけのまま */
.is-style-rcs-dark .wp-block-group.is-style-rcs-card {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 絞り込みボタンは一覧のスクロール中にカードの上を通るので、少しだけ透けにくくする */
.filter-link {
  background: rgb(255 255 255 / 0.88);
}