/* =====================================================================
   Services grid — honeycomb cards with per-service animated SVG icons
   Layered ON TOP of styles.css / refine.css / svc-icons.css.
   ===================================================================== */

/* The card: subtle hex-comb pattern fades in on hover, with a warm
   ambient wash bleeding from the icon corner. */
.svc{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.svc::before,
.svc::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .5s ease;
}
/* Layer 1: tiled honeycomb of soft amber outlines */
.svc::before{
  background-image:
    radial-gradient(circle at 50% 0%,   transparent 14px, rgba(253,184,19,.10) 14px 15px, transparent 16px),
    radial-gradient(circle at 0%  50%,  transparent 14px, rgba(253,184,19,.10) 14px 15px, transparent 16px),
    radial-gradient(circle at 100% 50%, transparent 14px, rgba(253,184,19,.10) 14px 15px, transparent 16px),
    radial-gradient(circle at 50% 100%, transparent 14px, rgba(253,184,19,.10) 14px 15px, transparent 16px);
  background-size: 56px 64px;
  opacity: 0;
}
/* Layer 2: warm corner glow */
.svc::after{
  background:
    radial-gradient(360px 280px at 8% 12%, rgba(253,184,19,.18), transparent 70%),
    radial-gradient(420px 320px at 100% 100%, rgba(242,103,34,.10), transparent 70%);
  opacity: 0;
}
.svc:hover::before{ opacity: 1; }
.svc:hover::after { opacity: 1; }
.svc > *{ position: relative; z-index: 1; }

/* Hex-clip the icon tile (override the rounded square in refine.css). */
.svc__icon{
  width: 64px !important;
  height: 72px !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
  overflow: visible;
  filter: drop-shadow(0 6px 14px rgba(238,144,2,.30));
  transition: transform .5s cubic-bezier(.2,.9,.3,1.3), filter .35s ease;
}
.svc__icon::before{
  /* gloss inner highlight on the hex */
  content: "";
  position: absolute;
  inset: 4px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  pointer-events: none;
  z-index: 2;
}
/* Pollen-burst halo on hover */
.svc__icon::after{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,184,19,.55), transparent 65%);
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
  z-index: 0;
}
.svc:hover .svc__icon{
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 10px 22px rgba(238,144,2,.55));
}
.svc:hover .svc__icon::after{
  animation: svc-burst .9s ease-out;
}
@keyframes svc-burst{
  0%   { opacity: 0;  transform: scale(.6); }
  40%  { opacity: .7; transform: scale(1.2); }
  100% { opacity: 0;  transform: scale(1.8); }
}

/* The animated SVG sits on top, centered. */
.svc-icon{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  z-index: 1;
}
.svc-icon *{ transform-box: fill-box; transform-origin: center; }

