/* Technology Advisory "What You Receive": white section, one animated CSS-3D object per deliverable
   in the homepage service-card style (shared .s3d stage + cube/ring parts come from home-svc3d.css). */
#deliverables { background: #fff; }
#deliverables .tile { position: relative; isolation: isolate; }
#deliverables .dv-art { position: relative; width: 110px; height: 110px; margin: -8px 0 14px -10px; }
#deliverables .dv-art::before {
  content: ""; position: absolute; inset: -26px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(245 200 66 / 14%) 0%, rgb(28 95 208 / 8%) 42%, transparent 70%);
}
#deliverables .dv-art .s3d { top: 0; left: 0; right: auto; transform: scale(.84); transform-origin: top left; }
#deliverables .tile:hover .dv-art .s3d { transform: scale(.9); }
#deliverables .s3d__scene span { position: absolute; }

/* 01 Clear Recommendation: spinning gold coin stamped with a tick */
.s3d--dvcheck .s3d__scene { animation: dvCoin 7s linear infinite; }
.dv-coin { left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px; }
.dv-coin > i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(145deg, #c99a1a, #8f6c0e); }
.dv-coin > i:nth-child(1), .dv-coin > i:nth-child(5) { background: radial-gradient(circle at 35% 30%, #fff3c4 0%, #f5c842 42%, #c99a1a 100%); border: 2px solid #ffe08a; }
.dv-coin > i:nth-child(1) { transform: translateZ(5px); }
.dv-coin > i:nth-child(2) { transform: translateZ(2.5px); }
.dv-coin > i:nth-child(4) { transform: translateZ(-2.5px); }
.dv-coin > i:nth-child(5) { transform: rotateY(180deg) translateZ(5px); }
.dv-coin > i:nth-child(1)::after, .dv-coin > i:nth-child(5)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 12px; margin: -10px 0 0 -12px;
  border-left: 5px solid #1f2a3d; border-bottom: 5px solid #1f2a3d; transform: rotate(-45deg);
}
.s3d--dvcheck .s3d__ring { --d: 112px; transform: rotateX(76deg); border-color: rgb(120 165 255 / 55%); }
@keyframes dvCoin { from { transform: rotateX(-10deg) rotateY(0); } to { transform: rotateX(-10deg) rotateY(360deg); } }

/* 02 Sequenced Plan: three rising blocks that lift in order */
.s3d--dvsteps .s3d__scene, .s3d--dvboard .s3d__scene { animation: dvSway 8s ease-in-out infinite; }
.dv-step { left: 50%; top: 50%; width: 0; height: 0; }
.dv-step:nth-child(1) { transform: translate3d(-34px, 22px, 0); }
.dv-step:nth-child(3) { transform: translate3d(34px, -22px, 0); }
.dv-step .s3d__cube { --s: 28px; animation: dvLift 3.6s ease-in-out infinite; }
.dv-step:nth-child(2) .s3d__cube { animation-delay: .35s; }
.dv-step:nth-child(3) .s3d__cube { animation-delay: .7s; }
.dv-step:nth-child(3) .s3d__cube > i { border-color: rgb(255 240 190 / 60%); background: linear-gradient(145deg, #f5c842, #c99a1a); }
.dv-step:nth-child(3) .s3d__cube > i:nth-child(5) { background: #ffe8a0; }
@keyframes dvLift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dvSway { 0%, 100% { transform: rotateX(-22deg) rotateY(-38deg); } 50% { transform: rotateX(-22deg) rotateY(-14deg); } }

/* 03 Run-Cost Model: two coin stacks turning slowly, top coin floating */
.s3d--dvcoins .s3d__scene { transform: translateY(8px) rotateX(62deg) rotateZ(-30deg); }
.dv-stack { left: 50%; top: 50%; width: 0; height: 0; animation: dvTurn 20s linear infinite; }
.dv-c { left: 0; top: 0; width: 42px; height: 42px; margin: -21px; transform: translate3d(var(--x), var(--y), var(--z)); }
.dv-c > i { position: absolute; inset: 0; border-radius: 50%; background: #8f6c0e; }
.dv-c > i:nth-child(2) { transform: translateZ(3px); background: #c99a1a; }
.dv-c > i:nth-child(3) { transform: translateZ(6px); background: radial-gradient(circle at 40% 35%, #fff3c4, #f5c842 55%, #c99a1a); border: 1.5px solid #ffe08a; }
.dv-c--navy > i { background: #1f2a3d; }
.dv-c--navy > i:nth-child(2) { background: #2f3c58; }
.dv-c--navy > i:nth-child(3) { background: linear-gradient(145deg, #4a5d85, #34425f); border-color: rgb(245 200 66 / 60%); }
.dv-c--float { animation: dvFloat 3.2s ease-in-out infinite; }
@keyframes dvTurn { to { transform: rotateZ(360deg); } }
@keyframes dvFloat { 0%, 100% { transform: translate3d(var(--x), var(--y), var(--z)); } 50% { transform: translate3d(var(--x), var(--y), calc(var(--z) + 12px)); } }

/* 04 Success Measures and Stop Criteria: dial with a needle moving between go and stop */
.s3d--dvgauge .s3d__scene { animation: dvSwayWide 9s ease-in-out infinite; }
.dv-plate { left: 14px; top: 34px; width: 104px; height: 66px; border-radius: 14px; border: 1px solid rgb(245 200 66 / 45%); background: linear-gradient(145deg, #34425f, #1f2a3d); box-shadow: 0 12px 22px rgb(20 30 60 / 22%); transform: translateZ(-8px); }
.dv-arc { left: 26px; top: 40px; width: 80px; height: 40px; overflow: hidden; transform: translateZ(3px); }
.dv-arc::before {
  content: ""; position: absolute; left: 0; top: 0; width: 80px; height: 80px; border-radius: 50%;
  background: conic-gradient(from -90deg, #4c86f0 0 30%, #f5c842 30% 45%, #e0663f 45% 50%, transparent 50%);
  -webkit-mask: radial-gradient(circle, transparent 28px, #000 29px); mask: radial-gradient(circle, transparent 28px, #000 29px);
}
.dv-needle { left: 64.5px; top: 48px; width: 3px; height: 32px; border-radius: 2px; background: #fff; transform-origin: 50% 100%; animation: dvNeedle 5s ease-in-out infinite; }
.dv-hub { left: 61px; top: 75px; width: 10px; height: 10px; border-radius: 50%; background: #f5c842; box-shadow: 0 0 8px rgb(245 200 66 / 60%); transform: translateZ(9px); }
@keyframes dvNeedle { 0%, 100% { transform: translateZ(8px) rotate(-62deg); } 45% { transform: translateZ(8px) rotate(38deg); } 60% { transform: translateZ(8px) rotate(26deg); } }
@keyframes dvSwayWide { 0%, 100% { transform: rotateX(-16deg) rotateY(-26deg); } 50% { transform: rotateX(-16deg) rotateY(14deg); } }

/* 05 Architecture Decision Records: one option chosen from three */
.s3d--dvfork .s3d__scene { animation: dvSwayWide 10s ease-in-out infinite; }
.dv-root { left: 66px; top: 34px; width: 0; height: 0; }
.dv-root .s3d__cube { --s: 22px; animation: dvGem 8s linear infinite; }
.dv-root .s3d__cube > i { border-color: rgb(255 240 190 / 70%); background: linear-gradient(145deg, #f5c842, #c99a1a); }
.dv-line { left: 65px; top: 40px; width: 2px; height: var(--l); border-radius: 1px; transform-origin: 50% 0; transform: rotate(var(--r)); background: linear-gradient(180deg, rgb(120 165 255 / 75%), rgb(120 165 255 / 20%)); }
.dv-line--on { background: linear-gradient(180deg, #f5c842, rgb(245 200 66 / 45%)); }
.dv-node { left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8aa6e0, #2f3c58 75%); }
.dv-node--on { width: 22px; height: 22px; margin: -11px; background: radial-gradient(circle at 35% 30%, #fff3c4, #f5c842 45%, #a07a12); animation: dvPulse 2.4s ease-in-out infinite; }
@keyframes dvGem { from { transform: rotateX(35deg) rotateZ(45deg) rotateY(0); } to { transform: rotateX(35deg) rotateZ(45deg) rotateY(360deg); } }
@keyframes dvPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(245 200 66 / 40%); } 50% { box-shadow: 0 0 14px 4px rgb(245 200 66 / 55%); } }

/* 06 Walkthrough Session: presentation screen with live bars and a pointer */
.dv-screen { left: 20px; top: 22px; width: 92px; height: 60px; box-sizing: border-box; display: flex; align-items: flex-end; gap: 7px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgb(245 200 66 / 60%); background: linear-gradient(145deg, #34425f, #1f2a3d); box-shadow: 0 12px 22px rgb(20 30 60 / 22%); }
.dv-screen b { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: rgb(120 165 255 / 65%); transform-origin: 50% 100%; animation: s3dGrow 4.5s ease-in-out infinite; }
.dv-screen b:nth-child(2) { animation-delay: .2s; }
.dv-screen b:nth-child(3) { animation-delay: .4s; }
.dv-screen b:nth-child(4) { background: #f5c842; animation-delay: .6s; }
.dv-pointer { left: 30px; top: 30px; width: 8px; height: 8px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 10px 2px rgb(245 200 66 / 65%); animation: dvPoint 4.5s ease-in-out infinite; }
.dv-stand { left: 64px; top: 82px; width: 4px; height: 22px; background: #2f3c58; transform: translateZ(-2px); }
.dv-base { left: 44px; top: 103px; width: 44px; height: 6px; border-radius: 3px; background: #2f3c58; }
@keyframes dvPoint { 0%, 100% { transform: translate3d(0, 0, 10px); } 50% { transform: translate3d(60px, 6px, 10px); } }

@media (max-width: 600px) { #deliverables .dv-art .s3d { transform: scale(.76); } }
@media (prefers-reduced-motion: reduce) { #deliverables .s3d__scene, #deliverables .s3d__scene * { animation: none !important; } }