/* Letícia Silva · Rosé Smoke Neutra
   Efeitos de acabamento para interfaces e apresentações, não para alterar o símbolo original.
   Estados hover respeitam prefers-reduced-motion.
*/
:root {
  --ls-metal-main: #865E72;
  --ls-metal-deep: #654B5A;
  --ls-metal-graphite: #2D2A30;
  --ls-metal-grape: #584B55;
  --ls-metal-taupe: #A28A94;
  --ls-metal-silver: #DAD8D8;
  --ls-metal-soft: #E8E2E1;
  --ls-metal-pearl: #F6F5F4;
}
.ls-metal-mauve {
  background: linear-gradient(115deg,#584B55 0%,#865E72 17%,#DAD8D8 38%,#F6F5F4 47%,#A28A94 56%,#654B5A 78%,#865E72 100%);
}
.ls-metal-satin {
  background: linear-gradient(160deg,#654B5A 0%,#865E72 25%,#E8E2E1 44%,#A28A94 54%,#865E72 73%,#584B55 100%);
}
.ls-metal-rose-pearl {
  background: linear-gradient(130deg,#C8C2C3 0%,#E8E2E1 25%,#F6F5F4 42%,#A28A94 57%,#DAD8D8 78%,#865E72 100%);
}
.ls-metal-graphite {
  background: linear-gradient(118deg,#2D2A30 0%,#584B55 22%,#865E72 36%,#DAD8D8 49%,#654B5A 59%,#2D2A30 85%);
}
.ls-metal-soft {
  background: linear-gradient(145deg,#E8E2E1 0%,#F6F5F4 19%,#C8C2C3 39%,#A28A94 54%,#F6F5F4 72%,#DAD8D8 100%);
}
.ls-metal-burnished {
  background: linear-gradient(122deg,#584B55 0%,#654B5A 18%,#A28A94 36%,#E8E2E1 45%,#865E72 56%,#584B55 74%,#DAD8D8 93%);
}

/* Texturas decorativas em camada isolada. */
.ls-texture-dots {
  background-image: radial-gradient(circle, rgba(246,245,244,.50) 0.75px, transparent 1.15px);
  background-size: 9px 9px;
}
.ls-texture-microdots {
  background-image: radial-gradient(circle, rgba(45,42,48,.20) 0.5px, transparent 1px);
  background-size: 5px 5px;
}
.ls-texture-brushed {
  background-image: repeating-linear-gradient(107deg,rgba(246,245,244,.10) 0 1px, transparent 1px 5px);
}
.ls-texture-satin {
  background-image: repeating-linear-gradient(0deg,rgba(246,245,244,.10) 0 1px,transparent 1px 4px);
}

/* Base de brilho diagonal; inspirada no exemplo card-shine-effect-metal.
   A animação só roda no hover; o fallback de redução de movimento é estático.
*/
.ls-metal-shine {
  --shine-deg: 45deg;
  --shine-duration: 1.7s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: .875rem;
  box-shadow: 0 25px 50px -12px rgba(45,42,48,.15);
}
.ls-metal-shine::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 240%;
  height: 240%;
  inset: -70%;
  background: linear-gradient(
    30deg,
    transparent 28%,
    rgba(246,245,244,.04) 38%,
    rgba(246,245,244,.55) 49%,
    rgba(246,245,244,.30) 54%,
    transparent 65%
  );
  transform: translateX(-110%) rotate(var(--shine-deg));
}
.ls-metal-shine:hover::after,
.ls-metal-shine:focus-visible::after {
  animation: ls-metal-sweep var(--shine-duration) ease-in-out 1;
}
.ls-metal-shine > * { position: relative; z-index: 2; }
@keyframes ls-metal-sweep {
  0%   { transform: translateX(-110%) rotate(var(--shine-deg)); }
  100% { transform: translateX(110%) rotate(var(--shine-deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-metal-shine:hover::after,
  .ls-metal-shine:focus-visible::after { animation: none; }
  .ls-metal-shine::after { transform: translateX(0) rotate(var(--shine-deg)); opacity: .22; }
}