@import "config.css";
@import "components.css";
@import "animations.css";

/* -- Body */
html,
body {
	overflow-x: hidden;
	scroll-behavior: smooth;
}
body {
	position: relative;
	padding-inline: 6vw;
	color: var(--primary);
	background-image: linear-gradient(
		24.91deg,
		var(--secondary-lighter) -15.27%,
		var(--secondary) 2.4%,
		var(--tertiary-light) 63.4%,
		var(--tertiary) 91.1%
	);
}
body::before,
body::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	user-select: none;
	pointer-events: none;
	background-size: contain;
}
body::before {
	top: 0;
	right: 0;
	max-width: 42.6875rem;
	height: 12.75rem;
	background: url("../images/bg-lights-1.png") no-repeat;
}
body::after {
	top: 9%;
	left: 0;
	max-width: 23.5625rem;
	height: 42.8125rem;
	background: url("../images/bg-lights-2.png") no-repeat;
	opacity: 0.8;
}

/* -- Start screen */
.start-screen {
	z-index: 999;
}
body:not(.loaded) .start-screen {
	background-color: var(--tertiary-light);
}
.start-screen .start-btn {
	position: relative;
	width: 100%;
	max-width: 17.125rem;
	height: 3.75rem;
	border-radius: 0.3125rem;
	color: var(--neutral);
	font-size: 2rem;
	font-family: "Bangers", sans-serif;
	filter: drop-shadow(0 0.107rem 1.3379rem var(--tertiary-lighter));
	transition: filter 0.2s var(--ease);
}
.start-screen .start-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0.8;
	background-image: linear-gradient(
		90deg,
		var(--primary) 0%,
		var(--primary) 33%,
		var(--secondary-sat) 66%,
		var(--tertiary-dark) 100%
	);
	background-size: 300% 100%;
	background-position: 100% 0%;
	transition: opacity 0.6s var(--ease), background-position 0.6s var(--ease);
}
.start-screen .start-btn:hover::before,
.start-screen .start-btn:active::before {
	opacity: 1;
	background-position: 0% 0%;
}
.start-screen .start-btn:active {
	filter: drop-shadow(0 0 0.875rem var(--tertiary-lighter));
}

/* -- Header */
header {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 1rem;
	margin-top: clamp(1.5625rem, 4vw, 2.8125rem);
}
.header-logo {
	display: none;
}
header .header-btns {
	display: flex;
	column-gap: min(5vw, 2.6875rem);
}
.header-btns .header-btn {
	width: 1.875rem;
	height: 1.875rem;
	flex-shrink: 0;
	flex-grow: 0;
	border-radius: 50%;
	position: relative;
	z-index: 1;
	transition: color var(--anim), background-color var(--anim);
}
.header-btns .naughty-btn {
	max-width: 1.875rem;
	display: contents;
}
.header-btns .naughty-btn div {
	display: contents;
}
.header-btn::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	border-radius: inherit;
	border: 2px solid transparent;
	transition: border-color var(--anim);
}
header [data-btn="music"]::before {
	border-width: 5px;
}
.header-btn:hover {
	color: var(--tertiary);
	background-color: var(--primary);
}
.header-btn:hover::before {
	border-color: var(--primary);
}
.header-btn .btn-icon {
	width: inherit;
	height: inherit;
}
header [data-btn="music"],
header [data-btn="music"] .btn-icon {
	color: inherit;
	transition: opacity var(--anim);
}
header [data-btn="music"][data-playing="true"] {
	opacity: 0.5;
}
header .header-btns + .naughty-btn {
	max-width: 11rem;
	justify-self: right;
	position: relative;
	z-index: 1;
}
header [data-btn="connect"] {
	display: block;
	color: inherit;
	max-width: 11rem;
	font-weight: 700;
	font-size: 1.25rem;
	text-align: center;
	line-height: 3rem;
	text-transform: uppercase;
	border-radius: 0.5rem;
	height: 3rem;
	width: 100%;
	background-color: var(--neutral);
	transition: color var(--anim), background-color var(--anim),
		opacity var(--anim), transform var(--anim);
}
header [data-btn="connect"]:hover,
header [data-btn="connect"]:active {
	color: var(--neutral);
	background-color: var(--primary);
}
header [data-btn="connect"]:active {
	opacity: 0.6;
}

