/*
 * Button effects, shared by every renderer.
 * See Product/docs/button-effects.md.
 *
 * Usage: add `lc-fx-<effect>` to the button. For glow and shine set
 * `--lc-fx-color` to the button background colour. Add `lc-fx-paused` to
 * stop a loop (a field on the step received focus).
 *
 * Looping effects only run when the visitor has not asked for reduced
 * motion. Hover effects also fire on keyboard focus.
 */

.lc-fx-rock,
.lc-fx-wiggle,
.lc-fx-pulse,
.lc-fx-heartbeat,
.lc-fx-glow,
.lc-fx-shine,
.lc-fx-bounce,
.lc-fx-lift,
.lc-fx-grow,
.lc-fx-fill-slide,
.lc-fx-shake,
.lc-fx-icon-slide {
  position: relative;
  will-change: transform;
}

.lc-fx-shine,
.lc-fx-fill-slide {
  overflow: hidden;
}

/* ---------------------------------------------------------- loops */

@media (prefers-reduced-motion: no-preference) {
  .lc-fx-rock { animation: lcFxRock 2.5s ease-in-out infinite; transform-origin: 50% 100%; }
  .lc-fx-wiggle { animation: lcFxWiggle 3.4s ease-in-out infinite; }
  .lc-fx-pulse { animation: lcFxPulse 2.2s ease-in-out infinite; }
  .lc-fx-heartbeat { animation: lcFxHeartbeat 2.4s ease-in-out infinite; }
  .lc-fx-bounce { animation: lcFxBounce 3s ease-in-out infinite; }
  .lc-fx-glow { animation: lcFxGlow 2s ease-out infinite; }
  .lc-fx-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: lcFxShine 3s ease-in-out infinite;
    pointer-events: none;
  }
  .lc-fx-arrow-nudge .lc-fx-icon,
  .lc-fx-arrow-nudge svg:last-child {
    animation: lcFxNudge 1.6s ease-in-out infinite;
  }

  /* A field on this step got focus: freeze every loop. */
  .lc-fx-paused,
  .lc-fx-paused::after,
  .lc-fx-paused .lc-fx-icon,
  .lc-fx-paused svg:last-child {
    animation: none !important;
  }
}

@keyframes lcFxRock {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-3deg); }
  30% { transform: rotate(3deg); }
  45% { transform: rotate(-2deg); }
  60% { transform: rotate(2deg); }
  75% { transform: rotate(0deg); }
}

@keyframes lcFxWiggle {
  0%, 30%, 100% { transform: translateX(0); }
  4% { transform: translateX(-4px); }
  8% { transform: translateX(4px); }
  12% { transform: translateX(-3px); }
  16% { transform: translateX(3px); }
  20% { transform: translateX(-1px); }
  24% { transform: translateX(1px); }
}

@keyframes lcFxPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes lcFxHeartbeat {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.06); }
  20% { transform: scale(1); }
  30% { transform: scale(1.06); }
}

@keyframes lcFxBounce {
  0%, 20%, 100% { transform: translateY(0); }
  6% { transform: translateY(-6px); }
  12% { transform: translateY(0); }
  16% { transform: translateY(-3px); }
}

@keyframes lcFxGlow {
  0% { box-shadow: 0 0 0 0 var(--lc-fx-color, currentColor); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 14px transparent; }
}

@keyframes lcFxShine {
  0%, 60%, 100% { left: -75%; }
  30% { left: 125%; }
}

@keyframes lcFxNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ---------------------------------------------------------- hover */

.lc-fx-lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.lc-fx-lift:hover,
.lc-fx-lift:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.35);
}

.lc-fx-grow { transition: transform 0.18s ease; }
.lc-fx-grow:hover,
.lc-fx-grow:focus-visible { transform: scale(1.05); }

/* The wipe uses the hover colour the renderer already sets as a variable;
   the base background stays underneath so the text never flashes. */
.lc-fx-fill-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lc-fx-hover-color, rgba(0, 0, 0, 0.12));
  transform: translateX(-101%);
  transition: transform 0.28s ease;
  pointer-events: none;
}
.lc-fx-fill-slide:hover::before,
.lc-fx-fill-slide:focus-visible::before { transform: translateX(0); }
.lc-fx-fill-slide > * { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .lc-fx-shake:hover,
  .lc-fx-shake:focus-visible { animation: lcFxShakeOnce 0.5s ease-in-out 1; }
}
@keyframes lcFxShakeOnce {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.lc-fx-icon-slide .lc-fx-icon,
.lc-fx-icon-slide svg:last-child { transition: transform 0.18s ease; }
.lc-fx-icon-slide:hover .lc-fx-icon,
.lc-fx-icon-slide:focus-visible .lc-fx-icon,
.lc-fx-icon-slide:hover svg:last-child,
.lc-fx-icon-slide:focus-visible svg:last-child { transform: translateX(4px); }

/* ---------------------------------------------------------- sub text */

.lc-btn-subtext {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}
.lc-btn-subtext--muted { color: #6b7280; }

/* Inside the button: a second, smaller line under the label that inherits
   the button's text colour. "muted" softens it instead of greying it. */
.lc-btn-subtext--inside {
  margin-top: 2px;
  font-size: 0.78em;
  line-height: 1.3;
  font-weight: 500;
  color: inherit;
  opacity: 0.92;
}
.lc-btn-subtext--inside.lc-btn-subtext--muted { color: inherit; opacity: 0.72; }