.door-spin{--door-size:88px;--door-speed:3.4s;flex-direction:column;align-items:center;gap:18px;display:inline-flex}.door-spin__stage{width:200px;height:var(--door-size);perspective:760px;position:relative}.door-spin__ring{transform-style:preserve-3d;animation:3.2s linear infinite door-ring-spin;position:absolute;inset:0}.door-spin__slot{width:var(--door-size);height:var(--door-size);margin-top:calc(var(--door-size) / -2);margin-left:calc(var(--door-size) / -2);transform-style:preserve-3d;position:absolute;top:50%;left:50%}.door-spin__slot.slotA{transform:rotateY(0)translateZ(58px)}.door-spin__slot.slotB{transform:rotateY(180deg)translateZ(58px)}.door-spin__slot.slotA .door-loader__tile{animation:3.2s linear infinite door-counter-a}.door-spin__slot.slotB .door-loader__tile{animation:3.2s linear infinite door-counter-b}.door-loader__tile{width:var(--door-size);height:var(--door-size);border-radius:calc(var(--door-size) * .22);background:var(--door-bg);place-items:center;display:grid}.door-loader__tile.tile-lime{--door-bg:var(--acid);--door-fg:var(--on-acid)}.door-loader__tile.tile-orange{--door-bg:var(--heat);--door-fg:var(--on-acid)}.door-loader__tile svg{width:74%;height:74%;overflow:visible}.door-loader__panel,.door-loader__frame{stroke:var(--door-fg);fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:door-draw var(--door-speed) ease-in-out infinite}.door-loader__panel{fill:var(--door-fg);stroke-width:7px}.door-loader__frame{stroke-width:15px}.door-loader__handle{fill:var(--door-bg);animation:door-handle var(--door-speed) ease-in-out infinite}.door-loader__text{font-family:var(--sans);text-align:center;letter-spacing:-.01em;color:var(--text-dim);white-space:nowrap;font-size:14px;font-weight:700}.door-loader__text span{animation:1.4s infinite door-dots}.door-loader__text span:nth-child(2){animation-delay:.2s}.door-loader__text span:nth-child(3){animation-delay:.4s}@keyframes door-draw{0%{stroke-dashoffset:1px;fill-opacity:0}45%{stroke-dashoffset:0;fill-opacity:0}62%{stroke-dashoffset:0;fill-opacity:1}88%{stroke-dashoffset:0;fill-opacity:1}to{stroke-dashoffset:0;fill-opacity:0}}@keyframes door-handle{0%,55%{opacity:0}64%,88%{opacity:1}to{opacity:0}}@keyframes door-dots{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}@keyframes door-ring-spin{to{transform:rotateY(360deg)}}@keyframes door-counter-a{0%{transform:rotateY(0)}to{transform:rotateY(-360deg)}}@keyframes door-counter-b{0%{transform:rotateY(-180deg)}to{transform:rotateY(-540deg)}}@media (prefers-reduced-motion:reduce){.door-spin__ring,.door-spin__slot .door-loader__tile,.door-loader__panel,.door-loader__frame,.door-loader__handle,.door-loader__text span{animation:none}.door-loader__panel,.door-loader__frame{stroke-dashoffset:0;fill-opacity:1}.door-loader__handle{opacity:1}.door-spin__slot.slotB{display:none}}.route-loading{min-height:100svh;padding-top:var(--nav-h);place-items:center;display:grid}.nav-loading{display:none}html[data-navigating] .nav-loading{z-index:90;padding-top:var(--nav-h);background:var(--void,oklch(15.5% .006 280));opacity:1;place-items:center;animation:.18s .12s both nav-loading-in;display:grid;position:fixed;inset:0}@keyframes nav-loading-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){html[data-navigating] .nav-loading{animation-duration:10ms}}
