/*
 * Nobel Hero - odwzorowanie dawnego slidera Slider Revolution (slider-1).
 * Desktop: siatka 1240 x 550 px, skalowana proporcjonalnie ponizej 1240 px.
 * Telefon (< 600 px): siatka 480 x 720 px, skalowana do szerokosci ekranu.
 */

.nobel-hero {
	container-type: inline-size;
	width: 100%;
}

.nobel-hero__stage {
	--u: min(1px, calc(100cqw / 1240));
	position: relative;
	height: calc(550 * var(--u));
	overflow: hidden;
	background: #dfe6ee;
}

.nobel-hero__bg-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	animation: nobel-hero-fade 1s ease both;
}

.nobel-hero .nobel-hero__bg {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 0% 100%;
	transform-origin: 50% 50%;
	animation: nobel-hero-zoom 90s linear 0.3s both;
	will-change: transform;
}

.nobel-hero__fade {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 8;
	height: calc(406 * var(--u));
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.52) 48%, rgba(215, 215, 215, 0) 100%);
	animation: nobel-hero-fade 0.3s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.nobel-hero__grid {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	/* The transform creates a stacking context: keep the whole grid above the white fade. */
	z-index: 10;
	width: calc(1240 * var(--u));
	transform: translateX(-50%);
}

.nobel-hero .nobel-hero__building {
	position: absolute;
	bottom: 0;
	left: calc(1 * var(--u));
	z-index: 10;
	width: auto;
	max-width: none;
	height: 100%;
	animation: nobel-hero-fade 0.3s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.nobel-hero .nobel-hero__title,
.nobel-hero .nobel-hero__subtitle,
.nobel-hero .nobel-hero__text {
	position: absolute;
	z-index: 12;
	margin: 0;
	padding: 0;
	animation: nobel-hero-fade 0.3s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.nobel-hero .nobel-hero__title {
	top: calc(116 * var(--u));
	left: calc(577 * var(--u));
	width: calc(588 * var(--u));
	font-family: 'ApexNew-Bold', Helvetica, Arial, sans-serif;
	font-size: max(28px, calc(45 * var(--u)));
	font-weight: 700;
	line-height: max(24px, calc(35 * var(--u)));
	text-transform: uppercase;
	color: #222222;
}

.nobel-hero .nobel-hero__subtitle {
	top: calc(159 * var(--u));
	left: calc(575 * var(--u));
	width: calc(601 * var(--u));
	font-family: 'ApexNew-Bold', Helvetica, Arial, sans-serif;
	font-size: max(13px, calc(22 * var(--u)));
	font-weight: 700;
	line-height: max(20px, calc(35 * var(--u)));
	text-transform: uppercase;
	color: #222222;
}

.nobel-hero .nobel-hero__text {
	top: calc(207 * var(--u));
	left: calc(578 * var(--u));
	width: calc(572 * var(--u));
	font-family: 'ApexNew-Book', Helvetica, Arial, sans-serif;
	font-size: max(14px, calc(20 * var(--u)));
	font-weight: 400;
	line-height: max(19px, calc(26 * var(--u)));
	color: #333333;
}

/* Telefon */
@container (max-width: 599px) {
	.nobel-hero__stage {
		--m: calc(100cqw / 480);
		height: calc(720 * var(--m));
	}

	.nobel-hero__fade {
		height: calc(156 * var(--m));
	}

	.nobel-hero__grid {
		left: 0;
		width: 100%;
		transform: none;
	}

	.nobel-hero .nobel-hero__building {
		left: calc(-190 * var(--m));
	}

	.nobel-hero .nobel-hero__title {
		top: calc(45 * var(--m));
		left: calc(25 * var(--m));
		width: calc(230 * var(--m));
		font-size: calc(45 * var(--m));
		line-height: calc(45 * var(--m));
	}

	.nobel-hero .nobel-hero__subtitle {
		top: calc(140 * var(--m));
		left: calc(28 * var(--m));
		width: calc(210 * var(--m));
		font-size: max(10px, calc(12 * var(--m)));
		line-height: 1.3;
	}

	.nobel-hero .nobel-hero__text {
		top: calc(180 * var(--m));
		left: calc(28 * var(--m));
		width: calc(190 * var(--m));
		font-size: max(13px, calc(15 * var(--m)));
		line-height: 1.35;
	}
}

@keyframes nobel-hero-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes nobel-hero-zoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.9);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nobel-hero *,
	.nobel-hero .nobel-hero__bg {
		animation: none !important;
	}
}