/* Homepage "Follow our Socials" — interactive layer (driven by scripts/socials.js).
   Only active once the script adds .sx-js, so the section still works without JS. */

/* ---------- Heading ---------- */
.luxe-socials .luxe-head__title {
  font-family: "Clash Display", var(--font-body, system-ui, sans-serif);
}
.luxe-socials .sx-accent {
  background: linear-gradient(100deg, #5865f2 0%, #fe2c55 30%, #25f4ee 50%, #ff3b3b 72%, #5865f2 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: sx-flow 8s linear infinite;
  filter: drop-shadow(0 0 20px rgba(254, 44, 85, 0.25));
}
@keyframes sx-flow { to { background-position: 300% 0; } }

.sx-js .luxe-head > * {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}
.sx-js.sx-in .luxe-head > * { opacity: 1; transform: none; filter: none; }
.sx-js.sx-in .luxe-head > :nth-child(2) { transition-delay: 0.1s; }
.sx-js.sx-in .luxe-head > :nth-child(3) { transition-delay: 0.18s; }

/* ---------- Grid + stage ---------- */
.luxe-socials.sx-js .luxe-socials__grid {
  /* flex instead of auto-fit grid: the grid created an empty 4th column that pushed the cards left */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 0.5rem;
  padding: 0 16px;
}
.luxe-socials.sx-js .luxe-socials__grid > .sx-stage { flex: 1 1 280px; max-width: 360px; }
.sx-stage {
  position: relative;
  perspective: 900px;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  filter: blur(8px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
  transition-delay: calc(0.25s + var(--i, 0) * 110ms);
}
.sx-in .sx-stage { opacity: 1; transform: none; filter: none; }

/* brand aura that blooms behind the hovered card */
.sx-stage::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  z-index: -1;
  border-radius: 30px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(var(--brand), 0.55), rgba(var(--brand-2), 0.25) 50%, transparent 75%);
  filter: blur(34px);
  opacity: calc(var(--spot, 0) * 0.8);
  transform: scale(calc(0.85 + var(--spot, 0) * 0.2));
  pointer-events: none;
}

/* ---------- Card ---------- */
.luxe-socials.sx-js .luxe-social {
  --mx: 50%;
  --my: 50%;
  animation: none !important;
  opacity: 1 !important;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  will-change: transform;
  padding: 1.15rem 1.2rem;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.08);
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.45s ease;
}
.luxe-socials.sx-js .luxe-social:hover,
.luxe-socials.sx-js .luxe-social:focus-visible {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  border-color: rgba(var(--brand), 0.4);
  box-shadow: 0 24px 50px -24px rgba(var(--brand), 0.75), 0 0 0 1px rgba(var(--brand), 0.12) inset;
}

/* cursor spotlight, glowing edge and sheen */
.sx-spot, .sx-edge, .sx-sheen {
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--spot, 0);
}
.sx-spot {
  inset: 0;
  z-index: -1;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(var(--brand), 0.28), rgba(var(--brand-2), 0.08) 40%, transparent 70%);
}
.sx-edge {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(200px circle at var(--mx) var(--my), rgba(var(--brand), 1), rgba(var(--brand-2), 0.6) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sx-sheen { inset: 0; overflow: hidden; }
.sx-sheen::before {
  content: "";
  position: absolute;
  top: -60%;
  left: calc(var(--sx, -60) * 1%);
  width: 35%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transform: rotate(18deg);
}

/* ---------- Icon ---------- */
.luxe-socials.sx-js .luxe-social__icon {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
.luxe-socials.sx-js .luxe-social:hover .luxe-social__icon {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 0 0 1px rgba(var(--brand), 0.45), 0 10px 30px -6px rgba(var(--brand), 0.8);
}
/* pulse ring */
.luxe-socials.sx-js .luxe-social__icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid rgba(var(--brand), 0.7);
  opacity: 0;
  pointer-events: none;
}
.luxe-socials.sx-js .luxe-social:hover .luxe-social__icon::after { animation: sx-ring 1.6s ease-out infinite; }
@keyframes sx-ring {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* per-brand icon personality */
.sx-discord:hover .luxe-social__icon svg { animation: sx-hop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes sx-hop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  25% { transform: translateY(-5px) scaleY(1.05); }
  50% { transform: translateY(0) scaleY(0.9); }
  65% { transform: translateY(-2px) scaleY(1); }
}
.sx-tiktok:hover .luxe-social__icon svg { animation: sx-glitch 1.2s steps(1) infinite; }
@keyframes sx-glitch {
  0%   { filter: drop-shadow(2px 0 rgb(37, 244, 238)) drop-shadow(-2px 0 rgb(254, 44, 85)); transform: translate(0, 0); }
  20%  { filter: drop-shadow(-3px 1px rgb(37, 244, 238)) drop-shadow(3px -1px rgb(254, 44, 85)); transform: translate(1px, -1px); }
  40%  { filter: drop-shadow(1px 0 rgb(37, 244, 238)) drop-shadow(-1px 0 rgb(254, 44, 85)); transform: translate(-1px, 0); }
  60%  { filter: drop-shadow(3px -1px rgb(37, 244, 238)) drop-shadow(-3px 1px rgb(254, 44, 85)); transform: translate(0, 1px); }
  80%  { filter: drop-shadow(-2px 0 rgb(37, 244, 238)) drop-shadow(2px 0 rgb(254, 44, 85)); transform: translate(1px, 0); }
}
.sx-youtube:hover .luxe-social__icon svg { animation: sx-play 0.8s ease-in-out infinite; }
@keyframes sx-play {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255, 60, 60, 0.9)); }
}

