/* 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;
  }

  /* ===================== Reveal (entrance) effects ===================== */
  :root {
    --sbs-reveal-duration: 820ms;
    --sbs-reveal-ease: cubic-bezier(.16, 1, .3, 1);
    --sbs-reveal-ease-back: cubic-bezier(.34, 1.56, .64, 1);
  }

  .sbs-motion-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
      opacity var(--sbs-reveal-duration) var(--sbs-reveal-ease),
      transform var(--sbs-reveal-duration) var(--sbs-reveal-ease),
      filter var(--sbs-reveal-duration) var(--sbs-reveal-ease),
      clip-path var(--sbs-reveal-duration) var(--sbs-reveal-ease);
    will-change: opacity, transform, filter, clip-path;
  }

  .sbs-motion-reveal[data-sbs-motion-reveal="fade"] {
    transform: none;
  }
  .sbs-motion-reveal[data-sbs-motion-reveal="slide-left"] {
    transform: translate3d(48px, 0, 0);
  }
  .sbs-motion-reveal[data-sbs-motion-reveal="slide-right"] {
    transform: translate3d(-48px, 0, 0);
  }
  .sbs-motion-reveal[data-sbs-motion-reveal="zoom-in"] {
    transform: scale(.86);
  }
  .sbs-motion-reveal[data-sbs-motion-reveal="blur-in"] {
    transform: translate3d(0, 18px, 0);
    filter: blur(16px);
  }
  .sbs-motion-reveal[data-sbs-motion-reveal="flip-up"] {
    transform: perspective(1200px) rotateX(-38deg);
    transform-origin: center bottom;
  }
  .sbs-motion-reveal[data-sbs-motion-reveal="rotate-in"] {
    transform: rotate(-6deg) scale(.9) translate3d(0, 30px, 0);
    transition-timing-function: var(--sbs-reveal-ease-back);
  }
  .sbs-motion-reveal[data-sbs-motion-reveal="mask-up"] {
    transform: translate3d(0, 60px, 0);
    clip-path: inset(100% 0 0 0);
  }

  .sbs-motion-reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0);
  }

  /* ===================== Continuous spotlight glow ===================== */
  .sbs-motion--glow {
    position: relative;
    isolation: isolate;
  }
  .sbs-motion--glow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 320ms ease;
    background: radial-gradient(
      420px circle at var(--sbs-motion-glare-x, 50%) var(--sbs-motion-glare-y, 50%),
      color-mix(in srgb, var(--sbs-next-glow) 55%, transparent),
      transparent 60%
    );
    mix-blend-mode: screen;
  }
  .sbs-motion--glow.is-hovering::after {
    opacity: 1;
  }

  /* ===================== Sheen sweep ===================== */
  .sbs-motion--sheen {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .sbs-motion--sheen::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 75%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transform: skewX(-22deg);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .35),
      transparent
    );
    animation: sbs-sheen-sweep 4.6s ease-in-out infinite;
  }
  @keyframes sbs-sheen-sweep {
    0%, 18% { left: -150%; }
    52%, 100% { left: 150%; }
  }

  /* ===================== Parallax (scroll driven) ===================== */
  .sbs-motion--parallax {
    transform: translate3d(0, var(--sbs-parallax-y, 0px), 0);
    transition: transform 120ms linear;
    will-change: transform;
  }
}

/* ===================== Pinned story fallback layout ===================== */
.sbs-hero-story-stack {
  position: relative;
  z-index: 2;
  width: 100%;
}

.sbs-hero-story-step {
  min-height: min(72vh, 760px);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 8rem);
}

.sbs-hero-story-step + .sbs-hero-story-step {
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.sbs-hero-story-title {
  max-width: 12ch;
  text-wrap: balance;
}

.sbs-hero-story-text {
  max-width: 62ch;
}

.sbin-pin-story-ready .sbs-hero-story-step {
  min-height: auto;
  padding-block: 0;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  border-top: 0;
}

.sbin-pin-story-ready .sbs-hero-story-stack {
  min-height: min(72vh, 760px);
  display: flex;
  align-items: center;
  position: relative;
}

@media (max-width: 767.98px) {
  .sbs-hero-story-step {
    min-height: auto;
    padding-block: 4rem;
  }

  .sbin-pin-story-ready .sbs-hero-story-stack {
    min-height: 70vh;
  }
}