/* ============================================================
   JSIT redesign — Hover Overlay Scenes
   Full-bleed contextual background scenes that fade in when
   hovering a service card or nav link.
   ============================================================ */

/* The overlay container sits between the matrix canvas and content. */
.hover-overlay {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.hover-overlay.active { opacity: 1; visibility: visible; }

/* Common — each scene mounts inside this container */
.hover-overlay__scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  /* Pause all child animations until activated — major perf win */
  animation-play-state: paused;
}
.hover-overlay__scene * { animation-play-state: paused !important; }
.hover-overlay__scene.show,
.hover-overlay__scene.show * { animation-play-state: running !important; }
.hover-overlay__scene.show { opacity: 1; }

/* --------- CCTV: scanning grid + cursor-tracking reticle --------- */
.scene-cctv {
  background-image:
    linear-gradient(0deg,  rgba(0,229,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.06) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: 0 0;
}
.scene-cctv::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
      rgba(0, 229, 255, 0.12) 0%, transparent 70%);
}
.cctv-reticle {
  position: absolute;
  width: 64px; height: 64px;
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 229, 255, 0.7);
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.3) inset;
  transition: transform 80ms linear;
}
.cctv-reticle::before, .cctv-reticle::after {
  content: ""; position: absolute;
  background: rgba(0, 229, 255, 0.9);
}
.cctv-reticle::before {
  left: 50%; top: -8px; bottom: -8px; width: 1px; transform: translateX(-50%);
}
.cctv-reticle::after {
  top: 50%; left: -8px; right: -8px; height: 1px; transform: translateY(-50%);
}
.cctv-scanlines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg,
      transparent 0%, transparent 49%,
      rgba(0, 229, 255, 0.04) 50%, transparent 51%, transparent 100%);
  background-size: 100% 4px;
  animation: scanRoll 5s linear infinite;
}
@keyframes scanRoll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* --------- CYBER: pulsing concentric shields --------- */
.scene-cyber {
  display: flex; align-items: center; justify-content: center;
}
.cyber-ring {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 80vh; height: 80vh;
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 50%;
  opacity: 0;
  animation: cyberPulse 3.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.cyber-ring:nth-child(2) { animation-delay: 1.1s; }
.cyber-ring:nth-child(3) { animation-delay: 2.2s; }
@keyframes cyberPulse {
  0%   { transform: translate(-50%, -50%) scale(0.05); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.scene-cyber::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 229, 255, 0.08) 0%, transparent 50%);
}

/* --------- DRONE: aerial terrain grid that scrolls --------- */
.scene-drone {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0) 0%, rgba(4,6,11,0.8) 80%),
    repeating-linear-gradient(0deg,  transparent 0 30px, rgba(0,229,255,0.08) 30px 31px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(0,229,255,0.08) 30px 31px);
  background-size: 100% 100%, 30px 30px, 30px 30px;
  animation: droneScroll 18s linear infinite;
  transform-origin: 50% 60%;
  perspective: 800px;
}
@keyframes droneScroll {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 30px, 30px 0; }
}
.drone-terrain {
  position: absolute; inset: 30% 0 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(0,229,255,0.18) 60px 61px),
    repeating-linear-gradient(0deg,  transparent 0 60px, rgba(0,229,255,0.10) 60px 61px);
  transform: perspective(700px) rotateX(60deg);
  transform-origin: 50% 0;
  mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  animation: droneScrollDeep 6s linear infinite;
}
@keyframes droneScrollDeep {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 60px, 60px 0; }
}
.drone-marker {
  position: absolute;
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: var(--cyan);
  box-shadow: 0 0 24px var(--cyan);
  border-radius: 50%;
  transition: left 80ms linear, top 80ms linear;
}
.drone-marker::before {
  content: ""; position: absolute; inset: -20px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  opacity: 0.5;
  animation: ping 1.6s infinite;
}

/* --------- GRAPHIC: rotating wireframe geometry --------- */
.scene-graphic {
  display: flex; align-items: center; justify-content: center;
}
.scene-graphic::before {
  content: "";
  position: absolute;
  width: 60vmin; height: 60vmin;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background-image:
    conic-gradient(from 0deg, transparent 0deg,
      rgba(0,229,255,0.15) 30deg, transparent 60deg,
      rgba(0,229,255,0.15) 90deg, transparent 120deg,
      rgba(0,229,255,0.15) 150deg, transparent 180deg);
  border-radius: 50%;
  animation: graphicSpin 18s linear infinite;
  opacity: 0.5;
}
@keyframes graphicSpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.graphic-frame {
  position: absolute;
  width: 40vmin; height: 40vmin;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg);
  border: 1px solid rgba(0,229,255,0.3);
  animation: graphicSpinFrame 24s linear infinite;
}
.graphic-frame.f2 { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg); border-color: rgba(0,229,255,0.18); }
.graphic-frame.f3 { transform: translate(-50%, -50%) rotateY(60deg) rotateZ(90deg); border-color: rgba(0,229,255,0.18); }
@keyframes graphicSpinFrame {
  0%   { transform: translate(-50%, -50%) rotateX(60deg) rotateY(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(60deg) rotateY(360deg); }
}

/* --------- IT: server rack with cascading lights --------- */
.scene-it {
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
}
.it-cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 6px;
  padding: 0 40px;
}
.it-cols .col {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,229,255,0.08) var(--start, 30%),
      rgba(0,229,255,0.30) calc(var(--start, 30%) + 6%),
      rgba(0,229,255,0.08) calc(var(--start, 30%) + 14%),
      transparent calc(var(--start, 30%) + 40%));
  height: 100%;
  animation: itFlow 4s cubic-bezier(0.6, 0.0, 0.4, 1) infinite;
}

@keyframes itFlow {
  0%   { background-position: 0 -50%; }
  100% { background-position: 0 150%; }
}

/* ============================================================
   CARD TILT — applied to .svc directly, perspective on .services
   ============================================================ */
.svc__title, .svc__num, .svc__desc, .svc__tags, .svc__scene {
  transform: translateZ(20px);
}