/* ═══════════════════════════════════════════════════════════════
   ZFSA Refined Animation System - Clean & Professional
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. SUBTLE MICRO-INTERACTIONS
   ───────────────────────────────────────────────────────────── */

/* Clean button hover - no ripple */
.btn {
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:active {
  transform: translateY(0);
}

/* Refined card hover - minimal depth */
.service-card {
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.service-card:hover {
  border-color: #a8c4d4;
  background: #fafcfe;
  box-shadow: 0 2px 16px rgba(23, 53, 93, 0.06);
  transform: translateY(-2px);
}

/* Icon subtle scale on hover */
.service-card:hover .service-card-icon {
  transform: scale(1.03);
}

/* ─────────────────────────────────────────────────────────────
   2. CLEAN NAVIGATION
   ───────────────────────────────────────────────────────────── */

.primary-nav a {
  transition: color 0.2s ease;
}

.primary-nav a::after {
  transition: transform 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────
   3. REFINED SCROLL ANIMATIONS
   ───────────────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.reveal.is-visible {
  animation: fadeInUp 0.6s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

/* Staggered reveal for lists */
.service-grid .service-card.reveal:nth-child(1) { animation-delay: 0ms; }
.service-grid .service-card.reveal:nth-child(2) { animation-delay: 100ms; }
.service-grid .service-card.reveal:nth-child(3) { animation-delay: 200ms; }
.service-grid .service-card.reveal:nth-child(4) { animation-delay: 300ms; }

/* ─────────────────────────────────────────────────────────────
   4. CLEAN BACKGROUND ELEMENTS
   ───────────────────────────────────────────────────────────── */

/* Subtle aligned grid overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(23, 101, 186, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 101, 186, 0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  pointer-events: none;
}

/* Refined particles canvas - lower opacity, aligned */
.particles-canvas {
  opacity: 0.2;
  mix-blend-mode: normal;
}

/* ─────────────────────────────────────────────────────────────
   5. MINIMAL PHOTO EFFECTS
   ───────────────────────────────────────────────────────────── */

.photo-frame {
  transition: box-shadow 0.3s ease;
}

.photo-frame:hover {
  box-shadow:
    0 4px 20px rgba(23, 53, 93, 0.08),
    0 1px 4px rgba(23, 53, 93, 0.04);
}

/* ─────────────────────────────────────────────────────────────
   6. ACCESSIBILITY & PERFORMANCE
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
  }
}

/* Print styles */
@media print {
  .particles-canvas,
  .hero::before {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. MOBILE OPTIMIZATIONS
   ───────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Disable heavy effects on mobile */
  .particles-canvas {
    opacity: 0.15;
  }

  .hero::before {
    background-size: 60px 60px;
  }

  /* Simpler card hover on touch devices */
  .service-card:hover {
    transform: none;
  }
}

/* The site uses motion for hierarchy and feedback only. Decorative scan,
   shimmer and ripple effects make a formal security company page feel like a
   template, so keep those layers optically still. */
.hero::before {
  display: none;
}
.service-card::before,
.btn::before,
.contact-circuit::after {
  display: none;
}