/**
 * Hover button effects PT.5 — style @code_candy
 * ripple · scratch · grass · heat · lantern · helix
 * Exclure .lgk-truck-btn (ajout panier)
 *
 * Règle : tous les effets sont clips DANS le bouton
 * (position:relative + overflow:hidden — jamais sur la carte).
 */

.lgk-btn-fx,
a.lgk-btn-fx,
button.lgk-btn-fx,
.lgk-btn-fx.lgk-spc__cta,
.lgk-btn-fx.lgk-card-v2__cta-link,
html.lgk-storefront--erotica .lgk-btn-fx,
html.lgk-storefront--erotica a.lgk-btn-fx,
html.lgk-storefront--wayne .lgk-btn-fx,
html.lgk-storefront--wayne a.lgk-btn-fx {
  --lgk-btn-mx: 50%;
  --lgk-btn-my: 50%;
  --lgk-btn-mx-n: 50;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  transition:
    transform 0.22s ease,
    box-shadow 0.28s ease,
    border-color 0.22s ease,
    filter 0.28s ease;
}

.lgk-btn-fx:not(:disabled):hover {
  transform: translateY(-1px);
}

.lgk-btn-fx:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--store-primary, #00d4aa) 80%, white);
  outline-offset: 3px;
}

/* ——— RIPPLE ——— */
.lgk-btn-fx--ripple::before {
  content: "";
  position: absolute;
  left: var(--lgk-btn-mx);
  top: var(--lgk-btn-my);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
}

.lgk-btn-fx--ripple:hover::before,
.lgk-btn-fx--ripple.is-rippling::before {
  animation: lgk-btn-ripple 0.7s ease-out;
}

@keyframes lgk-btn-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.85;
  }
  100% {
    width: 280%;
    height: 280%;
    opacity: 0;
  }
}

