*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 16px;
	--color-text: #322b43;
	--color-bg: hsl(180deg 49% 92%);
	--color-link: #322b43;
	--color-link-hover: #322b43;
	--frame-font-size: 0.85rem;
	--padding-frame: 1rem;
	--color-line: #8a88bf;
	--side-space: 0;
	--gap: 1rem;
	--size-text: 1rem;
	--size-meta: 0.85rem;
	--margin-text: 5vw;
	--color-selected: rgba(114,121,239,0.7);
}

html {
	background: var(--color-bg);
	height: 100%;
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	height: 100%;
	font-family: sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: radial-gradient(at 40% 40%, #74519c, #0000), radial-gradient(at 60% 60%, #a4c5ec, #0000);
    background-blend-mode: lighten;
    overflow: hidden;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #9da2d0;
}

.js .loading::after {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border-radius: 50%;
	box-sizing: border-box;
	width: 8rem;
	height: 8rem;
	border: 3px solid hsla(0, 0%, 100%, 0.5);
	border-top-color: hsla(0, 0%, 100%, 0.8);
	animation: loaderAnim 0.7s linear infinite forwards;

}

@keyframes loaderAnim {
	to {
		transform: rotate(1turn);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

.oh {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.oh__inner {
	display: inline-block;
	will-change: transform;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}

main {
	display: grid;
	align-items: center;
	height: 100vh;
	position: relative;
}

.frame {
	color: var(--color-title);
	padding: var(--padding-frame);
	text-transform: uppercase;
	height: auto;
    font-size: var(--frame-font-size);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.frame a:not(.frame__title-back),
.hover-line {
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	align-self: start;
}

.frame a:not(.frame__title-back)::before, 
.hover-line::before {
	content: '';
	height: 1px;
	width: 100%;
	background: currentColor;
	position: absolute;
	top: 90%;
	transition: transform 1s cubic-bezier(0.84, 0, 0.16, 1);
	transform-origin: 0% 50%;
}

.frame a:not(.frame__title-back):hover::before,
.hover-line:hover::before {
	transform: scaleX(0);
	transform-origin: 100% 50%;
}

.frame__title {
	grid-area: title;
	display: flex;
	align-items: start;
}

.frame__title-main {
	font-size: var(--frame-font-size);
	margin: 0;
	font-weight: 400;
}

.frame__title-back {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.frame__title-back span {
	display: none;
}

.frame__title-back svg {
	fill: currentColor;
}

.frame__prev {
	grid-area: prev;
	margin: 0.5rem 0;
	display: inline-block;
}

.content {
	display: grid;
	width: 100%;
	grid-template-rows: auto 50px 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: 'title' 'tooltip' 'text';
	padding: var(--padding-frame);
	font-size: var(--size-text);
	line-height: 1.45;
	grid-gap: var(--gap);
	position: relative;
}

.content__title-wrap {
	grid-area: title;
}

.content__pretitle {
	font-size: var(--size-meta);
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	justify-items: start;
}

.meta,
.back {
	position: relative;
	grid-area: 1 / 1 / -1 / -1;
}

.back {
	pointer-events: none;
}

.back .oh__inner {
	transform: translateY(100%);
}

.content--open .back {
	pointer-events: auto;
}

.content--open .meta {
	pointer-events: none;
}

.content__title {
	font-family: campaign-serif, sans-serif;
	font-weight: normal;
	font-size: clamp(2rem,10vw,4rem);
	margin: 0 0 0.5rem 0;
	line-height: 1;
}

.content__text,
.gallery {
	grid-area: text;
}

.content__text {
	margin-right: var(--margin-text);
	transition: opacity 0.5s;
	will-change: opacity;
}

.content--open .content__text {
	opacity: 0;
	pointer-events: none;
}

.content__text p {
	margin: 0;
}

.gallery {
	position: relative;
	display: grid;
	pointer-events: none;
}

.content--open .gallery {
	pointer-events: auto;
}

.gallery__title {
	position: absolute;
	top: 100%;
	font-size: var(--size-meta);
}

.gallery__title .oh__inner {
	transform: translateY(100%);
}

.gallery--fullscreen {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}

.tooltip {
	grid-area: tooltip;
	pointer-events: none;
	font-size: 0.85rem;
	opacity: 0;
	display: flex;
	gap: 1rem;
}

.tooltip__text {
	margin: 0;
}

.tooltip__img-wrap {
	display: grid;
}

.tooltip__img {
	grid-area: 1 / 1 / -1 / -1;
	width: 50px;
	height: 50px;
	opacity: 0;
	will-change: transform;
}

.gallery .tooltip__img {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.gallery--fullscreen .tooltip__img {
	cursor: zoom-out;
}

.tooltip__img--current {
	opacity: 1;
}

.tooltip__img-inner {
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
}

.tooltip strong {
	display: block;
	margin-top: 1rem;
}

.line {
	background: var(--color-line);
	position: fixed;
	will-change: transform;
	pointer-events: none;
}

.line--v {
	height: 100%;
	width: 1px;
	top: 0;
}

.line--h {
	width: 100%;
	height: 1px;
	left: 0;
}

.nav {
	grid-area: tooltip;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	grid-gap: 1rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s;
}

.content--open .nav {
	opacity: 1;
	pointer-events: auto;
}

.nav__img {
	max-width: 160px;
	cursor: not-allowed;
	will-change: transform;
}

.nav__img--selected {
	border: 2px solid var(--color-selected);
}

.nav__img-inner {
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
}

.nav--fullscreen {
	position: fixed;
	bottom: 6vh;
	left: 10%;
	width: 80%;
	height: 70px;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	justify-content: center;
}

@media screen and (min-width: 53em) {
	:root {
		--padding-frame: 1.5rem;
		--gap: 2rem;
		--size-text: 1.45rem;
	}
	.frame {
		position: fixed;
		margin: 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		align-content: space-between;
		height: 100vh;
		grid-template-areas: 'title ... sponsor' 'prev ... ...';
		grid-gap: 2rem;
		justify-content: start;
    	justify-items: start;
	}
	.frame__prev {
		margin: 0;
	}
	.content {
		grid-template-rows: auto 1fr;
		grid-template-columns: var(--side-space) 1fr 215px var(--side-space);
		grid-template-areas: '... title ... ...' '... text tooltip ...';
	}
	.content::before,
	.content::after {
		opacity: 0.3;
		position: absolute;
		pointer-events: none;
		bottom: calc(100% + 1rem);
		left: calc(var(--gap) + var(--padding-frame));
		right: calc(215px + var(--gap) + var(--padding-frame) + var(--margin-text));
		content: "This is claimed to help in the acceptance of robots in certain replicative behaviors which are usually performed by people. Such robots attempt to replicate walking, lifting, speech, cognition, or any other human activity. Many of today's robots are inspired by nature, contributing to the field of bio-inspired robotics";
		transition: transform 0.5s, opacity 0.5s;
	}

	.content::after {
		top: calc(100% + 1rem);
		bottom: auto;
		content: "The concept of creating robots that can operate autonomously dates back to classical times, but research into the functionality and potential uses of robots did not grow substantially until the 20th century. ";
	}

	.content--open::before {
		opacity: 0;
		transform: translateY(-1rem);
	}

	.content--open::after {
		opacity: 0;
		transform: translateY(1rem);
	}
	.nav {
		grid-auto-rows: 1fr;
		grid-auto-flow: row;
	}
	.content--open .nav.nav--fullscreen {
		grid-auto-rows: 1fr;
		grid-auto-flow: column;
	}
	.tooltip {
		flex-direction: column;
	}
	.tooltip__img {
		width: 100%;
		aspect-ratio: 1.75;
		height: auto;
	}
}


@media screen and (min-width: 70em) {
	:root {
		--side-space: 15vw;
	}
	.frame {
		grid-template-columns: var(--side-space) 1fr 215px var(--side-space);
		grid-template-areas: 'title ... sponsor sponsor' 'prev ... ... ...';
	}
	.content::before,
	.content::after {
		left: calc(var(--side-space) + var(--gap) + var(--padding-frame));
		right: calc(215px + var(--side-space) + var(--gap) + var(--padding-frame) + var(--margin-text));
	}
}