/* SBS Widgets Next - futurist utility layer */
:root {
  --sbs-next-glow: color-mix(in srgb, var(--bs-primary, #0d6efd) 72%, #00ffd5 28%);
  --sbs-next-surface: color-mix(in srgb, var(--bs-body-bg, #fff) 92%, #0b1220 8%);
  --sbs-motion-duration: 260ms;
  --sbs-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --sbs-motion-x: 0px;
  --sbs-motion-y: 0px;
  --sbs-motion-rx: 0deg;
  --sbs-motion-ry: 0deg;
  --sbs-motion-glare-x: 50%;
  --sbs-motion-glare-y: 50%;
}

.sbs-next-panel {
  background: radial-gradient(1200px 300px at 10% -20%, color-mix(in srgb, var(--sbs-next-glow) 32%, transparent), transparent), var(--sbs-next-surface);
  border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, var(--sbs-next-glow) 30%);
  border-radius: var(--bs-border-radius-xl, 1rem);
  box-shadow: 0 10px 35px rgba(2, 8, 20, .12);
}

.sbs-next-title {
  letter-spacing: .02em;
  text-wrap: balance;
}

.sbs-next-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sbs-next-glow) 40%, transparent);
  background: color-mix(in srgb, var(--sbs-next-glow) 12%, transparent);
  font-size: .78rem;
}

.sbs-next-media {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-radius: var(--bs-border-radius-xl, 1rem);
}

.sbs-next-media::after {
  content: "";
  position: absolute;
  inset: -25% -20%;
  background: conic-gradient(from 180deg at 50% 50%, transparent 0 30%, color-mix(in srgb, var(--sbs-next-glow) 40%, transparent) 45%, transparent 70%);
  filter: blur(24px);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  .sbs-motion {
    transform:
      perspective(900px)
      translate3d(var(--sbs-motion-x), var(--sbs-motion-y), 0)
      rotateX(var(--sbs-motion-rx))
      rotateY(var(--sbs-motion-ry));
    transition: transform var(--sbs-motion-duration) var(--sbs-motion-ease);
    will-change: transform;
  }

  .sbs-motion--tilt {
    transform-style: preserve-3d;
  }

  .sbs-motion[data-sbs-motion-glare="1"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
      circle at var(--sbs-motion-glare-x) var(--sbs-motion-glare-y),
      rgba(255, 255, 255, .28),
      transparent 34%
    );
    opacity: .62;
    mix-blend-mode: screen;
  }

  .sbs-motion-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity var(--sbs-motion-duration) var(--sbs-motion-ease),
      transform var(--sbs-motion-duration) var(--sbs-motion-ease);
  }

  .sbs-motion-reveal[data-sbs-motion-reveal="fade"],
  .sbs-motion-reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  .sbs-motion-reveal[data-sbs-motion-reveal="slide-left"] {
    transform: translate3d(28px, 0, 0);
  }

  .sbs-motion-reveal[data-sbs-motion-reveal="slide-right"] {
    transform: translate3d(-28px, 0, 0);
  }

  .sbs-motion-reveal.is-visible {
    opacity: 1;
  }
}