/* -- Hero */
#hero {
	position: relative;
	z-index: 2;
	margin-top: 0.8125rem;
}

.hero-content {
	margin-top: 0.625rem;
	text-align: center;
}
.hero-title {
	font-weight: 400;
	font-size: 2.875rem;
	font-family: "Bangers", sans-serif;
	line-height: 3.375rem;
}
.hero-subtitle {
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 2.375rem;
	margin-block: 0.875rem 1.6875rem;
}
.hero-subtitle span {
	font-size: inherit;
	transition: font-weight var(--anim);
}
.hero-subtitle span:last-child {
	font-weight: 700;
}
.hero-subtitle:hover span:first-child {
	font-weight: 700;
}
.hero-subtitle:hover span:last-child {
	font-weight: 400;
}
.hero-text {
	max-width: 29.375rem;
	margin-inline: auto;
	line-height: 1.75rem;
}
.hero-text:last-of-type {
	margin-top: 0.6875rem;
}
.hero-countdown {
	width: fit-content;
	margin-top: 2.4375rem;
	display: flex;
	position: relative;
	left: 50%;
	column-gap: 0.75rem;
	transform: scale(0.8975) translateX(-50%);
	transform-origin: top left;
}
.hero-countdown div {
	font-family: "Bangers", sans-serif;
}
.hero-countdown .count-col {
	display: grid;
	gap: 0.5625rem 0.125rem;
	grid-template-columns: 1fr 1fr;
}
.count-col .count-name {
	grid-column: span 2;
	text-align: center;
	font-size: 18px;
	padding-right: 0.75rem;
}
.count-col .count-nb {
	text-align: left;
	font-size: 1.625rem;
	color: var(--neutral);
	width: 2.5rem;
	aspect-ratio: 1 / 1;
	padding: 7px 0 0 0.5625rem;
	background: url("../images/count-bg.svg") no-repeat;
	background-size: cover;
}

.hero-img {
	position: relative;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	width: fit-content;
}
.hero-img .hero-bg {
	width: 100%;
	min-width: 32.875rem;
	margin-left: -4.5rem;
	will-change: transform;
}
.hero-img .hero-guy {
	position: absolute;
	z-index: -1;
	will-change: transform;
}
.hero-img .hero-guy:nth-child(2) {
	top: -3.5%;
	right: -2%;
	width: max(21vw, 7.8125rem);
}
.hero-img .hero-guy:nth-child(3) {
	top: 3.5%;
	right: 17%;
	width: max(28vw, 10rem);
}
.hero-img .hero-guy:nth-child(4) {
	top: 36%;
	left: -2%;
	width: max(17vw, 6rem);
}

/* -- List */
#list {
	position: relative;
	z-index: 2;
}

#list .naughty-btn {
	margin-inline: auto;
	margin-block: 2.0625rem;
}

#list .list-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 1rem 0.6875rem;
}
.list-cards .cards-fluff {
	border-radius: 0.625rem;
	background-color: rgba(255, 255, 255, 0.31);
	background-image: var(--card);
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: var(--fluffZ, 1);
}
.cards-fluff .fluff-header {
	position: relative;
	z-index: 1;
	height: 8.125rem;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	border-radius: inherit;
	padding-top: 0.375rem;
}
.cards-fluff .fluff-header::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	opacity: 0.55;
	border-radius: inherit;
	background-color: var(--primary-light);
}
.fluff-header .fluff-name {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--neutral-dark);
}
.fluff-header .fluff-surname {
	font-size: 0.75rem;
	margin-top: 0.125rem;
	color: var(--neutral);
}
.fluff-header .fluff-img {
	will-change: transform;
	margin-top: auto;
	width: 5.9375rem;
	height: 5.125rem;
	object-fit: contain;
	object-position: bottom center;
	transform-origin: center bottom;
}
.cards-fluff .fluff-content {
	padding: 0.5625rem 0.75rem 0.75rem 0.6875rem;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cards-fluff .fluff-content p {
	font-size: 0.625rem;
	text-transform: capitalize;
}
.cards-fluff .mystery-fluff {
	position: absolute;
	bottom: 0;
	width: 16vw;
	height: 5rem;
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--neutral-dark);
	font-weight: 700;
	font-size: 3rem;
	padding-left: 0.25rem;
}
.cards-fluff:nth-child(4) .fluff-img {
	margin-bottom: -0.6rem;
}

