/* ==========================================================================
   Drakos Systems — Service Visual Animation System
   Light for readability. Navy for trust. Teal for structure. Amber for action.
   ========================================================================== */

.drakos-service-visual {
  --dsv-primary: #173B57;
  --dsv-primary-dark: #0F3D5E;
  --dsv-secondary: #0F766E;
  --dsv-cta: #F59E0B;
  --dsv-cta-dark: #C2410C;
  --dsv-surface: #FFFFFF;
  --dsv-soft: #EEF2F6;
  --dsv-text: #111827;
  --dsv-text-muted: #4B5563;
  --dsv-border: #D1D5DB;

  position: relative;
  max-width: 520px;
  margin: 2.5rem auto;
  padding: 2.5rem 2rem;
  background: var(--dsv-soft);
  border: 1px solid var(--dsv-border);
  border-radius: 16px;
  text-align: center;
  overflow: visible;
}

/* ── Fade-in items ───────────────────────────────────────── */
.dcv-fade-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.dcv-js .dcv-fade-item {
  opacity: 0;
  transform: translateY(14px);
}

.is-visible .dcv-fade-item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--d, 0s);
}

/* ── SVG path draw ───────────────────────────────────────── */
.dcv-draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
}

.dcv-js .dcv-draw {
  stroke-dashoffset: 200;
}

.is-visible .dcv-draw {
  animation: dcv-draw-anim 1.6s ease forwards var(--d, 0.3s);
}

@keyframes dcv-draw-anim {
  to { stroke-dashoffset: 0; }
}

/* ── Ring pulse (continuous after reveal) ────────────────── */
.dcv-ring {
  transform-box: fill-box;
  transform-origin: center;
}

.dcv-js .dcv-ring {
  opacity: 0;
}

.is-visible .dcv-ring {
  animation: dcv-ring-anim var(--ringDur, 4.2s) ease-out var(--d, 0s) infinite;
}

@keyframes dcv-ring-anim {
  0%   { transform: scale(0.65); opacity: 0; }
  15%  { transform: scale(0.85); opacity: 0.45; }
  55%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ── Breathing dot ───────────────────────────────────────── */
.dcv-breathe {
  animation: dcv-breathe-anim 3s ease-in-out infinite;
}

@keyframes dcv-breathe-anim {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* ── Ambient pulse (top-right dot on every visual) ───────── */
.drakos-service-visual::after {
  content: "";
  position: absolute;
  top: 14%;
  right: 14%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--dsv-secondary);
  opacity: 0;
  pointer-events: none;
}

.dcv-js .drakos-service-visual.is-visible::after {
  animation: dcv-ambient-pulse 3.8s ease-in-out 0.4s infinite;
}

@keyframes dcv-ambient-pulse {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.18); }
}

/* ── Chip (status label) ─────────────────────────────────── */
.dcv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--dsv-soft);
  color: var(--dsv-text-muted);
  border: 1px solid var(--dsv-border);
}

.dcv-chip--accent {
  background: rgba(15,118,110,0.1);
  color: var(--dsv-secondary);
  border-color: rgba(15,118,110,0.25);
}

.dcv-chip--amber {
  background: rgba(245,158,11,0.12);
  color: var(--dsv-cta-dark);
  border-color: rgba(245,158,11,0.3);
}

/* ── Visual SVG container ────────────────────────────────── */
.dcv-svg-wrap {
  width: 100%;
  max-width: 340px;
  margin: 0 auto 1.25rem;
  padding: 0 1.25rem;
  overflow: visible;
}

.dcv-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ── Visual title ────────────────────────────────────────── */
.dcv-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dsv-primary);
  margin-bottom: 0.5rem;
}

/* ── Chip row ────────────────────────────────────────────── */
.dcv-chips {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* ── Call quality bars (VoIP visual) ─────────────────────── */
.dcv-call-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  justify-content: center;
  margin-top: 0.75rem;
}

.dcv-call-bars span {
  display: block;
  width: 5px;
  background: var(--dsv-secondary);
  border-radius: 3px;
  animation: dcv-bar-bounce 1.4s ease-in-out infinite;
}

.dcv-call-bars span:nth-child(1) { height: 8px; animation-delay: 0s; }
.dcv-call-bars span:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.dcv-call-bars span:nth-child(3) { height: 20px; animation-delay: 0.3s; }
.dcv-call-bars span:nth-child(4) { height: 14px; animation-delay: 0.45s; }
.dcv-call-bars span:nth-child(5) { height: 8px; animation-delay: 0.6s; }

@keyframes dcv-bar-bounce {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.5); }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dcv-fade-item,
  .dcv-draw,
  .dcv-ring,
  .dcv-breathe {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
    transition: none !important;
  }

  .drakos-service-visual::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .dcv-call-bars span {
    animation: none !important;
  }
}

