/* =========================================================
   SCHEDULE
   FESTIVAL TIMELINE
   BASE SYSTEM
   ========================================================= */


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


.schedule-section {

	--schedule-bg:
		#080914;

	--schedule-bg-soft:
		#11172d;


	--schedule-pink:
		#ff0055;

	--schedule-orange:
		#ff8a00;


	--schedule-white:
		#ffffff;


	--schedule-paper:
		#fff8e9;

	--schedule-paper-dark:
		#e8d6b5;


	--schedule-text:
		#121212;


	--schedule-shadow:

		0 25px 60px rgba(0,0,0,.45);


	position:relative;

	overflow:hidden;


	padding:

		100px

		0

		140px;


	background:


		radial-gradient(

			circle at 15% 10%,

			rgba(255,0,85,.15),

			transparent 40%

		),


		radial-gradient(

			circle at 85% 30%,

			rgba(255,138,0,.12),

			transparent 35%

		),


		linear-gradient(

			180deg,

			#050611,

			#10162c 50%,

			#070811

		);


	color:var(--schedule-white);

}




/* =========================================================
   DECORATIVE LIGHT
   ========================================================= */


.schedule-section::before {


	content:"";


	position:absolute;


	top:-250px;

	right:-200px;


	width:600px;

	height:600px;


	border-radius:50%;


	background:

		radial-gradient(

			circle,

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

			transparent 70%

		);


	filter:blur(20px);


	pointer-events:none;


}




.schedule-section::after {


	content:"";


	position:absolute;


	left:-250px;

	bottom:-250px;


	width:550px;

	height:550px;


	border-radius:50%;


	background:

		radial-gradient(

			circle,

			rgba(0,180,255,.08),

			transparent 70%

		);


	filter:blur(30px);


	pointer-events:none;


}




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


.schedule-section .wrapper {


	position:relative;


	z-index:2;


	width:100%;


	max-width:1200px;


	margin:0 auto;


	padding:

		0

		30px;


}




/* =========================================================
   DAY BASE
   ========================================================= */


.schedule-day {


	position:relative;


	margin-bottom:130px;


}




.schedule-day:last-child {


	margin-bottom:0;


}



/* =========================================================
   TRACK BASE
   ========================================================= */


.schedule-track {


	position:relative;


	display:flex;


	flex-direction:column;


	gap:70px;


	padding-top:50px;


}

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


.schedule-day__header {


	display:flex;


	align-items:center;


	gap:35px;


	margin-bottom:20px;


	position:relative;


	z-index:3;


}



/* =========================================================
   DAY BADGE
   ========================================================= */


.schedule-day__badge {


	display:flex;


	flex-direction:column;


	align-items:center;


	justify-content:center;



	width:105px;


	height:105px;



	background:


		linear-gradient(

			135deg,

			var(--schedule-pink),

			var(--schedule-orange)

		);



	color:#fff;



	transform:

		rotate(-5deg);



	box-shadow:


		0 20px 45px rgba(255,0,85,.35);



	flex-shrink:0;


}




.schedule-day__badge-label {


	font-size:.65rem;


	font-weight:900;


	letter-spacing:.35em;


	margin-left:.35em;


	opacity:.9;


}




.schedule-day__badge-number {


	font-size:48px;


	font-weight:950;


	line-height:.9;


	letter-spacing:-.08em;


}





/* =========================================================
   DAY TITLE
   ========================================================= */


.schedule-day__heading {


	display:flex;


	flex-direction:column;


}




.schedule-day__title {


	margin:0;


	font-size:


		clamp(

			2.5rem,

			5vw,

			4.5rem

		);



	line-height:.85;



	font-weight:950;



	letter-spacing:-.06em;



	text-transform:uppercase;


}





.schedule-day__subtitle {


	margin:15px 0 0;


	color:

		rgba(255,255,255,.55);



	font-size:.7rem;



	font-weight:900;



	letter-spacing:.35em;



	text-transform:uppercase;


}

/* =========================================================
   TIMELINE CORE
   ========================================================= */


/* =========================================================
   TRACK
   ========================================================= */


.schedule-track {


	position:relative;


	padding-top:80px;


	padding-bottom:40px;


}



