/* ============================================================
   Service icon hover animations — Ekonbee palette
   ============================================================
   Six service tiles, each with a unique animated icon hover.
   Uses the brand sequence:
   #fdb813 (gold) → #f26722 (orange) → #e53e3e (red) →
   #c1268c (magenta) → #7e3fbf (purple) → #0492ce (cyan) →
   #2db6fa (sky)
   ============================================================ */

.svc {
  position: relative;
  overflow: hidden;
}

/* Restore gradient backgrounds on hover (override refine.css greys) */
.svc__icon {
  position: relative;
  transition:
    transform .45s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .35s ease,
    background .35s ease,
    color .25s ease;
  overflow: visible;
}
.svc__icon i {
  position: relative;
  z-index: 2;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1),
              color .25s ease,
              text-shadow .25s ease;
  display: inline-block;
}

/* ---- Per-tile hover gradient (the inline-style gradients we want) ---- */
.svc:nth-child(1):hover .svc__icon {
  background: linear-gradient(135deg, #fdb813, #f26722) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -10px rgba(242, 103, 34, .55),
              0 0 0 4px rgba(253, 184, 19, .18);
}
.svc:nth-child(2):hover .svc__icon {
  background: linear-gradient(135deg, #f26722, #e53e3e) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -10px rgba(229, 62, 62, .55),
              0 0 0 4px rgba(242, 103, 34, .18);
}
.svc:nth-child(3):hover .svc__icon {
  background: linear-gradient(135deg, #e53e3e, #c1268c) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -10px rgba(193, 38, 140, .55),
              0 0 0 4px rgba(229, 62, 62, .18);
}
.svc:nth-child(4):hover .svc__icon {
  background: linear-gradient(135deg, #c1268c, #7e3fbf) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -10px rgba(126, 63, 191, .55),
              0 0 0 4px rgba(193, 38, 140, .18);
}
.svc:nth-child(5):hover .svc__icon {
  background: linear-gradient(135deg, #7e3fbf, #0492ce) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -10px rgba(4, 146, 206, .55),
              0 0 0 4px rgba(126, 63, 191, .18);
}
.svc:nth-child(6):hover .svc__icon {
  background: linear-gradient(135deg, #0492ce, #2db6fa) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -10px rgba(45, 182, 250, .55),
              0 0 0 4px rgba(4, 146, 206, .18);
}

/* All icons lift slightly */
.svc:hover .svc__icon {
  transform: translateY(-4px) scale(1.06);
}

/* ---- Per-icon unique animation on hover ---- */

/* 1. Compass — needle spins like it's locking on a heading */
.svc:nth-child(1):hover .svc__icon i {
  animation: svcCompassSpin 1.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes svcCompassSpin {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(380deg); }
  75%  { transform: rotate(355deg); }
  100% { transform: rotate(360deg); }
}

/* 2. Rocket — launches up with a thrust shake */
.svc:nth-child(2):hover .svc__icon i {
  animation: svcRocketLaunch 1.1s ease-in-out infinite;
}
@keyframes svcRocketLaunch {
  0%   { transform: translate(0, 0) rotate(-45deg); }
  20%  { transform: translate(0, 1px) rotate(-45deg); }
  40%  { transform: translate(0, -3px) rotate(-45deg); }
  60%  { transform: translate(0, -7px) rotate(-45deg); }
  80%  { transform: translate(0, -10px) rotate(-45deg) scale(.9); opacity: .6; }
  100% { transform: translate(0, 0) rotate(-45deg); opacity: 1; }
}
/* Bootstrap rocket icon already has a tilt; we keep tilt + bounce */
.svc:nth-child(2) .svc__icon i { transform-origin: 50% 80%; }
.svc:nth-child(2):hover .svc__icon i {
  animation: svcRocketLaunchSimple 1.2s ease-in-out infinite;
}
@keyframes svcRocketLaunchSimple {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-2px) rotate(-3deg); }
  55%      { transform: translateY(-8px) rotate(2deg); filter: drop-shadow(0 6px 4px rgba(255,180,80,.6)); }
  80%      { transform: translateY(-3px) rotate(-1deg); }
}

/* Rocket exhaust burst */
.svc:nth-child(2) .svc__icon::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 10px;
  height: 0;
  margin-left: -5px;
  background: linear-gradient(180deg, rgba(255,200,80,.9), rgba(255,90,30,0));
  border-radius: 0 0 50% 50%;
  filter: blur(2px);
  opacity: 0;
  transition: opacity .3s, height .3s ease-out;
  pointer-events: none;
}
.svc:nth-child(2):hover .svc__icon::after {
  opacity: 1;
  height: 14px;
  animation: svcRocketExhaust .45s ease-in-out infinite alternate;
}
@keyframes svcRocketExhaust {
  from { height: 10px; opacity: .8; }
  to   { height: 18px; opacity: 1;  }
}

/* 3. Diagram — nodes ripple/pulse like a network signal */
.svc:nth-child(3):hover .svc__icon i {
  animation: svcDiagramPulse 1.2s ease-in-out infinite;
}
@keyframes svcDiagramPulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
}
/* Concentric signal rings */
.svc:nth-child(3) .svc__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.6);
  opacity: 0;
  pointer-events: none;
}
.svc:nth-child(3):hover .svc__icon::before {
  animation: svcDiagramRing 1.4s ease-out infinite;
}
@keyframes svcDiagramRing {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* 4. Lightning — flickers and shakes (automation = energy) */
.svc:nth-child(4):hover .svc__icon i {
  animation: svcLightningFlicker .55s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(255,255,255,.8),
               0 0 24px rgba(193,38,140,.6);
}
@keyframes svcLightningFlicker {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
  20%      { transform: scale(1.15) rotate(-4deg); opacity: .85; }
  40%      { transform: scale(.95)  rotate(3deg);  opacity: 1; }
  60%      { transform: scale(1.2)  rotate(-2deg); opacity: .7; }
  80%      { transform: scale(1.05) rotate(2deg);  opacity: 1; }
}
/* Spark particles */
.svc:nth-child(4) .svc__icon::before,
.svc:nth-child(4) .svc__icon::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff;
  opacity: 0;
  pointer-events: none;
}
.svc:nth-child(4) .svc__icon::before { top: 6px;  right: 4px; }
.svc:nth-child(4) .svc__icon::after  { bottom: 6px; left: 4px; }
.svc:nth-child(4):hover .svc__icon::before { animation: svcSparkA 1.4s ease-in-out infinite; }
.svc:nth-child(4):hover .svc__icon::after  { animation: svcSparkB 1.4s ease-in-out infinite; }
@keyframes svcSparkA {
  0%, 100% { opacity: 0; transform: translate(0,0) scale(.5); }
  30%      { opacity: 1; transform: translate(4px,-6px) scale(1); }
  60%      { opacity: 0; transform: translate(8px,-12px) scale(.3); }
}
@keyframes svcSparkB {
  0%, 100% { opacity: 0; transform: translate(0,0) scale(.5); }
  40%      { opacity: 1; transform: translate(-4px,6px) scale(1); }
  70%      { opacity: 0; transform: translate(-8px,12px) scale(.3); }
}

