/* Hero: the second tier under the four apps. The modules lie along the planet's curve, so they
   read as part of the same world but one level below the framed apps. */
.pb-tier{--arc:1.7px;position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;gap:clamp(12px,1.45vw,22px);width:max-content;opacity:var(--pb-dock-frame,1);font-family:Hanken,Arial,sans-serif}
.pb-tier-item{display:inline-flex;align-items:center;gap:7px;padding:5px 2px;border-radius:5px;color:#dbe5f7;font-size:13px;line-height:1.2;text-decoration:none;white-space:nowrap;transform:translateY(calc(var(--d)*var(--d)*var(--arc)));transition:color .18s ease}
.pb-tier-item svg{flex:none;width:16px;height:16px;color:#8bbcf5;transition:color .18s ease}
.pb-tier-item:hover,.pb-tier-item:hover svg{color:#fff}
.pb-tier-item:focus-visible{outline:2px solid #8bcfff;outline-offset:2px}
.pb-tier-track{display:contents}

@media (max-width:1320px){
 .pb-tier{--arc:1.4px;top:calc(100% + 15px);gap:clamp(10px,1.15vw,16px)}
 .pb-tier-item{font-size:12px;gap:6px}
 .pb-tier-item svg{width:15px;height:15px}
}
@media (max-width:1120px){
 .pb-tier{--arc:1.1px;gap:13px}
 .pb-tier-item{font-size:11.5px}
 .pb-tier-item svg{display:none}
}
@media (max-width:960px){
 .pb-dock{bottom:108px}
 .pb-tier{--arc:0px;top:calc(100% + 8px);left:-7vw;transform:none;width:100vw;gap:16px;padding:2px 7vw 4px;box-sizing:border-box;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
 .pb-tier::-webkit-scrollbar{display:none}
 .pb-tier-item{font-size:12.5px;padding-block:7px}
 .pb-tier-item svg{display:block;width:15px;height:15px}
 /* Drifting row, driven by hero-modulet.js. Spacing sits on the items so the two copies loop exactly. */
 .pb-tier.is-drifting{overflow:hidden;gap:0;padding-inline:0;touch-action:pan-y;-webkit-user-select:none;user-select:none}
 .pb-tier.is-drifting .pb-tier-track{display:flex;width:max-content;will-change:transform}
 .pb-tier.is-drifting .pb-tier-item{margin-right:18px;-webkit-user-drag:none}
}
@media (prefers-reduced-motion:reduce){.pb-tier-item,.pb-tier-item svg{transition:none}}