/* ── Label grid (HTML labels below SVG) ──────────────────── */
.dcv-label-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.75rem auto 0;
  max-width: 460px;
}

.dcv-label-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--dsv-surface);
  border: 1px solid var(--dsv-border);
  color: var(--dsv-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .dcv-label-pill {
    font-size: 0.72rem;
    padding-inline: 0.55rem;
  }
}

@media (max-width: 420px) {
  .drakos-service-visual {
    padding: 2rem 1rem;
  }
  .dcv-svg-wrap {
    max-width: 300px;
    padding: 0 1rem;
  }
}



/* ==========================================================================
   HOMEPAGE CONNECTED SERVICES ANIMATION
   ========================================================================== */

.drakos-home-animation {
  --dsv-primary: #173B57;
  --dsv-primary-dark: #0F3D5E;
  --dsv-secondary: #0F766E;
  --dsv-cta: #F59E0B;
  --dsv-cta-dark: #C2410C;
  --dsv-surface: #FFFFFF;
  --dsv-soft: #EEF2F6;
  --dsv-text: #111827;
  --dsv-text-muted: #4B5563;
  --dsv-border: #D1D5DB;

  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  border-radius: 22px;
  border: 1px solid rgba(209, 213, 219, 0.25);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.18);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.dcs-homepage-inner {
  border-radius: 18px;
  border: 1px solid rgba(209, 213, 219, 0.22);
  background: rgba(255, 255, 255, 0.04);
  padding: clamp(1rem, 3vw, 1.8rem);
}

.dcs-homepage-map {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.25rem;
}

.dcs-homepage-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dcs-homepage-line {
  stroke: var(--dsv-secondary);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.82;
  stroke-dasharray: 1 8;
  animation: dcs-line-flow 4.6s linear infinite;
}

.dcs-homepage-ring {
  stroke: rgba(15, 118, 110, 0.32);
  stroke-width: 0.8;
  fill: none;
}

.dcs-homepage-ring:nth-of-type(2) {
  animation: dcs-ring-soft-pulse 4.8s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.dcs-homepage-node {
  fill: var(--dsv-secondary);
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(15,118,110,0.2));
  animation: dcs-node-breathe 3.4s ease-in-out infinite;
}

.dcs-homepage-node:nth-of-type(odd) {
  animation-delay: 0.4s;
}

/* Centre hub */
.dcs-homepage-map .dcs-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(98px, 29%, 124px);
  min-height: clamp(74px, 22%, 92px);
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 118, 110, 0.58);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  z-index: 4;
}

.dcs-hub-mark {
  display: block;
  color: #173B57;
  font-size: clamp(0.78rem, 1.6vw, 0.96rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.dcs-hub::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dsv-secondary);
  opacity: 0.85;
  animation: dcs-node-breathe 3s ease-in-out infinite;
}

/* Service pills */
.dcs-homepage-service-pills,
.dcs-homepage-trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.75rem auto 0;
}

.dcs-homepage-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(209, 213, 219, 0.35);
  background: rgba(255, 255, 255, 0.10);
  color: #EEF2F6;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.dcs-homepage-pill--accent {
  color: var(--dsv-cta);
  border-color: rgba(245, 158, 11, 0.55);
}

