/* ============================================================
   diagrams.css — ORBIT + WEB DIAGRAMS
   Two interactive SVG-based diagrams.
   ============================================================ */

/* ──────────────────────────────────────────
   SHARED DIAGRAM BASE
────────────────────────────────────────── */
.diagram-sec {
  padding: 96px 0;
  overflow: hidden;
  position: relative;
}
.diagram-header {
  text-align: center;
  margin-bottom: 64px;
}

/* Canvas — fixed-size, centred */
.diagram-canvas {
  position: relative;
  margin: 0 auto;
}

/* SVG overlay for connector lines */
.diagram-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ──────────────────────────────────────────
   ORBIT DIAGRAM (Industries)
   Canvas: 620 × 620 px, centre: 310, 310
   Radius: 210 px — nodes placed at 72° intervals
   Angles: −90°, −18°, 54°, 126°, 198° (pentagon)
   Node positions (left, top):
     Retail:       310,  100
     NGO:          492,  205
     Distribution: 492,  415
     Education:    128,  415
     Hospitality:  128,  205
────────────────────────────────────────── */
.orbit-sec { background: var(--ink); }

.orbit-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 900px 700px at 50% 50%, rgba(79,70,229,0.18) 0%, transparent 65%);
  pointer-events: none;
}

.orbit-sec .diagram-header .h2     { color: #fff; }
.orbit-sec .diagram-header .h2 .hi { color: #a5b4fc; }
.orbit-sec .diagram-header .body-md { color: rgba(255,255,255,0.5); }

.orbit-canvas {
 width: min(620px, 90vw);
  height: min(620px, 90vw);
  position: relative;  /* needed for child absolute positioning */
}

/* Concentric rings */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.08);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ring-1 { width: 200px; height: 200px; }
.ring-2 {
  width: 420px; height: 420px;
  border-style: solid;
  border-color: rgba(79,70,229,0.2);
  animation: spin-cw 40s linear infinite;
}
.ring-3 { width: 580px; height: 580px; animation: spin-ccw 60s linear infinite; }

/* SVG lines */
.orbit-line {
  stroke: rgba(79,70,229,0.4);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  animation: dash-flow 2s linear infinite;
}

/* Hub */
.orbit-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: hub-pulse 3s ease-in-out infinite;
}
.hub-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.15;
}
.hub-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Industry nodes */
.orbit-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.orbit-node:hover { transform: translate(-50%, -50%) scale(1.08); }

.orbit-bubble {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: all 0.25s ease;
}
.orbit-node:hover .orbit-bubble {
  border-color: rgba(255,255,255,0.35);
  transform: scale(1.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.orbit-bubble span { font-size: 26px; }

.orbit-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Tooltip */
.orbit-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,12,20,0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 190px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 50;
}
.orbit-node:hover .orbit-tip { opacity: 1; }
.tip-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.tip-list { display: flex; flex-direction: column; gap: 4px; }
.tip-list li {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tip-list li::before { content: '·'; color: #a5b4fc; font-weight: 900; font-size: 14px; }

/* Tooltip positioning variants — for nodes on right/left edges */
.tip-left  { left: auto; right: calc(100% + 12px); bottom: auto; top: 0; transform: none; }
.tip-below { bottom: auto; top: calc(100% + 12px); transform: translateX(-50%); }

/* Legend */
.orbit-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 48px;
  position: relative;
  z-index: 2;
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.5); }
.legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ──────────────────────────────────────────
   WEB DIAGRAM (ERP Functions)
   Canvas: 700 × 700 px, centre: 350, 350
   Radius: 230 px — nodes at 45° intervals
   Node positions (left, top):
     Sales POS:  350, 120   (−90°)
     Inventory:  513, 187   (−45°)
     Accounting: 579, 370   (  5°)
     ONDC:       482, 538   ( 55°)
     CRM:        350, 580   ( 90°)
     Analytics:  218, 538   (125°)
     Franchise:  121, 370   (175°)
     API Stack:  187, 187   (225°)
────────────────────────────────────────── */
.web-sec { background: var(--surface); }
.web-sec::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse at 50% 40%, rgba(79,70,229,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.web-canvas {
  width: min(700px, 92vw);
  height: min(700px, 92vw);
  position: relative;
}

/* SVG lines */
.web-line     { stroke: rgba(79,70,229,0.15); stroke-width: 1.5; }
.web-line.lit {
  stroke: rgba(79,70,229,0.4);
  stroke-width: 2;
  stroke-dasharray: 5 3;
  animation: dash-flow 1.5s linear infinite;
}

/* Hub */
.web-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7C3AED);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 14px rgba(79,70,229,0.10),
    0 0 0 28px rgba(79,70,229,0.05),
    var(--sh-lg);
  z-index: 20;
  animation: hub-pulse 3s ease-in-out infinite;
}
.web-hub-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Function nodes */
.web-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.web-node:hover { transform: translate(-50%, -50%) scale(1.07); }

