/* ==================================================
COUNTDOWN CARD
Mazury Hip Hop Festival Premium
================================================== */


/* ==================================================
CARD
================================================== */

.countdown__item {

	position:relative;

	display:flex;

	flex-direction:column;

	justify-content:center;

	align-items:center;

	min-height:190px;

	padding:1.5rem;

	overflow:hidden;

	border-radius:26px;

	background:

		linear-gradient(
			145deg,
			rgba(255,255,255,.10),
			rgba(255,255,255,.035)
		);

	border:1px solid rgba(255,255,255,.15);

	backdrop-filter:blur(18px);

	-webkit-backdrop-filter:blur(18px);

	box-shadow:

		0 18px 45px rgba(0,0,0,.30);

	transition:

		transform .35s ease,
		box-shadow .35s ease,
		border-color .35s ease;

}


/* ==================================================
CARD HOVER
================================================== */

.countdown__item:hover {

	transform:
		translateY(-7px)
		scale(1.02);

	border-color:
		rgba(255,0,120,.45);

	box-shadow:

		0 32px 70px rgba(0,0,0,.40),

		0 0 45px rgba(255,0,120,.16);

}


.countdown__item:hover
.countdown__number {

	transform:scale(1.04);

}


/* ==================================================
AMBIENT GLOW
================================================== */

.countdown__item::before {

	content:"";

	position:absolute;

	inset:-40%;

	pointer-events:none;

	background:

		conic-gradient(

			from 180deg,

			transparent,

			rgba(255,0,120,.16),

			transparent,

			rgba(255,140,0,.10),

			transparent

		);

	animation:
		countdownGlow 12s linear infinite;

	opacity:.30;

}


/* ==================================================
LIGHT SWEEP
================================================== */

.countdown__item::after {

	content:"";

	position:absolute;

	top:-120%;

	left:-60%;

	width:45%;

	height:320%;

	pointer-events:none;

	background:

		linear-gradient(

			90deg,

			transparent,

			rgba(255,255,255,.10),

			transparent

		);

	transform:rotate(25deg);

	transition:left .8s ease;

}


.countdown__item:hover::after {

	left:150%;

}


/* ==================================================
NUMBER
================================================== */

.countdown__number {

	position:relative;

	z-index:2;

	font-size:

		clamp(
			3rem,
			5vw,
			3.8rem
		);

	font-weight:900;

	line-height:1;

	letter-spacing:-2px;

	color:var(--color-primary);

	text-align:center;

	white-space:nowrap;

	text-shadow:

		0 0 12px rgba(255,0,120,.28),

		0 0 28px rgba(255,0,120,.16);

	transition:

		opacity .22s ease,
		transform .22s ease;

	animation:
		countPulse 4s ease-in-out infinite;

}


/* ==================================================
NUMBER — CHANGING
================================================== */

.countdown__number.is-changing {

	opacity:0;

	transform:translateY(-8px);

}


/* ==================================================
LABEL
================================================== */

.countdown__label {

	position:relative;

	z-index:2;

	margin-top:.65rem;

	color:#fff;

	font-size:.82rem;

	font-weight:700;

	letter-spacing:.32em;

	line-height:1;

	text-align:center;

	opacity:.84;

}


/* ==================================================
NUMBER — UPDATED
================================================== */

.countdown__number.is-updated {

	transform:scale(1.06);

	text-shadow:

		0 0 18px rgba(255,0,120,.40),

		0 0 40px rgba(255,0,120,.20);

}


/* ==================================================
TABLET
================================================== */

@media (max-width:1024px) {

	.countdown__item {

		min-height:180px;

		padding:1.35rem;

	}

	.countdown__number {

		font-size:3.25rem;

	}

}


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

@media (max-width:768px) {

	.countdown__item {

		min-height:145px;

		height:auto;

		padding:1rem .6rem;

		border-radius:22px;

		box-shadow:

			0 14px 35px rgba(0,0,0,.28);

	}


	.countdown__number {

		font-size:

			clamp(
				2.45rem,
				11vw,
				3rem
			);

		letter-spacing:-1.5px;

	}


	.countdown__label {

		margin-top:.55rem;

		font-size:.68rem;

		letter-spacing:.22em;

	}


	/*
	|--------------------------------------------------------------------------
	| TOUCH DEVICES
	|--------------------------------------------------------------------------
	|
	| Na telefonie nie potrzebujemy efektu hover.
	|
	*/

	.countdown__item:hover {

		transform:none;

		border-color:
			rgba(255,255,255,.15);

		box-shadow:

			0 14px 35px rgba(0,0,0,.28);

	}


	.countdown__item:hover
	.countdown__number {

		transform:none;

	}


	.countdown__item:hover::after {

		left:-60%;

	}

}


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

@media (max-width:480px) {

	.countdown__item {

		min-height:135px;

		padding:.85rem .5rem;

		border-radius:20px;

	}


	.countdown__number {

		font-size:

			clamp(
				2.25rem,
				12vw,
				2.75rem
			);

	}


	.countdown__label {

		margin-top:.5rem;

		font-size:.64rem;

		letter-spacing:.18em;

	}

}


/* ==================================================
VERY SMALL MOBILE
================================================== */

@media (max-width:360px) {

	.countdown__item {

		min-height:125px;

		padding:.75rem .4rem;

	}


	.countdown__number {

		font-size:2.1rem;

		letter-spacing:-1px;

	}


	.countdown__label {

		font-size:.58rem;

		letter-spacing:.15em;

	}

}


/* ==================================================
GLOW ANIMATION
================================================== */

@keyframes countdownGlow {

	from {

		transform:rotate(0deg);

	}

	to {

		transform:rotate(360deg);

	}

}


/* ==================================================
NUMBER PULSE
================================================== */

@keyframes countPulse {

	0% {

		text-shadow:

			0 0 12px rgba(255,0,120,.22),

			0 0 24px rgba(255,0,120,.12);

		transform:scale(1);

	}


	50% {

		text-shadow:

			0 0 18px rgba(255,0,120,.34),

			0 0 38px rgba(255,0,120,.17);

		transform:scale(1.015);

	}


	100% {

		text-shadow:

			0 0 12px rgba(255,0,120,.22),

			0 0 24px rgba(255,0,120,.12);

		transform:scale(1);

	}

}