.sd-cyc-wrap { position: relative; background: transparent; border-radius: 16px; width: 500px; height: 400px; margin: 0 auto; overflow: hidden; font-family: 'DM Sans', sans-serif; } .sd-cyc-dot { position: absolute; width: 24px; height: 24px; top: 0; left: 0; z-index: 2; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15)); } .sd-cyc-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 1; pointer-events: none; } .sd-cyc-center svg { width: 28px; height: 28px; stroke: rgba(17,49,74,0.3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: sd-cyc-spin 8s linear infinite; } @keyframes sd-cyc-spin { from { transform: rotate(0deg); } to   { transform: rotate(360deg); } } .sd-cyc-center-label { margin-top: 6px; font-size: 11px; font-weight: 600; color: rgba(17,49,74,0.4); text-transform: uppercase; letter-spacing: 0.08em; } .sd-cyc-paths { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .sd-cyc-node { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 5; transition: transform 0.3s ease; } .sd-cyc-node.sd-cyc-active { transform: scale(1.10); } .sd-cyc-icon { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; background: rgba(17,49,74,0.08); border: 1px solid rgba(17,49,74,0.12); box-shadow: none; } .sd-cyc-icon svg { width: 40px; height: 40px; fill: none; stroke: rgba(17,49,74,0.5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s ease; } .sd-cyc-active .sd-cyc-icon { background: linear-gradient(135deg, #DB635D, #F6C893); border-color: transparent; box-shadow: 0 0 8px 3px rgba(219,99,93,0.25); animation: sd-cyc-pulse 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; will-change: box-shadow; } .sd-cyc-active .sd-cyc-icon svg { stroke: #ffffff; } @keyframes sd-cyc-pulse { 0%, 100% { box-shadow: 0 0 8px 3px rgba(219,99,93,0.25); } 50%      { box-shadow: 0 0 10px 4px rgba(219,99,93,0.35); } } @media (prefers-reduced-motion: reduce) { .sd-cyc-center svg, .sd-cyc-active .sd-cyc-icon, .sd-cyc-node { animation: none !important; transition: none !important; } } .sd-cyc-name { margin-top: 10px; font-size: 14px; font-weight: 700; color: rgba(17,49,74,0.5); letter-spacing: 0.02em; transition: color 0.4s ease; white-space: nowrap; } .sd-cyc-active .sd-cyc-name { color: #11314a; } .sd-cyc-desc { margin-top: 3px; font-size: 11px; font-weight: 400; color: rgba(17,49,74,0.4); white-space: nowrap; transition: color 0.4s ease; } .sd-cyc-active .sd-cyc-desc { color: rgba(17,49,74,0.7); } .sd-cyc-n-plan    { top: 10px;  left: 50%; transform: translateX(-50%); } .sd-cyc-n-build   { top: 50%;  right: 10px; transform: translateY(-50%); } .sd-cyc-n-release { bottom: 10px; left: 50%; transform: translateX(-50%); } .sd-cyc-n-report  { top: 50%;  left: 10px; transform: translateY(-50%); } .sd-cyc-n-plan.sd-cyc-active    { transform: translateX(-50%) scale(1.10); } .sd-cyc-n-build.sd-cyc-active   { transform: translateY(-50%) scale(1.10); } .sd-cyc-n-release.sd-cyc-active { transform: translateX(-50%) scale(1.10); } .sd-cyc-n-report.sd-cyc-active  { transform: translateY(-50%) scale(1.10); } @media (max-width: 768px) { .sd-cyc-wrap { width: 100%; max-width: 440px; height: 360px; margin: 0 auto; } .sd-cyc-icon { width: 64px; height: 64px; border-radius: 13px; } .sd-cyc-icon svg { width: 32px; height: 32px; } .sd-cyc-name { font-size: 12px; margin-top: 8px; } .sd-cyc-desc { display: none; } .sd-cyc-mob-arrow { display: none; } } @media (max-width: 480px) { .sd-cyc-wrap { max-width: 100%; height: 320px; } .sd-cyc-icon { width: 54px; height: 54px; border-radius: 11px; } .sd-cyc-icon svg { width: 26px; height: 26px; } .sd-cyc-name { font-size: 11px; margin-top: 6px; } .sd-cyc-center-label { font-size: 9px; } @media (hover: none) { .sd-cyc-node.sd-cyc-active { transform: none; } .sd-cyc-n-plan.sd-cyc-active    { transform: translateX(-50%); } .sd-cyc-n-build.sd-cyc-active   { transform: translateY(-50%); } .sd-cyc-n-release.sd-cyc-active { transform: translateX(-50%); } .sd-cyc-n-report.sd-cyc-active  { transform: translateY(-50%); } } } @media (min-width: 769px) { .sd-cyc-mob-arrow { display: none; } }