/* Small illustrative scenes at the head of each service card. Nothing here is live data.
   Each scene's resting state is the finished picture, so reduced motion still reads correctly. */
.msp-topic-stage { position: relative; width: 100%; height: 152px; margin-bottom: 2px; color: #1685a7; }

/* --- Everyday support: the call reaches a local team --- */
[data-scene=support] { display: flex; align-items: center; justify-content: center; gap: 0; }
[data-scene=support] .sc-node { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 52px; height: 52px; border: 1px solid #b9dbe6; border-radius: 50%; background: #fff; }
[data-scene=support] .sc-node .icon { width: 22px; height: 22px; }
[data-scene=support] .sc-bayit img { width: 22px; height: 22px; object-fit: contain; }
[data-scene=support] .sc-ring { position: absolute; inset: -1px; border: 1px solid var(--cyan); border-radius: 50%; opacity: 0; animation: sc-ring 3.4s ease-out infinite 1.5s; }
[data-scene=support] .sc-ring-2 { animation-delay: 1.72s; }
[data-scene=support] .sc-wire { position: relative; width: 92px; height: 1px; background: #bcdae4; }
[data-scene=support] .sc-packet { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: sc-travel 3.4s cubic-bezier(.5,0,.3,1) infinite; }
[data-scene=support] .sc-caller { animation: sc-ring-shake 3.4s ease-in-out infinite; }
@keyframes sc-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 44%, 100% { left: calc(100% - 7px); opacity: 0; } }
@keyframes sc-ring { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
@keyframes sc-ring-shake { 0%, 8%, 16%, 100% { transform: rotate(0); } 4% { transform: rotate(-9deg); } 12% { transform: rotate(9deg); } }

/* --- Security: what arrives is stopped at the edge --- */
[data-scene=security] { display: grid; place-items: center; }
[data-scene=security] .sc-shield { width: 62px; height: 70px; overflow: visible; }
[data-scene=security] .sc-shield path { fill: #e2f2f7; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[data-scene=security] .sc-shield .sc-tick { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-scene=security] .sc-pulse { position: absolute; width: 62px; height: 70px; border-radius: 40% 40% 46% 46%; box-shadow: 0 0 0 0 #00aeef55; animation: sc-shield-pulse 4s ease-out infinite; }
[data-scene=security] .sc-threat { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 2px; background: #b3763a; opacity: 0; animation: sc-threat 4s ease-in infinite; }
[data-scene=security] .t1 { animation-delay: .1s; --tx: -78px; --ty: -34px; }
[data-scene=security] .t2 { animation-delay: 1.4s; --tx: 82px; --ty: -12px; }
[data-scene=security] .t3 { animation-delay: 2.7s; --tx: -70px; --ty: 30px; }
@keyframes sc-threat {
  0% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
  8% { opacity: .85; }
  26% { transform: translate(calc(var(--tx) * .28), calc(var(--ty) * .28)) scale(1); opacity: .85; }
  34%, 100% { transform: translate(calc(var(--tx) * .22), calc(var(--ty) * .22)) scale(.2); opacity: 0; }
}
@keyframes sc-shield-pulse { 0%, 20% { box-shadow: 0 0 0 0 #00aeef55; } 32% { box-shadow: 0 0 0 9px #00aeef00; } 100% { box-shadow: 0 0 0 0 #00aeef00; } }

/* --- Backups: the day's work streams up into an off-site copy --- */
[data-scene=backup] .sc-cloud { position: absolute; top: 0; left: 50%; width: 104px; height: 42px; margin-left: -52px; overflow: visible; }
[data-scene=backup] .sc-cloud path { fill: #eaf6fa; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[data-scene=backup] .sc-stream { position: absolute; bottom: 62px; left: 50%; width: 0; height: 0; }
[data-scene=backup] .sc-stream i { position: absolute; bottom: 0; left: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 1px; background: var(--cyan); opacity: .8; transform: translate(var(--x), -26px); animation: sc-rise 2.16s linear infinite; animation-delay: var(--d); }
[data-scene=backup] .sc-laptop { position: absolute; bottom: 8px; left: 50%; width: 96px; margin-left: -48px; }
[data-scene=backup] .sc-screen { display: block; height: 48px; border: 1.5px solid currentColor; border-radius: 3px 3px 0 0; background: #fff; }
[data-scene=backup] .sc-line { position: absolute; left: 10px; height: 3px; border-radius: 2px; background: #c9e4ed; }
[data-scene=backup] .sc-line-1 { top: 12px; width: 46px; }
[data-scene=backup] .sc-line-2 { top: 22px; width: 62px; }
[data-scene=backup] .sc-line-3 { top: 32px; width: 34px; }
[data-scene=backup] .sc-base { display: block; width: 116px; height: 5px; margin-left: -10px; border-radius: 0 0 4px 4px; background: linear-gradient(#c7d8de, #8fabb6); }
@keyframes sc-rise {
  0% { transform: translate(var(--x), 0) scale(.65); opacity: 0; }
  16% { opacity: .85; }
  70% { opacity: .8; }
  100% { transform: translate(var(--x), -54px) scale(.45); opacity: 0; }
}

/* --- Cloud & networks: one shared place, everyone connected to it --- */
[data-scene=network] { display: grid; place-items: center; }
[data-scene=network] .sc-net { width: 100%; max-width: 216px; height: 130px; overflow: visible; }
[data-scene=network] .sc-link { fill: none; stroke: #b6d8e3; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[data-scene=network] .sc-flow { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 13 999; stroke-dashoffset: 13; vector-effect: non-scaling-stroke; animation: sc-flow 3.6s ease-in-out infinite; }
[data-scene=network] .f2 { animation-delay: .5s; }
[data-scene=network] .f3 { animation-delay: 1s; }
[data-scene=network] .sc-dev { fill: #fff; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
[data-scene=network] .sc-hub { fill: #e2f2f7; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
[data-scene=network] .sc-hub-mark { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@keyframes sc-flow { 0% { stroke-dashoffset: 13; } 46%, 100% { stroke-dashoffset: -96; } }

/* --- Planning & hardware: the desk is ready before they arrive --- */
[data-scene=planning] { display: grid; place-items: center; }
[data-scene=planning] .sc-set { position: relative; width: 168px; height: 108px; }
[data-scene=planning] .sc-monitor { position: absolute; left: 2px; bottom: 20px; width: 108px; height: 70px; border: 1.5px solid currentColor; border-radius: 4px; background: #fff; animation: sc-place 5s ease-out infinite; }
[data-scene=planning] .sc-screen { position: absolute; inset: 6px; border-radius: 2px; background: linear-gradient(150deg, #d3edf6, #eaf6fa); opacity: 1; animation: sc-wake 5s ease-out infinite; }
[data-scene=planning] .sc-stand { position: absolute; left: 47px; bottom: 5px; width: 18px; height: 16px; border-radius: 0 0 3px 3px; background: #b3ccd5; animation: sc-place 5s ease-out infinite; }
[data-scene=planning] .sc-tower { position: absolute; right: 6px; bottom: 5px; width: 32px; height: 62px; border: 1.5px solid currentColor; border-radius: 4px; background: #fff; animation: sc-place 5s ease-out infinite .5s; }
[data-scene=planning] .sc-power { position: absolute; top: 8px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--cyan); animation: sc-wake 5s ease-out infinite; }
[data-scene=planning] .sc-desk { position: absolute; left: -6px; right: -6px; bottom: 4px; height: 1.5px; border-radius: 2px; background: #b6d8e3; }
@keyframes sc-place { 0% { opacity: 0; transform: translateY(9px) scale(.96); } 14%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(9px) scale(.96); } }
@keyframes sc-wake { 0%, 30% { opacity: 0; } 42%, 88% { opacity: 1; } 100% { opacity: 0; } }

@media(max-width:600px) {
  .msp-topic-stage { height: 128px; }
  [data-scene=support] .sc-wire { width: 68px; }
  [data-scene=support] .sc-node { width: 46px; height: 46px; }
  [data-scene=network] .sc-net { height: 112px; }
  [data-scene=planning] .sc-set { width: 150px; height: 96px; }
  [data-scene=planning] .sc-monitor { width: 100px; height: 68px; }
  [data-scene=planning] .sc-tower { height: 54px; }
  [data-scene=backup] .sc-laptop { bottom: 4px; }
  [data-scene=backup] .sc-stream { bottom: 56px; }
}


/* Hold the scenes still until the section is on screen. Declared last, and matching the
   specificity of the per-scene `animation` shorthands, which otherwise reset play-state. */
.msp-topic-stage[data-scene] * { animation-play-state: paused; }
.msp-services-live .msp-topic-stage[data-scene] * { animation-play-state: running; }

@media(prefers-reduced-motion:reduce) {
  .msp-topic-stage *, .msp-services-live .msp-topic-stage * { animation: none !important; }
  [data-scene=support] .sc-packet { left: calc(50% - 3.5px); opacity: 1; }
  [data-scene=security] .sc-threat { opacity: 0; }
  [data-scene=network] .sc-flow { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .5; }
}