.homepage {
	height: calc(var(--window-height) - var(--header-opened) - var(--two-units));
	margin: var(--two-units) calc(-1 * var(--three-units)) 0;
	overflow: hidden;
}

.homepage > input {
	display: none;
}

.homepage_grid {
	display: grid;
	height: 100%;
	gap: var(--two-units);
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	transform: scale(1);
	transform-origin: calc(100% - var(--three-units)) 0;
	transition: all 1s cubic-bezier(0.77, 0, 0.18, 1);
}

.homepage > input:checked + .homepage_grid {
	transform: scale(2);
	gap: var(--two-units) var(--unit);
}

.homepage_toggle {
	width: var(--two-units);
	height: var(--two-units);
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
	transform: translate(-50%, -50%);
	transition: all 1s cubic-bezier(0.77, 0, 0.18, 1);
	cursor: pointer;
}

.homepage > input:checked + .homepage_grid > .homepage_toggle {
	overflow: visible;
}

.homepage > input:checked + .homepage_grid > .homepage_toggle::before {
	content: "";
	display: block;
	width: calc(var(--three-units) + var(--unit));
	height: var(--window-height);
	position: absolute;
	bottom: 0;
	right: 0;
}

.homepage > input:checked + .homepage_grid > .homepage_toggle::after {
	content: "";
	display: block;
	width: 100vw;
	height: var(--unit);
	position: absolute;
	top: 0;
	left: 0;
}

.homepage > input:checked + .homepage_grid > .homepage_toggle {
	transform: translateY(calc(-1 * var(--half-unit))) translate(-50%, -50%) scale(0.5);
}

.homepage_toggle > svg {
	--offset: calc(0.75 * var(--half-unit));
	--offsetNeg: calc(-0.75 * var(--half-unit));
	width: var(--half-unit);
	height: var(--half-unit);
	position: absolute;
	transition: all 1s cubic-bezier(0.77, 0, 0.18, 1);
}

.homepage_toggle > svg:nth-of-type(1) {
	top: var(--offset);
	left: var(--offset);
}

.homepage--switch .homepage_toggle > svg:nth-of-type(1) {
	transform: translate(
		calc(var(--offsetNeg) - var(--half-unit)),
		calc(var(--offsetNeg) - var(--half-unit))
	);
}

.homepage > input:checked + .homepage_grid > .homepage_toggle > svg:nth-of-type(1) {
	transform: rotate(-90deg);
}

.homepage_toggle > svg:nth-of-type(2) {
	top: var(--offset);
	right: var(--offset);
}

.homepage > input:checked + .homepage_grid > .homepage_toggle > svg:nth-of-type(2) {
	transform: rotate(-180deg);
}

.homepage_toggle > svg:nth-of-type(3) {
	bottom: var(--offset);
	left: var(--offset);
}

.homepage--switch .homepage_toggle > svg:nth-of-type(3) {
	transform: translate(
		calc(var(--offsetNeg) - var(--half-unit)),
		calc(var(--offset) + var(--half-unit))
	);
}

.homepage_toggle > svg:nth-of-type(4) {
	right: var(--offset);
	bottom: var(--offset);
}

.homepage--switch .homepage_toggle > svg:nth-of-type(4) {
	transform: translate(
		calc(var(--offset) + var(--half-unit)),
		calc(var(--offset) + var(--half-unit))
	);
}

.homepage > input:checked + .homepage_grid > .homepage_toggle > svg:nth-of-type(4) {
	transform: rotate(90deg);
}

.homepage_block {
	display: flex;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	position: relative;
}

.homepage_block--informations {
	flex-direction: column;
	padding-right: var(--three-units);
	overflow-x: hidden;
	overflow-y: auto;
	font-size: 2rem;
	line-height: 1.125;
	text-align: center;
	text-transform: uppercase;
}

.homepage_block--informations::before {
	flex-shrink: 0;
	content: "";
	width: 100%;
	height: 1px;
	margin-top: auto;
	position: sticky;
	top: 0;
	background-color: black;
	transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1);
}

.homepage > input:checked + .homepage_grid > .homepage_block--informations::before {
	transform: scaleY(0.5);
}

.homepage_block--informations::after {
	flex-shrink: 0;
	content: "";
	width: 100%;
	height: 1px;
	position: sticky;
	bottom: 0;
	background-color: black;
	transition: transform 0s 0.5s;
}

.homepage > input:checked + .homepage_grid > .homepage_block--informations::after {
	transform: scaleY(0.5);
}

.homepage_block--informations > div {
	padding-top: var(--quarter-unit);
	padding-bottom: var(--two-units);
}

.homepage_block--informations > div:not(:first-child) {
	border-top: 1px solid;
	transition: border-top-width 0s 0.5s;
}

.homepage_block--informations > div > p + p {
	margin-top: var(--two-units);
	padding-top: var(--quarter-unit);
	border-top: 1px solid;
	transition: border-top-width 0s 0.5s;
}

.homepage > input:checked + .homepage_grid > .homepage_block--informations > div,
.homepage > input:checked + .homepage_grid > .homepage_block--informations > div > p + p {
	border-top-width: 0.5px;
}

