/* Portfolio-orbit: losse devices als echte 3D-objecten (dikte, zijkanten, achterkant, schaduw, zwevende telefoon). */
.wpo .orbit-showcase-section{padding:var(--sec-y,64px) var(--wp-gutter,24px)}
.wpo .orbit-header{margin-bottom:6px}
.wpo .orbit-title{font-size:var(--fs-h2);color:#fff;letter-spacing:-.02em}
.wpo .orbit-desc{color:#C9D6E8;margin-top:8px}
.wpo .orbit-stage-viewport{height:590px;perspective:1200px;perspective-origin:50% 38%;overflow:visible}
.wpo .orbit-cylinder{width:442px;height:289px;margin:0;transform-style:preserve-3d}
.wpo .orbit-card.o3d{width:442px;height:289px;border-radius:0;box-shadow:none;transform-style:preserve-3d;transition:none}
.wpo{--t:19px;--pt:8px;--r:6px}
.wpo .o3d-body{position:absolute;inset:0;transform-style:preserve-3d;animation:o3dFloat 7s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes o3dFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* voorkant en achterkant van het scherm */
.wpo .o3d-front{position:absolute;inset:0;overflow:visible;background:none;border:0;border-radius:var(--r);display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(calc(var(--t)/2))}
.wpo .o3d-front::after{display:none}
.wpo .o3d-screen{position:absolute;inset:0;padding:8px;border-radius:var(--r);background:var(--gold-metallic);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 -6px 14px rgba(74,48,0,.45);display:flex;flex-direction:column;overflow:hidden}
.wpo .o3d-screen::after{content:"";position:absolute;top:-50%;left:-120%;width:60%;height:200%;background:rgba(255,255,255,.3);transform:rotate(25deg);animation:goldCardSheen 7s infinite;pointer-events:none}
.wpo .o3d-bar{flex:none;display:flex;gap:6px;align-items:center;height:19px;padding:0 9px;background:#0a0f1e;border-radius:3px 3px 0 0}
.wpo .o3d-bar span{width:8px;height:8px;border-radius:50%;background:#a67c1e}.wpo .o3d-bar span+span{background:rgba(212,175,55,.45)}.wpo .o3d-bar span+span+span{background:rgba(212,175,55,.25)}
.wpo .o3d-desktop{flex:1;min-height:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;border-radius:0 0 3px 3px;background:#0a0f1e}
.wpo .o3d-back{position:absolute;inset:0;border-radius:var(--r);transform:rotateY(180deg) translateZ(calc(var(--t)/2));backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:none}
.wpo .o3d-back::before{border-radius:var(--r)}
/* zijkanten (dikte) */
.wpo .o3d-e{position:absolute;display:block;background:linear-gradient(90deg,#4a3000,#c9a03a 35%,#fef1a9 50%,#a67c1e 70%,#4a3000)}
.wpo .o3d-e--r,.wpo .o3d-e--l{top:0;height:100%;width:var(--t);margin-left:calc(var(--t)/-2)}
.wpo .o3d-e--r{left:100%;transform:rotateY(90deg);background:linear-gradient(90deg,#3a2500,#a67c1e 40%,#e5b94c 60%,#694402)}
.wpo .o3d-e--l{left:0;transform:rotateY(-90deg);background:linear-gradient(90deg,#694402,#e5b94c 40%,#a67c1e 60%,#3a2500)}
.wpo .o3d-e--t,.wpo .o3d-e--b{left:0;width:100%;height:var(--t);margin-top:calc(var(--t)/-2);background:linear-gradient(180deg,#fef1a9,#e5b94c 50%,#8f6212)}
.wpo .o3d-e--t{top:0;transform:rotateX(90deg)}
.wpo .o3d-e--b{top:100%;transform:rotateX(-90deg);background:linear-gradient(180deg,#8f6212,#4a3000)}
/* losse, zwevende telefoon als eigen 3D-object */
.wpo .o3d-phone{position:absolute;right:-26px;bottom:-32px;width:88px;height:186px;transform-style:preserve-3d;transform:translateZ(66px) rotateY(-16deg) rotateX(4deg)}
.wpo .o3d-pf{position:absolute;inset:0;padding:4px;border-radius:15px;background:var(--gold-metallic);transform:translateZ(calc(var(--pt)/2));backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.wpo .o3d-pf::before{content:"";position:absolute;top:9px;left:50%;width:26px;height:4px;margin-left:-13px;border-radius:3px;background:rgba(7,8,11,.85);z-index:2}
.wpo .o3d-pf img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:11px;background:#0a0f1e}
.wpo .o3d-pb{position:absolute;inset:0;border-radius:15px;background:var(--gold-metallic);transform:rotateY(180deg) translateZ(calc(var(--pt)/2));backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wpo .o3d-pe{position:absolute;display:block;background:linear-gradient(90deg,#4a3000,#e5b94c,#694402)}
.wpo .o3d-pe--r,.wpo .o3d-pe--l{top:0;height:100%;width:var(--pt);margin-left:calc(var(--pt)/-2)}
.wpo .o3d-pe--r{left:100%;transform:rotateY(90deg)}.wpo .o3d-pe--l{left:0;transform:rotateY(-90deg)}
.wpo .o3d-pe--t,.wpo .o3d-pe--b{left:0;width:100%;height:var(--pt);margin-top:calc(var(--pt)/-2);background:linear-gradient(180deg,#fef1a9,#a67c1e)}
.wpo .o3d-pe--t{top:0;transform:rotateX(90deg)}.wpo .o3d-pe--b{top:100%;transform:rotateX(-90deg)}
/* schaduw op de "vloer" onder elk device */
.wpo .o3d-shadow{position:absolute;left:6%;top:100%;width:88%;height:80px;margin-top:26px;background:radial-gradient(ellipse at center,rgba(0,0,0,.7) 0%,rgba(0,0,0,.28) 45%,transparent 72%);transform:rotateX(90deg);filter:blur(8px);pointer-events:none}
@media(max-width:768px){
  .wpo{--t:10px;--pt:4px;--r:4px}
  .wpo .orbit-title{font-size:var(--fs-h2)}
  .wpo .orbit-stage-viewport{height:320px;perspective:1000px;perspective-origin:50% 40%;overflow:hidden}
  .wpo .orbit-cylinder,.wpo .orbit-card.o3d{width:232px;height:152px}
  .wpo .o3d-screen{padding:4px}.wpo .o3d-bar{height:12px;padding:0 6px}.wpo .o3d-bar span{width:5px;height:5px}
  .wpo .o3d-phone{width:50px;height:105px;right:-8px;bottom:-14px;transform:translateZ(30px) rotateY(-14deg) rotateX(3deg)}
  .wpo .o3d-pf{padding:2px;border-radius:9px}.wpo .o3d-pb{border-radius:9px}.wpo .o3d-pf img{border-radius:7px}.wpo .o3d-pf::before{display:none}
  .wpo .o3d-shadow{filter:none;height:50px;margin-top:16px;opacity:.8}
  .wpo .o3d-screen::after{animation:none}
  .wpo .o3d-body{animation-duration:9s}
  @keyframes o3dFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .wpo .orbit-core-light{width:220px;height:220px;filter:blur(24px)}.wpo .orbit-ring-bottom,.wpo .orbit-ring-top{width:380px;height:170px}
}
@media(prefers-reduced-motion:reduce){.wpo .o3d-body,.wpo .o3d-screen::after{animation:none}}

.wpo .orbit-ring-bottom{width:850px;height:408px}.wpo .orbit-ring-top{width:700px;height:336px}