@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.ip18 {
	--k: 1;
	max-width: 1600px;
	margin: 0 auto;
	overflow: hidden;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Arial, sans-serif;
}

.ip18-slide {
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: calc(1600px * var(--k)) auto;
}

.ip18-slide--1 { height: calc(700px * var(--k)); background-image: url("/custom/promocija-iphone18pro/assets/images/bg-slide-1.jpg"); background-color: #f7f8fc; }
.ip18-slide--2 { height: calc(853px * var(--k)); background-color: #f0f0f5; }
.ip18-slide--3 { height: calc(853px * var(--k)); background-image: url("/custom/promocija-iphone18pro/assets/images/bg-slide-3.jpg"); background-color: #2c0109; }

.ip18-slide--1,
.ip18-slide--2 { margin-bottom: calc(5px * var(--k)); }

.ip18-el {
	position: absolute;
	display: block;
	height: auto;
	max-width: none;
}

.ip18-title  { left: calc(50% - 140px   * var(--k)); top: calc(82px    * var(--k)); width: calc(287px    * var(--k)); z-index: 2; }
.ip18-pro    { left: calc(50% - 257.5px * var(--k)); top: calc(127px   * var(--k)); width: calc(521.5px  * var(--k)); z-index: 1; }
.ip18-camera { left: calc(50% - 285.5px * var(--k)); top: calc(245px   * var(--k)); width: calc(578px    * var(--k)); z-index: 3; }

.ip18-video  { left: calc(50% - 501.5px * var(--k)); top: calc(146.5px * var(--k)); width: calc(1002.5px * var(--k)); z-index: 1; }

.ip18-phones { left: calc(50% - 249px   * var(--k)); top: calc(90px    * var(--k)); width: calc(495px    * var(--k)); z-index: 2; }

.ip18-half {
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 4;
	-webkit-tap-highlight-color: transparent;
}

.ip18-half--max { left: 0; }
.ip18-half--pro { left: 50%; }

.ip18-label {
	position: absolute;
	top: calc(482px * var(--k));
	color: #fff;
	font-size: calc(16px * var(--k));
	line-height: 1;
	letter-spacing: .3px;
	white-space: nowrap;
	transition: opacity .4s ease, transform .4s ease;
}

.ip18-half--max .ip18-label { right: calc(280px * var(--k)); }
.ip18-half--pro .ip18-label { left: calc(277px * var(--k)); }

.ip18-label::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -7px;
	width: 100%;
	height: 1px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .4s cubic-bezier(.3, .7, .3, 1);
}

@media (hover: hover) {
	.ip18-half:hover .ip18-label { transform: translateY(-2px); }
	.ip18-half:hover .ip18-label::after { transform: scaleX(1); }

	.ip18-phones { transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
	.ip18-half--max:hover ~ .ip18-phones,
	.ip18-half--pro:hover ~ .ip18-phones { transform: scale(1.012); }
}

.anim-ready .ip18-title {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
	will-change: opacity, transform;
}

.anim-ready .ip18-pro {
	opacity: 0;
	transform: scale(1.06);
	filter: blur(10px);
	transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s ease;
	will-change: opacity, transform, filter;
}

.anim-ready .ip18-camera {
	opacity: 0;
	transform: translateY(70px) scale(.985);
	transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
}

.anim-ready .ip18-slide--1.is-visible .ip18-title  { opacity: 1; transform: none; transition-delay: .1s; }
.anim-ready .ip18-slide--1.is-visible .ip18-pro    { opacity: 1; transform: none; filter: blur(0); transition-delay: .25s; }
.anim-ready .ip18-slide--1.is-visible .ip18-camera { opacity: 1; transform: none; transition-delay: .15s; }

.anim-ready .ip18-video {
	opacity: 0;
	transform: translateY(32px) scale(.95);
	transition: opacity .9s ease, transform 1s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
}

@keyframes ip18Drift {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

.anim-ready .ip18-slide--2.is-visible .ip18-video {
	opacity: 1;
	transform: none;
	animation: ip18Drift 7s ease-in-out 2.4s infinite;
}

.anim-ready .ip18-phones {
	opacity: 0;
	transform: translateY(80px) scale(.97);
	transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
}

.anim-ready .ip18-label {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .7s ease, transform .7s ease;
}

.anim-ready .ip18-slide--3.is-visible .ip18-phones { opacity: 1; transform: none; transition-delay: .1s; }
.anim-ready .ip18-slide--3.is-visible .ip18-label  { opacity: 1; transform: none; transition-delay: .75s; }

.ip18 a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.anim-ready .ip18-title,
	.anim-ready .ip18-pro,
	.anim-ready .ip18-camera,
	.anim-ready .ip18-video,
	.anim-ready .ip18-phones,
	.anim-ready .ip18-label {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
		animation: none;
	}
}