@glasnost-ui/react/dist/style.css

React components for Glasnost UI with liquid glass aesthetics

:root{--glass-primary: rgba(255, 255, 255, .08);--glass-secondary: rgba(255, 255, 255, .05);--glass-accent: rgba(255, 255, 255, .12);--glass-border: rgba(255, 255, 255, .18);--glass-shadow: rgba(0, 0, 0, .08);--glass-glow: rgba(255, 255, 255, .25);--glass-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .04) 100%);--glass-gradient-2: linear-gradient(45deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .03) 100%);--glass-radial: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .08) 40%, transparent 100%);--glass-blur-light: blur(16px) saturate(1.8) brightness(1.05);--glass-blur-medium: blur(24px) saturate(2.2) brightness(1.08);--glass-blur-heavy: blur(32px) saturate(2.8) brightness(1.12)}.glasnost-base{backdrop-filter:var(--glass-blur-medium);-webkit-backdrop-filter:var(--glass-blur-medium);background:var(--glass-gradient-1);border:1px solid var(--glass-border);box-shadow:0 8px 32px var(--glass-shadow),inset 0 1px 0 var(--glass-glow);position:relative;overflow:hidden;transition:all .4s cubic-bezier(.23,1,.32,1);transform-style:preserve-3d}.glasnost-liquid{filter:url(#liquidDistortion)}.glasnost-glass-texture:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--glass-radial);opacity:.3;pointer-events:none;z-index:1}@keyframes glassShimmer{0%,to{opacity:.3}50%{opacity:.6}}.glasnost-shimmer{animation:glassShimmer 4s ease-in-out infinite}.glasnost-comment-card{position:relative;width:100%;padding:2rem;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);background-size:200% 200%;border:1px solid rgba(255,255,255,.25);border-radius:20px;animation:flowingBackground 15s ease-in-out infinite;filter:url(#liquidNavbar);box-shadow:0 15px 50px #1f26875e,inset 0 1px #ffffff80,0 1px #ffffff1a;transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;transform-style:preserve-3d}.glasnost-comment-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}@keyframes flowingBackground{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.comment-glass-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.comment-liquid-distortion{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.comment-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);border-radius:inherit;transition:left .7s ease;pointer-events:none}.glasnost-comment-card:hover{transform:translateY(-6px) rotateX(2deg);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;box-shadow:0 25px 70px #1f268780,inset 0 2px #fff9,0 2px #fff3;filter:url(#glassDistortion)}.glasnost-comment-card:hover .comment-glass-overlay{opacity:1}.glasnost-comment-card:hover .comment-liquid-distortion{opacity:.6}.glasnost-comment-card:hover:before{left:100%}.glasnost-comment-card:hover .comment-shine{left:100%}.comment-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.2);position:relative;z-index:2}.comment-title{font-size:1.5rem;font-weight:700;color:#fffffff2;margin:0;letter-spacing:.025em;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.comment-count{font-size:.875rem;color:#fffc;background:linear-gradient(135deg,rgba(40,42,55,1) 0%,rgba(30,32,40,.98) 100%);padding:.5rem 1rem;border-radius:20px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.2);font-weight:600}.comment-card-content{position:relative;z-index:2;min-height:120px}.no-comments{text-align:center;padding:3rem 1rem;color:#ffffffb3}.no-comments-icon{font-size:3.5rem;margin-bottom:1.5rem;opacity:.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.no-comments p{margin:0;font-size:1.1rem;line-height:1.6;font-weight:500}.floating-particle{position:absolute;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%,transparent 100%);border-radius:50%;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}.particle-1{width:16px;height:16px;top:20%;left:15%;animation:floatParticle 12s ease-in-out infinite}.particle-2{width:12px;height:12px;top:70%;right:20%;animation:floatParticle 15s ease-in-out infinite 3s}.particle-3{width:14px;height:14px;bottom:25%;left:25%;animation:floatParticle 18s ease-in-out infinite 6s}@keyframes floatParticle{0%,to{transform:translateY(0) translate(0) rotate(0);opacity:.3}25%{transform:translateY(-20px) translate(10px) rotate(90deg);opacity:.6}50%{transform:translateY(-30px) translate(-5px) rotate(180deg);opacity:.4}75%{transform:translateY(-15px) translate(15px) rotate(270deg);opacity:.7}}.glasnost-comment-card .comment-item{padding:1.5rem;margin-bottom:1rem;background:linear-gradient(135deg,rgba(30,32,40,.95) 0%,rgba(40,42,55,.92) 100%);border-radius:16px;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .3s cubic-bezier(.23,1,.32,1)}.glasnost-comment-card .comment-item:hover{background:linear-gradient(135deg,rgba(40,42,55,1) 0%,rgba(30,32,40,.98) 100%);border-color:#ffffff40;transform:translate(8px) translateY(-2px);box-shadow:0 12px 35px #1f268740,inset 0 2px #ffffff4d}.glasnost-comment-card .comment-author{font-weight:700;color:#ffffffe6;margin-bottom:.75rem;font-size:1.1rem}.glasnost-comment-card .comment-text{color:#fffc;line-height:1.7;font-size:1rem}.glasnost-comment-card .comment-meta{font-size:.875rem;color:#fff9;margin-top:.75rem;font-weight:500}.comment-card-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:center;position:relative;z-index:2}.more-button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 2rem;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:12px;color:#ffffffe6;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s cubic-bezier(.23,1,.32,1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;text-decoration:none;-webkit-user-select:none;user-select:none;outline:none;letter-spacing:.025em}.more-button:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;box-shadow:0 8px 25px #1f26874d,inset 0 1px #fff6;color:#fffffff2}.more-button:active{transform:translateY(-1px)}.more-button:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.more-button-text{position:relative;z-index:2}.more-button-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);border-radius:inherit;transition:left .5s ease;pointer-events:none}.more-button:hover .more-button-shine{left:100%}.glasnost-glass-button{position:relative;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:16px;color:#fffffff2;font-weight:600;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1);filter:url(#liquidNavbar);overflow:hidden;text-decoration:none;-webkit-user-select:none;user-select:none;outline:none;transform-style:preserve-3d}.glasnost-glass-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.button-glass-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.button-liquid-distortion{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.button-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);border-radius:inherit;transition:left .6s ease;pointer-events:none}.glasnost-glass-button:hover{transform:translateY(-3px) scale(1.02);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;box-shadow:0 15px 45px #1f268766,inset 0 2px #fff9,0 2px #fff3;filter:url(#glassDistortion)}.glasnost-glass-button:hover .button-glass-overlay{opacity:1}.glasnost-glass-button:hover .button-liquid-distortion{opacity:.6}.glasnost-glass-button:hover:before{left:100%}.glasnost-glass-button:hover .button-shine{left:100%}.glasnost-glass-button:active{transform:translateY(-1px) scale(.98);filter:url(#shimmerEffect)}.glasnost-glass-button:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:3px}.glass-button--small{padding:8px 20px;font-size:.875rem;border-radius:12px}.glass-button--medium{padding:12px 28px;font-size:1rem;border-radius:16px}.glass-button--large{padding:16px 36px;font-size:1.125rem;border-radius:20px}.glass-button--primary{background:linear-gradient(135deg,rgba(99,102,241,.3) 0%,rgba(67,56,202,.2) 100%);color:#fffffff2}.glass-button--primary:hover{background:linear-gradient(135deg,rgba(99,102,241,.4) 0%,rgba(67,56,202,.3) 100%);box-shadow:0 15px 45px #6366f166,inset 0 2px #fff9,0 2px #6366f133}.glass-button--secondary{background:linear-gradient(135deg,rgba(107,114,128,.3) 0%,rgba(75,85,99,.2) 100%)}.glass-button--secondary:hover{background:linear-gradient(135deg,rgba(107,114,128,.4) 0%,rgba(75,85,99,.3) 100%);box-shadow:0 15px 45px #6b728066,inset 0 2px #fff9,0 2px #6b728033}.glass-button--accent{background:linear-gradient(135deg,rgba(236,72,153,.3) 0%,rgba(190,24,93,.2) 100%)}.glass-button--accent:hover{background:linear-gradient(135deg,rgba(236,72,153,.4) 0%,rgba(190,24,93,.3) 100%);box-shadow:0 15px 45px #ec489966,inset 0 2px #fff9,0 2px #ec489933}.glass-button--disabled{opacity:.5;cursor:not-allowed;transform:none!important;filter:grayscale(100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.glass-button--disabled:hover{background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border-color:#ffffff40;box-shadow:0 8px 32px #1f26875e,inset 0 1px #ffffff80;transform:none}.glass-button--disabled .button-shine,.glass-button--disabled .button-glass-overlay,.glass-button--disabled .button-liquid-distortion{display:none}.button-content{position:relative;z-index:2;display:flex;align-items:center;gap:.5rem}.glasnost-toggle-button{display:inline-flex;align-items:center;gap:1rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .4s cubic-bezier(.23,1,.32,1);--track-width: 64px;--track-height: 36px;--track-radius: calc(var(--track-height) / 2);--knob-size: calc(var(--track-height) - 4px);--knob-offset: 2px;--knob-travel: calc(var(--track-width) - var(--knob-size) - (var(--knob-offset) * 2));--label-size: .95rem;--gap-size: 1rem}.glasnost-toggle-button:hover{transform:translateY(-2px)}.toggle-button--disabled{opacity:.5;cursor:not-allowed;transform:none!important;filter:grayscale(100%)}.toggle-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.toggle-track{position:relative;width:var(--track-width);height:var(--track-height);background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:var(--track-radius);transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;transform-style:preserve-3d}.toggle-track:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.toggle-track-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:inherit;transition:all .4s ease;opacity:0}.toggle-liquid-distortion{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.toggle-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);border-radius:inherit;transition:left .6s ease;pointer-events:none}.glasnost-toggle-button:hover .toggle-track{border-color:#ffffff59;box-shadow:inset 0 2px 8px #0000001a,0 6px 20px #1f268740,inset 0 1px #fff6;filter:url(#glassDistortion)}.glasnost-toggle-button:hover .toggle-track-overlay{opacity:1}.glasnost-toggle-button:hover .toggle-liquid-distortion{opacity:.6}.glasnost-toggle-button:hover .toggle-track:before{left:100%}.glasnost-toggle-button:hover .toggle-shine{left:100%}.toggle-knob{position:relative;top:var(--knob-offset);left:var(--knob-offset);width:var(--knob-size);height:var(--knob-size);background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);border-radius:50%;transition:all .4s cubic-bezier(.23,1,.32,1);filter:url(#cleanGlow);z-index:2;transform-style:preserve-3d;overflow:hidden}.toggle-button--checked .toggle-knob{transform:translate(var(--knob-travel));background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.85) 100%)}.glasnost-toggle-button:hover .toggle-knob{transform:scale(1.1)}.toggle-button--checked.glasnost-toggle-button:hover .toggle-knob{transform:translate(var(--knob-travel)) scale(1.1)}.knob-inner{position:absolute;top:50%;left:50%;width:calc(var(--knob-size) * .75);height:calc(var(--knob-size) * .75);background:radial-gradient(circle,rgba(255,255,255,.8) 0%,rgba(255,255,255,.3) 60%,transparent 100%);border-radius:50%;transform:translate(-50%,-50%);transition:all .3s ease;opacity:.6}.toggle-button--checked .knob-inner{background:radial-gradient(circle,rgba(99,102,241,.6) 0%,rgba(99,102,241,.2) 60%,transparent 100%);opacity:.8}.glasnost-toggle-button:hover .knob-inner{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.knob-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);border-radius:inherit;transition:left .4s ease;pointer-events:none}.glasnost-toggle-button:hover .knob-shine{left:100%}.toggle-label{font-size:var(--label-size);font-weight:600;color:#ffffffeb;letter-spacing:.025em;transition:all .3s ease}.glasnost-toggle-button:hover .toggle-label{color:#fffffffa}.toggle-input:focus-visible+.toggle-track{outline:2px solid rgba(255,255,255,.6);outline-offset:3px}.glasnost-toggle-button:active .toggle-knob{transform:scale(.95);filter:url(#shimmerEffect)}.toggle-button--checked.glasnost-toggle-button:active .toggle-knob{transform:translate(var(--knob-travel)) scale(.95)}.toggle-button--disabled .toggle-track{background:rgba(255,255,255,.3);border:1.5px solid rgba(200,200,200,.7);opacity:.7}.toggle-button--disabled .toggle-knob{background:rgba(255,255,255,.7);border:1.5px solid rgba(200,200,200,.7);opacity:.8}.toggle-button--disabled .toggle-shine,.toggle-button--disabled .knob-shine,.toggle-button--disabled .toggle-track-overlay,.toggle-button--disabled .toggle-liquid-distortion{display:none}.toggle-button--small{--track-width: 40px;--track-height: 22px;--label-size: .85rem;--gap-size: .75rem;gap:var(--gap-size)}.toggle-button--medium{--track-width: 64px;--track-height: 36px;--label-size: .95rem;--gap-size: 1rem;gap:var(--gap-size)}.toggle-button--large{--track-width: 88px;--track-height: 48px;--label-size: 1.15rem;--gap-size: 1.25rem;gap:var(--gap-size)}.toggle-button--primary.toggle-button--checked .toggle-track{background:linear-gradient(135deg,rgba(99,102,241,.4) 0%,rgba(67,56,202,.3) 100%);border-color:#6366f180}.toggle-button--primary.toggle-button--checked .toggle-track-overlay{background:radial-gradient(circle at 70% 50%,rgba(99,102,241,.3) 0%,transparent 70%)}.toggle-button--primary.toggle-button--checked.glasnost-toggle-button:hover .toggle-track{border-color:#6366f199;box-shadow:inset 0 2px 8px #6366f140,0 8px 25px #6366f166,inset 0 2px #ffffff80}.toggle-button--secondary.toggle-button--checked .toggle-track{background:linear-gradient(135deg,rgba(107,114,128,.4) 0%,rgba(75,85,99,.3) 100%);border-color:#6b728080}.toggle-button--secondary.toggle-button--checked .toggle-track-overlay{background:radial-gradient(circle at 70% 50%,rgba(107,114,128,.3) 0%,transparent 70%)}.toggle-button--secondary.toggle-button--checked.glasnost-toggle-button:hover .toggle-track{border-color:#6b728099;box-shadow:inset 0 2px 8px #6b728040,0 8px 25px #6b728066,inset 0 2px #ffffff80}.toggle-button--accent.toggle-button--checked .toggle-track{background:linear-gradient(135deg,rgba(236,72,153,.4) 0%,rgba(190,24,93,.3) 100%);border-color:#ec489980}.toggle-button--accent.toggle-button--checked .toggle-track-overlay{background:radial-gradient(circle at 70% 50%,rgba(236,72,153,.3) 0%,transparent 70%)}.toggle-button--accent.toggle-button--checked.glasnost-toggle-button:hover .toggle-track{border-color:#ec489999;box-shadow:inset 0 2px 8px #ec489940,0 8px 25px #ec489966,inset 0 2px #ffffff80}.toggle-button--accent.toggle-button--checked .knob-inner{background:radial-gradient(circle,rgba(236,72,153,.6) 0%,rgba(236,72,153,.2) 60%,transparent 100%)}.glasnost-hamburger-menu{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:16px;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;outline:none;transform-style:preserve-3d}.glasnost-hamburger-menu:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.hamburger-glass-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.hamburger-liquid-distortion{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.hamburger-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);border-radius:inherit;transition:left .5s ease;pointer-events:none}.glasnost-hamburger-menu:hover{transform:translateY(-3px) scale(1.05);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59}.glasnost-hamburger-menu:hover .hamburger-glass-overlay{opacity:1}.glasnost-hamburger-menu:hover .hamburger-liquid-distortion{opacity:.6}.glasnost-hamburger-menu:hover:before{left:100%}.glasnost-hamburger-menu:hover .hamburger-shine{left:100%}.glasnost-hamburger-menu:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:3px}.glasnost-hamburger-menu:active{transform:translateY(-1px) scale(1.02);filter:url(#shimmerEffect)}.hamburger-menu--open{background:linear-gradient(135deg,rgba(236,72,153,.3) 0%,rgba(190,24,93,.2) 100%);border-color:#ec489966}.hamburger-menu--open:hover{background:linear-gradient(135deg,rgba(236,72,153,.4) 0%,rgba(190,24,93,.3) 100%)}.hamburger-icon{position:relative;width:26px;height:20px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}.hamburger-line{display:block;width:100%;height:3px;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);border-radius:3px;transition:all .4s cubic-bezier(.23,1,.32,1);transform-origin:center;filter:url(#cleanGlow)}.hamburger-menu--open .hamburger-line--top{transform:translateY(8.5px) rotate(45deg);background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.85) 100%)}.hamburger-menu--open .hamburger-line--middle{opacity:0;transform:scaleX(0)}.hamburger-menu--open .hamburger-line--bottom{transform:translateY(-8.5px) rotate(-45deg);background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.85) 100%)}.glasnost-hamburger-menu:hover .hamburger-line{background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 100%)}.glasnost-navbar{position:sticky;top:1rem;width:90%;margin:1rem auto;padding:1.25rem 2rem;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);filter:url(#liquidNavbar);transition:all .4s cubic-bezier(.23,1,.32,1);z-index:1000;overflow:hidden;position:relative}.navbar-glass-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.navbar-liquid-distortion{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.glasnost-navbar:hover .navbar-glass-overlay{opacity:1}.glasnost-navbar:hover .navbar-liquid-distortion{opacity:.6}.glasnost-navbar:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.glasnost-navbar:hover:before{left:100%}.navbar-content{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;position:relative;z-index:2}.navbar-left,.navbar-center,.navbar-right{display:flex;align-items:center;flex:1}.navbar-left{justify-content:flex-start}.navbar-center{justify-content:center;font-weight:700;font-size:1.5rem;color:#fffffff2;letter-spacing:.05em;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;box-shadow:none!important}.navbar-content>*{box-shadow:none!important}.glasnost-navbar *{box-shadow:none!important}.navbar-right{justify-content:flex-end}.glasnost-navbar:hover{background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;box-shadow:0 16px 48px #00000026,inset 0 2px #ffffff80,0 0 0 1px #ffffff1a;transform:translateY(-2px);filter:url(#glassDistortion)}.glasnost-profile-card{position:relative;width:100%;max-width:340px;padding:2.5rem 2rem;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:24px;transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;transform-style:preserve-3d}.glasnost-profile-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.profile-glass-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.profile-liquid-distortion{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.card-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);border-radius:inherit;transition:left .8s ease;pointer-events:none}.glasnost-profile-card:hover{transform:translateY(-12px) rotateX(5deg) rotateY(5deg);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;filter:url(#glassDistortion)}.glasnost-profile-card:hover .profile-glass-overlay{opacity:1}.glasnost-profile-card:hover .profile-liquid-distortion{opacity:.6}.glasnost-profile-card:hover:before{left:100%}.glasnost-profile-card:hover .card-shine{left:100%}.profile-card-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}.avatar-container{position:relative;margin-bottom:2rem}.avatar-glow-ring{position:absolute;top:50%;left:50%;width:120px;height:120px;background:conic-gradient(from 0deg,rgba(99,102,241,.5),rgba(236,72,153,.5),rgba(99,102,241,.5));border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:all .4s ease;animation:avatarRotate 6s linear infinite;z-index:1}.glasnost-profile-card:hover .avatar-glow-ring{opacity:.6}@keyframes avatarRotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.profile-avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.4);filter:url(#avatarGlow);transition:all .4s ease;position:relative;z-index:3}.glasnost-profile-card:hover .profile-avatar{transform:scale(1.1);border-color:#fff9}.avatar-shimmer{position:absolute;top:50%;left:50%;width:100px;height:100px;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 40%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:all .4s ease;animation:avatarPulse 4s ease-in-out infinite;z-index:2}.glasnost-profile-card:hover .avatar-shimmer{opacity:.8}@keyframes avatarPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.6}}.profile-info{margin-bottom:2rem}.profile-name{font-size:1.75rem;font-weight:700;color:#fffffff2;margin:0 0 .75rem;letter-spacing:.025em;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.profile-title{font-size:1.1rem;color:#ffffffbf;margin:0;font-weight:500}.profile-actions{width:100%}@media (max-width: 768px){.glasnost-comment-card{padding:1.5rem;border-radius:18px}.comment-card-header{flex-direction:column;align-items:flex-start;gap:1rem}.comment-title{font-size:1.25rem}.comment-count{align-self:flex-end}.more-button{padding:.65rem 1.5rem;font-size:.85rem}.no-comments{padding:2rem .5rem}.no-comments-icon{font-size:3rem}.no-comments p{font-size:1rem}.glass-button--small{padding:6px 16px;font-size:.8rem}.glass-button--medium{padding:10px 24px;font-size:.9rem}.glass-button--large{padding:14px 32px;font-size:1rem}.glasnost-toggle-button{gap:.75rem}.toggle-track{width:56px;height:32px}.toggle-knob{width:28px;height:28px}.toggle-button--checked .toggle-knob{transform:translate(24px)}.toggle-button--checked.glasnost-toggle-button:hover .toggle-knob{transform:translate(24px) scale(1.1)}.toggle-button--checked.glasnost-toggle-button:active .toggle-knob{transform:translate(24px) scale(.95)}.toggle-label{font-size:.875rem}.knob-inner{width:20px;height:20px}.glasnost-hamburger-menu{width:48px;height:48px;border-radius:14px}.hamburger-icon{width:22px;height:18px}.hamburger-line{height:2.5px}.hamburger-menu--open .hamburger-line--top{transform:translateY(7.75px) rotate(45deg)}.hamburger-menu--open .hamburger-line--bottom{transform:translateY(-7.75px) rotate(-45deg)}.glasnost-navbar{width:98%;margin:.5rem auto;padding:1rem 1.5rem;border-radius:20px}.navbar-center{font-size:1.25rem}.glasnost-profile-card{max-width:300px;padding:2rem 1.5rem;border-radius:20px}.profile-avatar{width:80px;height:80px}.avatar-glow-ring{width:100px;height:100px}.avatar-shimmer{width:90px;height:90px}.profile-name{font-size:1.5rem}.profile-title{font-size:1rem}}@media (prefers-reduced-motion: reduce){.glasnost-comment-card,.floating-particle,.comment-shine,.comment-glass-overlay,.comment-liquid-distortion,.more-button,.more-button-shine,.glasnost-glass-button,.button-shine,.button-glass-overlay,.button-liquid-distortion,.glasnost-toggle-button,.toggle-track,.toggle-knob,.toggle-shine,.knob-shine,.toggle-track-overlay,.toggle-liquid-distortion,.knob-inner,.glasnost-hamburger-menu,.hamburger-line,.hamburger-shine,.hamburger-glass-overlay,.hamburger-liquid-distortion,.glasnost-navbar,.navbar-glass-overlay,.navbar-liquid-distortion,.glasnost-profile-card,.profile-avatar,.avatar-shimmer,.avatar-glow-ring,.card-shine,.profile-glass-overlay,.profile-liquid-distortion{animation:none;transition:none}.glasnost-comment-card:before,.glasnost-glass-button:before,.toggle-track:before,.glasnost-hamburger-menu:before,.glasnost-navbar:before,.glasnost-profile-card:before{transition:none}.glasnost-comment-card .comment-item{transition:none}.glasnost-comment-card:hover{transform:translateY(-4px)}.glasnost-glass-button:hover{transform:translateY(-2px)}.glasnost-toggle-button:hover{transform:none}.glasnost-hamburger-menu:hover{transform:translateY(-2px)}.glasnost-navbar:hover{transform:none}.glasnost-profile-card:hover{transform:translateY(-8px)}}@media (max-width: 768px){:root{--glass-blur-light: blur(12px) saturate(1.6) brightness(1.03);--glass-blur-medium: blur(18px) saturate(2) brightness(1.06);--glass-blur-heavy: blur(24px) saturate(2.4) brightness(1.09)}}@media (prefers-reduced-motion: reduce){.glasnost-shimmer{animation:none}}