/**
 * React Bits component styles adapted for the DustinLabs WordPress theme.
 * Source: https://reactbits.dev
 * Copyright (c) 2026 David Haz. MIT + Commons Clause License Condition v1.0.
 */

.rb-card-spotlight,
.rb-glare-hover,
.rb-click-spark-host {
  position: relative;
  isolation: isolate;
}

.react-bits-ready .rb-animated-content {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 350ms ease-out,
    transform 350ms ease-out;
  transition-delay: var(--rb-delay, 0ms);
}

.react-bits-ready .rb-animated-content.is-rb-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.rb-card-spotlight,
.rb-glare-hover {
  overflow: hidden;
}

.rb-card-spotlight {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(255, 255, 255, 0.05);
}

.rb-card-spotlight-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color),
    transparent 78%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.rb-card-spotlight:hover > .rb-card-spotlight-layer,
.rb-card-spotlight:focus-within > .rb-card-spotlight-layer {
  opacity: 0.88;
}

.rb-glare-hover-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: linear-gradient(
    -45deg,
    hsla(0, 0%, 0%, 0) 60%,
    rgba(255, 255, 255, 0.32) 70%,
    hsla(0, 0%, 0%, 0) 78%,
    hsla(0, 0%, 0%, 0) 100%
  );
  background-position: -100% -100%;
  background-repeat: no-repeat;
  background-size: 250% 250%;
  pointer-events: none;
  transition: background-position 650ms ease;
}

.rb-glare-hover:hover > .rb-glare-hover-layer,
.rb-glare-hover:focus-visible > .rb-glare-hover-layer,
.rb-glare-hover:focus-within > .rb-glare-hover-layer {
  background-position: 100% 100%;
}

.rb-magnet {
  transform: translate3d(var(--rb-magnet-x, 0), var(--rb-magnet-y, 0), 0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rb-magnet.is-magnet-active {
  transition-duration: 120ms;
  will-change: transform;
}

.rb-click-spark-canvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px), (pointer: coarse) {
  .rb-card-spotlight-layer,
  .rb-glare-hover-layer,
  .rb-click-spark-canvas {
    display: none;
  }

  .rb-magnet,
  .rb-magnet.is-magnet-active {
    transform: none !important;
    transition: none;
  }

  .react-bits-ready .rb-animated-content {
    transform: translate3d(0, 8px, 0);
    transition-duration: 300ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-card-spotlight-layer,
  .rb-glare-hover-layer,
  .rb-click-spark-canvas {
    display: none;
  }

  .rb-magnet,
  .rb-magnet.is-magnet-active {
    transform: none !important;
    transition: none;
  }

  .react-bits-ready .rb-animated-content,
  .react-bits-ready .rb-animated-content.is-rb-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}