/* =========================
   VARIABLES
========================= */

:root{
	--bg-main: rgb(20,20,20);
	--bg-card: rgb(60,60,60);
	--bg-card-hover: rgb(70,70,70);
	--bg-overlay: rgba(17,17,17,.9);

	--text-main: rgb(229,229,229);
	--text-muted: rgb(179,179,179);

	--shadow-dark: rgb(20,20,20);
	--shadow-light: rgb(80,80,80);

	--radius-large: 20px;
	--radius: 12px;
	--radius-small: 6px;

	--nav-dark: rgba(255, 255, 255, 0.2);
	--nav-light: rgba(255, 255, 255, 0.3);

	--transition: .2s;
}


/* =========================
   MAIN
========================= */

html{
	scroll-behavior: smooth;
}

body{
	margin: 0;
	overflow-x: hidden;

	background: var(--bg-main);
	color: var(--text-main);

	font-family: Helvetica, Arial, sans-serif;

	user-select: none;
}

canvas{
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

button,
a{
	color: var(--text-main);
	font-family: inherit;
}

button{
	cursor: pointer;
	touch-action: manipulation;
}

.hidden{
	display: none !important;
}


/* =========================
   HEADER
========================= */

.site-header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	width: 100%;
	height: 80px;

	background: linear-gradient(to bottom, black, transparent);
	transition: background-color .3s;
}

.site-header.scrolled{
	background-color: black;
}

.site-header.playing{
	background: black;
}

.header-inner{
	display: flex;
	align-items: center;
	justify-content: flex-start;

	height: 100%;
	padding: 0 4%;
}

.logo img{
	width: 88px;
	margin-right: 25px;
}


/* =========================
   NAVIGATION
========================= */

.nav ul{
	display: flex;
	list-style: none;

	margin: 0;
	padding: 0;
}

.nav li{
	margin: 0 4px;
	border-radius: var(--radius-large);
}

.nav a{
	padding: 12px 18px;
	color: var(--text-muted);
	border-radius: var(--radius-large);
	text-decoration: none;
	font-weight: bold;

	transition: background-color var(--transition),
				text-shadow var(--transition);
}

.nav a:hover{
	background-color: var(--nav-dark);
}

.nav .selected, .nav .selected:hover{
	color: var(--text-main);
	background-color: var(--nav-light);
}


/* =========================
   SEARCH
========================= */

#search{
	margin-left: auto;
	position: relative;
	height: 42px;
	width: 250px;
}

#search-btn{
	position: absolute;
	top: 0;
	right: 0;
	height: 40px;
	width: 40px;
	cursor: pointer;
	border-radius: var(--radius-large);
	transition: background-color var(--transition);
}

#search-btn:hover{
	background-color: var(--nav-light);
}

#search-icon{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	height: 24px;
	width: 24px;
	margin: 8px;
}

#search-input{
	display: block;
	position: absolute;
	top: -1px;
	right: -1px;
	width: 184px;
	height: 16px;
	background-color: var(--bg-main);
    border: 1px solid var(--shadow-light);
    border-radius: 22px;
    padding: 12px 48px 12px 16px;
    color: var(--text-main);
    caret-color: var(--text-main);
	transition: var(--transition);
}

#search-input.search-collapsed{
	padding: 12px;
	width: 15px;
	opacity: 0;
}

/* =========================
   MENU TOGGLE
========================= */

.menu-toggle{
	position: absolute;
	top: 0;
	right: 0;

	display: none;

	width: 80px;
	height: 100%;

	border: none;
	background: none;

	font-size: 28px;
}

.menu-toggle:active{
	background: rgb(40,40,40);
}


/* =========================
   PLAYER
========================= */

.player{
	display: block;
	width: 100%;
	aspect-ratio: 2/1;
	margin: 0 auto;

	background: black;
	box-shadow: 0 0 16px black;
}

.player.playing{
	margin-top: 80px;
	max-height: calc(100vh - 80px);
	object-fit: contain;
	aspect-ratio: auto;
}

.current-title{
	background: black;
	text-align: center;
    line-height: 34px;
}

