/* Boutons prismatic — adapté depuis Uiverse.io by mamyapro123 */

.sketchy-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.prismatic-btn-wrap,
.prismatic-btn-wrap *,
.prismatic-btn-wrap *::before,
.prismatic-btn-wrap *::after {
  box-sizing: border-box;
}

.prismatic-btn-wrap {
  position: relative;
  display: inline-block;
  border-radius: 60px;
  padding: 4px;
  background: conic-gradient(
    from 200deg,
    var(--pink),
    var(--mustard),
    var(--sage),
    var(--teal),
    var(--lavender),
    var(--pink),
    var(--mustard),
    var(--sage)
  );
  box-shadow:
    4px 4px 0 var(--navy),
    0 0 0 2px var(--navy);
  animation:
    prismatic-border-spin 5s linear infinite,
    prismatic-wobble 4s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.prismatic-btn-wrap--sm {
  padding: 3px;
  border-radius: 50px;
  box-shadow:
    3px 3px 0 var(--navy),
    0 0 0 2px var(--navy);
}

.prismatic-btn-wrap--block {
  display: block;
  width: 100%;
}

.prismatic-btn-wrap:hover {
  box-shadow:
    6px 6px 0 var(--navy),
    0 0 0 2px var(--navy);
  transform: translateY(-2px) scale(1.02) rotate(0deg) !important;
  animation:
    prismatic-border-spin 2s linear infinite,
    prismatic-wobble-fast 0.5s ease-in-out infinite;
}

.prismatic-btn-wrap:active {
  transform: translateY(2px) scale(0.98) !important;
  box-shadow:
    1px 1px 0 var(--navy),
    0 0 0 2px var(--navy);
}

.prismatic-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 220px;
  height: 54px;
  padding: 0 2rem;
  border-radius: 50px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 30% 20%, rgba(232, 176, 89, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 75% 70%, rgba(142, 170, 158, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 20%, rgba(168, 209, 209, 0.35) 0%, transparent 55%),
    var(--cream);
  border: none;
  outline: none;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  font-family: var(--font-body);
  filter: url(#sketchy);
}

.prismatic-btn-wrap--sm .prismatic-btn {
  min-width: auto;
  height: 40px;
  padding: 0 1.25rem;
  border-radius: 40px;
}

.prismatic-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 10px,
    rgba(36, 55, 81, 0.03) 10px,
    rgba(36, 55, 81, 0.03) 11px
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.prismatic-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  width: 84%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 70%, transparent 100%);
  border-radius: inherit;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  pointer-events: none;
  z-index: 2;
}

.prismatic-shimmer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}

.prismatic-shimmer::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -60%;
  width: 35%;
  height: 300%;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.45) 50%, transparent 75%);
  transform: skewX(-15deg);
  animation: prismatic-shimmer 3.5s ease-in-out infinite;
}

.prismatic-btn-wrap:hover .prismatic-shimmer::after {
  animation: prismatic-shimmer-fast 1.2s ease-in-out infinite;
}

.prismatic-glow {
  position: absolute;
  inset: -8px;
  border-radius: 70px;
  background: conic-gradient(
    from 0deg,
    rgba(230, 154, 141, 0.5),
    rgba(232, 176, 89, 0.5),
    rgba(142, 170, 158, 0.5),
    rgba(168, 209, 209, 0.5),
    rgba(177, 167, 193, 0.5),
    rgba(230, 154, 141, 0.5)
  );
  filter: blur(12px);
  opacity: 0;
  z-index: -1;
  animation: prismatic-glow-pulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

.prismatic-btn-wrap:hover .prismatic-glow {
  opacity: 1;
  animation: prismatic-glow-intense 1.2s ease-in-out infinite;
}

.prismatic-reflection {
  position: absolute;
  bottom: 0;
  left: 8%;
  width: 84%;
  height: 32%;
  background: linear-gradient(0deg, rgba(168, 209, 209, 0.2) 0%, transparent 100%);
  border-radius: 0 0 50px 50px;
  z-index: 2;
  pointer-events: none;
  animation: prismatic-ink-wash 4s ease-in-out infinite;
}

.doodle-underline {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--mustard), var(--sage));
  border-radius: 2px;
  z-index: 10;
  animation: prismatic-scribble 3s ease-in-out infinite;
}

