/* ============================================================
   iPhone Mockup – Wrapper
   ============================================================ */

.kss_iphone_mockup_for_case_study {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}

/* ============================================================
   iPhone outer container (positions side buttons)
   ============================================================ */

.kss-iphone {
	position: relative;
	width: min(320px, 58%);
}

/* ============================================================
   Side Buttons (decorative)
   ============================================================ */

/* Power button – right side */
.kss-iphone__btn-power {
	position: absolute;
	right: -3px;
	top: 28%;
	width: 3px;
	height: 12%;
	background: linear-gradient(180deg, #6b6e78 0%, #45474f 50%, #6b6e78 100%);
	border-radius: 0 3px 3px 0;
	z-index: 2;
}

/* Mute switch – left side */
.kss-iphone__btn-mute {
	position: absolute;
	left: -3px;
	top: 18%;
	width: 3px;
	height: 5%;
	background: linear-gradient(180deg, #6b6e78 0%, #45474f 50%, #6b6e78 100%);
	border-radius: 3px 0 0 3px;
	z-index: 2;
}

/* Volume Up – left side */
.kss-iphone__btn-vol-up {
	position: absolute;
	left: -3px;
	top: 27%;
	width: 3px;
	height: 9%;
	background: linear-gradient(180deg, #6b6e78 0%, #45474f 50%, #6b6e78 100%);
	border-radius: 3px 0 0 3px;
	z-index: 2;
}

/* Volume Down – left side */
.kss-iphone__btn-vol-down {
	position: absolute;
	left: -3px;
	top: 38%;
	width: 3px;
	height: 9%;
	background: linear-gradient(180deg, #6b6e78 0%, #45474f 50%, #6b6e78 100%);
	border-radius: 3px 0 0 3px;
	z-index: 2;
}

/* ============================================================
   iPhone Body
   ============================================================ */

.kss-iphone__body {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 19.5;
	background: linear-gradient(145deg, #4a4d57 0%, #2c2e36 50%, #3e4049 100%);
	border-radius: 52px;
	/* Padding = Bezel-Breite; bestimmt wie weit der Rahmen sichtbar bleibt */
	padding: 3%;
	box-sizing: border-box;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 20px 60px rgba(0, 0, 0, 0.55),
		inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Screen Viewport – clippt ALLEN Content innerhalb des Rahmens
   ============================================================ */

.kss-iphone__screen-viewport {
	width: 100%;
	height: 100%;
	/* Radius etwas kleiner als body (52px) → entspricht der inneren Rahmenkante */
	border-radius: 44px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #000000;
}

/* ============================================================
   Status Bar & Dynamic Island
   ============================================================ */

.kss-iphone__status-bar {
	flex-shrink: 0;
	height: 6%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000000;
	/* Kein eigener border-radius mehr – screen-viewport übernimmt das Clipping */
	position: relative;
	z-index: 2;
}

.kss-iphone__dynamic-island {
	width: 34%;
	height: 60%;
	background: #000000;
	border-radius: 50px;
	box-shadow: 0 0 0 2px #1a1a1a;
}

/* ============================================================
   Screen
   ============================================================ */

.kss-iphone__screen {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: #000000;
}

.kss-iphone__screen-content {
	--kss-scroll-duration: 14s;
	--kss-screen-position: center top;
	width: 100%;
	height: 100%;
	background-image: var(--kss-screen-image);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: var(--kss-screen-position);
}

.kss-iphone.is-autoscroll .kss-iphone__screen-content {
	animation: kss-iphone-page-scroll var(--kss-scroll-duration) ease-in-out infinite alternate;
}

.kss-iphone__placeholder {
	height: 100%;
	display: grid;
	place-items: center;
	padding: 20px;
	text-align: center;
	color: #d1d1d6;
	font-size: 12px;
	background: linear-gradient(145deg, #141416 0%, #0e0e11 100%);
}

/* ============================================================
   Home Indicator
   ============================================================ */

.kss-iphone__home-indicator {
	flex-shrink: 0;
	height: 3%;
	background: #000000;
	/* Kein eigener border-radius mehr – screen-viewport übernimmt das Clipping */
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.kss-iphone__home-indicator::after {
	content: "";
	width: 36%;
	height: 5px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 10px;
}

/* ============================================================
   Scroll Animation
   ============================================================ */

@keyframes kss-iphone-page-scroll {
	from {
		background-position: center top;
	}
	to {
		background-position: center bottom;
	}
}

/* ============================================================
   Responsive Adjustments
   ============================================================ */

@media (max-width: 768px) {
	.kss-iphone {
		width: min(260px, 72%);
	}
}

@media (max-width: 480px) {
	.kss-iphone {
		width: min(220px, 80%);
	}

	.kss-iphone__body {
		border-radius: 40px;
	}

	.kss-iphone__status-bar {
		border-radius: 30px 30px 0 0;
	}

	.kss-iphone__home-indicator {
		border-radius: 0 0 30px 30px;
	}
}