.current-title a{
	font-size: 0.8rem;
	padding: 4px 8px;
	transition: all .3s;
}
.current-title a:hover{
	color: var(--shadow-dark);
	background-color: var(--text-main);
}
/* =========================
   CATALOGUE
========================= */

.main-container h1{
	margin: 0;
	padding: 80px 0 10px 0;
	text-align: center;
}

.grid{
	display: grid;

	grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
	column-gap: 20px;
	row-gap: 40px;

	margin: 20px 0;

	justify-items: center;
}


/* =========================
   POSTERS
========================= */

.poster{
	position: relative;
	width: 200px;
	height: 300px;

	border-radius: var(--radius);
	box-shadow: 0 0 16px black;

	transition: transform var(--transition),
				box-shadow var(--transition);

	will-change: transform;
}

.poster:hover{
	transform: scale(1.05);
	box-shadow: 0 0 16px white;
}

.poster img{
	display: block;
	width: 100%;

	border-radius: var(--radius);
	cursor: pointer;
}


/* =========================
   MEDIA MENU
========================= */

.media-menu{
	position: absolute;
	top: 0;
	z-index: 10;

	display: none;

	width: calc(100% - 16px);
	height: calc(100% - 16px);
	padding: 8px;

	background: var(--bg-overlay);
	border-radius: var(--radius);

	font-size: 1.2rem;

	overflow-y: auto;

	opacity: 0;
	transition: opacity .3s;
}

.media-menu.open{
	display: block;
	opacity: 1;
}

.media-title{
	margin-bottom: 8px;

	text-align: center;
	font-weight: bold;
}


/* =========================
   BUTTONS
========================= */

.season{
	margin-bottom: 8px;
}

.season-title,
.episodes button,
.film-btn{
	background: var(--bg-card);
	border: none;
	border-radius: var(--radius-small);

	font-size: 1.2rem;
	font-weight: bold;

	box-shadow: 
		0 4px 0 var(--shadow-light),
		0 0 6px var(--shadow-dark) inset;

	transition: 
		transform var(--transition),
		box-shadow var(--transition),
		background var(--transition);

	will-change: transform;
	cursor: pointer;
	touch-action: manipulation;
}

.season-title{
	display: flex;
    justify-content: space-between;
    align-items: center;
	margin-bottom: 8px;
	padding: 6px 12px;
}

.episodes button{
	flex: 1 1 50px;
	padding: 4px;
	margin-bottom: 4px;
	line-height: 24px;
}

.film-btn{
	display: block;
	width: 100%;
	padding: 8px 0;
	margin-bottom: 8px;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
}

.season-title:hover,
.episodes button:hover,
.film-btn:hover{
	background: var(--bg-card-hover);
}

.season-title:active,
.episodes button:active,
.film-btn:active{
	transform: translateY(3px);

	box-shadow: 
		0 1px 0 var(--shadow-light),
		0 0 4px var(--shadow-dark) inset;

	transition-duration: 0s;
	filter: brightness(.92);
}

/* =========================
   EPISODES CONTAINER
========================= */

.episodes{
	display: none;
	flex-wrap: wrap;

	margin-top: 4px;
	gap: 4px;
}

.episodes.open{
	display: flex;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px){

	.player{
		margin-top: 80px;
	}

	.site-header{
		background: black;
		box-shadow: 0 0 16px black;
	}

	.header-inner{
		justify-content: space-between;
	}

	.menu-toggle{
		display: block;
		line-height: 78px;
	}

	.nav{
		position: absolute;
		top: 80px;
		left: 0;

		width: 100%;

		background: black;

		transform: scaleY(0);
		transform-origin: top;

		transition: transform .3s;
	}

	.nav.open{
		transform: scaleY(1);
		box-shadow: 0 0 8px black;
	}

	.nav ul{
		flex-direction: column;
	}

	.nav li{
		margin: 0;
		text-align: center;
	}

	.nav li a{
		display: block;
		padding: 16px 0;
	}

	.nav li a:active{
		background: rgb(40,40,40);
	}

	#search{
		position: absolute;
		top: 19px;
    	right: 80px;
	}
}