.glitch{display:none;position:absolute;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(243,238,228,.08) 0 1px,transparent 1px 5px),radial-gradient(circle at 50% 40%,rgba(176,141,74,.22),transparent 55%);}
.gate.glitching .glitch{display:grid;place-items:center;animation:glitchfade .7s ease both;}
.gate.glitching .gate-card{animation:glitchcard .45s steps(3) both;}
.glitch-word{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(3rem,12vw,7rem);color:#f3eee4;letter-spacing:.22em;text-transform:uppercase;position:relative;animation:glitchtext .7s steps(2) both;text-shadow:4px 0 #b08d4a,-4px 0 #6ea0ff;}
.glitch-word:before,.glitch-word:after{content:"AUVELL";position:absolute;left:0;top:0;width:100%;}
.glitch-word:before{color:#b08d4a;animation:glitchshift .7s steps(2) both;clip-path:inset(0 0 55% 0);}
.glitch-word:after{color:#8fb4ff;animation:glitchshift2 .7s steps(2) both;clip-path:inset(50% 0 0 0);}
@keyframes glitchfade{0%{opacity:0}10%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes glitchcard{0%{opacity:1;transform:none;filter:none}25%{opacity:.35;transform:translate(-8px,3px) skewX(-4deg)}50%{opacity:1;transform:translate(10px,-4px)}75%{opacity:.15;transform:translate(-12px,5px)}100%{opacity:0}}
@keyframes glitchtext{0%{transform:none}20%{transform:translate(6px,-3px)}40%{transform:translate(-8px,4px)}70%{transform:translate(-10px,-2px)}100%{transform:none}}
@keyframes glitchshift{0%{transform:translate(0)}30%{transform:translate(-10px,3px)}60%{transform:translate(8px,-4px)}100%{transform:translate(0)}}
@keyframes glitchshift2{0%{transform:translate(0)}30%{transform:translate(9px,-2px)}60%{transform:translate(-7px,5px)}100%{transform:translate(0)}}
@media (prefers-reduced-motion:reduce){.gate.glitching .glitch,.gate.glitching .gate-card,.glitch-word,.glitch-word:before,.glitch-word:after{animation:none}.gate.glitching .glitch{display:none}}

.gate.denied { background:#3a1218; }
.gate.denied .glitch-word { color:#ffd0d0; text-shadow:4px 0 #ff4d4d,-4px 0 #7a1020; }
.gate.denied .glitch-word:before { color:#ff4d4d; }
.gate.denied .glitch-word:after { color:#ffb4b4; }
.gate.denied .gate-card { animation:deny .7s steps(2) both; }
@keyframes deny { 0%{transform:none} 20%{transform:translate(-10px,2px)} 40%{transform:translate(8px,-3px)} 70%{transform:translate(-6px,1px)} 100%{transform:none} }

.gate.granted .glitch { display:grid; place-items:center; animation:grantfade .7s ease both; }
.gate.granted .glitch-word { color:#e8fff4; text-shadow:5px 0 #3dff8a,-5px 0 #4d8cff; animation:glitchtext .7s steps(2) both; }
.gate.granted .glitch-word:before { color:#3dff8a; animation:glitchshift .7s steps(2) both; }
.gate.granted .glitch-word:after { color:#4d8cff; animation:glitchshift2 .7s steps(2) both; }
.gate.granted .gate-card { animation:grantcard .55s steps(2) both; }
@keyframes grantfade { 0%{opacity:0} 12%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
@keyframes grantcard { 0%{filter:none} 30%{filter:hue-rotate(80deg)} 60%{filter:hue-rotate(200deg)} 100%{filter:none; opacity:0} }