/* Heading gets a gradient-fill on hover */
.svc h3{ transition: color .3s ease; }
.svc:hover h3{
  background: var(--grad-brand-diag);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Chips warm to gold on hover */
.svc__tags span{ transition: background .3s ease, color .3s ease, border-color .3s ease; }
.svc:hover .svc__tags span{
  background: rgba(253,184,19,.14) !important;
  border-color: rgba(253,184,19,.35) !important;
}

/* =====================================================================
   Per-service animated icons
   ===================================================================== */

/* 1. Advisory: compass needle spins, dial pulses */
.svc-icon--advisory .needle{ transform-origin: 32px 36px; }
.svc:hover .svc-icon--advisory .needle{
  animation: svc-compass 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes svc-compass{
  0%, 100%{ transform: rotate(-30deg); }
  50%     { transform: rotate(45deg);  }
}
.svc:hover .svc-icon--advisory .dial{
  animation: svc-dial-pulse 2.4s ease-in-out infinite;
}
@keyframes svc-dial-pulse{
  0%, 100%{ stroke-opacity: .6; }
  50%     { stroke-opacity: 1; }
}

/* 2. S/4HANA implementation: rocket launches with thrust */
.svc-icon--s4 .rocket{ transform-origin: 32px 60px; }
.svc:hover .svc-icon--s4 .rocket{
  animation: svc-rocket 1.2s ease-in-out infinite;
}
@keyframes svc-rocket{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.svc-icon--s4 .thrust{ opacity: 0; transform-origin: center top; }
.svc:hover .svc-icon--s4 .thrust{
  animation: svc-thrust .35s ease-in-out infinite alternate;
}
@keyframes svc-thrust{
  from{ opacity: .3; transform: scaleY(.6); }
  to  { opacity: 1;  transform: scaleY(1.15); }
}

/* 3. Integration & APIs: nodes pulse, edges flow */
.svc:hover .svc-icon--api .node{
  animation: svc-node-pulse 1.6s ease-in-out infinite;
}
.svc:hover .svc-icon--api .node-2{ animation-delay: .2s; }
.svc:hover .svc-icon--api .node-3{ animation-delay: .4s; }
.svc:hover .svc-icon--api .node-4{ animation-delay: .6s; }
@keyframes svc-node-pulse{
  0%, 100%{ transform: scale(1);   filter: drop-shadow(0 0 0 transparent); }
  50%     { transform: scale(1.25); filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
}
.svc-icon--api .edge{ stroke-dasharray: 4 4; }
.svc:hover .svc-icon--api .edge{
  animation: svc-edge-flow 1s linear infinite;
}
@keyframes svc-edge-flow{ to{ stroke-dashoffset: -16; } }

/* 4. Intelligent automation: lightning flickers, sparks fly */
.svc:hover .svc-icon--auto .bolt{
  animation: svc-bolt-flicker .55s ease-in-out infinite;
}
@keyframes svc-bolt-flicker{
  0%, 100%{ filter: drop-shadow(0 0 0 transparent); }
  50%     { filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); }
}
.svc-icon--auto .spark{ opacity: 0; }
.svc:hover .svc-icon--auto .spark{
  animation: svc-auto-spark 1.4s ease-in-out infinite;
}
.svc:hover .svc-icon--auto .spark-2{ animation-delay: .35s; }
.svc:hover .svc-icon--auto .spark-3{ animation-delay: .7s; }
@keyframes svc-auto-spark{
  0%   { opacity: 0; transform: scale(.4) translateY(0); }
  40%  { opacity: 1; transform: scale(1.3) translateY(-2px); }
  100% { opacity: 0; transform: scale(.6) translateY(-6px); }
}

/* 5. Analytics & Datasphere: bars grow rhythmically, axis traces */
.svc-icon--anly .bar{ transform-origin: center bottom; transform: scaleY(.7); opacity: .9; }
.svc:hover .svc-icon--anly .bar{
  animation: svc-bar-grow 1.4s ease-in-out infinite;
}
.svc:hover .svc-icon--anly .bar-1{ animation-delay: 0s;   }
.svc:hover .svc-icon--anly .bar-2{ animation-delay: .15s; }
.svc:hover .svc-icon--anly .bar-3{ animation-delay: .30s; }
.svc:hover .svc-icon--anly .bar-4{ animation-delay: .45s; }
@keyframes svc-bar-grow{
  0%, 100%{ transform: scaleY(.7);  opacity: .85; }
  50%     { transform: scaleY(1.05); opacity: 1; }
}
.svc-icon--anly .trend{ stroke-dasharray: 100; stroke-dashoffset: 100; }
.svc:hover .svc-icon--anly .trend{
  animation: svc-trend 2.2s ease-in-out infinite;
}
@keyframes svc-trend{
  0%   { stroke-dashoffset: 100; }
  60%  { stroke-dashoffset: 0;   }
  100% { stroke-dashoffset: 0;   }
}

/* 6. Managed services: shield pulses, check ticks in, ring radiates */
.svc:hover .svc-icon--ams .shield{
  animation: svc-shield-pulse 1.6s ease-in-out infinite;
}
@keyframes svc-shield-pulse{
  0%, 100%{ transform: scale(1);   filter: drop-shadow(0 0 0 transparent); }
  50%     { transform: scale(1.07); filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
}
.svc-icon--ams .check{ stroke-dasharray: 30; stroke-dashoffset: 30; }
.svc:hover .svc-icon--ams .check{
  animation: svc-check 1.6s ease-in-out infinite;
}
@keyframes svc-check{
  0%   { stroke-dashoffset: 30; }
  40%  { stroke-dashoffset: 0;  }
  90%  { stroke-dashoffset: 0;  }
  100% { stroke-dashoffset: 30; }
}
.svc-icon--ams .ring{ opacity: 0; transform-origin: 32px 36px; }
.svc:hover .svc-icon--ams .ring{
  animation: svc-ring 1.8s ease-out infinite;
}
@keyframes svc-ring{
  0%   { opacity: .8; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .svc-icon *,
  .svc__icon,
  .svc{
    animation: none !important;
    transition: none !important;
  }
}