/* -- Footer */
footer {
	margin-top: 2.6875rem;
	padding-bottom: 6.1875rem;
}
footer .footer-text {
	font-weight: 400;
	text-align: center;
	font-size: 1.5rem;
	line-height: 2.625rem;
}
footer .naughty-btn {
	margin-top: 2.0625rem;
	margin-inline: auto;
}
footer .footer-scroll {
	display: table;
	margin-inline: auto;
	margin-top: 4rem;
	opacity: 0.6;
	width: 36px;
	color: var(--primary);
	transition: opacity var(--anim);
}
footer .footer-scroll svg {
	width: 100%;
	height: 100%;
}
footer .footer-scroll:hover {
	opacity: 1;
}

/* -- Popup */
.popup {
	--progress: 0%;
}
.popup:not(.hidden) {
	--progress: var(--qtnProg);
}
.popup-wrapper {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: auto;
}
.popup .modal {
	width: 100%;
	max-width: 34rem;
	border-radius: 1.25rem;
	box-shadow: 0px 0.25rem 0.875rem 0px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(1.0938rem);
	background-image: linear-gradient(
			1.57deg,
			var(--primary) 0.73%,
			var(--primary-clear) 103.29%
		),
		var(--card);
}
.modal .modal-box {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--neutral);
	padding: 0 1.5rem 2.3125rem 1.5rem;
}
.modal-img {
	width: 12.0625rem;
	margin-top: -3rem;
}
.modal-title {
	font-weight: 400;
	margin-top: 2.0625rem;
	font-family: "Bangers", sans-serif;
	font-size: 2.5rem;
	letter-spacing: 0.06em;
}
.modal-desc {
	margin-top: 0.4375rem;
	font-size: 1.5rem;
}
.modal-quantity {
	margin-top: 2rem;
	color: var(--accent);
	background-image: linear-gradient(
		239.64deg,
		var(--accent) 13.38%,
		var(--accent-dark) 87.66%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.modal-quantity span {
	font-weight: 600;
	font-size: 1.5rem;
}
.modal-progress {
	position: relative;
	margin-top: 1.625rem;
	width: 100%;
	max-width: 10.8125rem;
}
.modal-progress .progress-icon {
	width: 2.5rem;
	position: absolute;
	z-index: 2;
	left: var(--progress);
	top: 50%;
	transform: translate(-50%, -50%);
	margin-top: -0.125rem;
	transition: left 1s 0.25s var(--ease);
}
.modal-progress .progress-bar {
	position: relative;
	height: 0.5rem;
	border-radius: 999px;
	background-color: var(--primary-sat);
}
.modal-progress .progress-bar::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: var(--progress);
	border-radius: inherit;
	background-image: linear-gradient(
		239.64deg,
		var(--accent) 13.38%,
		var(--accent-dark) 87.66%
	);
	transition: width 1s 0.25s var(--ease);
}
.modal-amount {
	margin-top: 2.6875rem;
	display: flex;
	align-items: center;
	column-gap: 1.125rem;
}
.amount-label,
.amount-max {
	font-weight: 300;
	font-size: 1.25rem;
	color: var(--primary-sat-light);
}
.amount-input {
	color: var(--neutral);
	width: 100%;
	max-width: 10.8125rem;
	height: 3.75rem;
	border-radius: 1.25rem;
	background-color: var(--primary-sat);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.amount-input * {
	color: inherit;
	font-weight: 300;
	font-size: 1.5rem;
}

.amount-input button {
	border-radius: 1.25rem;
}
#fluff-amount {
	margin-block: 0.875rem;
	text-align: center;
	width: 100%;
	border: 0;
	border-inline: 1px solid var(--neutral-darker);
	outline: 0;
	background: none;
	-moz-appearance: textfield;
}
#fluff-amount::-webkit-outer-spin-button,
#fluff-amount::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.modal .fluff-btnlive {
	margin-top: 2.625rem;
}
.modal-link {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	opacity: 0.6;
}
.modal-link .link-text {
	font-size: 1.25rem;
	line-height: 2.375rem;
	text-decoration: underline;
}
.modal-link .link-icon {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 2px;
	margin-left: 0.875rem;
}

