:root {
	--color-primary: #DAA520; /* Slightly darker gold for elegance */
	--color-background: #0A0A0A; /* Deeper black for sophistication */
	--color-text: #fafafa;
	--color-accent: rgba(218, 165, 32, 0.1); /* Subtle gold for hover effects */
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 2rem;
    }


    .loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-background);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 9999;
    }

    .loading_text {
	color: #fafafa;
	font-size: 1.2rem;
	margin-top: 1rem;
	letter-spacing: 2px;
    }
    
    .spinner {
	border: 3px solid rgba(218, 165, 32, 0.1);
	border-top: 3px solid var(--color-primary);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
    }
    
    
    body {
	height: 100vh;
	width: 100vw;
	background-color: var(--color-background);
	margin: 0;
	overflow: hidden;
	font-family: "Montserrat Alternates", sans-serif;
	font-optical-sizing: auto;
    }
    
    #image-track {
	display: flex;
	gap: 4vmin;
	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%; /* Moved down from 50% to 60% */
	transform: translate(0%, -50%);
	width: auto;
    }
    
    #image-track > .image {
	width: 40vmin;
	height: 56vmin;
	object-fit: cover;
	cursor: pointer;
	user-select: none;
	-webkit-user-drag: none;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	filter: brightness(0.9);
	transform: scale(0.7);
	will-change: transform, filter, opacity;
    }
    
    #image-track > .image:hover {
	transform: scale(1.02);
	filter: brightness(1);
	box-shadow: 0 12px 48px rgba(218, 165, 32, 0.2);
    }
    
    #fullscreen-title {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	color: var(--color-text);
	font-size: 3.5rem;
	cursor: pointer;
	text-align: center;
	padding: var(--spacing-md);
	border-radius: 5px;
	transition: opacity 0.8s ease, transform 0.8s ease;
	will-change: opacity, transform;
    }
    
    #fullscreen-title::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	background-color: var(--color-text);
	position: absolute;

	left: 50%;
	transform: translateX(-50%);
	transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    #fullscreen-title:hover::after {
	width: 80%;
    }
    
    canvas {
	display: block;
	width: 100vw;
	height: 100vh;
    }
    
    .span {
	display: inline-block;
	width: 100px;
    }
    
    #center-svg {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	z-index: 10;
	transition: transform 0.8s ease 0.6s;
	pointer-events: none;
    }
    
    #center-svg svg,
    #center-svg-left svg,
    #center-svg-right svg {
	width: 30px;
	height: 30px;
	fill: var(--color-text);
	opacity: 0.9;
    }
    
    #center-svg-left,
    #center-svg-right {
	position: fixed;
	top: 50%;
	z-index: 100;
	transition: transform 0.8s ease 0.2s;
	pointer-events: none;
    }
    
    #center-svg-left {
	left: 15vw;
	transform: translate(-50%, -50%) scale(0);
    }
    
    #center-svg-right {
	right: 15vw;
	transform: translate(50%, -50%) scale(0);
    }
    
    #bottom-title {
	position: fixed;
	bottom: var(--spacing-lg);
	left: 0;
	right: 0;
	text-align: center;
	color: var(--color-text);
	padding: var(--spacing-sm);
	font-size: 2.5rem;
	z-index: 1;
	transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    .animated-title {
	animation: scaleUp 1.5s ease-in-out;
    }
    
    #animatedSquare {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 5px;
	background: var(--color-text);
	border-radius: 50%;
	transition: all 0.5s ease;
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
	opacity: 1;
	animation: expandSquare 0.6s forwards, contractSquare 0.6s 0.6s forwards;
    }

    @keyframes fadeIn {
	from {
	    opacity: 0;
	    transform: translateY(20px);
	}
	to {
	    opacity: 1;
	    transform: translateY(0);
	}
    }


    #static-title, #bottom-title {
	animation: fadeIn 1s ease-out forwards;
    }

    .image {
	animation: fadeIn 1s ease-out forwards;
	animation-delay: calc(var(--i) * 0.1s);
    }

    #static-title {
	font-size: 2.5rem;
	letter-spacing: 2px;
	background: linear-gradient(180deg, var(--color-primary) 0%, #FFE975 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: uppercase;
	padding: 2rem 0;
	position: fixed;
	top: 2%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold; /* Added bold styling */
    }
    

    #static-title-small {
	position: fixed;
	top: 10%;
	left: 50%;
	font-size: 2rem;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: var(--spacing-sm) 0;
	font-weight: bold; /* Added bold styling */
    }
    
    #static-title-small .title-text,
    #static-title-small .title-year {
	background: linear-gradient(180deg, var(--color-primary) 0%, #FFE975 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    }
    
    #static-title-small .title-year {
	margin-top: 0.5rem;
    }

    /* Remove the ::after pseudo-element */
