/* 06 SEO in 3D: CSS-transforms + seo3d.js (geen WebGL). Loopt bewust ook bij prefers-reduced-motion. */
.seo{overflow-x:clip}
.seo .dia{perspective:1100px;perspective-origin:50% 45%}
.seo .dia .nodes{transform-style:preserve-3d;position:relative;z-index:3}
@media(min-width:980px){.seo .dia .nodes{position:absolute;inset:0;pointer-events:none}.seo .dia .node{pointer-events:auto}}
.seo .dia .dash{transform-origin:50% 50%;will-change:transform;transition:border-color var(--t)}
.seo .dia .dia__bord,.seo .dia .links{transform-origin:50% 50%}
.seo .dia .dia__bord{will-change:transform}
/* lijn tekent zich, vlak vloeit erna in; elke 8 s opnieuw */
.seo .dia .chart.s3-draw .ln{
  animation:s3draw 8s cubic-bezier(.45,.05,.25,1) .2s infinite both!important;
  animation-duration:8s!important;animation-iteration-count:infinite!important}
.seo .dia .chart.s3-draw .area{
  animation:s3area 8s ease .2s infinite both!important;
  animation-duration:8s!important;animation-iteration-count:infinite!important}
.seo .dia .chart .ln2{animation:s3dash 3s linear infinite!important;animation-duration:3s!important;animation-iteration-count:infinite!important}
@keyframes s3draw{0%{stroke-dashoffset:1}30%{stroke-dashoffset:0}84%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes s3area{0%,24%{opacity:0}42%{opacity:1}84%{opacity:1}100%{opacity:0}}
@keyframes s3dash{to{stroke-dashoffset:-22}}
/* chips: zweven (translate-eigenschap), JS zet diepte + parallax via transform */
.seo .dia .node{
  animation:s3bob var(--bd,6s) ease-in-out var(--bdl,0s) infinite!important;
  animation-duration:var(--bd,6s)!important;animation-iteration-count:infinite!important}
.seo .dia .node:nth-child(1){--bd:5.2s;--bdl:-.4s}
.seo .dia .node:nth-child(2){--bd:6.6s;--bdl:-1.7s}
.seo .dia .node:nth-child(3){--bd:4.8s;--bdl:-2.9s}
.seo .dia .node:nth-child(4){--bd:7.2s;--bdl:-3.6s}
.seo .dia .node:nth-child(5){--bd:5.8s;--bdl:-4.8s}
@keyframes s3bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.seo .dia .rows i:nth-child(2){transform-origin:0 50%;animation:s3row 4.5s ease-in-out infinite!important;animation-duration:4.5s!important;animation-iteration-count:infinite!important}
.seo .dia .rows span:nth-child(2) i:nth-child(2){animation-delay:-1.5s!important}
.seo .dia .rows span:nth-child(3) i:nth-child(2){animation-delay:-3s!important}
@keyframes s3row{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)}}