/* ============================================================ VIJIN.AI · Sovereign — 3D Immersive Visual System ------------------------------------------------------------ Applies realistic 3D sphere shading + glow to ALL circular icon sections: flow nodes, evidence chain bubbles, activation arcs, and process badges. Technique: layered radial-gradient simulates a light source from top-left, creating a specular highlight, mid-tone body, and dark rim — the classic CSS 3D sphere illusion. Scope: .svx [data-seg="sovereign"] only. Reversible. ============================================================ */ /* ───────────────────────────────────────────────────────── SECTION A — EARLY WARNING FLOW NODES (.sv-flow-node) Was: flat transparent circle with colored border Now: 3D illuminated sphere on a glowing rail ───────────────────────────────────────────────────────── */ /* Elevate entire flow-col with floating anim */ .svx [data-seg="sovereign"] .sv-flow-col{ --fi:0; /* overridden per-child via JS if needed */ animation:svFloat3d 4.5s ease-in-out infinite; animation-delay:calc(var(--fi) * 0.55s); } /* stagger each column by its DOM position */ .svx [data-seg="sovereign"] .sv-flow-col:nth-child(1){animation-delay:0s} .svx [data-seg="sovereign"] .sv-flow-col:nth-child(2){animation-delay:.55s} .svx [data-seg="sovereign"] .sv-flow-col:nth-child(3){animation-delay:1.1s} .svx [data-seg="sovereign"] .sv-flow-col:nth-child(4){animation-delay:1.65s} .svx [data-seg="sovereign"] .sv-flow-col:nth-child(5){animation-delay:2.2s} .svx [data-seg="sovereign"] .sv-flow-col:nth-child(6){animation-delay:2.75s} @keyframes svFloat3d{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} } /* 3D sphere render */ .svx [data-seg="sovereign"] .sv-flow-node{ width:96px;height:96px; border:none !important; background: /* specular highlight — top-left white dot */ radial-gradient(ellipse 38% 32% at 28% 24%, rgba(255,255,255,.55), transparent 68%), /* main body — bright core fading to dark rim */ radial-gradient(circle at 42% 38%, color-mix(in oklab,var(--c) 62%, rgba(255,255,255,.3)), color-mix(in oklab,var(--c) 38%, var(--bg-4)) 44%, color-mix(in oklab,var(--bg-0) 85%, transparent) 76%) !important; box-shadow: /* outer glow ring */ 0 0 0 7px color-mix(in oklab,var(--c) 11%,transparent), /* main glow */ 0 0 38px -8px color-mix(in oklab,var(--c) 75%,transparent), /* far haze */ 0 0 72px -24px color-mix(in oklab,var(--c) 40%,transparent), /* 3D drop shadow */ 0 22px 32px -14px rgba(0,0,0,.88), /* rim light (bottom) */ inset 0 -3px 5px rgba(0,0,0,.45), /* inner highlight */ inset 0 3px 7px rgba(255,255,255,.18) !important; transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease !important; } .svx [data-seg="sovereign"] .sv-flow-col:hover{ animation-play-state:paused; transform:translateY(-6px) scale(1.06) !important; } .svx [data-seg="sovereign"] .sv-flow-col:hover .sv-flow-node{ box-shadow: 0 0 0 10px color-mix(in oklab,var(--c) 15%,transparent), 0 0 56px -6px color-mix(in oklab,var(--c) 92%,transparent), 0 0 90px -18px color-mix(in oklab,var(--c) 55%,transparent), 0 28px 40px -12px rgba(0,0,0,.9), inset 0 -3px 5px rgba(0,0,0,.45), inset 0 3px 7px rgba(255,255,255,.22) !important; } .svx [data-seg="sovereign"] .sv-flow-node svg{ width:36px !important;height:36px !important; filter: drop-shadow(0 0 6px rgba(255,255,255,.3)) drop-shadow(0 0 14px color-mix(in oklab,var(--c) 80%,transparent)) !important; } /* connecting rail: thicker + animated glow pulse */ .svx [data-seg="sovereign"] .sv-flow-col:not(:last-child)::after{ height:4px !important; top:110px !important; border-radius:4px !important; box-shadow:0 0 18px 3px color-mix(in oklab,var(--c) 55%,transparent) !important; animation:svRailPulse 2.8s ease-in-out infinite; } .svx [data-seg="sovereign"] .sv-flow-col:nth-child(2)::after{animation-delay:.46s} .svx [data-seg="sovereign"] .sv-flow-col:nth-child(3)::after{animation-delay:.92s} .svx [data-seg="sovereign"] .sv-flow-col:nth-child(4)::after{animation-delay:1.38s} .svx [data-seg="sovereign"] .sv-flow-col:nth-child(5)::after{animation-delay:1.84s} @keyframes svRailPulse{ 0%,100%{opacity:.75;box-shadow:0 0 18px 3px color-mix(in oklab,var(--c) 55%,transparent)} 50%{opacity:1;box-shadow:0 0 28px 5px color-mix(in oklab,var(--c) 85%,transparent)} } /* ───────────────────────────────────────────────────────── SECTION B — EVIDENCE CHAIN BUBBLES (.sv-arcbub-disc) Was: flat bento grid (v2 override) → revert arc, apply 3D ───────────────────────────────────────────────────────── */ /* Revert bento override — restore arc positioning */ .svx [data-seg="sovereign"] .sv-arcwrap{ display:block !important; position:relative !important; aspect-ratio:1200/600 !important; max-height:760px !important; min-height:440px !important; height:auto !important; grid-template-columns:unset !important; gap:unset !important; } /* arcband stays hidden — removed override */ .svx [data-seg="sovereign"] .sv-arcbub{ position:absolute !important; transform:translate(-50%,-50%) !important; animation:svBubFloat 4s ease-in-out infinite; } .svx [data-seg="sovereign"] .sv-arcbub:nth-child(1){animation-delay:0s} .svx [data-seg="sovereign"] .sv-arcbub:nth-child(2){animation-delay:.6s} .svx [data-seg="sovereign"] .sv-arcbub:nth-child(3){animation-delay:1.2s} .svx [data-seg="sovereign"] .sv-arcbub:nth-child(4){animation-delay:1.8s} .svx [data-seg="sovereign"] .sv-arcbub:nth-child(5){animation-delay:2.4s} .svx [data-seg="sovereign"] .sv-arcbub:nth-child(6){animation-delay:3.0s} .svx [data-seg="sovereign"] .sv-arcbub:nth-child(7){animation-delay:3.6s} .svx [data-seg="sovereign"] .sv-arcbub:nth-child(8){animation-delay:4.2s} @keyframes svBubFloat{ 0%,100%{transform:translate(-50%,-50%) translateY(0px)} 50%{transform:translate(-50%,-50%) translateY(-10px)} } /* 3D sphere on the arc */ .svx [data-seg="sovereign"] .sv-arcbub-disc{ width:148px !important;height:148px !important; border:3.5px solid color-mix(in oklab,var(--c) 72%,transparent) !important; background: radial-gradient(ellipse 40% 34% at 28% 22%, rgba(255,255,255,.48), transparent 66%), radial-gradient(circle at 40% 36%, color-mix(in oklab,var(--c) 58%, rgba(255,255,255,.25)), color-mix(in oklab,var(--c) 32%, var(--bg-4)) 46%, color-mix(in oklab,var(--bg-0) 82%, transparent) 74%) !important; box-shadow: 0 0 0 9px color-mix(in oklab,var(--c) 10%,transparent), 0 0 45px -8px color-mix(in oklab,var(--c) 78%,transparent), 0 0 80px -22px color-mix(in oklab,var(--c) 44%,transparent), 0 26px 40px -16px rgba(0,0,0,.9), inset 0 -4px 6px rgba(0,0,0,.45), inset 0 4px 8px rgba(255,255,255,.18) !important; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease !important; backdrop-filter:none !important; } .svx [data-seg="sovereign"] .sv-arcbub:hover{ animation-play-state:paused; } .svx [data-seg="sovereign"] .sv-arcbub:hover .sv-arcbub-disc{ transform:scale(1.09) !important; box-shadow: 0 0 0 13px color-mix(in oklab,var(--c) 14%,transparent), 0 0 62px -6px color-mix(in oklab,var(--c) 94%,transparent), 0 0 100px -18px color-mix(in oklab,var(--c) 58%,transparent), 0 32px 50px -14px rgba(0,0,0,.95), inset 0 -4px 6px rgba(0,0,0,.45), inset 0 4px 8px rgba(255,255,255,.24) !important; } .svx [data-seg="sovereign"] .sv-arcbub-disc::after{ box-shadow:0 0 28px -1px var(--c), 0 0 10px -1px var(--c) !important; } .svx [data-seg="sovereign"] .sv-arcbub-ic{ width:58px !important;height:58px !important; } .svx [data-seg="sovereign"] .sv-arcbub-ic svg{ width:34px !important;height:34px !important; filter: drop-shadow(0 0 5px rgba(255,255,255,.28)) drop-shadow(0 0 16px color-mix(in oklab,var(--c) 82%,transparent)) !important; } .svx [data-seg="sovereign"] .sv-arcbub b{ font-size:15px; text-shadow:0 0 20px color-mix(in oklab,var(--c) 55%,transparent), 0 1px 4px rgba(0,0,0,.75) !important; } /* ───────────────────────────────────────────────────────── SECTION C — ACTIVATION ARCS (.sv-arc-disc) 6 discs in a 3×2 grid → 3D sphere upgrade ───────────────────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-arc-disc{ background: radial-gradient(ellipse 38% 32% at 29% 23%, rgba(255,255,255,.46), transparent 66%), radial-gradient(circle at 42% 37%, color-mix(in oklab,var(--c) 55%, rgba(255,255,255,.2)), color-mix(in oklab,var(--c) 30%, var(--bg-4)) 44%, color-mix(in oklab,var(--bg-0) 80%, transparent) 74%) !important; box-shadow: 0 0 0 8px color-mix(in oklab,var(--c) 10%,transparent), 0 0 36px -8px color-mix(in oklab,var(--c) 70%,transparent), 0 0 68px -22px color-mix(in oklab,var(--c) 38%,transparent), 0 20px 30px -14px rgba(0,0,0,.85), inset 0 -3px 5px rgba(0,0,0,.42), inset 0 3px 6px rgba(255,255,255,.16) !important; border:2px solid color-mix(in oklab,var(--c) 68%,transparent) !important; transition:transform .3s ease, box-shadow .3s ease !important; animation:svArcFloat 4.2s ease-in-out infinite; } .svx [data-seg="sovereign"] .sv-arc:nth-child(1) .sv-arc-disc{animation-delay:0s} .svx [data-seg="sovereign"] .sv-arc:nth-child(2) .sv-arc-disc{animation-delay:.7s} .svx [data-seg="sovereign"] .sv-arc:nth-child(3) .sv-arc-disc{animation-delay:1.4s} .svx [data-seg="sovereign"] .sv-arc:nth-child(4) .sv-arc-disc{animation-delay:2.1s} .svx [data-seg="sovereign"] .sv-arc:nth-child(5) .sv-arc-disc{animation-delay:2.8s} .svx [data-seg="sovereign"] .sv-arc:nth-child(6) .sv-arc-disc{animation-delay:3.5s} @keyframes svArcFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} } .svx [data-seg="sovereign"] .sv-arc:hover .sv-arc-disc{ transform:translateY(-6px) scale(1.07) !important; box-shadow: 0 0 0 12px color-mix(in oklab,var(--c) 14%,transparent), 0 0 54px -6px color-mix(in oklab,var(--c) 90%,transparent), 0 0 88px -18px color-mix(in oklab,var(--c) 52%,transparent), 0 26px 38px -12px rgba(0,0,0,.9), inset 0 -3px 5px rgba(0,0,0,.42), inset 0 3px 6px rgba(255,255,255,.22) !important; } .svx [data-seg="sovereign"] .sv-arc-ring{ filter:drop-shadow(0 0 10px color-mix(in oklab,var(--c) 65%,transparent)) drop-shadow(0 0 4px color-mix(in oklab,var(--c) 45%,transparent)) !important; } .svx [data-seg="sovereign"] .sv-arc-ic svg{ width:56px !important;height:56px !important; filter: drop-shadow(0 0 5px rgba(255,255,255,.25)) drop-shadow(0 0 14px color-mix(in oklab,var(--c) 78%,transparent)) !important; } /* SECTION D — proc-badge: neon float handled by sovereign-proc.css */ /* ───────────────────────────────────────────────────────── GLOBAL — Problem cards: add 3D tilt on hover ───────────────────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-wedge{ transform-style:preserve-3d; perspective:600px; } .svx [data-seg="sovereign"] .sv-wedge:hover{ transform:translateY(-5px) rotateX(2deg) rotateY(-1.5deg) !important; } /* ───────────────────────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-flow-col, .svx [data-seg="sovereign"] .sv-arcbub, .svx [data-seg="sovereign"] .sv-arc-disc, .svx [data-seg="sovereign"] .sv-flow-col::after{ animation:none !important; } .svx [data-seg="sovereign"] .sv-wedge:hover, .svx [data-seg="sovereign"] .sv-flow-col:hover, .svx [data-seg="sovereign"] .sv-arcbub:hover .sv-arcbub-disc, .svx [data-seg="sovereign"] .sv-arc:hover .sv-arc-disc{ transform:none !important; } }