/* =====================================================================================================
   Footer links — what they do under the pointer and on a click, in three versions (11/13).
   The board's Tweaks set data-foot-fx on the root (a | b | c). l1-page.js adds .is-hit for one play on a click (or
   Enter), with --fx-x / --fx-y at the pointer. The quick links, the e-mail and the privacy link all behave the same.
     a  밑줄 그리기   a mint line draws in under the words; a click sends it through and draws it again
     b  화살표       the words make room and an arrow slides in; a click shoots the arrow forward and back
     c  하이라이트   a soft pill lights up behind the words; a click sends a mint ripple out from the pointer
   Without motion (reduced motion): the same states, no movement.
   ===================================================================================================== */
.l1[data-foot-fx] .l1-foot__cols a { position: relative; width: fit-content; cursor: pointer; text-decoration: none;
  transition: color 0.3s ease, padding 0.45s var(--l-ease), background-color 0.3s ease, box-shadow 0.3s ease; }
.l1[data-foot-fx] .l1-foot__cols a:hover { text-decoration: none; }                 /* in place of l1.css's plain underline */
.l1[data-foot-fx] .l1-foot__cols a:hover, .l1[data-foot-fx] .l1-foot__cols a:focus-visible { color: #ffffff; outline: none; }

/* ---------------------------------------------------------------- a · 밑줄 그리기 */
.l1[data-foot-fx="a"] .l1-foot__cols a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, var(--l-mint) 0%, #ffffff 100%); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.5s var(--l-ease); pointer-events: none; }
.l1[data-foot-fx="a"] .l1-foot__cols a:hover::after,
.l1[data-foot-fx="a"] .l1-foot__cols a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.l1[data-foot-fx="a"] .l1-foot__cols a.is-hit { animation: l1fx-a-nudge 0.6s var(--l-ease); }
.l1[data-foot-fx="a"] .l1-foot__cols a.is-hit::after { animation: l1fx-a-hit 0.72s var(--l-ease) both; }
@keyframes l1fx-a-hit {
  0% { transform: scaleX(1); transform-origin: 100% 50%; }
  44% { transform: scaleX(0); transform-origin: 100% 50%; }
  45% { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}
@keyframes l1fx-a-nudge { 0%, 100% { translate: 0; } 35% { translate: 3px 0; } }

/* ---------------------------------------------------------------- b · 화살표 (the words make room: the link grows to the
   left edge it already has, so the pointer never slips off it) */
.l1[data-foot-fx="b"] .l1-foot__cols a::before { content: ""; position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
  background: var(--l-mint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.45s var(--l-ease); pointer-events: none; }
.l1[data-foot-fx="b"] .l1-foot__cols a:hover,
.l1[data-foot-fx="b"] .l1-foot__cols a:focus-visible { padding-left: 20px; }
.l1[data-foot-fx="b"] .l1-foot__cols a:hover::before,
.l1[data-foot-fx="b"] .l1-foot__cols a:focus-visible::before { opacity: 1; transform: none; }
.l1[data-foot-fx="b"] .l1-foot__cols a.is-hit::before { animation: l1fx-b-shoot 0.62s var(--l-ease); }
@keyframes l1fx-b-shoot {
  0% { opacity: 1; transform: none; }
  45% { opacity: 0; transform: translateX(16px); }
  46% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- c · 하이라이트 (the link itself is the pill; the text keeps
   its place because the pill's padding is taken back on the left) */
.l1[data-foot-fx="c"] .l1-foot__cols a { margin-left: -10px; padding: 0 10px; border-radius: 999px; overflow: hidden; isolation: isolate; }
.l1[data-foot-fx="c"] .l1-foot__cols a:hover,
.l1[data-foot-fx="c"] .l1-foot__cols a:focus-visible { background-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.l1[data-foot-fx="c"] .l1-foot__cols a.is-hit { background-color: rgba(127, 224, 205, 0.2); box-shadow: inset 0 0 0 1px rgba(127, 224, 205, 0.6); }
.l1[data-foot-fx="c"] .l1-foot__cols a::after { content: ""; position: absolute; left: var(--fx-x, 50%); top: var(--fx-y, 50%); z-index: -1; width: 200px; height: 200px;
  margin: -100px 0 0 -100px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127, 224, 205, 0.85) 0%, rgba(127, 224, 205, 0.55) 58%, rgba(127, 224, 205, 0.9) 66%, rgba(127, 224, 205, 0) 74%);
  opacity: 0; transform: scale(0); pointer-events: none; }
.l1[data-foot-fx="c"] .l1-foot__cols a.is-hit::after { animation: l1fx-c-ripple 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes l1fx-c-ripple { 0% { opacity: 0.9; transform: scale(0.05); } 60% { opacity: 0.45; } 100% { opacity: 0; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .l1[data-foot-fx] .l1-foot__cols a, .l1[data-foot-fx] .l1-foot__cols a::before, .l1[data-foot-fx] .l1-foot__cols a::after { transition: none; }
  .l1[data-foot-fx] .l1-foot__cols a.is-hit, .l1[data-foot-fx] .l1-foot__cols a.is-hit::before, .l1[data-foot-fx] .l1-foot__cols a.is-hit::after { animation: none; }
}

/* the contact form's line under the button stays empty until someone presses it before a form service is connected
   (l1-page.js writes what happened there) */
.l1-form__note:empty { display: none; }
.l1-form[data-sent] .l1-form__note { color: #ffffff; }
.l1-form[data-sending] .l1-btn { opacity: 0.7; cursor: progress; }
/* the spam trap: a box people never see (Web3Forms drops what arrives with it ticked) */
.l1-hp { display: none !important; }