/* hc-plus: extra UI (see hc-plus.js) */

/* ---- loading screen: burnout spinning the HS logo ---- */
#hcBoot{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 55%,color-mix(in srgb,var(--accent) 14%,var(--bg)),var(--bg) 70%);transition:opacity .55s ease,visibility .55s}
#hcBoot.out{opacity:0;visibility:hidden}
.hcb{position:relative;display:grid;justify-items:center;gap:22px}
.hcb__stage{position:relative;width:150px;height:150px}
.hcb__logo{position:absolute;inset:18px;background:var(--logo-hs) center/contain no-repeat;filter:drop-shadow(0 0 18px var(--glow,rgba(77,157,255,.6)));animation:hcbSpin .55s linear infinite}
.hcb__ring{position:absolute;inset:4px;border-radius:50%;border:3px dashed color-mix(in srgb,var(--text) 30%,transparent);animation:hcbSpin 1.2s linear infinite reverse}
.hcb__skid{position:absolute;inset:-6px;border-radius:50%;border:6px solid rgba(0,0,0,.35);border-left-color:transparent;border-bottom-color:transparent;animation:hcbSpin .9s linear infinite}
.hcb__smoke{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:radial-gradient(rgba(230,232,236,.75),rgba(200,204,210,.35) 55%,transparent 70%);animation:hcbSmoke 1.4s ease-out infinite}
.hcb__smoke:nth-child(2){animation-delay:.35s}.hcb__smoke:nth-child(3){animation-delay:.7s}.hcb__smoke:nth-child(4){animation-delay:1.05s}
.hcb__word{font:800 .9rem/1 var(--font-head,system-ui);letter-spacing:.32em;text-transform:uppercase;color:var(--text)}
.hcb__word b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hcb__bar{width:180px;height:4px;border-radius:9px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.hcb__bar i{display:block;height:100%;width:40%;border-radius:9px;background:var(--grad);animation:hcbBar 1.1s ease-in-out infinite}
@keyframes hcbSpin{to{transform:rotate(360deg)}}
@keyframes hcbSmoke{0%{transform:translate(0,0) scale(.4);opacity:.9}100%{transform:translate(var(--sx,-70px),var(--sy,-30px)) scale(3);opacity:0}}
.hcb__smoke:nth-child(2){--sx:60px;--sy:-40px}.hcb__smoke:nth-child(3){--sx:-50px;--sy:40px}.hcb__smoke:nth-child(4){--sx:70px;--sy:30px}
@keyframes hcbBar{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
html.hc-booting body{overflow:hidden}

/* ---- 1) card hover preview ---- */
.cprev{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .3s;pointer-events:none;background:#000}
.cprev.on{opacity:1}
.cprev img,.cprev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.cprev video{opacity:1}
.cprev img.on{opacity:1;animation:cprevKen 1.2s ease-out both}
@keyframes cprevKen{from{transform:scale(1.06)}to{transform:scale(1)}}
.cprev__dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px}
.cprev__dots i{width:16px;height:3px;border-radius:3px;background:rgba(255,255,255,.4)}
.cprev__dots i.on{background:#fff}
.card--itch .cprev img{object-fit:contain}

/* ---- 2) lightbox ---- */
.hlb{position:fixed;inset:0;z-index:2147483300;display:none;background:rgba(5,7,12,.94);backdrop-filter:blur(8px);touch-action:none;user-select:none}
.hlb.open{display:block;animation:hlbIn .2s ease}
@keyframes hlbIn{from{opacity:0}to{opacity:1}}
.hlb__stage{position:absolute;inset:56px 70px 110px;display:grid;place-items:center;overflow:hidden}
.hlb__img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .25s cubic-bezier(.2,.8,.3,1),opacity .25s;cursor:zoom-in;transform-origin:center;border-radius:6px;box-shadow:0 30px 80px -30px #000}
.hlb.zoomed .hlb__img{cursor:grab;border-radius:0}
.hlb__x{position:absolute;top:12px;right:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.hlb__nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.hlb__prev{left:12px}.hlb__next{right:12px}
.hlb.single .hlb__nav,.hlb.single .hlb__strip{display:none}
.hlb__x:hover,.hlb__nav:hover{background:rgba(255,255,255,.18)}
.hlb__bar{position:absolute;left:0;right:0;top:18px;display:flex;justify-content:center;gap:18px;color:rgba(255,255,255,.75);font:600 .78rem/1 var(--font-mono,monospace);letter-spacing:.06em;pointer-events:none}
.hlb__strip{position:absolute;left:0;right:0;bottom:16px;display:flex;gap:8px;justify-content:center;overflow-x:auto;padding:4px 16px}
.hlb__strip button{flex:none;width:72px;height:48px;padding:0;border-radius:8px;border:2px solid transparent;overflow:hidden;opacity:.55;cursor:pointer;background:#111}
.hlb__strip button.on{opacity:1;border-color:var(--accent)}
.hlb__strip img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.hlb__stage{inset:56px 8px 96px}.hlb__nav{display:none}.hlb__hint{display:none}}

/* ---- 3) instant search ---- */
.isr{position:fixed;inset:0;z-index:2147483200;display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 0;background:rgba(5,7,12,.55);backdrop-filter:blur(6px)}
.isr.open{display:flex;animation:hlbIn .15s ease}
.isr__panel{width:min(640px,100%);border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 96%,var(--text) 4%);box-shadow:0 40px 100px -30px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);overflow:hidden}
.isr__top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.isr__ic{font-size:1.4rem;color:var(--accent)}
.isr__top input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--text);font:500 1.08rem/1.3 var(--font);box-shadow:none!important;padding:4px 0}
.isr__top kbd{font:600 .7rem/1 var(--font-mono);padding:5px 7px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.isr__list{max-height:min(60vh,520px);overflow:auto;padding:6px}
.isr__it{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;color:var(--text);text-decoration:none}
.isr__it img,.isr__ph{width:64px;height:44px;border-radius:8px;object-fit:cover;background:var(--surface-2,#222);display:grid;place-items:center}
.isr__it b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isr__it mark{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.isr__it small{color:var(--muted);font-size:.78rem}
.isr__p{font:400 1.1rem/1 var(--font-disp);color:var(--accent-ink,var(--accent))}
.isr__it.on,.isr__it:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.isr__empty{padding:22px;text-align:center;color:var(--muted);margin:0}
.isr__foot{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.isr__foot a{color:var(--accent-ink,var(--accent))}
.isr__drop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;display:none;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 97%,var(--text) 3%);box-shadow:0 24px 60px -24px rgba(0,0,0,.6);padding:6px;max-height:420px;overflow:auto}
.isr__drop.open{display:block}
.isr-btn{width:44px;height:44px}
html[data-u-isearch="off"] .isr-btn{display:none}

/* ---- 4) page transitions ---- */
html.pt-in.pt-fade body>*:not(#hcBoot):not(.hc-particles){animation:ptFadeIn .38s ease both}
html.pt-in.pt-slide main,html.pt-in.pt-slide body>section,html.pt-in.pt-slide .section,html.pt-in.pt-slide .hero{animation:ptSlideIn .45s cubic-bezier(.2,.8,.3,1) both}
html.pt-out.pt-fade body{animation:ptFadeOut .19s ease forwards}
html.pt-out.pt-slide body{animation:ptSlideOut .19s ease forwards}
@keyframes ptFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ptFadeOut{to{opacity:0}}
@keyframes ptSlideIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ptSlideOut{to{opacity:0;transform:translateX(-24px)}}

/* ---- 5) confetti ---- */
.hc-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147483150;pointer-events:none}

/* ---- 6) squish + ripple ---- */
html:not([data-u-squish="off"]) :is(.btn,.hx-btn,.ci-btn,.hdr__cta,.icon-btn,.seg button,.rbtn){transition:transform .14s cubic-bezier(.3,1.6,.5,1),background-color .2s,color .2s,border-color .2s,box-shadow .2s}
html:not([data-u-squish="off"]) :is(.btn,.hx-btn,.ci-btn,.hdr__cta,.icon-btn,.seg button,.rbtn):active{transform:scale(.94)}
.hc-rip-host{overflow:hidden;isolation:isolate}
.hc-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:hcRip .6s ease-out forwards;z-index:-1}
@keyframes hcRip{to{transform:scale(1);opacity:0}}

/* ---- 7) contour map drifts with scroll ---- */
html:not([data-u-scrollweb="off"]) #hcWeb{transform:translate3d(0,calc(var(--web-sy,0) * -.12px),0) scale(calc(1.06 + var(--web-sp,0) * .08)) rotate(calc(var(--web-sp,0) * 6deg));transform-origin:50% 30%;will-change:transform}

/* ---- 8) sunrise / sunset sweep ---- */
.hc-sky{position:fixed;inset:0;z-index:2147483100;pointer-events:none;overflow:hidden;animation:skyFade 3s ease forwards}
.hc-sky.rise{background:linear-gradient(to top,rgba(255,170,90,.55),rgba(255,214,150,.35) 35%,rgba(140,190,255,.25) 70%,transparent)}
.hc-sky.set{background:linear-gradient(to top,rgba(255,110,80,.5),rgba(150,70,170,.4) 40%,rgba(20,24,60,.6) 85%)}
.hc-sky__orb{position:absolute;left:50%;width:140px;height:140px;margin-left:-70px;border-radius:50%}
.hc-sky.rise .hc-sky__orb{background:radial-gradient(circle,#fff6c9,#ffb347 55%,rgba(255,140,60,0) 70%);box-shadow:0 0 120px 40px rgba(255,190,90,.5);animation:orbUp 3s cubic-bezier(.2,.8,.3,1) forwards}
.hc-sky.set .hc-sky__orb{background:radial-gradient(circle,#ffe6c4,#ff7a45 55%,rgba(255,90,60,0) 70%);box-shadow:0 0 120px 40px rgba(255,110,70,.45);animation:orbDown 3s cubic-bezier(.4,0,.6,1) forwards}
@keyframes orbUp{from{top:105%}to{top:22%}}
@keyframes orbDown{from{top:22%}to{top:105%}}
@keyframes skyFade{0%{opacity:0}18%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* ---- 9) weather ---- */
.hc-wx{position:fixed;inset:0;width:100vw;height:100vh;z-index:3;pointer-events:none}
html[data-weather="fog"] body::after,html[data-weather="rain"] body::after,html[data-weather="storm"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2}
html[data-weather="fog"] body::after{background:linear-gradient(to top,color-mix(in srgb,var(--text) 14%,transparent),transparent 60%);animation:fogDrift 12s ease-in-out infinite alternate}
html[data-weather="rain"] body::after,html[data-weather="storm"] body::after{background:linear-gradient(to bottom,rgba(20,30,50,.18),transparent 50%)}
@keyframes fogDrift{from{opacity:.6}to{opacity:1}}
.hc-flash{position:fixed;inset:0;z-index:2147483000;pointer-events:none;background:rgba(220,230,255,.35);animation:flash .9s ease-out forwards}
@keyframes flash{0%,100%{opacity:0}8%{opacity:1}14%{opacity:.2}22%{opacity:.9}}

/* ---- 10) holiday skins ---- */
.hc-skin-hat{position:absolute;top:-12px;right:-10px;font-size:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));animation:hatBob 2.4s ease-in-out infinite}
.hdr__logo .hc-mark{position:relative}
@keyframes hatBob{50%{transform:rotate(-8deg) translateY(-2px)}}
html[data-skin="halloween"]{--skin-a:#ff7a1a;--skin-b:#8b3dff}
html[data-skin="halloween"] .hdr{box-shadow:inset 0 -2px 0 color-mix(in srgb,#ff7a1a 55%,transparent),0 10px 40px -24px #ff7a1a}
html[data-skin="halloween"] .ftr{background-image:radial-gradient(60% 80% at 50% 120%,rgba(255,122,26,.18),transparent 70%)}
html[data-skin="halloween"] .hx-h1,html[data-skin="halloween"] .hero__title{text-shadow:0 0 30px rgba(255,122,26,.35)}
.hc-bat{position:fixed;left:-60px;z-index:99980;font-size:26px;pointer-events:none;animation:batFly var(--dur,8s) linear forwards;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
@keyframes batFly{0%{transform:translate(0,0) scaleX(-1)}20%{transform:translate(22vw,-30px) scaleX(-1)}40%{transform:translate(44vw,20px) scaleX(-1)}60%{transform:translate(66vw,-40px) scaleX(-1)}100%{transform:translate(calc(100vw + 120px),10px) scaleX(-1)}}
html[data-skin="christmas"] .hdr{box-shadow:inset 0 -2px 0 rgba(220,40,60,.5)}
.hc-lights{position:absolute;left:0;right:0;bottom:-7px;height:14px;display:flex;justify-content:space-between;padding:0 10px;pointer-events:none;background:radial-gradient(circle at 50% -40%,transparent 60%,rgba(40,40,40,.6) 62%,transparent 66%) 0 0/48px 14px repeat-x}
.hc-lights i{width:7px;height:11px;border-radius:50% 50% 45% 45%;background:hsl(calc(var(--i) * 72),90%,58%);box-shadow:0 0 10px hsl(calc(var(--i) * 72),90%,58%);animation:bulb 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.27s)}
@keyframes bulb{50%{opacity:.35;box-shadow:none}}
.hc-snowfall{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hc-snowfall i{position:absolute;top:-10px;left:var(--x);width:calc(6px * var(--s));height:calc(6px * var(--s));border-radius:50%;background:#fff;opacity:.8;animation:snowFall var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes snowFall{to{transform:translate(30px,105vh)}}
html[data-skin="july4"] .hdr{box-shadow:inset 0 -3px 0 transparent;border-image:linear-gradient(90deg,#b22234 0 33%,#fff 33% 66%,#3c3b6e 66%) 1;border-bottom:3px solid}
html[data-u-season="off"] .hc-skin-hat,html[data-u-season="off"] .hc-lights,html[data-u-season="off"] .hc-snowfall{display:none}

/* ---- 11) floating reactions ---- */
.hc-float{position:fixed;z-index:2147483000;font-size:24px;pointer-events:none;animation:floatUp 1.8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes floatUp{0%{transform:translate(-50%,0) scale(.4);opacity:0}15%{opacity:1;transform:translate(-50%,-20px) scale(1.15)}100%{transform:translate(calc(-50% + var(--dx,0px)),-170px) scale(.9) rotate(var(--rot,0deg));opacity:0}}

/* ---- 12) hover cards ---- */
.hcard{position:fixed;z-index:2147483250;width:280px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 96%,var(--text) 4%);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.hcard.above{transform:translateY(calc(-100% - 6px))}
.hcard.open{opacity:1;visibility:visible;transform:none}.hcard.open.above{transform:translateY(-100%)}
.hcard__ban{height:74px;background:linear-gradient(120deg,var(--hc-col,var(--accent)),color-mix(in srgb,var(--hc-col,var(--accent)) 40%,#000)) center/cover}
.hcard__body{padding:0 16px 16px;margin-top:-30px}
.hcard__av{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid color-mix(in srgb,var(--bg) 96%,var(--text) 4%);background:var(--surface-2);display:grid;place-items:center;font:800 1.4rem/1 var(--font-disp);color:var(--hc-col,var(--accent))}
.hcard b{display:block;font-size:1.05rem;margin-top:6px}
.hcard small{color:var(--muted)}
.hcard__stats{display:flex;gap:14px;margin-top:10px;font-size:.82rem;color:var(--muted)}
.hcard__stats b{display:inline;font-size:inherit;margin:0;color:var(--text)}
.hcard__badges{display:flex;gap:6px;margin-top:10px;font-size:1.15rem}
.hcard p{margin:10px 0 0;font-size:.85rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (prefers-reduced-motion:reduce){.cprev img.on,.hc-float,.hc-bat,.hc-snowfall i,.hc-lights i{animation:none!important}}

/* ---- 13) profile banner + color ---- */
.pprofile{--pcol:var(--accent)}
.pban{position:relative;height:clamp(120px,22vw,240px);border-radius:22px 22px 0 0;background:linear-gradient(120deg,var(--pcol),color-mix(in srgb,var(--pcol) 30%,#06080d)) center/cover no-repeat;border:1px solid var(--line);border-bottom:0}
.pban::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,transparent 50%,color-mix(in srgb,var(--bg) 60%,transparent))}
.pban__edit{position:absolute;right:14px;bottom:14px;z-index:2}
.pprofile .pprof-hd{border-top-left-radius:0!important;border-top-right-radius:0!important;margin-top:0;border-top:3px solid var(--pcol)!important}
.pprofile .pprof-hd .pfp{margin-top:-58px;border:4px solid var(--pcol)!important;box-shadow:0 10px 30px -10px color-mix(in srgb,var(--pcol) 70%,transparent);background:var(--bg)}
.pprofile .pprof-hd h1{color:var(--text)}
.pprofile .pstat strong,.pprofile .pbadge{border-color:color-mix(in srgb,var(--pcol) 45%,var(--line))!important}
.pprofile .gcard h3{color:var(--pcol)}
.pstyle{position:fixed;inset:0;z-index:2147483200;display:grid;place-items:center;padding:16px;background:rgba(5,7,12,.6);backdrop-filter:blur(6px)}
.pstyle[hidden]{display:none}
.pstyle__card{width:min(520px,100%)}
.pstyle__drop{margin:14px 0;padding:24px;border:1.5px dashed var(--line2,var(--line));border-radius:16px;text-align:center;color:var(--muted);cursor:pointer}
.pstyle__drop.over{border-color:var(--pcol);background:color-mix(in srgb,var(--pcol) 8%,transparent)}
.pstyle__cols{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pstyle__cols button{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--c);cursor:pointer}
.pstyle__cols button:hover{transform:scale(1.12)}
.pstyle__custom{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);cursor:pointer}
.pstyle__custom input{width:30px;height:30px;padding:0;border:0;background:none}
.pstyle__act{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}

/* ---- community: multi-photo composer + post grids + typing ---- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:10px 0}
.pgrid[hidden]{display:none}
.pgrid__it{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:grab;background:var(--surface-2)}
.pgrid__it img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.pgrid__it.is-cover{outline:2px solid var(--accent);outline-offset:-2px}
.pgrid__it.drag{opacity:.4}.pgrid__it.over{outline:2px dashed var(--accent);outline-offset:-2px}
.pgrid__n{position:absolute;left:6px;top:6px;padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 .66rem/1 var(--font-mono)}
.pgrid__x{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;line-height:1}
.pgrid__mv{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:6px;opacity:0;transition:opacity .2s}
.pgrid__it:hover .pgrid__mv,.pgrid__it:focus-within .pgrid__mv{opacity:1}
@media (hover:none){.pgrid__mv{opacity:1}}
.pgrid__mv button{width:26px;height:22px;border-radius:7px;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.postbox.over{outline:2px dashed var(--accent);outline-offset:4px;border-radius:14px}
.post__imgs{display:grid;gap:4px;margin-top:10px;border-radius:14px;overflow:hidden}
.post__imgs .post__img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;margin:0!important;border-radius:0!important;cursor:zoom-in}
.post__imgs.n2{grid-template-columns:1fr 1fr}
.post__imgs.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.post__imgs.n3 .post__img:first-child{grid-row:span 2;aspect-ratio:auto}
.post__imgs.n4{grid-template-columns:1fr 1fr}
.post__imgs.n5,.post__imgs.n6{grid-template-columns:repeat(3,1fr)}.post__imgs.n5 .post__img:first-child{grid-column:span 2;aspect-ratio:auto}
.ctyping{min-height:20px;padding:0 4px 6px;font-size:.78rem;color:var(--muted);opacity:0;transition:opacity .2s}
.ctyping.on{opacity:1}
.ctyping__dots{display:inline-flex;gap:3px;margin-right:4px;vertical-align:middle}
.ctyping__dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:tyDot 1.1s ease-in-out infinite}
.ctyping__dots i:nth-child(2){animation-delay:.15s}.ctyping__dots i:nth-child(3){animation-delay:.3s}
@keyframes tyDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ---- garage showroom ---- */
.showroom{position:relative;margin:0 0 22px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(70% 60% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 85%,#000),color-mix(in srgb,var(--bg) 60%,#000))}
.showroom__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:20px 22px 0}
.showroom__head h2{margin:2px 0 0;font:800 1.5rem/1 var(--font-head);text-transform:uppercase}
.showroom__nav{display:flex;align-items:center;gap:8px}
.showroom__upd{padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-ink,var(--accent));font:700 .74rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;animation:updPulse 2s ease-in-out infinite}
@keyframes updPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 12%,transparent)}}
.showroom__floor{position:relative;perspective:1100px;padding:8px 0 10px}
.showroom__floor::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--text) 4%,transparent)),repeating-linear-gradient(90deg,transparent 0 79px,color-mix(in srgb,var(--text) 5%,transparent) 79px 80px);mask:linear-gradient(to bottom,transparent,#000 40%)}
.showroom__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px calc(50% - 150px) 26px;scrollbar-width:none;transform-style:preserve-3d;outline:0}
.showroom__track::-webkit-scrollbar{display:none}
.srm{position:relative;flex:none;width:300px;scroll-snap-align:center;display:grid;justify-items:center;transform-style:preserve-3d;
  transform:rotateY(calc(var(--off,0) * -32deg)) translateZ(calc(var(--abs,0) * -110px)) scale(calc(1 - var(--abs,0) * .1));opacity:calc(1 - var(--abs,0) * .35);transition:transform .25s ease-out,opacity .25s;z-index:1}
.srm.is-center{z-index:3}
.srm__spot{position:absolute;top:-30px;left:50%;width:240px;height:260px;margin-left:-120px;pointer-events:none;background:radial-gradient(50% 70% at 50% 0%,color-mix(in srgb,#fff 10%,transparent),transparent 75%);opacity:calc(1 - var(--abs,0));clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.srm__plat{position:absolute;top:150px;width:270px;height:62px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,#1a1f29),#0c1016 70%,transparent 72%);box-shadow:0 0 40px -10px var(--accent);transform:rotateX(70deg)}
.srm__plat i{position:absolute;inset:8%;border-radius:50%;border:2px dashed color-mix(in srgb,var(--accent) 50%,transparent);animation:hcbSpin 14s linear infinite}
.srm__car{position:relative;z-index:2;display:grid;place-items:center;width:250px;height:156px;border-radius:14px;overflow:hidden;color:var(--muted);text-decoration:none;
  box-shadow:0 26px 40px -22px #000;-webkit-box-reflect:below 6px linear-gradient(transparent 60%,rgba(255,255,255,.18));transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.srm__car img{width:100%;height:100%;object-fit:cover}
.srm__car svg{width:90px;height:90px;opacity:.5}
.srm.is-center .srm__car{transform:translateY(-6px)}
.srm__car:hover{transform:translateY(-10px) scale(1.03)}
.srm__car--ghost{border:2px dashed var(--line);background:color-mix(in srgb,var(--text) 3%,transparent);-webkit-box-reflect:unset}
.srm__flag{position:absolute;z-index:3;top:6px;right:18px;padding:5px 10px;border-radius:999px;background:var(--accent);color:var(--accent-text,#000);font:800 .64rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 20px var(--glow);animation:updPulse 2s ease-in-out infinite}
.srm__plate{position:relative;z-index:2;margin-top:70px;text-align:center;display:grid;gap:3px;justify-items:center}
.srm__plate small{color:var(--muted);font:600 .7rem/1.2 var(--font-mono);letter-spacing:.08em}
.srm__plate b{font:800 1rem/1.15 var(--font-head);text-transform:uppercase;max-width:280px}
.srm__act{margin-top:8px}
.srm--empty{width:320px}
.gitem__ph img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.gitem--upd{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important}
@media (max-width:600px){.showroom__track{padding:16px calc(50% - 125px) 22px}.srm{width:250px}.srm__car{width:220px;height:138px}.srm__plat{width:230px;top:132px}}
@media (prefers-reduced-motion:reduce){.srm{transform:none;opacity:1}.srm__plat i{animation:none}}