/* =========================================================
   CENTRAL AXIS DESKTOP
   ========================================================= */


@media (min-width:769px){


	.schedule-track::before {


		content:"";


		position:absolute;


		top:20px;
		
		bottom:20px;


		left:50%;


		width:3px;



		transform:translateX(-50%);



		background:

		linear-gradient(
			to bottom,
			transparent 0%,
			var(--schedule-pink) 8%,
			var(--schedule-pink) 88%,
			var(--schedule-orange) 96%,
			transparent 100%
		);



		box-shadow:


			0 0 20px rgba(255,0,85,.45);



		z-index:1;


	}



}

/* =========================================================
   EVENT BASE
   ========================================================= */


.schedule-event {


	position:relative;


	display:flex;


	align-items:center;


	min-height:150px;


	z-index:2;

	width:100%;

}



/* =========================================================
   AXIS POINT
   ========================================================= */


.schedule-event__axis {



	position:absolute;

	top:50%;
	left:50%;

	transform:
		translate(-50%,-50%);


	width:20px;


	height:20px;



	border-radius:50%;



	background:

		var(--schedule-pink);



	border:

		4px solid var(--schedule-bg);



	box-shadow:


		0 0 0 5px rgba(255,0,85,.18),


		0 0 25px rgba(255,0,85,.8);



	z-index:5;


}



.schedule-event__axis::after {


	content:"";


	position:absolute;


	inset:5px;


	border-radius:50%;


	background:white;


}

/* =========================================================
   AXIS TO CARD LINE
   ========================================================= */


.schedule-event__line {

	position:absolute;

	top:50%;

	height:2px;

	transform:translateY(-50%);

	z-index:1;

	pointer-events:none;

	background:
		linear-gradient(
			90deg,
			var(--schedule-pink),
			rgba(255,0,85,.15)
		);

}


.schedule-event--right .schedule-event__line {

	left:50%;

	width:
		calc(var(--card-distance) + 190px);

}


.schedule-event--left .schedule-event__line {

	right:50%;

	width:
		calc(var(--card-distance) + 190px);

}


/* =========================================================
   EVENT POSITION VARIATIONS
   ========================================================= */



/* =========================================================
   TIME
   ========================================================= */


.schedule-event__time {


	position:absolute;


	top:50%;


	transform:translateY(-50%);



	font-size:1.1rem;


	font-weight:900;


	letter-spacing:.05em;


	color:

		rgba(255,255,255,.75);



}



@media (min-width:769px){

.schedule-event--right {

		justify-content:flex-end;

	}


	.schedule-event--left {

		justify-content:flex-start;

	}



	.schedule-event--right .schedule-event__time {

		right:
			calc(50% + 25px);

		left:auto;

	}



	.schedule-event--left .schedule-event__time {

		left:
			calc(50% + 25px);

		right:auto;

	}




}

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


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


.schedule-card {


	position:relative;


	width:380px;


	min-height:

		var(--card-height,150px);



	padding:

		32px

		34px;



	background:


		linear-gradient(

			145deg,

			var(--schedule-paper),

			var(--schedule-paper-dark)

		);



	color:

		var(--schedule-text);



	border-radius:3px;



	box-shadow:


		var(--schedule-shadow),


		0 0 0 1px rgba(255,255,255,.35) inset;



	overflow:visible;

	transition:


		transform .25s ease,


		box-shadow .25s ease;

	transform:
			rotate(var(--card-angle, -1deg));
	
	z-index:3;
}

.schedule-card:hover {


	transform:
		translateY(-5px)
		translateX(var(--card-shift,0px))
		rotate(0deg);



	box-shadow:


		0 35px 80px rgba(0,0,0,.55);



}

/* =========================================================
   PAPER TEXTURE
   ========================================================= */


.schedule-card::before {


	content:"";


	position:absolute;


	inset:0;


	background:


		radial-gradient(

			rgba(0,0,0,.10) 1px,

			transparent 1.5px

		),


		linear-gradient(

			120deg,

			transparent,

			rgba(255,255,255,.4),

			transparent

		);



	background-size:


		5px 5px,

		100% 100%;



	opacity:.45;



	pointer-events:none;


}