.node-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  text-align: center;
  box-shadow: var(--sh-sm);
  transition: all 0.25s ease;
}
.web-node:hover .node-card {
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(79,70,229,0.18);
  background: #FAFAFF;
}
.node-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.node-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

/* Node tooltip */
.node-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  box-shadow: var(--sh-lg);
  z-index: 100;
}
.web-node:hover .node-tip { opacity: 1; }
.node-tip .tip-title { font-size: 12px; }
.node-tip .tip-desc  { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.55; margin-top: 4px; }

/* Tip variants */
.node-tip.above { top: auto; bottom: calc(100% + 10px); }
.node-tip.left  { left: auto; right: calc(100% + 10px); top: 0; transform: none; }
.node-tip.right  { left: calc(100% + 10px); right: auto; top: 0; transform: none; }
.node-tip.below  { top: calc(100% + 10px); bottom: auto; left: 50%; transform: translateX(-50%); }

/* Module chips row (below web diagram) */
.module-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 52px;
}
.chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.chip.accent {
  background: var(--accent-bg);
  border-color: var(--accent-bdr);
  color: var(--accent);
}


/* =========================================
   MOBILE FIX – WEB DIAGRAM
========================================= */

@media (max-width:700px){

.web-canvas{
  width:100%;
  height:420px;
}

/* shrink hub */
.web-hub{
  width:80px;
  height:80px;
}

.web-hub-name{
  font-size:10px;
}

/* shrink cards */
.node-card{
  padding:8px 10px;
  min-width:70px;
}

.node-icon{
  width:28px;
  height:28px;
  font-size:14px;
}

.node-name{
  font-size:10px;
}

/* reposition nodes (percentage based) */

.web-node:nth-of-type(2){ /* Sales */
  top:8% !important;
  left:50% !important;
}

.web-node:nth-of-type(3){ /* Inventory */
  top:28% !important;
  left:85% !important;
}

.web-node:nth-of-type(4){ /* Accounting */
  top:55% !important;
  left:92% !important;
}

.web-node:nth-of-type(5){ /* Omni */
  top:85% !important;
  left:75% !important;
}

.web-node:nth-of-type(6){ /* CRM */
  top:95% !important;
  left:50% !important;
}

.web-node:nth-of-type(7){ /* Analytics */
  top:85% !important;
  left:25% !important;
}

.web-node:nth-of-type(8){ /* Franchise */
  top:55% !important;
  left:8% !important;
}

.web-node:nth-of-type(9){ /* API */
  top:28% !important;
  left:15% !important;
}

}

/* =========================================
   MOBILE FIX – TOOLTIP
========================================= */

@media (max-width:700px){

.node-tip{
  min-width:140px;
  max-width:180px;
  font-size:10px;
  padding:10px 12px;
}

/* prevent tooltips from going outside screen */

.node-tip.right{
  left:auto;
  right:0;
}

.node-tip.left{
  right:auto;
  left:0;
}

/* better spacing */

.node-tip .tip-desc{
  font-size:10px;
  line-height:1.4;
}

}








/* ===============================
   EXPLODE HUB SECTION
=================================*/

.explode-sec {
  background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
  color: white;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.explode-sec .h2 {
  color: #ffffff;
}

.explode-canvas {
  position: relative;
   width: min(600px, 92vw);
  height: min(600px, 92vw);
  margin: 80px auto 0;
  transform-origin: center center;
  transition: transform 0.3s ease;
}

.explode-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg,#4F46E5,#6366F1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  
}

@keyframes hubAppear {
  to { transform: translate(-50%, -50%) scale(1); }
}

/* Nodes initial state */
.explode-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 22px;
  border-radius: 40px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e293b;
  border: 1px solid #334155;
  color: white;
  opacity: 1;          /* MUST be visible */
  transition: transform 0.2s linear;
}

.explode-node span {
  font-size: 14px;
}

