@charset "UTF-8";
/* ================================================================
   motion.css — 小さな反応と質感
   1. 光の縁：カードに触れると、カーソルの位置から縁が光ってにじむ（js/motion.js が位置を渡す）
   2. 水面の下線：本文のリンクに触れると、下線が波になって流れる
   3. 粒子感：背景にごく薄いざらつきを重ねる
   Cocoon には依存しない（光の縁を付ける先の指定だけ js/motion.js が Cocoon のクラスを使う）。
   ================================================================ */

/* ── 1. 光の縁 ─────────────────────────────── */
.wa-glow-target {
  position: relative;
  isolation: isolate;
}
.wa-glow-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-float);
  /* 縁だけに光を描く（内側を抜く） */
  padding: 1.5px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(179, 229, 252, 0.95), rgba(79, 195, 247, 0.55) 30%, rgba(38, 208, 206, 0.15) 55%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.wa-glow-target:hover > .wa-glow-edge,
.wa-glow-target:focus-visible > .wa-glow-edge {
  opacity: 1;
}

/* ── 2. 水面の下線 ─────────────────────────── */
.wa-article p a,
.wa-article li a,
.wa-article .wa-refs a {
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--glow-blue-a30), var(--glow-blue-a30));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--dur-fast) var(--ease-float);
}
.wa-article p a:hover,
.wa-article li a:hover,
.wa-article .wa-refs a:hover {
  color: var(--glow-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4' viewBox='0 0 16 4'%3E%3Cpath d='M0 2 Q4 0 8 2 T16 2' fill='none' stroke='%2326D0CE' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 16px 4px;
  background-repeat: repeat-x;
  animation: wa-wave 0.9s linear infinite;
}
@keyframes wa-wave {
  from { background-position: 0 100%; }
  to   { background-position: 16px 100%; }
}

/* ── 3. 粒子感 ─────────────────────────────── */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.6; /* 強さ。試作で「なし 0／弱 0.2／中 0.35／強 0.6」を比べて「強」に決めた */
}

@media (prefers-reduced-motion: reduce) {
  .wa-article p a:hover,
  .wa-article li a:hover,
  .wa-article .wa-refs a:hover { animation: none; }
}
@media (hover: none) {
  .wa-glow-edge { display: none; }
}