/*
Theme: RAAK
Theme_URI: https://www.lemon.nl
Version: 32
Date: 3-2-2024
Author: Roeland ten Holder | Lemon
Author URI: roeland@lemon.nl
*/

/** ******************************** **/
/**      _____                       **/
/**    _(  _  )__________________    **/
/**   ( | (___)     | ____ |  _  |   **/
/**   |_|_______|_|_|______|_| |_|   **/
/**                                  **/
/**            www.lemon.nl          **/
/**                                  **/
/** ******************************** **/

:root {
	--time: 0.8s;
	--halftime: 0.4s;
}

.navbar .menu-item-999 {
	position: relative;
}

.navbar .menu-item-999 a {
	display: inline-block;
	position: relative;
}

.navbar .has-papierrol-container {
	position: absolute;
	top: -40px;
	left: -20px;
	/* height: 720px; */
	width: calc(100% + 38px);
	opacity: 1;
}

.navbar .papierrol-container {
	top: 80px;
	position: absolute;
	width: 100%;
	height: 50px;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.navbar .menu-item-999:hover .papierrol-container {
	animation: rollout var(--time) ease-in;
	animation-fill-mode: forwards;
}

@keyframes rollout {
	from { transform: translateY(0); }
	to { transform: translateY(640px); }
}

.navbar .papierrol-zijkant-container {
	position: absolute;
	top: 3px;
	left: -12px;
	width: 46px;
	height: 46px;
	transform: perspective(75em) rotateY(-66deg);
	border-radius: 50%;
	overflow: hidden;
}

.navbar .papierrol-zijkant-container::after {
	position: absolute;
	width: 46px;
	height: 100%;
	content: " ";
	top: 0;
	left: 0;
	box-shadow: inset 0px -175px 80px 0px rgba(125,80,0,0.4);
	z-index: +1;
}

.navbar .papierrol-zijkant-midden {
	position: absolute;
	width: 12px;
	height: 12px;
	top: 17px;
	left: 17px;
	border-radius: 50%;
	background-image: url('images/100dingen/papier-rol-uiteinde-midden.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 46px 46px;
	opacity: 0.5;
	opacity: 1;
	z-index: +2;
}

.navbar .papierrol-papier-container {
	position: relative;
	top: 3px;
	left: 11px;
	height: 46px;
	width: calc(100% - 0px);
	overflow: hidden;
	border-radius: 0% 10% 10% 0% / 0% 50% 50% 0%;
	border: 1px solid rgba(125,80,0,0.3);
	border-bottom: 1px solid rgba(125,80,0,0.45);
	box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.3);
}

.navbar .papierrol-zijkant {
	width: 46px;
	height: 100%;
	background-image: url('images/100dingen/papier-rol-uiteinde.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 46px 46px;
}

.navbar .menu-item-999:hover .papierrol-zijkant {
	animation: spin var(--time) linear 1;
	animation-fill-mode: forwards;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.navbar .papierrol-papier {
	position: absolute;
	top: -380px;
	left: -70px;
	height: 1800px;
	width: 280px;
	background-image: url('images/100dingen/papier-vlak.jpg');
	background-position: center 0;
	background-repeat: repeat;
	background-size: 200px 190px;
}

.navbar .menu-item-999:hover .papierrol-papier {
	animation: roll var(--halftime) linear 2;
	animation-fill-mode: forwards;
}

@keyframes roll {
	0%   { transform: translateX(-70px) translateY(-380px); }
	100% { transform: translateX(-70px) translateY(0px); }
}

.navbar .papierrol-papier-container::after {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-image: url('images/100dingen/papier-rol.jpg');
	background-position: center 0;
	background-repeat: repeat;
	background-size: 200px 46px;
	opacity: 0.25;
}

.navbar .papier-container {
	width: calc(100% - 1px);
	padding: 100px 0 0;
	height: 107px;
	overflow: hidden;
	margin-left: 2px;
	animation-fill-mode: forwards;
	box-shadow: 2px 2px 6px 1px rgba(0,0,0,0.15);
}

.navbar .menu-item-999:hover .papier-container {
	animation: paperheight var(--time) ease-in 1;
	animation-fill-mode: forwards;
}

@keyframes paperheight {
	0%   { height: 107px; }
	100% { height: 750px; }
}

.navbar .menu-item .papier-container .papiercontent {
	padding: 0;
	padding: 5px 0;
	aspect-ratio: 1/1;
	width: 100%;
}

.navbar .logo-100-dingen {
	margin: 10px 12px 25px 12px;	
	transform: rotate(-4deg);
	max-width: calc(100% - 24px);
}

.navbar .visual {
	display: inline-block;
	margin: 8px 8px;
	transition: all 0.1s;
	cursor: pointer;
	max-height: calc(100% - 16px);
}

.navbar .visual-1 			{ transform: rotate(-10deg); }
.navbar .visual-9  			{ transform: rotate(5deg); }
.navbar .visual-24 			{ transform: rotate(45deg); }
.navbar .visual-66 			{ transform: rotate(-10deg); }
.navbar .visual-31 			{ transform: rotate(-15deg); }

.navbar .visual-1:hover 	{ transform: rotate(-5deg); }
.navbar .visual-9:hover   	{ transform: rotate(-5deg); }
.navbar .visual-24:hover  	{ transform: rotate(40deg); }
.navbar .visual-66:hover  	{ transform: rotate(-5deg); }
.navbar .visual-31:hover  	{ transform: rotate(-20deg); }