.background { position: fixed; height: 100vh; width: 100%; z-index: -1; overflow: hidden; }
.background-abs { position: absolute; }
.background-foot { bottom: 0; }

.ani-k,
.ani-z { 
	position: absolute;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards; 
	width: 3vw;
	height: auto;
}

.ani-k { 
	animation-name: ani-k; 
}

.ani-z { 
	animation-name: ani-z; 
}

@keyframes ani-z {
	0% { transform: scale(0) rotate(0deg); }
	50% { transform: scale(1) rotate(180deg); }
	100% { transform: scale(0) rotate(360deg); }
}

@keyframes ani-k {
	0% { opacity: 0; transform: translateY(-10vh); }
	20% { opacity: 1; transform: translateY(0vh); }
	100% { opacity: 1; transform: translateY(100vh); }
}

.cista-izvorska {
	transform-origin: bottom center;
    animation: bottleShake 4s infinite;
}

@keyframes bottleShake {
    0%, 85%, 100% {
        transform: rotate(0deg);
    }
    88% {
        transform: rotate(-5deg);
    }
    91% {
        transform: rotate(5deg);
    }
    94% {
        transform: rotate(-3deg);
    }
    97% {
        transform: rotate(3deg);
    }
}


.oblak {
	width: 12vw;
	height: auto;
	position: absolute;
	animation-name: oblak;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.oblak-inv {
	animation-direction: reverse;
}

@keyframes oblak {
	from { left: 101vw; }
	to { left: -16vw; }
}

@media screen and (max-width: 768px) {

	.oblak {
		width: 30vw;
	}

	.ani-z,
	.ani-k {
		width: 8vw;
		height: 8vw;
	}
}

.merch-img-wrapper {
	-webkit-mask-image: url('/assets/images/mask-video.svg?v=20260615144334');
	mask-image: url('/assets/images/mask-video.svg?v=20260615144334');
	mask-repeat: no-repeat;
	position: relative;
	aspect-ratio: 16 / 9;
	mask-size: contain;
}

.merch-img-wrapper iframe {
	width: 100%;
	height: 100%;
}