.homelab-page{min-height:100vh;padding:calc(var(--nav-height) + 5rem) 2rem 5rem;animation:.8s ease-out fadeInUp;position:relative;overflow:hidden}.container{z-index:1;max-width:1200px;margin:0 auto;position:relative}.homelab-header{text-align:center;margin-bottom:5.5rem}.page-title{font-family:var(--font-heading);color:var(--color-text);letter-spacing:-.02em;margin-bottom:.75rem;font-size:clamp(2.5rem,8vw,4rem);font-weight:700}.page-subtitle{color:var(--color-text-dim);max-width:500px;margin:0 auto;font-size:1.1rem;line-height:1.6}.category-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2rem;display:grid}.category-card{color:#fff;perspective:1000px;touch-action:manipulation;text-decoration:none;display:block;position:relative}.card-inner{background:var(--color-bg-card);isolation:isolate;min-height:420px;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;border:1px solid #ffffff14;border-radius:1.5rem;flex-direction:column;padding:2.5rem;transition:transform .6s cubic-bezier(.4,0,.2,1),box-shadow .6s cubic-bezier(.4,0,.2,1),border-color .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 6px #00000012,0 12px 24px #0000001f}.card-inner.tilt-active{transition:transform .12s ease-out,box-shadow .12s ease-out,border-color .3s}.category-card:hover .card-inner{border-color:#ffffff1f}.category-card-image{opacity:.85;background-position:50%;background-size:cover;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .3s;position:absolute;inset:0}.category-card:hover .category-card-image{opacity:1;transform:scale(1.05)}.category-card-overlay{background:linear-gradient(to top, var(--overlay-color-top) 0%, var(--overlay-color-mid) 40%, var(--overlay-color-bot) 100%);-webkit-backdrop-filter:blur(1px);transition:background .4s,backdrop-filter .4s;position:absolute;inset:0}.category-card:hover .category-card-overlay{background:linear-gradient(to top, var(--overlay-color-top) 0%, var(--overlay-color-mid) 40%, var(--overlay-color-bot) 100%)}.category-card-content{z-index:2;flex-direction:column;flex-grow:1;justify-content:flex-end;height:100%;margin-top:auto;display:flex;position:relative}.category-title{font-family:var(--font-heading);color:var(--color-text);letter-spacing:-.02em;text-shadow:0 2px 20px #00000080;margin-bottom:.75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.category-description{color:var(--color-text);text-shadow:0 1px 10px #00000080;margin-bottom:2rem;font-size:1rem;line-height:1.6}[data-theme=light] .category-title,[data-theme=light] .category-description{text-shadow:none;font-weight:500}[data-theme=light] .category-description{color:#6b4f00}.category-arrow{backdrop-filter:blur(10px);color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-self:flex-start;align-items:center;width:48px;height:48px;transition:all .3s;display:inline-flex}.category-card:hover .category-arrow{background:var(--color-primary);border-color:var(--color-primary);transform:translate(8px);box-shadow:0 8px 24px #f1c40f66}[data-theme=light] .category-arrow{background:var(--color-text-muted)}.card-glare{border-radius:inherit;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:overlay;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), #fff3 0%, #ffffff12 20%, transparent 50%);transition:opacity .3s;position:absolute;inset:0}.card-glare:after{content:"";border-radius:inherit;background:linear-gradient(var(--ga,135deg), transparent 20%, #ffffff0d 42%, #ffffff1a 50%, #ffffff0d 58%, transparent 80%);position:absolute;inset:0}@media (width<=768px){.homelab-page{padding-top:calc(var(--nav-height) + 2rem)}.category-grid{grid-template-columns:1fr}.category-card{perspective:none}.card-inner{transform-style:flat;backface-visibility:visible;will-change:auto;min-height:320px;padding:2rem;transition:none}.card-glare{display:none}.homelab-header{margin-bottom:3rem}}.animated-scene{z-index:0;width:100%;height:100%;position:absolute;inset:0}.card-animated .category-card-overlay{background:linear-gradient(to top, var(--overlay-color-top) 0%, var(--overlay-color-mid) 18%, var(--overlay-color-mid2) 35%, var(--overlay-color-mid3) 55%, var(--overlay-color-bot) 100%);transition:background .4s}.card-animated:hover .category-card-overlay{background:linear-gradient(to top, var(--overlay-color-top) 0%, var(--overlay-color-mid) 18%, var(--overlay-color-mid2) 35%, var(--overlay-color-mid3) 55%, var(--overlay-color-bot) 100%)}.yubikey{will-change:transform;transition:transform .7s cubic-bezier(.25,.46,.45,.94)}.card-animated:hover .yubikey{transform:translate(248px)}.led,.drive-led,.yk-led{transition:fill .4s,filter .4s}.led-power{animation:4s ease-in-out infinite idleBreathe}@keyframes idleBreathe{0%,to{fill:#1a2a1a}50%{fill:#1e3e28}}.card-animated:hover .led-power{fill:#22c55e;filter:url(#glow-sm);transition-delay:.45s;animation:none}.card-animated:hover .led-hdd{fill:#3b82f6;filter:url(#glow-sm);transition-delay:.55s;animation:.8s ease-in-out .55s infinite ledBlink}.card-animated:hover .led-net{fill:#f59e0b;filter:url(#glow-sm);transition-delay:.65s;animation:1.2s ease-in-out .65s infinite ledBlink}@keyframes ledBlink{0%,to{opacity:1}50%{opacity:.25}}.card-animated:hover .dl-1{fill:#22c55e;filter:url(#glow-sm);transition-delay:.5s}.card-animated:hover .dl-2{fill:#22c55e;filter:url(#glow-sm);transition-delay:.6s}.card-animated:hover .dl-3{fill:#22c55e;filter:url(#glow-sm);transition-delay:.7s}.card-animated:hover .yk-led{fill:#22c55e;filter:url(#glow-sm);transition-delay:.55s}.yk-touch{transition:all .4s}.card-animated:hover .yk-touch{stroke:#ffe066;stroke-width:2px;filter:url(#glow-sm);transition-delay:.6s}.yk-touch-inner{transition:all .4s}.card-animated:hover .yk-touch-inner{fill:#f1c40f;opacity:.8;transition-delay:.7s}.power-icon,.power-icon-arc{transition:stroke .4s}.card-animated:hover .power-icon,.card-animated:hover .power-icon-arc{stroke:#22c55e;transition-delay:.45s}.fan-blades{transform-origin:300px 237px}.card-animated:hover .fan-blades{animation:.4s linear .5s infinite fanSpin}@keyframes fanSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.server-glow{transition:opacity .6s}.card-animated:hover .server-glow{opacity:.4;transition-delay:.7s;animation:2s ease-in-out .7s infinite glowPulse}@keyframes glowPulse{0%,to{opacity:.25}50%{opacity:.55}}.scan-line{transition:opacity .3s}.card-animated:hover .scan-line{animation:2.5s ease-in-out .3s infinite scanDown}@keyframes scanDown{0%{opacity:0;transform:translateY(0)}5%{opacity:.2}90%{opacity:.2}to{opacity:0;transform:translateY(270px)}}.insertion-spark{transform-box:fill-box;transform-origin:50%;transition:opacity .3s,transform .3s;transform:scale(0)}.card-animated:hover .insertion-spark{opacity:.7;transition-delay:.5s;animation:1.5s ease-in-out .5s infinite sparkPulse;transform:scale(1)}@keyframes sparkPulse{0%,to{opacity:.5;transform:scale(.8)}50%{opacity:.1;transform:scale(2)}}.particle{fill:#f1c40f;opacity:0}.card-animated:hover .particle{animation:particleFloat 2s ease-out var(--delay,0s) forwards}@keyframes particleFloat{0%{opacity:0;transform:translate(0)scale(1)}12%{opacity:.9}to{opacity:0;transform:translate(var(--dx,0px), var(--dy,-80px)) scale(.15)}}.data-streams{transition:opacity .6s}.card-animated:hover .data-streams{opacity:.7;transition-delay:.85s}.stream-line{stroke-dasharray:5 20;stroke-dashoffset:25px}.card-animated:hover .stream-line{animation:dataFlow 1.2s linear var(--delay,0s) infinite}@keyframes dataFlow{0%{stroke-dashoffset:25px}to{stroke-dashoffset:0}}.stream-dot{opacity:0;transform-box:fill-box;transform-origin:50%}.card-animated:hover .stream-dot{animation:dotPulse 1.2s ease-in-out var(--delay,0s) infinite}@keyframes dotPulse{0%,to{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.6)}}.auth-text{transition:opacity .6s}.card-animated:hover .auth-text{opacity:.85;transition-delay:1s;animation:3s ease-in-out 1s infinite textFlicker}@keyframes textFlicker{0%,to{opacity:.85}48%{opacity:.85}50%{opacity:.35}52%{opacity:.85}78%{opacity:.85}80%{opacity:.5}82%{opacity:.85}}@media (width<=768px){.yubikey{will-change:auto;transition:none;transform:translate(248px)}.card-animated:hover .yubikey{transform:translate(248px)}.led-power{fill:#22c55e;animation:none!important}.led-hdd{fill:#3b82f6}.led-net{fill:#f59e0b}.dl-1,.dl-2,.dl-3,.yk-led{fill:#22c55e}.yk-touch{stroke:#ffe066}.yk-touch-inner{fill:#f1c40f;opacity:.7}.power-icon,.power-icon-arc{stroke:#22c55e}.card-animated:hover .led-power,.card-animated:hover .led-hdd,.card-animated:hover .led-net,.card-animated:hover .dl-1,.card-animated:hover .dl-2,.card-animated:hover .dl-3,.card-animated:hover .yk-led,.card-animated:hover .yk-touch,.card-animated:hover .yk-touch-inner,.card-animated:hover .power-icon,.card-animated:hover .power-icon-arc{filter:none!important;transition-delay:0s!important;animation:none!important}.card-animated:hover .scan-line{opacity:0!important;animation:none!important}.card-animated:hover .insertion-spark{opacity:0!important;animation:none!important;transform:scale(0)!important}.card-animated:hover .particle{opacity:0!important;animation:none!important}.card-animated:hover .data-streams{opacity:0!important;transition:none!important}.card-animated:hover .stream-line{animation:none!important}.card-animated:hover .stream-dot,.card-animated:hover .server-glow{opacity:0!important;animation:none!important}.card-animated:hover .auth-text{opacity:0!important;transition:none!important;animation:none!important}.card-animated .category-card-overlay,.card-animated:hover .category-card-overlay{background:linear-gradient(to top, var(--overlay-color-top) 0%, var(--overlay-color-mid) 30%, var(--overlay-color-mid2) 60%, var(--overlay-color-bot) 100%)}}