/* ═══════════════════════════════════════════════════════════════════════
   FastFixCell.com — Enhanced Effects v3.5
   Section Backgrounds, Blending, Circuit Traces, HUD Overlays
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section Backgrounds ────────────────────────────────────── */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.section-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  filter: saturate(0.3) brightness(0.6);
}
.section-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: saturate(0.3) brightness(0.5);
}

/* ── Circuit Trace Background ───────────────────────────────── */
.bg-circuit-traces {
  background-image:
    var(--bg-circuit),
    radial-gradient(circle at 20% 30%, rgba(37,99,235,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(6,182,212,0.04) 0%, transparent 50%);
}

/* ── Diagnostic HUD Overlay ─────────────────────────────────── */
.hud-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
}
.hud-corner {
  position: absolute;
  width: 60px; height: 60px;
  border-color: var(--primary-400);
  border-style: solid;
}
.hud-corner-tl { top: var(--space-4); left: var(--space-4); border-width: 2px 0 0 2px; }
.hud-corner-tr { top: var(--space-4); right: var(--space-4); border-width: 2px 2px 0 0; }
.hud-corner-bl { bottom: var(--space-4); left: var(--space-4); border-width: 0 0 2px 2px; }
.hud-corner-br { bottom: var(--space-4); right: var(--space-4); border-width: 0 2px 2px 0; }

.hud-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--primary-400), transparent);
  height: 1px;
  opacity: 0.4;
}
.hud-line-h { width: 30%; left: 35%; }
.hud-line-v {
  width: 1px;
  height: 30%;
  top: 35%;
  background: linear-gradient(0deg, transparent, var(--primary-400), transparent);
}

/* ── Section Dividers (Wavy Blends) ─────────────────────────── */
.section-divider {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}
.section-divider-top { top: -1px; }
.section-divider-bottom { bottom: -1px; }
.section-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}
.section-divider-fill { fill: var(--surface-1); }

/* ── Gradient Blend Between Sections ────────────────────────── */
.section-blend-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--surface-0) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.section-blend-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(0deg, var(--surface-0) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── Scan Line Effect ───────────────────────────────────────── */
.scan-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(37, 99, 235, 0.015) 3px,
    rgba(37, 99, 235, 0.015) 6px
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Glowing Data Stream ────────────────────────────────────── */
.data-stream {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.data-stream-line {
  position: absolute;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--neon-cyan), transparent);
  animation: dataStreamDown 3s linear infinite;
  opacity: 0.3;
}
.data-stream-line:nth-child(odd) {
  background: linear-gradient(180deg, transparent, var(--primary-400), transparent);
  animation-duration: 4s;
  opacity: 0.2;
}
@keyframes dataStreamDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ── Crack-Heal Overlay Elements ────────────────────────────── */
#crack-heal-overlay {
  transition: opacity 1.5s cubic-bezier(0.6,0,1,1), filter 1.5s cubic-bezier(0.6,0,1,1);
}
.crack-glass {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(15,23,42,0.3) 0%, rgba(2,6,23,0.6) 100%);
}

/* ── 3D Card Layers ─────────────────────────────────────────── */
.card-3d, .card-3d-schematic {
  transform-style: preserve-3d;
  perspective: 1000px;
  position: relative;
  overflow: visible !important;
}
/* Service cards stay clipped so text/icons never spill outside the card */
.service-card.card-3d {
  overflow: hidden !important;
  transform-style: flat;
  perspective: none;
}
.schematic-layer {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Glow Pulse on Important Elements ───────────────────────── */
.glow-border {
  position: relative;
}
.glow-border::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary-500), var(--neon-cyan), var(--accent-500));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.glow-border:hover::after { opacity: 1; }

/* ── Floating Orbs ──────────────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.orb-blue {
  background: rgba(37, 99, 235, 0.15);
  animation: orbFloat 8s ease-in-out infinite;
}
.orb-cyan {
  background: rgba(6, 182, 212, 0.1);
  animation: orbFloat 6s ease-in-out infinite reverse;
}
.orb-amber {
  background: rgba(245, 158, 11, 0.08);
  animation: orbFloat 10s ease-in-out infinite;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.1); }
  66% { transform: translate(-20px, 15px) scale(0.9); }
}

/* ── Cursor Glow Effect ─────────────────────────────────────── */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
}
body:hover .cursor-glow { opacity: 1; }