.dcs-homepage-caption {
  margin: 0.7rem 0 0;
  color: #FFFFFF;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.dcs-homepage-contact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.dcs-homepage-contact-row a {
  color: var(--dsv-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.dcs-homepage-contact-row a:hover {
  color: #fff;
}

.dcs-homepage-contact-row span[aria-hidden] {
  color: rgba(255,255,255,0.3);
}

/* Keyframes */
@keyframes dcs-node-breathe {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes dcs-line-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -18; }
}

@keyframes dcs-ring-soft-pulse {
  0%, 100% { opacity: 0.16; transform: scale(1); }
  50% { opacity: 0.34; transform: scale(1.08); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dcs-homepage-node,
  .dcs-homepage-line,
  .dcs-homepage-ring,
  .dcs-hub::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .drakos-home-animation {
    max-width: 100%;
    padding: 1.1rem;
  }

  .dcs-homepage-map {
    width: min(100%, 260px);
  }

  .dcs-homepage-pill {
    font-size: 0.76rem;
    min-height: 30px;
    padding-inline: 0.62rem;
  }
}

/* ── Homepage star labels ────────────────────────────────── */
.dcs-homepage-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.dcs-homepage-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 118, 110, 0.45);
  color: #173B57;
  font-size: clamp(0.62rem, 0.75vw, 0.78rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
}

.label-it       { left: 50%; top: 16%; }
.label-voip     { left: 76%; top: 25%; }
.label-wifi     { left: 86%; top: 50%; }
.label-m365     { left: 76%; top: 75%; }
.label-cyber    { left: 50%; top: 84%; }
.label-dns      { left: 24%; top: 75%; }
.label-failover { left: 14%; top: 50%; }
.label-cctv     { left: 24%; top: 25%; }

@media (max-width: 520px) {
  .dcs-homepage-label {
    min-width: 34px;
    min-height: 22px;
    padding: 0.16rem 0.36rem;
    font-size: 0.6rem;
  }
  .label-failover { left: 16%; }
  .label-wifi     { left: 84%; }
}


/* ======================================================================
   Text-bound animation fix — 2026-07-02
   - Service diagrams now include readable labels inside the visual area.
   - Homepage endpoint labels are SVG node pills, so text and node motion stay together.
   ====================================================================== */

.dcv-svg-wrap {
  position: relative;
}

.dcv-diagram-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.dcv-diagram-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 92px;
  min-height: 24px;
  padding: 0.2rem 0.48rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 118, 110, 0.38);
  color: #173B57;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
  font-size: clamp(0.58rem, 1.4vw, 0.72rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.dcv-label-count-3 .dcv-diagram-label:nth-child(1) { left: 50%; top: 13%; }
.dcv-label-count-3 .dcv-diagram-label:nth-child(2) { left: 82%; top: 60%; }
.dcv-label-count-3 .dcv-diagram-label:nth-child(3) { left: 18%; top: 60%; }

.dcv-label-count-4 .dcv-diagram-label:nth-child(1) { left: 50%; top: 13%; }
.dcv-label-count-4 .dcv-diagram-label:nth-child(2) { left: 85%; top: 50%; }
.dcv-label-count-4 .dcv-diagram-label:nth-child(3) { left: 50%; top: 87%; }
.dcv-label-count-4 .dcv-diagram-label:nth-child(4) { left: 15%; top: 50%; }

.dcv-label-count-5 .dcv-diagram-label:nth-child(1) { left: 50%; top: 13%; }
.dcv-label-count-5 .dcv-diagram-label:nth-child(2) { left: 84%; top: 38%; }
.dcv-label-count-5 .dcv-diagram-label:nth-child(3) { left: 72%; top: 82%; }
.dcv-label-count-5 .dcv-diagram-label:nth-child(4) { left: 28%; top: 82%; }
.dcv-label-count-5 .dcv-diagram-label:nth-child(5) { left: 16%; top: 38%; }

.dcv-label-count-6 .dcv-diagram-label:nth-child(1) { left: 50%; top: 13%; }
.dcv-label-count-6 .dcv-diagram-label:nth-child(2) { left: 82%; top: 30%; }
.dcv-label-count-6 .dcv-diagram-label:nth-child(3) { left: 82%; top: 70%; }
.dcv-label-count-6 .dcv-diagram-label:nth-child(4) { left: 50%; top: 87%; }
.dcv-label-count-6 .dcv-diagram-label:nth-child(5) { left: 18%; top: 70%; }
.dcv-label-count-6 .dcv-diagram-label:nth-child(6) { left: 18%; top: 30%; }

.dcv-label-count-7 .dcv-diagram-label:nth-child(1) { left: 50%; top: 12%; }
.dcv-label-count-7 .dcv-diagram-label:nth-child(2) { left: 82%; top: 24%; }
.dcv-label-count-7 .dcv-diagram-label:nth-child(3) { left: 86%; top: 50%; }
.dcv-label-count-7 .dcv-diagram-label:nth-child(4) { left: 78%; top: 78%; }
.dcv-label-count-7 .dcv-diagram-label:nth-child(5) { left: 50%; top: 88%; }
.dcv-label-count-7 .dcv-diagram-label:nth-child(6) { left: 22%; top: 78%; }
.dcv-label-count-7 .dcv-diagram-label:nth-child(7) { left: 14%; top: 50%; }

.dcv-label-count-8 .dcv-diagram-label:nth-child(1) { left: 50%; top: 12%; }
.dcv-label-count-8 .dcv-diagram-label:nth-child(2) { left: 78%; top: 22%; }
.dcv-label-count-8 .dcv-diagram-label:nth-child(3) { left: 88%; top: 50%; }
.dcv-label-count-8 .dcv-diagram-label:nth-child(4) { left: 78%; top: 78%; }
.dcv-label-count-8 .dcv-diagram-label:nth-child(5) { left: 50%; top: 88%; }
.dcv-label-count-8 .dcv-diagram-label:nth-child(6) { left: 22%; top: 78%; }
.dcv-label-count-8 .dcv-diagram-label:nth-child(7) { left: 12%; top: 50%; }
.dcv-label-count-8 .dcv-diagram-label:nth-child(8) { left: 22%; top: 22%; }

/* Homepage SVG endpoint pills — text is no longer a detached HTML overlay. */








@media (max-width: 520px) {
  .dcv-diagram-label {
    max-width: 82px;
    min-height: 22px;
    padding: 0.16rem 0.36rem;
    font-size: 0.56rem;
  }
}