.prismatic-label {
  position: relative;
  z-index: 10;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
  animation: prismatic-ink-pulse 2s ease-in-out infinite;
}

.prismatic-btn-wrap--sm .prismatic-label {
  font-size: 0.88rem;
}

@keyframes prismatic-border-spin {
  0%   { background: conic-gradient(from 0deg,   var(--pink), var(--mustard), var(--sage), var(--teal), var(--lavender), var(--pink), var(--mustard), var(--sage)); }
  25%  { background: conic-gradient(from 90deg,  var(--pink), var(--mustard), var(--sage), var(--teal), var(--lavender), var(--pink), var(--mustard), var(--sage)); }
  50%  { background: conic-gradient(from 180deg, var(--pink), var(--mustard), var(--sage), var(--teal), var(--lavender), var(--pink), var(--mustard), var(--sage)); }
  75%  { background: conic-gradient(from 270deg, var(--pink), var(--mustard), var(--sage), var(--teal), var(--lavender), var(--pink), var(--mustard), var(--sage)); }
  100% { background: conic-gradient(from 360deg, var(--pink), var(--mustard), var(--sage), var(--teal), var(--lavender), var(--pink), var(--mustard), var(--sage)); }
}

@keyframes prismatic-wobble {
  0%, 100% { border-radius: 60px; transform: rotate(-0.4deg); }
  25%  { border-radius: 55px 65px 60px 58px / 62px 58px 65px 55px; transform: rotate(0.4deg); }
  50%  { border-radius: 62px 56px 64px 58px / 58px 64px 56px 62px; transform: rotate(-0.3deg); }
  75%  { border-radius: 58px 62px 58px 64px / 64px 56px 62px 58px; transform: rotate(0.3deg); }
}

@keyframes prismatic-wobble-fast {
  0%, 100% { border-radius: 60px; }
  50%  { border-radius: 55px 65px 62px 58px / 58px 64px 56px 62px; }
}

@keyframes prismatic-shimmer {
  0%   { left: -60%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { left: 130%; opacity: 1; }
  55%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

@keyframes prismatic-shimmer-fast {
  0%   { left: -60%; opacity: 0; }
  8%   { opacity: 1; }
  48%  { left: 130%; opacity: 1; }
  58%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

@keyframes prismatic-glow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.04); }
}

@keyframes prismatic-glow-intense {
  0%, 100% { opacity: 0.7; transform: scale(1); filter: blur(12px); }
  50%      { opacity: 1; transform: scale(1.06); filter: blur(16px); }
}

@keyframes prismatic-ink-pulse {
  0%, 100% { text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 transparent; }
  50%      { text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9), 0 0 10px rgba(168, 209, 209, 0.35); }
}

@keyframes prismatic-scribble {
  0%, 15%   { width: 0; left: 50%; }
  45%, 55%  { width: 120px; left: calc(50% - 60px); }
  85%, 100% { width: 0; left: 50%; }
}

@keyframes prismatic-ink-wash {
  0%, 100% { opacity: 0.6; background: linear-gradient(0deg, rgba(168, 209, 209, 0.2) 0%, transparent 100%); }
  33%      { opacity: 1; background: linear-gradient(0deg, rgba(230, 154, 141, 0.22) 0%, transparent 100%); }
  66%      { opacity: 0.8; background: linear-gradient(0deg, rgba(142, 170, 158, 0.2) 0%, transparent 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .prismatic-btn-wrap,
  .prismatic-btn-wrap *,
  .prismatic-btn-wrap *::after {
    animation: none !important;
  }
  .prismatic-btn-wrap:hover {
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .prismatic-btn {
    min-width: 0;
    width: 100%;
    padding: 0 1.25rem;
  }

  .prismatic-glow {
    inset: -4px;
    filter: blur(8px);
    opacity: 0.25;
  }

  .doodle-underline {
    max-width: 80%;
  }
}