/* .homepage_block--informations > div:not(:last-child) {
	padding-bottom: var(--unit);
} */

.homepage_opening > div > span + span::before {
	content: "\00a0";
}

/* .homepage_opening > span:nth-of-type(2) + span::before {
	content: ",\00a0";
} */

.homepage_opened {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.homepage_opened > :first-child {
	width: 100%;
}

.homepage_opened > .button {
	position: relative;
	top: 0.1em;
	opacity: 0.25;
	transition: border-width 0s 0.5s;
}

.homepage_opened > .button[href=""] {
	pointer-events: none;
}

.homepage_opened > .button:hover {
	opacity: 1;
}

.homepage_opened > .button--now {
	background-color: var(--now);
	opacity: 1;
}

.homepage
	> input:checked
	+ .homepage_grid
	> .homepage_block--informations
	> .homepage_opened
	> .button {
	border-width: 0.5px;
}

.homepage_block > .event {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	user-select: none;
	transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1);
}

.homepage_block > .event--in {
	transition-duration: 0s;
}

.homepage_block:nth-of-type(1) > .event--in {
	transform: translate(100%, 100%);
}

.homepage_block:nth-of-type(3) > .event--in {
	transform: translate(100%, -100%);
}

.homepage_block:nth-of-type(4) > .event--in {
	transform: translate(-100%, -100%);
}

.homepage_block > .event--out {
	z-index: 1;
}

.homepage_block > .event[data-now]::after {
	display: flex;
	align-items: center;
	justify-content: center;
	content: attr(data-now);
	padding: calc((var(--button) - 0.75rem) / 2) 1em;
	position: absolute;
	top: 0;
	background-color: var(--now);
	color: var(--now-text);
	font-size: 0.75rem;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
}

.homepage_block > .event > .event_illustration {
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
	height: 100%;
	overflow: visible;
}

.homepage_block > .event > .event_illustration > .event_image {
	/* width: 100%; */
	height: 100%;
	/* min-height: 100%; */
	/* padding-top: 100%; */
	background-color: currentColor;
}

.homepage_block > .event > .event_illustration > .event_image > picture {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0.75;
}

.homepage_block > .event > .event_illustration > .event_image > picture > img {
	height: 100%;
}

.homepage_block > .event > .event_informations {
	display: flex;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 0.5em;
	justify-content: center;
	padding: var(--unit);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: white;
	text-align: center;
}

.homepage_block > .event:hover > .event_informations {
	color: var(--accent);
}

.homepage_block > .event[data-now]:hover > .event_informations {
	color: var(--now);
}

.homepage_block > .event > .event_informations > :is(.event_title, .event_date, .event_year) {
	font-size: 2rem;
	line-height: 1.125;
	text-shadow: 0 0 4px black;
}

.homepage_block > .event > .event_informations > :not(.event_title, .event_date, .event_year) {
	display: none;
}

.homepage_block > .event > .event_informations > .event_title {
	width: 100%;
}

.homepage_arrow {
	--arrow: 5vw;
	--arrowNeg: -5vw;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}

.homepage--switch .homepage_arrow {
	transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1);
}

.homepage_block:nth-of-type(1) > .homepage_arrow {
	transform: translate(100%, 100%) translate(var(--arrow), var(--arrow));
}

.homepage--switch .homepage_block:nth-of-type(1) > .homepage_arrow {
	transform: translate(100%, 100%);
}

.homepage--reveal.homepage--switch .homepage_block:nth-of-type(1) > .homepage_arrow {
	transform: translate(0, 0);
}

.homepage_block:nth-of-type(3) > .homepage_arrow {
	transform: translate(100%, -100%) translate(var(--arrow), var(--arrowNeg));
}

.homepage--switch .homepage_block:nth-of-type(3) > .homepage_arrow {
	transform: translate(100%, -100%);
}

.homepage--reveal.homepage--switch .homepage_block:nth-of-type(3) > .homepage_arrow {
	transform: translate(0, 0);
}

.homepage_block:nth-of-type(4) > .homepage_arrow {
	transform: translate(-100%, -100%) translate(var(--arrowNeg), var(--arrowNeg));
}

.homepage--switch .homepage_block:nth-of-type(4) > .homepage_arrow {
	transform: translate(-100%, -100%);
}

.homepage--reveal.homepage--switch .homepage_block:nth-of-type(4) > .homepage_arrow {
	transform: translate(0, 0);
}

.homepage_arrow > svg {
	width: var(--arrow);
	height: var(--arrow);
	position: absolute;
}

.homepage_arrow > svg > path {
	fill: white;
}

.homepage_block:nth-of-type(1) > .homepage_arrow > svg {
	bottom: 100%;
	right: 100%;
}

.homepage_block:nth-of-type(3) > .homepage_arrow > svg {
	top: 100%;
	right: 100%;
}

.homepage_block:nth-of-type(4) > .homepage_arrow > svg {
	top: 100%;
	left: 100%;
}

@media (max-width: 1023px) {
	.homepage_arrow {
		--arrow: 7.5vw;
		--arrowNeg: -7.5vw;
	}
}

@media (max-width: 600px) {
	.homepage_arrow {
		--arrow: 10vw;
		--arrowNeg: -10vw;
	}
}