/* Industry colors */
.retail { border: 1px solid #4F46E5; }
.ngo    { border: 1px solid #059669; }
.dist   { border: 1px solid #D97706; }
.hosp   { border: 1px solid #7C3AED; }
.edu    { border: 1px solid #B45309; }

/* Final exploded positions (fixed inside canvas) */
.explode-node.active.retail { top: 12%; left: 50%; }
.explode-node.active.ngo    { top: 35%; left: 80%; }
.explode-node.active.dist   { top: 70%; left: 80%; }
.explode-node.active.hosp   { top: 70%; left: 20%; }
.explode-node.active.edu    { top: 35%; left: 20%; }


.explode-node.active {
  opacity: 1;
}

/* Collapse animation */
.explode-node.collapse {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.3) !important;
  transition: top 0.6s ease, left 0.6s, transform 0.3s ease ;
  opacity: 0;
}










/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */
@media (max-width: 700px) {
  .orbit-canvas { width: 340px; height: 340px; }
  .ring-1 { width: 110px; height: 110px; }
  .ring-2 { width: 230px; height: 230px; }
  .ring-3 { width: 320px; height: 320px; }
  .orbit-hub  { width: 78px; height: 78px; }
  .hub-name   { font-size: 11px; }
  .orbit-bubble { width: 50px; height: 50px; }
  .orbit-bubble span { font-size: 20px; }
  .orbit-label { font-size: 10px; }

  .web-canvas { width: 340px; height: 340px; }
  .web-hub    { width: 76px; height: 76px; }
  .web-hub-name { font-size: 10px; }
  .node-card  { min-width: 68px; padding: 9px 10px; }
  .node-icon  { width: 30px; height: 30px; font-size: 15px; }
  .node-name  { font-size: 10px; }
}



/* =========================================
   EXTRA MOBILE FIXES
========================================= */

@media (max-width:768px){

  .diagram-sec{
    padding:70px 0;
  }

  .diagram-header{
    margin-bottom:40px;
  }

  .orbit-legend{
    gap:12px;
    font-size:12px;
  }

  .legend-item{
    font-size:11px;
  }

  /* explode nodes spacing */

  .explode-node{
    font-size:12px;
    padding:10px 14px;
  }

  .explode-hub{
    width:100px;
    height:100px;
    font-size:14px;
  }

}

@media (max-width:480px){

  .orbit-bubble{
    width:42px;
    height:42px;
  }

  .orbit-bubble span{
    font-size:16px;
  }

  .orbit-label{
    font-size:9px;
  }

  .node-card{
    padding:8px;
    min-width:58px;
  }

  .node-name{
    font-size:9px;
  }

}



/* =========================================
   MOBILE ORBIT NODE FIX
========================================= */

@media (max-width:700px){

  /* Center reference */
  .orbit-node{
    transform: translate(-50%, -50%);
  }

  /* Top */
  .orbit-node.retail{
    left:50%;
    top:8%;
  }

  /* Top Right */
  .orbit-node.ngo{
    left:85%;
    top:30%;
  }

  /* Bottom Right */
  .orbit-node.distribution{
    left:85%;
    top:70%;
  }

  /* Bottom Left */
  .orbit-node.education{
    left:15%;
    top:70%;
  }

  /* Top Left */
  .orbit-node.hospitality{
    left:15%;
    top:30%;
  }

}

@media (max-width:700px){
  .diagram-header{
    margin-top:30px;
  }
}


/* =====================================
   MOBILE ORBIT – INDUSTRIES
===================================== */
/* =====================================
   MOBILE ORBIT – INDUSTRIES (FIXED)
===================================== */
@media (max-width:700px) {

    :root {
        --orbit-radius: 90px;
    }

    /* container */
    .explode-canvas {
        width: 100%;
        height: 420px; /* 🔥 increase height */
        position: relative;
    }

    /* hub */
    .explode-hub {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* fix logo alignment inside circle */
        .explode-hub img {
            display: block;
            max-width: 65%;
            height: auto;
            transform: translateY(-2px); /* 🔥 tiny visual correction */
        }


    :root {
        --r1: 110px;
        --r2: 130px;
        --r3: 150px;
        --r4: 170px;
        --r5: 170px;
    }

    /* 🔥 FINAL FIX — add angle offset */

    .explode-node {
        position: absolute;
        top: 50%;
        left: 35%;
        transform-origin: center;
        animation: orbit 18s linear infinite;
    }

    /* UPDATED animation */
    @keyframes orbit {
        from {
            transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
        }

        to {
            transform: rotate(calc(360deg + var(--angle))) translateX(var(--radius)) rotate(calc(-360deg - var(--angle)));
        }
    }

    /* 🔥 ADD ANGLES + KEEP RADII */

    .explode-node.retail {
        --radius: var(--r1);
        --angle: 0deg;
    }

    .explode-node.ngo {
        --radius: var(--r2);
        --angle: 72deg;
    }

    .explode-node.dist {
        --radius: var(--r3);
        --angle: 144deg;
    }

    .explode-node.brand {
        --radius: var(--r4);
        --angle: 216deg;
    }

    .explode-node.manu {
        --radius: var(--r5);
        --angle: 288deg;
    }
}