/* 5. Bar chart — bars grow up rhythmically */
.svc:nth-child(5):hover .svc__icon i {
  animation: svcChartGrow 1.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes svcChartGrow {
  0%, 100% { transform: scaleY(1); }
  25%      { transform: scaleY(1.18); }
  50%      { transform: scaleY(.9); }
  75%      { transform: scaleY(1.1); }
}

/* 6. Shield — pulses with a protective ring */
.svc:nth-child(6):hover .svc__icon i {
  animation: svcShieldPulse 1.6s ease-in-out infinite;
}
@keyframes svcShieldPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { transform: scale(1.1);  filter: drop-shadow(0 0 8px rgba(255,255,255,.7)); }
}
.svc:nth-child(6) .svc__icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(45,182,250,.5);
  opacity: 0;
  pointer-events: none;
}
.svc:nth-child(6):hover .svc__icon::before {
  animation: svcShieldRing 1.8s ease-out infinite;
}
@keyframes svcShieldRing {
  0%   { opacity: .8; transform: scale(.95); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* Larger icon glyph on hover for impact */
.svc:hover .svc__icon i {
  font-size: 22px;
}

/* Subtle card lift on hover (works with refine.css's bg change) */
.svc {
  transition: background .25s ease, transform .35s ease;
}
.svc:hover {
  transform: translateY(-2px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .svc:hover .svc__icon,
  .svc:hover .svc__icon i,
  .svc:hover .svc__icon::before,
  .svc:hover .svc__icon::after {
    animation: none !important;
    transform: none !important;
  }
}