.cassette-animation.inserting .cassette{z-index:10;animation:.25s ease-out forwards cassette-insert,.25s ease-in .25s forwards bounce}.cassette-animation.inserting .cassette-player{z-index:10;animation:.25s ease-in .25s forwards bounce}.cassette-animation .cassette{aspect-ratio:1.6;border-radius:5%;container-type:inline-size}.cassette-animation .cassette,.cassette-animation .cassette *{border-color:var(--phosphor)}.cassette-animation .cassette .label{border-radius:2%;width:90%;height:60%;position:absolute;top:10%;left:5%}.cassette-animation .cassette .roller{border-radius:2%;width:60%;height:25%;padding:2%;position:absolute;top:35%;left:20%}.cassette-animation .cassette .roller .left,.cassette-animation .cassette .roller .right{aspect-ratio:1;border-radius:50%;height:100%}.cassette-animation .cassette .dent{width:60%;height:20%;position:absolute;bottom:1%;left:20%;transform:perspective(10px)rotateX(3deg)}.cassette-animation .cassette-player{border-style:solid;border-width:4px;border-radius:5%;row-gap:2%;padding:5%}.cassette-animation .cassette-player,.cassette-animation .cassette-player *{border-color:var(--phosphor)}.cassette-animation .cassette-player .tape-deck{aspect-ratio:1.6;margin-inline:-2%;border-style:solid;border-width:2px;border-radius:5%;width:104%;margin-bottom:15%;position:relative}.cassette-animation .cassette-player .tape-circle{aspect-ratio:1;background:var(--phosphor);border-style:solid;border-width:2px;border-radius:50%;width:8%;display:inline-block;position:absolute;top:41%}.cassette-animation .cassette-player .left-circle{left:24%}.cassette-animation .cassette-player .right-circle{right:24%}.cassette-animation .cassette-player .button-row{border-radius:2%}.cassette-animation .cassette-player .button-row>*{aspect-ratio:1;border-style:solid;border-width:2px 0 2px 2px;justify-content:center;align-items:center;width:100%;display:flex}.cassette-animation .cassette-player .button-row>*:last-child{border-right-width:2px}@keyframes cassette-insert{0%{translate:0}to{translate:0 225px}}@keyframes bounce{0%{transform:translateY(0)}40%{transform:translateY(14px)}to{transform:translateY(0)}}.vhs-overlay{z-index:100;background:#000201e6;animation:.14s step-end infinite vhs-flicker;position:fixed;inset:0;overflow:hidden}.vhs-overlay:before{content:"";pointer-events:none;z-index:1;background:repeating-linear-gradient(#0000 0 2px,#0000003d 2px 4px),radial-gradient(92% 92%,#0000 28%,#000000c7 100%);position:absolute;inset:0}.vhs-canvas{width:100%;height:100%;image-rendering:pixelated;mix-blend-mode:screen;opacity:.55;position:absolute;inset:0}.vhs-hud{z-index:2;flex-direction:column;align-items:flex-end;gap:.2rem;font-family:IBM Plex Mono,Courier New,monospace;animation:.19s step-end infinite vhs-flicker;display:flex;position:absolute;top:1.25rem;right:1.5rem}.vhs-play{color:var(--alert);letter-spacing:.12em;text-shadow:0 0 6px rgb(var(--rgb-alert) / .9), 0 0 14px rgb(var(--rgb-alert) / .5);font-size:.8rem;font-weight:700;animation:1.2s step-end infinite play-blink}@keyframes vhs-flicker{0%,93%{opacity:1}94%,96%{opacity:.87}97%,to{opacity:1}}@keyframes play-blink{0%,58%{opacity:1}59%,79%{opacity:0}80%,to{opacity:1}}.glitch-text{color:var(--phosphor);letter-spacing:.12em;font-size:clamp(2rem,6vw,3.5rem);animation:.45s step-end infinite glitch-main;display:block;position:relative}.glitch-text:before,.glitch-text:after{content:attr(data-text);animation-timing-function:step-end;animation-iteration-count:infinite;position:absolute;inset:0}.glitch-text:before{animation:1s linear infinite glitch-before}.glitch-text:after{animation:1s linear infinite glitch-after}@keyframes glitch-main{5%,60%{transform:translate(5px)skew(0deg)}10%,50%{transform:translate(-5px)skew(0deg)}60%{transform:translate(0)skew(5deg)}}@keyframes glitch-before{5%,60%{transform:translate(5px,-5px)}10%,50%{transform:translate(-5px,5px)}60%{transform:translate(5px,-3px)skew(-5deg)}}@keyframes glitch-after{5%,60%{transform:translate(-5px,5px)}10%,50%{transform:translate(-5px,5px)}60%{transform:translate(-5px,3px)skew(5deg)}}.grainy-image-overlay{background:linear-gradient(45deg, var(--phosphor-04) 0, var(--phosphor-60) 100%)}.grainy-image-overlay img{filter:grayscale();-webkit-mask-image:radial-gradient(#000 40%,#0000 75%);mask-image:radial-gradient(#000 40%,#0000 75%)}
