/**
 * Black Label Bots — signature motion layer
 */

/* Cursor spotlight */
.fx-cursor-spotlight {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 40%),
    rgba(249, 226, 125, 0.09) 0%,
    rgba(201, 169, 97, 0.04) 28%,
    transparent 58%
  );
  transition: opacity 0.4s;
  opacity: 0;
}

.blb-future .fx-cursor-spotlight.is-active {
  opacity: 1;
}

/* Orbital nodes in hero */
.fx-orbit-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.fx-orbit-node {
  position: absolute;
  left: var(--ox, 50%);
  top: var(--oy, 50%);
  width: var(--sz, 5px);
  height: var(--sz, 5px);
  border-radius: 50%;
  background: #f9e27d;
  box-shadow: 0 0 12px rgba(249, 226, 125, 0.9), 0 0 28px rgba(201, 169, 97, 0.5);
  animation: fx-orbit-drift var(--sp, 12s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}

.fx-orbit-node--burgundy {
  background: #c45a6a;
  box-shadow: 0 0 10px rgba(139, 58, 74, 0.8);
}

.fx-orbit-node::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, rgba(249, 226, 125, 0.5), transparent);
  transform-origin: left center;
  transform: rotate(var(--trail, 35deg));
  opacity: 0.35;
}

@keyframes fx-orbit-drift {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  25% { transform: translate(-50%, -50%) translate(18px, -12px); }
  50% { transform: translate(-50%, -50%) translate(-8px, 20px); }
  75% { transform: translate(-50%, -50%) translate(14px, 8px); }
}

/* Pulse rings behind hex */
.fx-signal-rings {
  position: absolute;
  left: 22%;
  top: 42%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.fx-signal-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(249, 226, 125, 0.25);
  border-radius: 50%;
  animation: fx-ring-pulse 4s ease-out infinite;
}

.fx-signal-rings i:nth-child(2) { animation-delay: 1.3s; }
.fx-signal-rings i:nth-child(3) { animation-delay: 2.6s; }

@keyframes fx-ring-pulse {
  0% { transform: scale(0.55); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Animated border chase on featured cards */
.fx-border-runner {
  position: relative;
  overflow: hidden;
}

.fx-border-runner::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0deg,
    transparent 280deg,
    #f9e27d 300deg,
    #8b3a4a 330deg,
    #f9e27d 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  animation: fx-border-spin 3.5s linear infinite;
}

@keyframes fx-border-spin {
  to { --border-angle: 360deg; }
}

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

/* 3D tilt cards */
.fx-tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.25s;
  will-change: transform;
}

.fx-tilt-card.is-tilting {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(201, 169, 97, 0.12);
}

/* Magnetic buttons */
.fx-magnetic {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Scramble decode on HUD values */
.fx-hud-line strong.fx-scramble-active {
  color: #f9e27d;
  text-shadow: 0 0 12px rgba(249, 226, 125, 0.5);
}

/* Vertical data stream in HUD panel */
.fx-data-stream {
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  width: 42px;
  overflow: hidden;
  opacity: 0.35;
  font-family: var(--fx-font-mono, monospace);
  font-size: 7px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: rgba(249, 226, 125, 0.6);
  pointer-events: none;
  mask-image: linear-gradient(transparent, black 15%, black 85%, transparent);
}

.fx-data-stream-inner {
  animation: fx-stream-scroll 18s linear infinite;
}

@keyframes fx-stream-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Glitch pulse on hero title */
.fx-title-glitch.fx-glitch-pulse {
  animation: fx-title-glitch 0.35s steps(2) 1;
}

@keyframes fx-title-glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-2px, 1px); filter: hue-rotate(8deg); }
  40% { transform: translate(2px, -1px); text-shadow: 2px 0 #8b3a4a, -2px 0 #f9e27d; }
  60% { transform: translate(-1px, 0); }
  100% { transform: translate(0); filter: none; }
}

/* Section scan divider */
.fx-scan-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.15), transparent);
  position: relative;
  overflow: hidden;
}

.fx-scan-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #f9e27d, transparent);
  animation: fx-scan-sweep 5s ease-in-out infinite;
}

@keyframes fx-scan-sweep {
  0% { left: -30%; }
  100% { left: 130%; }
}

/* Parallax chart watermark */
.fx-scene--hud .fx-chart-watermark {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Product cards hover lift */
.product-card.fx-tilt-card:hover {
  border-color: rgba(201, 169, 97, 0.45);
}

@media (max-width: 900px) {
  .fx-signal-rings { display: none; }
  .fx-data-stream { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-orbit-node,
  .fx-signal-rings i,
  .fx-border-runner::before,
  .fx-data-stream-inner,
  .fx-scan-divider::after {
    animation: none !important;
  }
  .fx-cursor-spotlight { display: none; }
  .fx-tilt-card { transform: none !important; }
}