/* ---------- Text ---------- */
.luxe-socials.sx-js .luxe-social__name { font-size: 1.05rem; font-weight: 700; transition: letter-spacing 0.4s ease; }
.luxe-socials.sx-js .luxe-social:hover .luxe-social__name { letter-spacing: 0.01em; }
.sx-meta {
  position: relative;
  display: block;
  height: 1.3em;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.3;
}
.sx-meta__track {
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.sx-meta__track > span { height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-handle { color: rgb(var(--brand-2)); font-weight: 600; }
.sx-discord .sx-handle { color: #aab4ff; }
.luxe-social:hover .sx-meta__track { transform: translateY(-1.3em); }

/* ---------- Arrow swap ---------- */
.luxe-socials.sx-js .luxe-social__arrow {
  position: relative;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.luxe-socials.sx-js .luxe-social:hover .luxe-social__arrow {
  transform: none;
  background: rgba(var(--brand), 0.15);
}
.luxe-social__arrow svg { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.luxe-social__arrow .sx-arrow-in {
  position: absolute;
  transform: translate(-150%, 150%);
}
.luxe-social:hover .luxe-social__arrow svg:first-child { transform: translate(150%, -150%); }
.luxe-social:hover .luxe-social__arrow .sx-arrow-in { transform: translate(0, 0); }

/* ---------- Click ripple ---------- */
.sx-ripple {
  position: absolute;
  z-index: -1;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: rgba(var(--brand), 0.5);
  pointer-events: none;
  animation: sx-ripple 0.7s ease-out forwards;
}
@keyframes sx-ripple { to { transform: scale(30); opacity: 0; } }

@media (max-width: 575.98px) {
  .sx-stage { perspective: none; }
  .luxe-socials.sx-js .luxe-socials__grid > .sx-stage { flex-basis: 100%; max-width: none; }
}

/* =====================================================================
   v2 tweaks
   ===================================================================== */

/* Vibrance: the site runs at 2x saturation (vibrance.css). While a card is
   hovered it eases down by 25% (to 1.5x) together with its glow. */
.luxe-socials.sx-js .luxe-social {
  filter: saturate(calc(1 - var(--spot, 0) * 0.25));
}
.sx-stage::before {
  filter: blur(34px) saturate(calc(1 - var(--spot, 0) * 0.25));
}
.sx-spark { filter: saturate(0.75); }

/* Depth: icon, text and arrow drift with the tilt at different strengths (parallax) */
.luxe-socials.sx-js .luxe-social__icon {
  translate: calc(var(--tx, 0) * 0.7px) calc(var(--ty, 0) * 0.7px);
}
.luxe-socials.sx-js .luxe-social__body {
  translate: calc(var(--tx, 0) * 0.35px) calc(var(--ty, 0) * 0.35px);
}
.luxe-socials.sx-js .luxe-social__arrow {
  translate: calc(var(--tx, 0) * 0.9px) calc(var(--ty, 0) * 0.9px);
}

/* Focus mode: the other cards step back while one is hovered */
.luxe-socials.sx-js .sx-stage > .luxe-social { transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.45s ease, opacity 0.45s ease; }
.luxe-socials.sx-js .luxe-socials__grid:has(.sx-stage:hover) .sx-stage:not(:hover) > .luxe-social { opacity: 0.5 !important; }

/* Idle life: a faint brand-coloured light slowly orbits each border */
.sx-orbit {
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--sx-angle, 0deg), transparent 0 70%, rgba(var(--brand), 0.55) 82%, rgba(var(--brand-2), 0.4) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: calc(0.6 - var(--spot, 0) * 0.6);
  animation: sx-orbit 6s linear infinite;
  animation-delay: calc(var(--i, 0) * -2s);
  pointer-events: none;
}
@property --sx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sx-orbit { to { --sx-angle: 360deg; } }

/* Sparks that drift off the card while hovering */
.sx-spark {
  position: absolute;
  z-index: 2;
  width: var(--sz, 4px);
  height: var(--sz, 4px);
  border-radius: 50%;
  background: rgb(var(--c));
  box-shadow: 0 0 8px 1px rgba(var(--c), 0.8);
  pointer-events: none;
  animation: sx-spark var(--dur, 900ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes sx-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -40px)) scale(1); }
}
/* sparks sit outside the card's clipping, so they live on the stage */
.sx-stage { isolation: isolate; }

/* Name gets a brand-tinted gradient on hover */
.luxe-socials.sx-js .luxe-social__name {
  background: linear-gradient(90deg, #fff, #fff 50%, rgb(var(--brand-2)) 75%, rgb(var(--brand)));
  background-size: 220% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: background-position 0.8s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.4s ease;
}
.luxe-socials.sx-js .luxe-social:hover .luxe-social__name { background-position: 100% 0; }