/* ——— SCRATCH (foil erase under cursor) ——— */
.lgk-btn-fx--scratch {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(180deg, #c5c9d4, #8b93a7) !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.lgk-btn-fx--scratch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      -18deg,
      rgba(255, 255, 255, 0.35) 0 2px,
      rgba(148, 163, 184, 0.25) 2px 4px,
      rgba(255, 255, 255, 0.1) 4px 7px
    ),
    linear-gradient(145deg, #e8ebf2, #9aa3b5 55%, #6b7280);
  -webkit-mask-image: radial-gradient(
    circle 2.4rem at var(--lgk-btn-mx) var(--lgk-btn-my),
    transparent 0,
    transparent 35%,
    #000 70%
  );
  mask-image: radial-gradient(
    circle 2.4rem at var(--lgk-btn-mx) var(--lgk-btn-my),
    transparent 0,
    transparent 35%,
    #000 70%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: -1;
}

.lgk-btn-fx--scratch:hover::after {
  opacity: 1;
}

/* ——— GRASS ——— */
.lgk-btn-fx--grass::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  border-radius: inherit;
  background:
    radial-gradient(1.1rem 2.2rem at 6% 100%, #22c55e 48%, transparent 50%),
    radial-gradient(0.95rem 2rem at 14% 100%, #16a34a 48%, transparent 50%),
    radial-gradient(1.2rem 2.4rem at 22% 100%, #4ade80 48%, transparent 50%),
    radial-gradient(1rem 2.1rem at 30% 100%, #22c55e 48%, transparent 50%),
    radial-gradient(1.15rem 2.3rem at 38% 100%, #15803d 48%, transparent 50%),
    radial-gradient(1rem 2rem at 46% 100%, #4ade80 48%, transparent 50%),
    radial-gradient(1.2rem 2.5rem at 54% 100%, #22c55e 48%, transparent 50%),
    radial-gradient(0.9rem 1.9rem at 62% 100%, #16a34a 48%, transparent 50%),
    radial-gradient(1.1rem 2.2rem at 70% 100%, #4ade80 48%, transparent 50%),
    radial-gradient(1rem 2.1rem at 78% 100%, #22c55e 48%, transparent 50%),
    radial-gradient(1.15rem 2.3rem at 86% 100%, #15803d 48%, transparent 50%),
    radial-gradient(1rem 2rem at 94% 100%, #4ade80 48%, transparent 50%);
  transform-origin: 50% 100%;
  transform: skewX(calc((50 - var(--lgk-btn-mx-n, 50)) * 0.35deg));
  transition: transform 0.18s ease-out, opacity 0.25s ease;
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  filter: saturate(1.15);
}

.lgk-btn-fx--grass:hover::before {
  opacity: 1;
}

/* ——— HEAT ——— */
.lgk-btn-fx--heat {
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12);
}

.lgk-btn-fx--heat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle 4.5rem at var(--lgk-btn-mx) var(--lgk-btn-my),
      rgba(255, 237, 74, 0.85) 0%,
      rgba(249, 115, 22, 0.55) 28%,
      rgba(220, 38, 38, 0.35) 48%,
      transparent 72%
    );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}

.lgk-btn-fx--heat:hover::before,
.lgk-btn-fx--heat:focus-visible::before {
  opacity: 1;
}

.lgk-btn-fx--heat:hover {
  border-color: rgba(251, 146, 60, 0.85) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 140, 0.35),
    0 8px 22px rgba(249, 115, 22, 0.22);
  filter: none;
}

/* ——— LANTERN (spotlight follows cursor) ——— */
.lgk-btn-fx--lantern {
  background-color: #12151c !important;
  color: #f5f0e6 !important;
  border: 1px solid rgba(245, 198, 112, 0.22) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    repeating-linear-gradient(
      90deg,
      rgba(92, 64, 40, 0.35) 0 2px,
      rgba(40, 28, 18, 0.5) 2px 5px
    ) !important;
}

.lgk-btn-fx--lantern::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle 3.2rem at var(--lgk-btn-mx) var(--lgk-btn-my),
      rgba(255, 214, 120, 0.95) 0%,
      rgba(255, 170, 60, 0.45) 35%,
      rgba(20, 16, 12, 0.15) 70%,
      transparent 100%
    );
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  z-index: -1;
}

.lgk-btn-fx--lantern::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: -1;
}

.lgk-btn-fx--lantern:hover::before {
  opacity: 1;
}

.lgk-btn-fx--lantern:hover {
  border-color: rgba(255, 196, 90, 0.55) !important;
  box-shadow: 0 0 28px rgba(255, 170, 60, 0.22);
}

/* ——— HELIX / DNA ——— */
.lgk-btn-fx--helix::before,
.lgk-btn-fx--helix::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  top: 50%;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lgk-btn-fx--helix::before {
  background: linear-gradient(
    90deg,
    transparent,
    #60a5fa,
    #a78bfa,
    #60a5fa,
    transparent
  );
  box-shadow: 0 0 12px #60a5fa;
  transform: translateY(-7px);
  animation: lgk-btn-helix-a 1.6s linear infinite;
}

.lgk-btn-fx--helix::after {
  background: linear-gradient(
    90deg,
    transparent,
    #c084fc,
    #38bdf8,
    #c084fc,
    transparent
  );
  box-shadow: 0 0 12px #c084fc;
  transform: translateY(7px);
  animation: lgk-btn-helix-b 1.6s linear infinite;
}

.lgk-btn-fx--helix:hover::before,
.lgk-btn-fx--helix:hover::after {
  opacity: 1;
}

@keyframes lgk-btn-helix-a {
  0% {
    transform: translateY(-7px) scaleX(0.92);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: translateY(7px) scaleX(1.05);
  }
  100% {
    transform: translateY(-7px) scaleX(0.92);
    filter: hue-rotate(40deg);
  }
}

@keyframes lgk-btn-helix-b {
  0% {
    transform: translateY(7px) scaleX(1.05);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: translateY(-7px) scaleX(0.92);
  }
  100% {
    transform: translateY(7px) scaleX(1.05);
    filter: hue-rotate(-30deg);
  }
}

/* Storefront defaults: don't fight truck ATC */
.lgk-truck-btn.lgk-btn-fx,
.lgk-truck-btn .lgk-btn-fx {
  /* noop guard — boot skips these */
}

@media (prefers-reduced-motion: reduce) {
  .lgk-btn-fx--ripple::before,
  .lgk-btn-fx--helix::before,
  .lgk-btn-fx--helix::after,
  .lgk-btn-fx--grass::before {
    animation: none !important;
  }
  .lgk-btn-fx:hover {
    transform: none;
  }
}

@media (hover: none) {
  .lgk-btn-fx--lantern::before,
  .lgk-btn-fx--heat::before,
  .lgk-btn-fx--scratch::after {
    opacity: 0.35;
    --lgk-btn-mx: 50%;
    --lgk-btn-my: 50%;
  }
}