@charset "utf-8";
#visual {
	position: relative;
	width: 100%;
	height: 98vh;
	min-height: 780px;
	overflow: hidden;
}
.image-container {
	width: 100%;
	height: 100%;
	position: relative;
}
#year-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transform: scale(1.2);
	transition: transform 6s ease, opacity 1s ease;
}
#year-image.show {
	opacity: 1;
	transform: scale(1);
}
.year-text {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 25vw;
	color: rgba(255,255,255,0.5);
	transform: translateY(-50%) translateX(-50%);
	transition: transform 1s ease, opacity 1s ease;
	font-family: "oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
.year-image-transition {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.);
  transition: transform 6s ease, opacity 1s ease;
}
.year-image-transition.show {
  opacity: 1;
  transform: scale(1);
}
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: black;
	opacity: 0;
	pointer-events: none;
	z-index: 9999;
	transition: opacity 1s ease;
}
.overlay.show {
	opacity: 1;
}
.final-hero {
	width: 100%;
	height: 95vh;
	min-height: 780px;
	background: #111 url('../img/2025.webp') 70% center/cover no-repeat;
	color: white;
	flex-direction: column;
	justify-content: center;
	font-size: 2rem;
	padding: 5vw;
	transition: opacity 1.5s ease, transform 1.5s ease;
	display: none;
}
.final-hero.show {
	display: flex;
}
.final-hero h1 b,
.final-hero h1 span,
.final-hero h1 small{
	display: block;
	line-height: 1.1
}
.final-hero h1 em,
.final-hero h1 span{
    font-size: clamp(21px, 5vw, 76px);
	font-weight: 900;
}
.final-hero h1 em{
	color: var(--red);
}
.final-hero small {
	font-size: clamp(21px, 1.5vw, 28px);
	font-weight: 700;
}
.final-hero h1 b{
	font-size: clamp(88px, 8vw, 180px);
	font-weight: 900;
}
@media screen and (max-width: 780px) {
	#visual {
		min-height: 480px;
	}
	.year-text {
		font-size: 45vw;
	}
	.final-hero {
		background: #111 url('../img/2025.jpg') 75% center/cover no-repeat;
		justify-content: flex-end;
		min-height: 380px;
		height: 80vh;
		padding: 1em 0.5em;
	}
	.final-hero h1 span,
	.final-hero h1 small,
	.final-hero h1 b{
		color: #fff;
	}
	.final-hero h1 em,
	.final-hero h1 span{
		font-size: 7.9vw;
	}
	.final-hero small {
		font-size: 4.8vw;
	}
	.final-hero h1 b {
    font-size: 17vw;
	}
}