/* DEPOP */
:root {
	--red: #E20020;
	--light-red: #8f1525;
	--trans-red: #e2001ea9; 
}



/* HERO */
.subtext-bold {
	color: var(--red);
}

/* VINYL COVER */
.tiny-vinyl::before {
	content: "";
	width: 50px;
	height: 50px;
	background: url("casefiles/depop.png") center/cover no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* SEE HIFI LINK */
.see {
	color: var(--red);
	border: solid 1px var(--red);
}

.jump {
	background-color: var(--red);
	border: 1px solid var(--red);
}


/* SECTION SPACING */
section {
	padding: var(--padding);
	margin-top: var(--margin);
}


/* GOAL */
#goal::before, #goal::after {
	border-color: var(--red);
}

.crop-marks::before, .crop-marks::after {
	border-color: var(--red);
}

.goal-bold {
	color: var(--red);
}


.app-link {
	text-decoration: underline;
	color: var(--red);
}


/* PROBLEM */
.discovery {
	background-color: var(--trans-red);
	border: 1px solid var(--red);
}

.problem {
	color: var(--black);
}

.pro-line {
	width: 100%;
	height: 1px;
	background-color: var(--red);
	border: none;
	padding: 0;
}

.jtbd {
	border: solid 1px var(--red);
	background-color: var(--trans-red);
}

.jtbd-title {
	color: var(--red);
}

.box-line {
	width: 100%;
	height: 1px;
	background-color: var(--red);
	border: none;
	padding: 0;
}

.jtbd > p {
	text-align: center;
}



/* RESEARCH */
.prelim {
	border: solid 1px var(--red);
}

.icon {
	width: 15%;
}

.stat {
	color: var(--red);
}

.label {
	background-color: var(--red);
}

/* SLIDER */
.slides::-webkit-scrollbar-thumb {
	border: 1px solid var(--red);
}

.slider > .a-tags > a {
	img {
		border: solid 1px var(--red);
	}
}



/* STACKABLE INSIGHTS */
.card-flex {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 19rem;
	margin: auto;
}

.card-container {
	position: relative;
	width: 20rem;
	height: 15rem;
	perspective: 1000px;
	align-items: center;
	justify-content: center;
	margin-top: 8rem;
}

.card {
	position: absolute;
	width: 14rem;
	height: 8rem;
	background: linear-gradient(to right, var(--red), var(--light-red));
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size);
	border-radius: var(--border-radius);
	transition: transform 0.5s ease, top 0.5s ease;
	transform: translate(-50%, calc(100px * var(--i))) rotate(40deg) skew(-20deg, -10deg);
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	z-index: calc(-1 * var(--i));
	top: 50%;
	left: 50%;
}

.card:nth-child(1) {
	/* background: linear-gradient(to right, #e2001eb3,#e2001e3b); */
	top: 0px;
}

.card:nth-child(2) {
	/* background: linear-gradient(to right, #e2001eb3, #e2001e3b); */
	top: 5px;
	opacity: 75%;
}

.card:nth-child(3) {
	/* background: linear-gradient(to right, #e2001eb3, #e2001e3b); */
	top: 10px;
	opacity: 50%;
}

.card.expanded {
	transform: rotateX(0deg) rotateY(0deg) translateY(-50px);
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
	width: 320px;
	height: 200px;
	text-align: center;
	opacity: 100%;
}

.front-text {
	color: var(--white);
	font-family: var(--bolded);
}

.card.expanded .front-text {
	display: none;
}

.hidden-card {
	display: none;
	font-size: var(--font-size);
	margin-top: var(--margin);
	color: var(--white);
}

.expanded .hidden-card {
	display: block;
}




/* VIDEOS */
video {
	width: 20.5rem;
}

.pre-vid {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}


/* SCROLL PROGRESS BAR */
#scroll-progress {
	position: fixed;
	top: 0;
	width: 0%;
	height: 4px;
	background: var(--red);
	z-index: 10000;
}

/* LEARNINGS */
.learn {
	color: var(--red);
}

.crops::before, .crops::after {
	border-color: var(--red);
}

.marks::before, .marks::after {
	border-color: var(--red);
}

.marks::before {
	border-color: var(--red);
}

.marks::after {
	border-color: var(--red);
}


.win-flex {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	align-items: center;
}

.win {
	width: 70%;
}

