/* ================================================
   AI / Digital Agency Service Card Animations
   Works with: isp-service-card + isp-service-icon
   ================================================ */

/* ===== CARD BASE STYLING ===== */
.isp-service-card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.35s cubic-bezier(.25, .8, .25, 1);
  transform: translateY(0);
  overflow: hidden;
}

/* ===== HOVER ANIMATION (Lift + Shadow) ===== */
.isp-service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
}

/* ===== SOFT BORDER GLOW ON HOVER ===== */
.isp-service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(255, 212, 0, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.isp-service-card:hover::after {
  opacity: 1;
}

/* ===== ICON ANIMATION (Pop + Glow) ===== */
.isp-service-icon {
  display: inline-block;
  position: relative;
  transition: all 0.35s ease-in-out;
  transform-origin: center;
}

/* Pulse glow using your brand yellow color */
.isp-service-card:hover .isp-service-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(255, 212, 0, 0.6));
}

/* ===== FADE-IN ON PAGE LOAD ===== */
.isp-service-card {
  opacity: 0;
  transform: translateY(30px);
  animation: ispFadeUp 0.8s ease forwards;
}

/* Animation stagger (nice delay for multiple cards) */
.isp-service-card:nth-child(1) { animation-delay: 0.1s; }
.isp-service-card:nth-child(2) { animation-delay: 0.2s; }
.isp-service-card:nth-child(3) { animation-delay: 0.3s; }
.isp-service-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes ispFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .isp-service-card {
    padding: 20px;
    transform: none !important;
  }
  .isp-service-card:hover {
    transform: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  }
}

/* ===== ACCESSIBILITY / PERFORMANCE ===== */
@media (prefers-reduced-motion: reduce) {
  .isp-service-card,
  .isp-service-icon {
    transition: none !important;
    animation: none !important;
  }
}