/* marquee — 動きのプリセット（接頭辞 pf-）。説明は ../PRESET.md
 * 案件での使い方：流れる文字は要素にせず .giant の疑似要素で描く（style.css）。ここでは書体・色・輪郭と pf-marquee の動きだけを使う */
.pf-marquee {
  --pf-speed: 48s;
  --pf-size: 120px;
  --pf-color: #24364f;
  --pf-opacity: 0.32;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  font-size: var(--pf-size);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--pf-color);
  opacity: var(--pf-opacity);
}
.pf-marquee--outline { color: transparent; -webkit-text-stroke: 1.5px var(--pf-color); }
@keyframes pf-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .giant.is-on::before, .page[data-giant]::before { animation: none; }
}