/* Offset scrolling so fixed navbar doesn't cover section headings */
section[id] {
  scroll-margin-top: 64px;
}

/* ——— Scroll reveal animation ——— */
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sibling cards/elements */
.scroll-reveal:nth-child(2) { transition-delay: 0.08s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.16s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.24s; }

/* ——— SVG illustration animations ——— */

/* REC dot blink — Security & Audio-Video */
.svg-rec-blink {
  animation: svg-blink 2.6s ease-in-out infinite;
}
@keyframes svg-blink {
  0%, 85%, 100% { opacity: 1; }
  92%           { opacity: 0.1; }
}

/* Access Control LED glow pulse */
.svg-led-pulse {
  animation: svg-led-glow 2s ease-in-out infinite;
}
@keyframes svg-led-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Security: detection arcs — sequential radar pulse outward */
.svg-arc-1 { animation: svg-arc-pulse 3.2s ease-out infinite 0s; }
.svg-arc-2 { animation: svg-arc-pulse 3.2s ease-out infinite 0.55s; }
.svg-arc-3 { animation: svg-arc-pulse 3.2s ease-out infinite 1.1s; }
@keyframes svg-arc-pulse {
  0%   { opacity: 0; }
  18%  { opacity: 0.6; }
  70%  { opacity: 0.15; }
  100% { opacity: 0; }
}

/* Access Control: wireless arcs — ripple outward */
.svg-signal-1 { animation: svg-signal-ripple 2.4s ease-out infinite 0s; }
.svg-signal-2 { animation: svg-signal-ripple 2.4s ease-out infinite 0.4s; }
.svg-signal-3 { animation: svg-signal-ripple 2.4s ease-out infinite 0.8s; }
@keyframes svg-signal-ripple {
  0%   { opacity: 0; }
  20%  { opacity: 0.7; }
  100% { opacity: 0; }
}

/* Commercial Wiring: data flow along cables */
.svg-cable         { stroke-dasharray: 18 18; animation: svg-cable-flow 2s linear infinite; }
.svg-cable-d2      { animation-delay: 0.35s; }
.svg-cable-d3      { animation-delay: 0.7s; }
.svg-cable-d4      { animation-delay: 1.05s; }
.svg-cable-d5      { animation-delay: 1.4s; }
@keyframes svg-cable-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -36; }
}

/* Audio-Video: speaker driver cone pump */
.svg-spk-woofer,
.svg-spk-mid,
.svg-spk-tweet {
  transform-box: fill-box;
  transform-origin: center;
}
.svg-spk-woofer { animation: svg-spk-thump 0.9s ease-in-out infinite; }
.svg-spk-mid    { animation: svg-spk-thump 0.9s ease-in-out infinite 0.45s; }
.svg-spk-tweet  { animation: svg-spk-tweet  0.45s ease-in-out infinite; }
@keyframes svg-spk-thump {
  0%, 45%, 100% { transform: scale(1);    opacity: 1; }
  22%           { transform: scale(1.13); opacity: 0.75; }
}
@keyframes svg-spk-tweet {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.09); opacity: 0.8; }
}

/* Audio-Video: sound waves — pulse outward */
.svg-wave-1 { animation: svg-wave-pulse 2.2s ease-out infinite 0s; }
.svg-wave-2 { animation: svg-wave-pulse 2.2s ease-out infinite 0.38s; }
.svg-wave-3 { animation: svg-wave-pulse 2.2s ease-out infinite 0.76s; }
@keyframes svg-wave-pulse {
  0%, 100% { opacity: 0.15; }
  45%      { opacity: 0.75; }
}

/* ——— Small Business Networking SVG animations ——— */
/* Wi-Fi arcs — reuse signal-ripple keyframes */
.svg-wifi-1 { animation: svg-signal-ripple 2.4s ease-out infinite 0s; }
.svg-wifi-2 { animation: svg-signal-ripple 2.4s ease-out infinite 0.4s; }
.svg-wifi-3 { animation: svg-signal-ripple 2.4s ease-out infinite 0.8s; }

/* Network connection lines — data flow */
.svg-net-flow     { stroke-dasharray: 10 8; animation: svg-cable-flow 2.2s linear infinite; }
.svg-net-flow-d2  { animation-delay: 0.7s; }
.svg-net-flow-d3  { animation-delay: 1.4s; }

/* ——— Interactive CCTV camera ——— */
.camera-scene {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(160px, 28vw, 260px);
  height: clamp(200px, 32vw, 300px);
  z-index: 2;
  pointer-events: none;
}

.wall-plate {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(50px, 10vw, 80px);
  height: 14px;
  background: #1c1c1c;
  border-radius: 3px 0 0 3px;
  opacity: 0.5;
}

.bracket-arm {
  position: absolute;
  top: 14px;
  right: clamp(18px, 4vw, 32px);
  width: 12px;
  height: clamp(80px, 14vw, 130px);
  background: #1a1a1a;
  opacity: 0.5;
}

.camera-head {
  position: absolute;
  top: calc(14px + clamp(80px, 14vw, 130px) - clamp(22px, 4vw, 36px));
  right: clamp(18px, 4vw, 32px);
  width: clamp(90px, 18vw, 160px);
  height: clamp(44px, 8vw, 72px);
  opacity: 0.38;
  transform-origin: right center;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.4));
}

.cam-lens-outer {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: clamp(36px, 7vw, 62px);
  height: clamp(36px, 7vw, 62px);
  border-radius: 50%;
  background: #111;
  border: 2px solid rgba(255, 255, 255, 0.11);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cam-lens-mid {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: #0a100a;
  border: 1px solid rgba(34, 197, 94, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cam-lens-mid::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.cam-lens-inner {
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #050805;
  border: 1px solid rgba(34, 197, 94, 0.28);
  position: relative;
}

.cam-lens-inner::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.cam-body {
  position: absolute;
  top: 50%;
  right: clamp(12px, 2.5vw, 20px);
  transform: translateY(-50%);
  width: clamp(52px, 10vw, 90px);
  height: clamp(34px, 6.5vw, 58px);
  background: #1a1a1a;
  border-radius: 5px 3px 3px 5px;
}

.cam-body::after {
  content: '';
  position: absolute;
  top: 30%;
  right: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
  animation: blink 2.8s ease-in-out infinite;
}

.cam-knuckle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: clamp(14px, 3vw, 22px);
  height: clamp(26px, 5vw, 40px);
  background: #252525;
  border-radius: 3px;
}

.fov-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

#fovPoly {
  fill: rgba(34, 197, 94, 0.055);
  stroke: rgba(34, 197, 94, 0.12);
  stroke-width: 0.5;
}

@keyframes blink {
  0%, 88%, 100% { opacity: 1; }
  93%           { opacity: 0.05; }
}

/* ——— Hamburger button animated lines ——— */
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #d1d5db;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

#hamburger.open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

#hamburger.open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}