/* Anatomy of a site: pinned 3D section. Every selector is scoped to .anatomy. */
.anatomy{position:relative;height:400vh;padding:0;background:var(--ink,#0f1012);color:#fff}
.anatomy .anatomy-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.anatomy .anatomy-bench{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 52% at var(--gx,66%) 54%,rgba(255,210,63,.13),rgba(255,210,63,0) 70%),
    radial-gradient(90% 70% at 50% 110%,rgba(255,255,255,.05),rgba(255,255,255,0) 60%)}
.anatomy .anatomy-bench::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle,rgba(255,255,255,.11) 1px,transparent 1.4px) 0 0/28px 28px;
  -webkit-mask:radial-gradient(52% 58% at var(--gx,66%) 56%,#000,transparent 75%);mask:radial-gradient(52% 58% at var(--gx,66%) 56%,#000,transparent 75%)}
.anatomy .anatomy-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* copy: a left column on wide screens */
.anatomy .anatomy-copy{position:absolute;z-index:3;left:max(32px,calc((100vw - 1200px) / 2 + 32px));top:50%;transform:translateY(-50%);width:min(380px,30vw)}
.anatomy .eyebrow{color:rgba(255,255,255,.58)}
.anatomy .anatomy-copy h2{font-size:clamp(40px,4.3vw,64px);line-height:.98;margin-top:18px;color:#fff}
.anatomy .anatomy-copy h2 em{color:var(--spot,#ffd23f)}
.anatomy .anatomy-sub{margin-top:18px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.anatomy .anatomy-steps{list-style:none;margin-top:38px;display:grid;gap:4px;counter-reset:none}
.anatomy .anatomy-steps li{position:relative;display:flex;align-items:center;gap:14px;padding:10px 0 10px 18px;font:600 15px/1.2 "Inter Tight",Inter,sans-serif;letter-spacing:-.01em;color:rgba(255,255,255,.38);transition:color .5s}
.anatomy .anatomy-steps li::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.anatomy .anatomy-steps li::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--spot,#ffd23f);box-shadow:0 0 12px rgba(255,210,63,.8);transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.anatomy .anatomy-steps span{font:800 12px/1 "Inter Tight",Inter,sans-serif;letter-spacing:.06em;color:inherit}
.anatomy[data-step="0"] .anatomy-steps li:nth-child(1),.anatomy[data-step="1"] .anatomy-steps li:nth-child(2),
.anatomy[data-step="2"] .anatomy-steps li:nth-child(3),.anatomy[data-step="3"] .anatomy-steps li:nth-child(4){color:#fff}
.anatomy[data-step="0"] .anatomy-steps li:nth-child(1)::after,.anatomy[data-step="1"] .anatomy-steps li:nth-child(2)::after,
.anatomy[data-step="2"] .anatomy-steps li:nth-child(3)::after,.anatomy[data-step="3"] .anatomy-steps li:nth-child(4)::after{transform:scaleY(1)}
.anatomy[data-step="0"] .anatomy-steps span,.anatomy[data-step="1"] .anatomy-steps li:nth-child(2) span,
.anatomy[data-step="2"] .anatomy-steps li:nth-child(3) span,.anatomy[data-step="3"] .anatomy-steps li:nth-child(4) span{color:var(--spot,#ffd23f)}
.anatomy[data-step="0"] .anatomy-steps li:not(:first-child) span{color:inherit}

/* callouts: positioned every frame by anatomy.js (translate to the projected anchor) */
.anatomy .anatomy-tags{list-style:none;position:absolute;inset:0;z-index:2;pointer-events:none}
.anatomy .anatomy-tag{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.anatomy .anatomy-tag i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 2px 10px rgba(0,0,0,.4);transition:background .4s,box-shadow .4s}
.anatomy .anatomy-tag::after{content:"";position:absolute;left:0;top:0;width:var(--len,40px);height:1.5px;margin-top:-.75px;background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.3));transform-origin:0 50%;transform:rotate(var(--ang,0rad))}
.anatomy .anatomy-tag div{position:absolute;left:var(--dx,40px);top:var(--dy,0px);transform:translateY(-50%);width:max-content;max-width:230px;padding:10px 14px 11px;border-radius:14px;
  background:rgba(17,18,22,.78);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);transition:border-color .4s}
.anatomy .anatomy-tag b{display:block;font:700 15px/1.2 "Inter Tight",Inter,sans-serif;letter-spacing:-.015em;color:#fff;transition:color .4s}
.anatomy .anatomy-tag span{display:block;margin-top:3px;font:500 12.5px/1.4 Inter,sans-serif;color:rgba(255,255,255,.62)}
.anatomy .anatomy-tag.is-on::after{background:linear-gradient(90deg,#ffd23f,rgba(255,210,63,.45))}
.anatomy .anatomy-tag.is-on i{background:var(--spot,#ffd23f);box-shadow:0 0 0 5px rgba(255,210,63,.25),0 0 18px rgba(255,210,63,.9)}
.anatomy .anatomy-tag.is-on div{border-color:rgba(255,210,63,.55)}
.anatomy .anatomy-tag.is-on b{color:var(--spot,#ffd23f)}

.anatomy .anatomy-cap{position:absolute;z-index:3;right:32px;bottom:26px;font:600 11.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34)}

/* stacked layout: copy on top, steps become a progress bar at the bottom */
@media (max-width:979px){
  .anatomy .anatomy-bench{--gx:50%}
  .anatomy .anatomy-copy{left:16px;right:16px;top:84px;transform:none;width:auto;max-width:520px}
  .anatomy .anatomy-copy h2{font-size:clamp(34px,8.6vw,52px);margin-top:12px}
  .anatomy .anatomy-sub{display:none}
  .anatomy .anatomy-steps{display:none}
  .anatomy .anatomy-cap{left:16px;right:auto;bottom:20px}
  .anatomy .anatomy-tag div{max-width:180px;padding:8px 11px 9px;border-radius:12px}
  .anatomy .anatomy-tag b{font-size:13.5px}
}
@media (max-width:699px){
  .anatomy .anatomy-cap{display:none}
  .anatomy .anatomy-tag span{display:none}
}
/* step bar for narrow screens (outside the copy block so it can sit at the bottom) */
.anatomy .anatomy-bar{display:none}
@media (max-width:979px){
  .anatomy .anatomy-bar{display:flex;position:absolute;z-index:3;left:16px;right:16px;bottom:46px;gap:6px;align-items:center}
  .anatomy .anatomy-bar i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
  .anatomy .anatomy-bar i::after{content:"";display:block;height:100%;background:var(--spot,#ffd23f);transform:scaleX(var(--f,0));transform-origin:left}
  .anatomy .anatomy-bar b{flex:none;min-width:150px;text-align:right;font:700 13px/1 "Inter Tight",Inter,sans-serif;color:#fff}
}

/* no WebGL: show the callouts as a plain list */
.anatomy.no3d{height:auto}
.anatomy.no3d .anatomy-stage{position:relative;height:auto;padding:130px 0 90px}
.anatomy.no3d .anatomy-canvas,.anatomy.no3d .anatomy-steps,.anatomy.no3d .anatomy-bar,.anatomy.no3d .anatomy-cap{display:none}
.anatomy.no3d .anatomy-copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:1200px;margin:0 auto;padding:0 32px}
.anatomy.no3d .anatomy-tags{position:relative;inset:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;max-width:1200px;margin:40px auto 0;padding:0 32px}
.anatomy.no3d .anatomy-tag{position:relative;opacity:1}
.anatomy.no3d .anatomy-tag i,.anatomy.no3d .anatomy-tag::after{display:none}
.anatomy.no3d .anatomy-tag div{position:relative;left:auto;top:auto;transform:none;max-width:none;width:auto}

/* reduced motion: no pin, the assembled page sits still */
@media (prefers-reduced-motion:reduce){
  .anatomy{height:auto}
  .anatomy .anatomy-stage{position:relative;height:100svh;min-height:640px}
  .anatomy .anatomy-tags,.anatomy .anatomy-steps,.anatomy .anatomy-bar{display:none}
}