/* ==========================================================================
   Service detail hero — shared shell + per-service motion
   ========================================================================== */

.page-hero--svc-detail{
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.svcd-hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 820px){
  .svcd-hero__inner{ grid-template-columns: 1fr; }
}
.svcd-hero__copy h1{ margin-top: .35em; }
.svcd-hero__icon{
  width:60px;height:60px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:28px;color:#fff;
  flex: 0 0 auto;
}

/* The art holder */
.svcd-art{
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.svcd-art svg{ width:100%; height:100%; display:block; }

/* ----------------------------- ADVISORY ----------------------------------
   Roadmap path with milestone pins lighting up
   -------------------------------------------------------------------------- */
.svcd-art--advisory .ad-path{
  fill: none;
  stroke: url(#ad-path-grad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  animation: ad-draw 2.4s ease-out .2s forwards;
  filter: drop-shadow(0 4px 14px rgba(238,144,2,0.28));
}
@keyframes ad-draw{ from{ stroke-dashoffset: 1100; } to{ stroke-dashoffset: 0; } }
.svcd-art--advisory .ad-pin{
  opacity: 0;
  animation: ad-pin-pop .55s cubic-bezier(.2,.9,.3,1.4) forwards;
}
.svcd-art--advisory .ad-pin:nth-of-type(1){ animation-delay: .55s; }
.svcd-art--advisory .ad-pin:nth-of-type(2){ animation-delay: 1.0s; }
.svcd-art--advisory .ad-pin:nth-of-type(3){ animation-delay: 1.55s; }
.svcd-art--advisory .ad-pin:nth-of-type(4){ animation-delay: 2.1s; }
@keyframes ad-pin-pop{
  0%{ opacity:0; transform: translateY(8px); }
  60%{ opacity: 1; transform: translateY(-3px); }
  100%{ opacity:1; transform: translateY(0); }
}
.svcd-art--advisory .ad-pin__halo{
  transform-origin: center; transform-box: fill-box;
  animation: ad-pin-halo 2.4s ease-in-out infinite;
}
@keyframes ad-pin-halo{
  0%,100%{ transform: scale(1); opacity: .4; }
  50%{ transform: scale(1.6); opacity: 0; }
}
.svcd-art--advisory .ad-traveller{
  filter: drop-shadow(0 0 8px #f26722);
  offset-path: path("M 60 380 C 140 320, 200 380, 270 280 S 400 200, 480 120");
  animation: ad-travel 5.5s linear infinite;
  animation-delay: 2.6s;
}
@keyframes ad-travel{
  0%{ offset-distance: 0%; opacity: 0; }
  6%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ offset-distance: 100%; opacity: 0; }
}
.svcd-art--advisory .ad-grid line{
  opacity: 0;
  animation: ad-grid-fade 1.6s ease-out .1s forwards;
}
@keyframes ad-grid-fade{ to{ opacity: 1; } }

/* ----------------------------- S/4HANA ----------------------------------
   Layered cube assembling — base, data, process, UX
   -------------------------------------------------------------------------- */
.svcd-art--s4hana .s4-layer{
  opacity: 0;
  transform: translateY(40px);
  transform-origin: center; transform-box: fill-box;
  animation: s4-stack .8s cubic-bezier(.2,.9,.3,1.2) forwards;
}
.svcd-art--s4hana .s4-layer:nth-of-type(1){ animation-delay: .2s; }
.svcd-art--s4hana .s4-layer:nth-of-type(2){ animation-delay: .55s; }
.svcd-art--s4hana .s4-layer:nth-of-type(3){ animation-delay: .9s; }
.svcd-art--s4hana .s4-layer:nth-of-type(4){ animation-delay: 1.25s; }
@keyframes s4-stack{
  0%{ opacity:0; transform: translateY(40px); }
  100%{ opacity:1; transform: translateY(0); }
}
.svcd-art--s4hana .s4-glow{
  transform-origin: center; transform-box: fill-box;
  animation: s4-pulse 3s ease-in-out infinite;
  animation-delay: 1.8s;
}
@keyframes s4-pulse{
  0%,100%{ opacity: .55; }
  50%{ opacity: 1; }
}
.svcd-art--s4hana .s4-spark{
  opacity: 0;
  animation: s4-spark 4s ease-out 2.4s infinite;
}
.svcd-art--s4hana .s4-spark:nth-child(2){ animation-delay: 2.7s; }
.svcd-art--s4hana .s4-spark:nth-child(3){ animation-delay: 3.0s; }
@keyframes s4-spark{
  0%{ opacity:0; transform: translateY(0); }
  20%{ opacity: 1; }
  100%{ opacity:0; transform: translateY(-50px); }
}
.svcd-art--s4hana .s4-label{
  opacity: 0;
  animation: s4-label-fade .6s ease-out forwards;
}
.svcd-art--s4hana .s4-label:nth-of-type(1){ animation-delay: .8s; }
.svcd-art--s4hana .s4-label:nth-of-type(2){ animation-delay: 1.15s; }
.svcd-art--s4hana .s4-label:nth-of-type(3){ animation-delay: 1.5s; }
.svcd-art--s4hana .s4-label:nth-of-type(4){ animation-delay: 1.85s; }
@keyframes s4-label-fade{ to{ opacity:1; } }

/* ----------------------------- INTEGRATION ------------------------------
   Network of system nodes with packets flowing along edges
   -------------------------------------------------------------------------- */
.svcd-art--integration .in-bee-wingL,
.svcd-art--integration .in-bee-wingR{
  transform-origin: center -9px; transform-box: fill-box;
  animation: in-bee-wing 95ms ease-in-out infinite alternate;
}
.svcd-art--integration .in-bee-wingR{ animation-delay: 45ms; }
@keyframes in-bee-wing{
  from{ transform: scaleY(1) rotate(0); }
  to  { transform: scaleY(.5) rotate(8deg); }
}

/* Advisory bee wings */
.ad-bee__wing{
  transform-origin: 50% 100%; transform-box: fill-box;
  animation: ad-bee-wing 95ms ease-in-out infinite alternate;
}
.ad-bee__wing--front{ animation-delay: 45ms; }
@keyframes ad-bee-wing{
  from{ transform: scaleY(1) rotate(0); }
  to  { transform: scaleY(.45) rotate(8deg); }
}

.svcd-art--integration .in-edge{
  stroke-dasharray: 4 6;
  stroke-dashoffset: 0;
  animation: in-flow 3s linear infinite;
  opacity: .55;
}
.svcd-art--integration .in-edge:nth-of-type(2){ animation-direction: reverse; animation-duration: 4s; }
.svcd-art--integration .in-edge:nth-of-type(3){ animation-duration: 3.5s; }
.svcd-art--integration .in-edge:nth-of-type(4){ animation-direction: reverse; animation-duration: 2.8s; }
.svcd-art--integration .in-edge:nth-of-type(5){ animation-duration: 4.2s; }
.svcd-art--integration .in-edge:nth-of-type(6){ animation-direction: reverse; animation-duration: 3.2s; }
@keyframes in-flow{
  to{ stroke-dashoffset: -100; }
}
.svcd-art--integration .in-node{
  opacity: 0;
  animation: in-node-in .6s cubic-bezier(.2,.9,.3,1.4) forwards;
}
.svcd-art--integration .in-node:nth-of-type(1){ animation-delay: .2s; }
.svcd-art--integration .in-node:nth-of-type(2){ animation-delay: .35s; }
.svcd-art--integration .in-node:nth-of-type(3){ animation-delay: .5s; }
.svcd-art--integration .in-node:nth-of-type(4){ animation-delay: .65s; }
.svcd-art--integration .in-node:nth-of-type(5){ animation-delay: .8s; }
.svcd-art--integration .in-node:nth-of-type(6){ animation-delay: .95s; }
.svcd-art--integration .in-node:nth-of-type(7){ animation-delay: 1.1s; }
@keyframes in-node-in{ to{ opacity:1; } }

.svcd-art--integration .in-pulse{
  filter: drop-shadow(0 0 6px #c1268c);
  opacity: 0;
  animation: in-pulse-travel 3.5s linear infinite;
  animation-delay: 1.4s;
}
.svcd-art--integration .in-pulse--1{ offset-path: path("M 270 270 L 270 80"); }
.svcd-art--integration .in-pulse--2{ offset-path: path("M 270 270 L 440 170"); animation-delay: 1.7s; }
.svcd-art--integration .in-pulse--3{ offset-path: path("M 270 270 L 440 370"); animation-delay: 2.0s; }
.svcd-art--integration .in-pulse--4{ offset-path: path("M 270 270 L 270 460"); animation-delay: 2.3s; }
.svcd-art--integration .in-pulse--5{ offset-path: path("M 270 270 L 100 370"); animation-delay: 2.6s; }
.svcd-art--integration .in-pulse--6{ offset-path: path("M 270 270 L 100 170"); animation-delay: 2.9s; }
@keyframes in-pulse-travel{
  0%{ offset-distance: 0%; opacity: 0; }
  10%{ opacity: 1; }
  85%{ opacity: 1; }
  100%{ offset-distance: 100%; opacity: 0; }
}

/* ----------------------------- AUTOMATION -------------------------------
   Workflow nodes lighting up in sequence + agent indicator
   -------------------------------------------------------------------------- */
.svcd-art--automation .au-step{
  opacity: 0;
  animation: au-step-fire 5s ease-in-out infinite;
}
.svcd-art--automation .au-step:nth-of-type(1){ animation-delay: .2s; }
.svcd-art--automation .au-step:nth-of-type(2){ animation-delay: 1.0s; }
.svcd-art--automation .au-step:nth-of-type(3){ animation-delay: 1.8s; }
.svcd-art--automation .au-step:nth-of-type(4){ animation-delay: 2.6s; }
.svcd-art--automation .au-step:nth-of-type(5){ animation-delay: 3.4s; }
@keyframes au-step-fire{
  0%, 10%{ opacity: .25; }
  15%, 25%{ opacity: 1; filter: drop-shadow(0 0 14px #aa3baa); }
  30%, 100%{ opacity: .85; filter: none; }
}
.svcd-art--automation .au-arrow{
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: au-arrow 5s ease-in-out infinite;
}
.svcd-art--automation .au-arrow:nth-of-type(1){ animation-delay: .6s; }
.svcd-art--automation .au-arrow:nth-of-type(2){ animation-delay: 1.4s; }
.svcd-art--automation .au-arrow:nth-of-type(3){ animation-delay: 2.2s; }
.svcd-art--automation .au-arrow:nth-of-type(4){ animation-delay: 3.0s; }
@keyframes au-arrow{
  0%, 12%{ stroke-dashoffset: 60; opacity: 0; }
  20%{ opacity: 1; }
  35%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: 0; opacity: .55; }
}
.svcd-art--automation .au-agent{
  transform-origin: center; transform-box: fill-box;
  animation: au-agent-bob 3s ease-in-out infinite;
}
@keyframes au-agent-bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.svcd-art--automation .au-agent__core{
  animation: au-agent-pulse 2s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
@keyframes au-agent-pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

/* ----------------------------- ANALYTICS --------------------------------
   Bars rising + line chart drawing + spinning gauge
   -------------------------------------------------------------------------- */
.svcd-art--analytics .an-bar{
  transform-origin: bottom; transform-box: fill-box;
  animation: an-bar-rise 3.5s ease-in-out infinite;
}
.svcd-art--analytics .an-bar:nth-of-type(1){ animation-delay: 0s; }
.svcd-art--analytics .an-bar:nth-of-type(2){ animation-delay: .15s; }
.svcd-art--analytics .an-bar:nth-of-type(3){ animation-delay: .3s; }
.svcd-art--analytics .an-bar:nth-of-type(4){ animation-delay: .45s; }
.svcd-art--analytics .an-bar:nth-of-type(5){ animation-delay: .6s; }
.svcd-art--analytics .an-bar:nth-of-type(6){ animation-delay: .75s; }
.svcd-art--analytics .an-bar:nth-of-type(7){ animation-delay: .9s; }
@keyframes an-bar-rise{
  0%, 100%{ transform: scaleY(.3); }
  50%{ transform: scaleY(1); }
}
.svcd-art--analytics .an-line{
  fill: none;
  stroke: url(#an-line-grad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: an-line-draw 2.4s ease-out .4s forwards, an-line-pulse 4s ease-in-out 2.4s infinite;
  filter: drop-shadow(0 4px 12px rgba(126,63,191,0.35));
}
@keyframes an-line-draw{ from{ stroke-dashoffset: 700; } to{ stroke-dashoffset: 0; } }
@keyframes an-line-pulse{
  0%,100%{ filter: drop-shadow(0 4px 12px rgba(126,63,191,0.35)); }
  50%{ filter: drop-shadow(0 6px 22px rgba(4,146,206,0.55)); }
}
.svcd-art--analytics .an-dot{
  opacity: 0;
  animation: an-dot-in .35s ease-out forwards;
}
.svcd-art--analytics .an-dot:nth-of-type(1){ animation-delay: .8s; }
.svcd-art--analytics .an-dot:nth-of-type(2){ animation-delay: 1.1s; }
.svcd-art--analytics .an-dot:nth-of-type(3){ animation-delay: 1.4s; }
.svcd-art--analytics .an-dot:nth-of-type(4){ animation-delay: 1.7s; }
.svcd-art--analytics .an-dot:nth-of-type(5){ animation-delay: 2.0s; }
@keyframes an-dot-in{ to{ opacity: 1; } }
.svcd-art--analytics .an-gauge{
  transform-origin: center; transform-box: fill-box;
  animation: an-gauge-spin 8s ease-in-out infinite;
}
@keyframes an-gauge-spin{
  0%{ transform: rotate(-90deg); }
  50%{ transform: rotate(75deg); }
  100%{ transform: rotate(-90deg); }
}

/* ----------------------------- MANAGED ----------------------------------
   ECG heartbeat + 24×7 dial + uptime ticker
   -------------------------------------------------------------------------- */
.svcd-art--managed .mn-ecg{
  fill: none;
  stroke: url(#mn-grad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: mn-ecg-draw 3s linear infinite;
  filter: drop-shadow(0 0 6px rgba(4,146,206,0.55));
}
@keyframes mn-ecg-draw{
  0%{ stroke-dashoffset: 1400; }
  60%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -1400; }
}
.svcd-art--managed .mn-grid line{ opacity: .25; }
.svcd-art--managed .mn-dial{
  transform-origin: 380px 380px;
  animation: mn-dial-spin 12s linear infinite;
}
@keyframes mn-dial-spin{ to{ transform: rotate(360deg); } }
.svcd-art--managed .mn-dial-ring{
  stroke-dasharray: 4 6;
}
.svcd-art--managed .mn-pulse-circle{
  transform-origin: center; transform-box: fill-box;
  animation: mn-pulse-circle 2s ease-out infinite;
}
@keyframes mn-pulse-circle{
  0%{ transform: scale(.6); opacity: 1; }
  100%{ transform: scale(2.2); opacity: 0; }
}
.svcd-art--managed .mn-ticker text{
  opacity: 0;
  animation: mn-tick 4s ease-in-out infinite;
}
.svcd-art--managed .mn-ticker text:nth-of-type(1){ animation-delay: 0s; }
.svcd-art--managed .mn-ticker text:nth-of-type(2){ animation-delay: 1.3s; }
.svcd-art--managed .mn-ticker text:nth-of-type(3){ animation-delay: 2.6s; }
@keyframes mn-tick{
  0%, 90%, 100%{ opacity: 0; transform: translateY(0); }
  10%, 30%{ opacity: 1; transform: translateY(0); }
  40%{ opacity: 0; transform: translateY(-8px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .svcd-art *{ animation: none !important; transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}