#static-title-small::after {
	content: none;
    }
    
    #menu-button {
	position: fixed;
	top: 13%;
	right: 15%;
	color: var(--color-text);
	font-size: 1.5rem;
	cursor: pointer;
    }
    
    #menu-content {
	position: fixed;
	top: 17%;
	right: 7%;
	transform: translateX(50%);
	background-color: #202020;
	color: var(--color-text);
	padding: var(--spacing-md);
	border-radius: 0 0 8px 8px;
	display: none;
	z-index: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	width: 15%;
	text-align: center;
    }
    
    #menu-content ul {
	list-style: none;
	padding: 0;
	margin: 0;
    }
    
    #menu-content ul li {
	margin-bottom: var(--spacing-sm);
    }
    
    #menu-content ul li a {
	color: var(--color-text);
	text-decoration: none;
	font-size: 1.5rem;
    }
    
    #menu-content ul li a:hover {
	text-decoration: underline;
    }
    
    @keyframes svgAppear {
	from {
	    transform: scale(0) translate(-50%, -50%);
	    top: 50%;
	    left: 50%;
	}
	to {
	    transform: scale(1) translate(-50%, -50%);
	}
    }
    
    .animated-svg {
	animation: svgAppear 0.6s ease-in-out;
    }
    
    @keyframes expandSquare {
	to {
	    width: 10vw;
	    border-radius: 50%;
	    left: 50%;
	    transform: translateX(-50%);
	}
    }
    
    @keyframes contractSquare {
	from {
	    width: 10vw;
	    border-radius: 50%;
	    left: 50%;
	    transform: translateX(-50%);
	}
	to {
	    width: 0;
	    border-radius: 50%;
	    left: 50%;
	    transform: translateX(-50%);
	    opacity: 0;
	}
    }
    
    @keyframes slideIn {
	from {
	    transform: translateX(25%);
	}
	to {
	    transform: translateX(0);
	}
    }
    
    @keyframes slideOut {
	from {
	    transform: translateX(0);
	}
	to {
	    transform: translateX(-25%);
	}
    }
    
    @keyframes rollOut {
	from {
	    transform: translateY(100%);
	    opacity: 0;
	}
	to {
	    transform: translateY(0);
	    opacity: 1;
	}
    }
    
    @keyframes rollIn {
	from {
	    transform: translateY(0);
	    opacity: 1;
	}
	to {
	    transform: translateY(-100%);
	    opacity: 0;
	}
}
	@keyframes grow {
		from {
			transform: scale(0.3);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	/* Stil für den Titel, der die Animation anwendet */
	#static-title.animated {
		animation: grow 1s ease-out forwards;
	}

	#title-text.animated {
		animation: grow 1s ease-out forwards;
	}


 
    
    .title-animating-out {
	animation: rollIn 0.5s forwards;
    }
    
    .title-animating-in {
	animation: rollOut 0.5s forwards;
    }
    
    .new-image {
	animation: slideIn 1s forwards;
    }
    
    
    .old-image {
	animation: slideOut 1s forwards;
    }
    
    #static-title-small {
	display: none;
    }
    
    @media only screen and (max-width: 768px) {

	#fullscreen-title, #bottom-title {
		font-size: 1.875rem;
	    }

	#menu-button, #menu-content, #static-title {
	    display: none;
	}
	
	#static-title-small {
	    display: flex; /* Show on mobile */
	}
	
	#image-track {
	    top: 60%; /* Adjust the image track position for mobile */
	}

	#image-track > .image {
		/* Grundlegende Transformation zurücksetzen - KEIN !important verwenden */
		transform: scale(1.0); 
		/* Schnellere Übergänge für flüssigere mobile Erfahrung */
		transition: transform 0.3s ease-out, filter 0.3s ease-out;
		/* Vorbereitung der Eigenschaften für Änderungen */
		will-change: transform, filter, z-index;
		/* Hardwarebeschleunigung erzwingen */
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		/* 3D-Rendering erzwingen */
		transform-style: preserve-3d;
		/* Anfängliche Skalierung */
		transform: scale(1.0);
		width: 48vmin;
		height: 67vmin;
	    }
	    
	    /* Bild-Hover-Effekte für Mobile deaktivieren, da wir eigene Skalierung haben */
	    #image-track > .image:hover {
		transform: none;
		filter: none;
		box-shadow: none;
	    }
	    
	    /* Verbessertes Image-Track-Container-Styling */
	    #image-track {
		perspective: 1000px;
		top: 50%;
		transform: translate(0%, -50%);
	    }
    }
    

    @media only screen and (max-width: 768px) {
	#bottom-title {
	    bottom: 10vh; /* Adjust this value as needed */
	}
    }