/* ==========================================================================
   ROOT STUDIO GLOBAL — QUANTUM UI & MICRO-INTERACTIONS
   ========================================================================== */

/* 1. The Quantum Magnetic Cursor (Desktop Only) */
@media (pointer: fine) {
  body.has-quantum-cursor {
    cursor: none;
  }
  body.has-quantum-cursor a,
  body.has-quantum-cursor button,
  body.has-quantum-cursor [role="button"],
  body.has-quantum-cursor input,
  body.has-quantum-cursor select,
  body.has-quantum-cursor textarea {
    cursor: none;
  }
}

#root-quantum-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease;
  border: 1.5px solid var(--root-cyan);
  box-shadow: 0 0 15px var(--root-cyan-glow);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

#root-quantum-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--root-cyan);
  box-shadow: 0 0 8px var(--root-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000000;
  transform: translate(-50%, -50%);
  opacity: 0;
}

#root-quantum-cursor.is-active {
  width: 52px;
  height: 52px;
  border-color: var(--root-gold);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 25px var(--root-gold-glow);
}

#root-quantum-cursor.is-clicking {
  transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
}

@media (pointer: coarse) {
  #root-quantum-cursor,
  #root-quantum-dot {
    display: none !important;
  }
}

/* 2. Magnetic Parallax & Border Tracing Cards */
.root-card-frost {
  position: relative;
  background: var(--root-card-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--root-border-glass);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  overflow: hidden;
  transition: var(--transition-smooth);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.root-card-frost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(0, 240, 255, 0.55),
    transparent 40%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.root-card-frost:hover::before {
  opacity: 1;
}

.root-card-frost:hover {
  transform: translateY(-6px);
  background: var(--root-card-glass-hover);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 255, 0.12);
}

/* 3. Terminal Decryption Typography Reveal */
.root-terminal-decrypt {
  display: inline-block;
  font-family: inherit;
  position: relative;
}

.root-terminal-decrypt.is-scrambling {
  color: var(--root-cyan);
  text-shadow: 0 0 10px var(--root-cyan-glow);
}

/* 4. Scroll-Velocity Data Streams */
.root-scroll-pulse-track {
  position: fixed;
  left: 20px;
  top: 15%;
  height: 70%;
  width: 2px;
  background: rgba(0, 240, 255, 0.08);
  z-index: 100;
  pointer-events: none;
}

.root-scroll-pulse-thumb {
  position: absolute;
  top: 0;
  left: -2px;
  width: 6px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--root-cyan), transparent);
  border-radius: 999px;
  box-shadow: 0 0 12px var(--root-cyan);
  transition: transform 0.1s linear;
}

@media (max-width: 1024px) {
  .root-scroll-pulse-track {
    display: none;
  }
}

/* 5. Architectural Blueprint Page CAD Grid Animation */
@keyframes rootBlueprintPulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

.root-blueprint-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}