/* 누름 리플 — 문서 41 구현 순서 27 (2026-10-28) · 사이트 설정 site.motion.ripple = "on"

   버튼(.btn · .nav-cta)을 누른 자리(gl-ripple.js 가 적는 --gl-ripple-x · -y)에서 둥근 물결(::after)이 번지며 옅어진다.
   🔴 버튼 안에 요소를 넣지 않는다 — 그림은 ::after 하나 · 누를 수 없다(pointer-events: none) · 글 뒤에 깔린다(z-index -1 · isolation).
   🔴 색은 버튼 글자색(currentColor) — 밝게 · 어둡게 · 버튼 종류마다 저절로 맞는다. 색값을 새로 적지 않는다.
   🔴 움직이는 것은 transform(scale) · opacity 뿐. 움직임 줄이기에서는 그리지 않는다. 스크립트가 없으면 표시가 안 달려 아무것도 안 보인다. */
:root { --gl-ripple-dur: .65s; --gl-ripple-alpha: .28; }
:root[data-gl-ripple="on"] :is(.btn, .nav-cta) { position: relative; overflow: hidden; isolation: isolate; }
:root[data-gl-ripple="on"] :is(.btn, .nav-cta)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: var(--gl-ripple-x, 50%); top: var(--gl-ripple-y, 50%);
  width: var(--gl-ripple-d, 0px); height: var(--gl-ripple-d, 0px);
  border-radius: 50%; background: currentColor;
  opacity: 0; transform: translate(-50%, -50%) scale(0);
}
:root[data-gl-ripple="on"] :is(.btn, .nav-cta).is-ripple-a::after { animation: gl-ripple-a var(--gl-ripple-dur) cubic-bezier(.2, .6, .35, 1) both; }
:root[data-gl-ripple="on"] :is(.btn, .nav-cta).is-ripple-b::after { animation: gl-ripple-b var(--gl-ripple-dur) cubic-bezier(.2, .6, .35, 1) both; }
@keyframes gl-ripple-a {
  0%   { opacity: var(--gl-ripple-alpha); transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes gl-ripple-b {
  0%   { opacity: var(--gl-ripple-alpha); transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-gl-ripple="on"] :is(.btn, .nav-cta)::after { content: none; animation: none; }
}