/* -- Responsive */

 @media (max-width: 767px) {
        .hidden-mobile {
          display: none;
        }
        
      }
      
       @media (min-width: 767px) {
        .hidden-desk {
          display: none;
        }
        
      }
@media (min-width: 450px) {
	.hero-img .hero-bg {
		margin-left: 0;
	}
}
@media (min-width: 550px) {
	.hero-countdown {
		position: static;
		transform: none;
		margin-inline: auto;
	}
}
@media (min-width: 650px) {
	#list .list-cards {
		margin-top: 3.25rem;
		gap: 2.875rem 2rem;
	}
	.cards-fluff .fluff-header {
		text-align: left;
		height: 10.125rem;
		align-items: flex-start;
		justify-content: end;
		padding: 1.3125rem 1.6875rem;
	}
	.fluff-header .fluff-name {
		font-size: 1.25rem;
	}
	.fluff-header .fluff-surname {
		font-size: 1.5rem;
		margin-top: 4px;
	}
	.fluff-header .fluff-img {
		position: absolute;
		z-index: 1;
		right: -1.1rem;
		bottom: 0;
		width: 15vw;
		height: 12.5rem;
	}
	.cards-fluff .fluff-content {
		padding: 1.5rem 1.9375rem 1.5rem 1.6875rem;
	}
	.cards-fluff .fluff-content p {
		font-size: 1rem;
	}
	.cards-fluff .mystery-fluff {
		font-size: 7vw;
		height: 15vw;
		padding-left: 0.5rem;
	}
	.cards-fluff:nth-child(4) .fluff-img {
		margin-bottom: -1.75vw;
	}
	.cards-fluff:nth-child(7) .fluff-img {
		margin-bottom: -2.95vw;
	}
}

	
	body {
		background-image: linear-gradient(
			29.55deg,
			var(--secondary-lighter) -29.52%,
			var(--secondary) 14.37%,
			var(--tertiary-light) 60.87%,
			var(--tertiary) 92.76%
		);
	}
	header {
		grid-template-columns: repeat(3, 1fr);
	}
	.header-logo {
		display: block;
		width: fit-content;
		margin-left: -0.5rem;
	}
	.header-logo .logo-img {
		height: 110px;
	}
	header .header-btns {
		justify-self: center;
	}
	.header-btns .header-btn {
		width: 2.5rem;
		height: 2.5rem;
	}
	.header-btns .naughty-btn {
		max-width: 2.5rem;
	}
	.header-btns .naughty-btn,
	.header-btns .naughty-btn div {
		display: block;
	}

	#hero {
		display: grid;
		grid-template-columns: 19.8125rem auto;
		align-items: center;
		column-gap: 2rem;
		margin-top: -2.125rem;
		min-height: 550px;
	}
	.hero-content {
		order: 1;
		margin-top: 2rem;
		text-align: left;
	}
	.hero-subtitle {
		max-width: 19rem;
	}
	.hero-countdown {
		margin-top: 2.75rem;
	}
	.hero-img {
		order: 2;
		justify-self: end;
		left: 0;
		transform: none;
		margin-right: -1.875rem;
	}
	.hero-img .hero-bg {
		min-width: 0;
	}
	.hero-img .hero-guy:nth-child(2) {
		width: min(16vw, 13.875rem);
	}
	.hero-img .hero-guy:nth-child(3) {
		width: min(20vw, 18.1875rem);
	}
	.hero-img .hero-guy:nth-child(4) {
		width: min(12vw, 10.625rem);
	}

	#list .naughty-btn {
		margin-top: 0;
	}
	#list .list-cards {
		gap: 3.125rem;
	}
	.fluff-header .fluff-img {
		width: min(18vw, 12.9375rem);
		pointer-events: none;
	}
	.cards-fluff .mystery-fluff {
		font-size: 10vw;
		height: 18vw;
		padding-left: 1rem;
	}
	.cards-fluff:nth-child(4) .fluff-img {
		margin-bottom: -2vw;
		transform-origin: center 95%;
	}
	.cards-fluff:nth-child(6) .fluff-img {
		width: min(21vw, 220px);
	}
	.cards-fluff:nth-child(7) .fluff-img {
		margin-bottom: -3.6vw;
		transform-origin: center 80%;
	}
	.cards-fluff:nth-child(15) .fluff-img {
		width: min(23vw, 240px);
		margin-right: -2.5rem;
	}

	footer {
		margin-top: 6.1875rem;
		padding-bottom: 6.5625rem;
	}
	footer .footer-text {
		font-size: 1.875rem;
	}
	footer .naughty-btn {
		margin-top: 3.5625rem;
	}
}
@media (max-width: 850px) or (max-height: 750px) {
	.modal {
		transform: scale(0.8);
	}
}
@media (min-width: 1200px) {
	.start-screen .start-btn {
		max-width: 40rem;
		height: 8.75rem;
		border-radius: 0.625rem;
		font-size: 4rem;
		filter: drop-shadow(0px 0.25rem 3.125rem var(--tertiary-lighter));
	}
	#list .list-cards {
		grid-template-columns: repeat(3, 1fr);
	}
	.fluff-header .fluff-img {
		width: 11vw;
	}
	.cards-fluff .mystery-fluff {
		font-size: 4rem;
		padding-left: 0.75rem;
		height: 10rem;
	}
	.cards-fluff:nth-child(4) .fluff-img {
		margin-bottom: -1rem;
	}
	.cards-fluff:nth-child(6) .fluff-img {
		width: min(19vw, 180px);
		margin-right: -1rem;
	}
	.cards-fluff:nth-child(7) .fluff-img {
		margin-bottom: -1.85rem;
	}
	.cards-fluff:nth-child(15) .fluff-img {
		width: min(23vw, 210px);
	}
}
@media (min-width: 1400px) {
	#list .list-cards {
		gap: 4.8125rem 3.125rem;
	}
	.cards-fluff .fluff-img {
		width: 12.9375rem;
		height: auto;
	}
	.cards-fluff .mystery-fluff {
		font-size: 6rem;
		padding-left: 1rem;
		height: 12rem;
	}
	.cards-fluff:nth-child(3) .fluff-img,
	.cards-fluff:nth-child(4) .fluff-img,
	.cards-fluff:nth-child(5) .fluff-img {
		width: 14.375rem;
		right: -3rem;
	}
	.cards-fluff:nth-child(4) .fluff-img {
		right: -2.2rem;
		margin-bottom: -1.75rem;
	}
	.cards-fluff:nth-child(6) .fluff-img {
		width: 15.9375rem;
		right: -2.1rem;
		margin-right: 0;
	}
	.cards-fluff:nth-child(7) .fluff-img {
		width: 14.0625rem;
		right: -1.5rem;
		margin-bottom: -3rem;
	}
	.cards-fluff:nth-child(9) .fluff-img {
		width: 16.3125rem;
		right: -2rem;
	}
	.cards-fluff:nth-child(10) .fluff-img {
		width: 15.9375rem;
		right: -2.8rem;
	}
	.cards-fluff:nth-child(15) .fluff-img {
		width: 17.8125rem;
		right: -5rem;
		margin-right: 0;
	}
}
@media (max-width: 650px) {
	.cards-fluff:nth-child(7) .fluff-img {
		height: 95px;
		margin-bottom: -1.175rem;
	}
	.cards-fluff:nth-child(14) .fluff-img {
		height: 100px;
		margin-top: -0.75rem;
	}
	.cards-fluff:nth-child(15) .fluff-img {
		width: auto;
		height: 100px;
		margin-top: -0.75rem;
	}
}