/* PLAY NEXT */
.play-next {
	display: flex;
	gap: 0.5rem;
	align-items: end;
	border: solid 1px var(--black);
	border-radius: var(--border-radius);
	margin-left: calc(var(--margin)/1.5);
	margin-right: calc(var(--margin)/1.5);
	padding: var(--padding);
	margin-top: var(--margin);
}

.next {
	font-family: var(--bolded);
	font-size: calc(var(--font-size)*1.2);
}

.play-button {
	width: 8%;
}



/* 800px */
@media (min-width: 800px) {
	.main-content {
		padding: 0;
	}

	video {
		width: 36rem;
	}

	.play-next {
		max-width: 36rem;
		margin-left: auto;
		margin-right: auto;
		margin-top: calc(var(--margin)*2);
	}

	.play-button {
		width: 5%;
	}
}

/* 1200px */
@media (min-width: 1200px) {
	/* ALL PARAGRAPHS IN MAIN CONTENT */
	.info {
		width: 45rem;
	}

	/* HERO */
	/* VINYL COVER */
	.tiny-vinyl::before {
		content: "";
		width: 80px;
		height: 80px;
		background: url("casefiles/depop.png") center/cover no-repeat;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.main-content {
		display: flex;
		width: 70rem;
		justify-content: space-between;
		margin-top: calc(var(--margin)*3);
	}

	.content {
		width: 100%;
	}

	.side-bar {
		display: contents;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
		gap: var(--gap);
		width: 7rem;
	}

	.side {
		width: 15rem;
	}

	/* TURNTABLE */
	.side-table {
		width: 7rem;
		height: 7rem;
		background: #333;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: inset 1px 2px 2px 4px var(--shadow), 0px 5px 15px rgba(0, 0, 0, 0.5);
		border-radius: calc(var(--border-radius)/2);
		z-index: -20;
		align-self: left;
	}

	.side-platter {
		width: 90px;
		height: 90px;
		background: radial-gradient(circle, #a9a9a9 20%, #000);
		border-radius: 50%;
		position: relative;
		overflow: hidden;
	}

	.side-vinyl {
		width: 80px;
		height: 80px;
		background: radial-gradient(circle, #111 10%, #222 40%, black);
		border-radius: 50%;
		position: relative;
		animation: spin 3s linear infinite;
		justify-self: center;
		align-self: center;
		margin-top: calc(var(--padding)/2.8);
	}

	.side-vinyl::before {
		content: "";
		width: 50px;
		height: 50px;
		background: url("casefiles/depop.png") center/cover no-repeat;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.sticky-side {
		display: flex;
		flex-direction: column;
		position: sticky;
		top: 10rem;
		gap: calc(var(--gap)*2);
	}

	.progress {
		color: var(--shadow);
		text-align: center;
		cursor: pointer;
	}

	.progress:hover {
		color: var(--red);
	}


	/* ACTUAL CONTENT */
	/* PROBELM */
	#discovery {
		padding-top: 0;
	}

	.discovery {
		border: 2px solid var(--red);
	}

	.pro-line {
		height: 2px;
	}

	.problem {
		margin: auto;
	}

	.jtbd {
		width: 50rem;
	}

	.hmw {
		width: 45rem;
	}

	.box-line {
		height: 100%;
		width: 1px;
		border: none;
		padding: 0;
	}

	/* HIFI */
	.hifi {
		width: 45rem;
		margin: auto;
		justify-content: space-between;
	}

	.hifi-info > p {
		width: 27rem;
	}

	.hifi-info > h3 {
		margin-left: 0;
	}

	.left-hifi {
		flex-direction: row-reverse;
	}

	.hifi-vid {
		border: 1px solid var(--black);
		border-radius: var(--border-radius);
		overflow: hidden;
	}

	.win-block {
		width: 35rem;
	}

	/* PLAY NEXT */
	.play-next {
		border: solid 1px var(--black);
		border-radius: var(--border-radius);
		margin-right: 0;
		padding: var(--padding);
		margin-top: var(--margin);
		width: fit-content;
		align-items: center;
		cursor: pointer;
	}

	.play-next:hover {
		background-color: var(--black);
	}

	.play-next:hover .next {
		color: var(--white);
	}

	.play-next:hover .play-button {
		filter: invert(1);
	}

	.next {
		font-family: var(--bolded);
		font-size: calc(var(--font-size)*1.5);
	}

	.play-button {
		width: 35px;
	}
}