/* 2025.03 */
/* Effect: https://codepen.io/2kool2/pen/NWRwNrR */
/* Image ZhQCZjr9fHo: https://unsplash.com/photos/group-of-people-in-front-of-stage-ZhQCZjr9fHo */
/* Image dFp7Oq2TdSw: https://unsplash.com/photos/compact-disc-lot-dFp7Oq2TdSw */

:root {
	--bgimage: url('src/ZhQCZjr9fHo.jpg'); 
}
  
* { margin: 0; padding: 0; box-sizing: border-box; }
body { height: 100vh;  width: 100%; display: grid; place-items: center; }
[hidden] {display:none;}

header { z-index: 10; position: fixed; }
h1 { height: 50vh; width: 50vh; max-height: 90vw; max-width: 90vw; background-image: url('src/logo.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; cursor: pointer; }
h1 span{ font-size:0; }
h1 {  }
.glitch { z-index: 1; position: fixed; top: -5%; left: -5%; width: 110vw; height: 110vh; background: url('src/static.jpg') no-repeat center center; background-size: cover; animation: glitch 3s infinite; }
.background { position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 1; position: fixed; background-position: center; background-size: cover; animation: hueSatRotate 24s infinite linear; background-image: var(--bgimage); }
.background:after { content: ""; display: block; position: absolute; width: 100%; height:100%; background: inherit; mix-blend-mode: screen; animation: contrastRotate 18s infinite linear; }
.swirl { display: block; position: absolute; width: 200%; height: 200%; z-index: 3; top: -50%; left: -50%; filter: blur(12px); opacity: .35; mix-blend-mode: screen; fill: #fff; mix-blend-mode: multiply; fill: #000; animation: rotation 120s infinite linear; }

@keyframes glitch {
	0% { transform: translate(0,0) }
	10% { transform: translate(-1%,-1%) }
	20% { transform: translate(-2%,1%) }
	30% { transform: translate(1%,-2%) }
	40% { transform: translate(-1%,3%) }
	50% { transform: translate(-2%,1%) }
	60% { transform: translate(3%,2%) }
	70% { transform: translate(0,2%) }
	80% { transform: translate(-3%,0) }
	90% { transform: translate(2%,1%) }
	100% { transform: translate(1%,0) }
}

@keyframes hueSatRotate {
	0% { filter: hue-rotate(0deg) saturate(100%); }
	50% { filter: hue-rotate(180deg) saturate(300%); }
	100% { filter: hue-rotate(359deg) saturate(100%); }
}

@keyframes contrastRotate {
	50% { filter: contrast(800%); }
	100% { filter: contrast(100%); }
}

@keyframes rotation {
	to { transform: rotate(359deg); }
  }