/* グラインテキスト — catch-grain.css
   @property は HTML 内 <style> だとエディタの色分けを壊すため外部化 */

@property --cg-1-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --cg-1-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --cg-2-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --cg-2-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --cg-3-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --cg-3-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.catch-grain {
  --cg-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  /* 光源は最下部帯。X だけ左右に振る */
  --cg-1-x: 28;
  --cg-1-y: 86;
  --cg-2-x: 22;
  --cg-2-y: 88;
  --cg-3-x: 36;
  --cg-3-y: 84;
  display: block;
  isolation: isolate;
  /* lighten は背面スキャンライン等と合成され、光が文字の前後を行き来して見えるため通常合成にする */
  mix-blend-mode: normal;
  background:
    var(--cg-grain),
    conic-gradient(
      from 140deg at calc(var(--cg-1-x) * 1%) calc(var(--cg-1-y) * 1%),
      hsl(30deg 100% 5%),
      hsl(238deg 100% 5%),
      hsl(60deg 100% 99%),
      hsl(248deg 100% 31%),
      hsl(315deg 64% 51%),
      hsl(25deg 95% 61%),
      hsl(55deg 100% 75%),
      hsl(60deg 100% 99%),
      hsl(199deg 94% 74%),
      hsl(236deg 95% 28%),
      hsl(244deg 100% 4%)
    ),
    radial-gradient(
      ellipse 55% 42% at calc(var(--cg-2-x) * 1%) calc(var(--cg-2-y) * 1%),
      rgba(255, 255, 255, 0.55) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse 50% 38% at calc(var(--cg-3-x) * 1%) calc(var(--cg-3-y) * 1%),
      hsla(212deg, 94%, 68%, 0.7) 0%,
      transparent 50%
    );
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px, 140% 140%, 120% 120%, 120% 120%;
  background-position: center, center, center, center;
  background-blend-mode: soft-light, normal, soft-light, soft-light;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: catch-grain-bg 6.67s linear infinite alternate;
}

/* スマホ：光源アニメを止め、静止グラデのみ（Interlude 01 入場時の負荷を抑える） */
@media (max-width: 639px) {
  .catch-grain {
    --cg-1-x: 50;
    --cg-1-y: 96;
    --cg-2-x: 44;
    --cg-2-y: 98;
    --cg-3-x: 56;
    --cg-3-y: 95;
    background-size: 140px, 115% 115%, 110% 110%, 110% 110%;
    animation: none;
  }
}

/* 最下部で左右往復（Y はほぼ固定、X だけ大きく動かす） */
@keyframes catch-grain-bg {
  0% {
    --cg-1-x: 18;
    --cg-1-y: 86;
    --cg-2-x: 12;
    --cg-2-y: 88;
    --cg-3-x: 26;
    --cg-3-y: 84;
  }
  50% {
    --cg-1-x: 50;
    --cg-1-y: 87;
    --cg-2-x: 44;
    --cg-2-y: 89;
    --cg-3-x: 56;
    --cg-3-y: 85;
  }
  100% {
    --cg-1-x: 82;
    --cg-1-y: 86;
    --cg-2-x: 88;
    --cg-2-y: 88;
    --cg-3-x: 74;
    --cg-3-y: 84;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catch-grain {
    animation: none !important;
    mix-blend-mode: normal;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--paper-a95);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    clip-path: none !important;
  }
}