/* ==========================================================================
   ANIMATIONS & REACTBITS / GSAP / ANIME.JS STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   ReactBits Dynamic Border Beam (Luminous traveling outline)
   -------------------------------------------------------------------------- */
.border-beam-card {
  position: relative;
  overflow: hidden;
}

.border-beam-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 70%,
    var(--color-primary) 85%,
    var(--color-accent-cyan) 95%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: rotate-beam 6s linear infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.border-beam-card:hover::after,
.border-beam-active::after {
  opacity: 1;
}

@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-beam {
  to {
    --beam-angle: 360deg;
  }
}

/* --------------------------------------------------------------------------
   Atmospheric Aura Breathe (Liveness Glow)
   -------------------------------------------------------------------------- */
.ambient-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
  animation: aura-breathe 8s ease-in-out infinite alternate;
}

@keyframes aura-breathe {
  0% {
    transform: scale(0.9) translate(-5%, -5%);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.15) translate(5%, 5%);
    opacity: 0.85;
  }
}

/* --------------------------------------------------------------------------
   ReactBits Marquee / Infinite Library Scroll
   -------------------------------------------------------------------------- */
.marquee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 1.5rem 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  will-change: transform;
}

.marquee-track-left {
  animation: scroll-left 38s linear infinite;
}

.marquee-track-right {
  animation: scroll-right 42s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   ReactBits Spotlight Card
   Dynamic radial highlight following mouse coordinates
   -------------------------------------------------------------------------- */
.spotlight-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.spotlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--spotlight-color),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.spotlight-card:hover::before {
  opacity: 1;
}

.spotlight-card:hover {
  border-color: var(--border-active);
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   ReactBits Shiny Button & Shiny Text
   -------------------------------------------------------------------------- */
.shiny-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
}

.shiny-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  transition: none;
}

.shiny-btn:hover::after {
  animation: shine-sweep 1.2s ease-in-out infinite;
}

.shiny-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 99, 235, 0.45);
}

.shiny-btn:active {
  transform: translateY(0);
}

@keyframes shine-sweep {
  0% { left: -60%; }
  100% { left: 140%; }
}

.shiny-text {
  background: linear-gradient(120deg, var(--text-primary) 0%, #06b6d4 50%, var(--text-primary) 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine-text 5s ease infinite;
}

@keyframes shine-text {
  to { background-position: 200% center; }
}



/* --------------------------------------------------------------------------
   Live Indicators & Pulse
   -------------------------------------------------------------------------- */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.95rem;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #059669;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .live-indicator {
  color: #10b981;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  position: relative;
}

.live-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background-color: #10b981;
  opacity: 0.7;
  animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2.3);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   3D Tilt Card Container & Specular Glare
   -------------------------------------------------------------------------- */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease;
}

.tilt-card:hover {
  will-change: transform;
}

.tilt-inner {
  transform: translateZ(30px);
}