/* =========================================================
   TAPE
   ========================================================= */


.schedule-card__tape {


	position:absolute;


	top:-18px;


	left:50%;


	transform:


		translateX(-50%)

		rotate(-4deg);



	width:120px;


	height:30px;



	background:


		linear-gradient(

			90deg,

			#ddd2b8,

			#fff8e5,

			#d5c7a8

		);



	opacity:.9;



	box-shadow:


		0 4px 10px rgba(0,0,0,.15);



	z-index:3;


}

/* =========================================================
   PIN
   ========================================================= */


.schedule-card__pin {


	position:absolute;


	top:-8px;


	left:50%;


	width:16px;


	height:16px;



	transform:

		translateX(-50%);



	border-radius:50%;



	background:

		var(--schedule-pink);



	box-shadow:


		0 0 0 3px rgba(255,255,255,.3),


		0 0 18px rgba(255,0,85,.8);



	z-index:5;


}

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


.schedule-card__content {


	position:relative;


	z-index:2;


}



.schedule-card__label {


	margin-bottom:12px;



	font-size:.65rem;


	font-weight:900;


	letter-spacing:.3em;


	text-transform:uppercase;


	color:

		var(--schedule-pink);



}



.schedule-card__title {


	margin:0;



	font-size:


		clamp(

			1.5rem,

			2vw,

			2.2rem

		);



	font-weight:950;


	line-height:.95;


	letter-spacing:-.04em;


	text-transform:uppercase;


}



.schedule-card__description {


	margin:

		14px

		0

		0;



	font-size:.95rem;


	line-height:1.5;


	color:

		rgba(0,0,0,.65);


}

/* =========================================================
   CARD PERSONALITY
   FESTIVAL WALL
   ========================================================= */


/* ARTISTIC ROTATIONS */

.schedule-event--tilt-a .schedule-card {
	--card-angle:-4deg;
}


.schedule-event--tilt-b .schedule-card {
	--card-angle:3deg;
}


.schedule-event--tilt-c .schedule-card {
	--card-angle:-1.5deg;
}


/* BASE TYPES */

.schedule-event--wide .schedule-card {
	--card-angle:-1deg;
}


.schedule-event--small .schedule-card {
	--card-angle:2deg;
}


.schedule-event--normal .schedule-card {
	--card-angle:1deg;
}


.schedule-event--hero .schedule-card {
	--card-angle:-3deg;
}



/* =========================================================
   DESKTOP POSITIONING
   ========================================================= */

@media (min-width:769px){


	/* KARTA PO PRAWEJ OD OSI */

	.schedule-event--right .schedule-card {

		margin-left:
			var(--card-distance,80px);

		margin-right:0;

	}



	/* KARTA PO LEWEJ OD OSI */

	.schedule-event--left .schedule-card {

		margin-right:
			var(--card-distance,80px);

		margin-left:0;

	}



	/* LINIA DO PRAWEJ */

	.schedule-event--right .schedule-event__line {

		left:50%;

		right:auto;

	}



	/* LINIA DO LEWEJ */

	.schedule-event--left .schedule-event__line {

		right:50%;

		left:auto;

	}

}


/* =========================================================
   DISTANCE SCALE
   ========================================================= */

.schedule-event--small {
	--card-distance:35px;
}

.schedule-event--normal {
	--card-distance:50px;
}

.schedule-event--wide {
	--card-distance:70px;
}

.schedule-event--hero {
	--card-distance:90px;
}


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


.schedule-event--small .schedule-card {

	width:320px;

}


.schedule-event--normal .schedule-card {

	width:380px;

}


.schedule-event--wide .schedule-card {

	width:420px;

}


.schedule-event--hero .schedule-card {

	width:480px;

	min-height:240px;

}



/* =========================================================
   SPECIAL EVENTS
   ========================================================= */


.schedule-event--headliner .schedule-card {

	width:560px;

	min-height:230px;

	border:2px solid var(--schedule-pink);

}



.schedule-event--opening .schedule-card {

	filter:saturate(.9);

}



.schedule-event--closing .schedule-card {

	transform:
		scale(1.03)
		rotate(var(--card-angle));

}