/* 3D iPhone Mockup Styles */

.iphone-mockup-3d {
	perspective: 1200px;
	perspective-origin: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 20px;
}

.iphone-mockup-container {
	position: relative;
	width: 480px;
	height: 960px;
	transform-style: preserve-3d;
	transform: rotateY(-15deg) rotateX(5deg);
	transition: transform 0.6s ease;
}

.iphone-mockup-container:hover {
	transform: rotateY(-10deg) rotateX(2deg) scale(1.02);
}

/* iPhone Frame */
.iphone-frame {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
	border-radius: 67px;
	padding: 12px;
	box-shadow: 
		0 20px 60px rgba(0, 0, 0, 0.4),
		0 0 0 2px rgba(255, 255, 255, 0.1),
		inset 0 0 20px rgba(0, 0, 0, 0.5),
		inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Notch */
.iphone-notch {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 210px;
	height: 42px;
	background: #000;
	border-radius: 0 0 30px 30px;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Screen */
.iphone-screen {
	width: 100%;
	height: 100%;
	background: #000;
	border-radius: 55px;
	overflow: hidden;
	position: relative;
}

/* Screen Content */
.iphone-screen-content {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}

.iphone-screen-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 1;
}

/* Home Indicator (for modern iPhones) */
.iphone-home-indicator {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 201px;
	height: 7.5px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	backdrop-filter: blur(10px);
}

/* Reflection/Shine Effect */
.iphone-frame::before {
	content: '';
	position: absolute;
	top: 10%;
	left: 10%;
	width: 30%;
	height: 30%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 5;
}

/* Side Buttons (Volume, Power) */
.iphone-button-left {
	position: absolute;
	left: -6px;
	top: 180px;
	width: 6px;
	height: 60px;
	background: linear-gradient(to right, #2d2d2d, #1a1a1a);
	border-radius: 3px 0 0 3px;
	box-shadow: -2px 0 4px rgba(0, 0, 0, 0.3);
}

.iphone-button-right {
	position: absolute;
	right: -6px;
	top: 120px;
	width: 6px;
	height: 45px;
	background: linear-gradient(to left, #2d2d2d, #1a1a1a);
	border-radius: 0 3px 3px 0;
	box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media (max-width: 767px) {
	.iphone-mockup-3d {
		padding: 20px 10px;
	}
	
	.iphone-mockup-container {
		width: 420px;
		height: 840px;
		transform: rotateY(-10deg) rotateX(3deg);
	}
	
	.iphone-frame {
		border-radius: 52px;
		padding: 9px;
	}
	
	.iphone-screen {
		border-radius: 43px;
	}
	
	.iphone-notch {
		width: 120px;
		height: 24px;
		border-radius: 0 0 20px 20px;
	}
}

@media (max-width: 575px) {
	.iphone-mockup-container {
		width: 360px;
		height: 720px;
		transform: rotateY(-8deg) rotateX(2deg);
	}
	
	.iphone-frame {
		border-radius: 45px;
		padding: 7.5px;
	}
	
	.iphone-screen {
		border-radius: 37px;
	}
	
	.iphone-notch {
		width: 100px;
		height: 20px;
		border-radius: 0 0 18px 18px;
	}
}

/* Animation */
@keyframes float {
	0%, 100% {
		transform: rotateY(-15deg) rotateX(5deg) translateY(0);
	}
	50% {
		transform: rotateY(-15deg) rotateX(5deg) translateY(-10px);
	}
}

.iphone-mockup-container {
	/* Animation removed for instant load */
}

/* Shadow beneath phone */
.iphone-mockup-3d::after {
	content: '';
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 60px;
	background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
	border-radius: 50%;
	filter: blur(15px);
	z-index: -1;
}

/* Grid Version - iPhone Mockups with Green Case for Portfolio Grid */
.iphone-mockup-3d-grid {
	perspective: 1000px;
	perspective-origin: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 15px;
}

.iphone-mockup-container-grid {
	position: relative;
	width: 280px;
	height: 560px;
	transform-style: preserve-3d;
	transform: rotateY(-12deg) rotateX(4deg);
	transition: transform 0.6s ease;
	margin: 0 auto;
}

.iphone-mockup-container-grid:hover {
	transform: rotateY(-8deg) rotateX(2deg) scale(1.08);
}

/* Staggered Grid Version - Larger, Angled Layout */
.iphone-mockup-3d-grid-staggered {
	perspective: 1200px;
	perspective-origin: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 10px;
	position: relative;
}

/* Shadow beneath each phone */
.iphone-mockup-3d-grid-staggered::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 180px;
	height: 30px;
	background: radial-gradient(ellipse, rgba(0, 0, 0, 0.2) 0%, transparent 70%);
	border-radius: 50%;
	filter: blur(15px);
	z-index: -1;
}

.iphone-mockup-container-grid-staggered {
	position: relative;
	width: 380px;
	height: 760px;
	transform-style: preserve-3d;
	margin: 0 auto;
}

.iphone-align-left {
	display: flex;
	justify-content: flex-start;
}

.iphone-align-right {
	display: flex;
	justify-content: flex-end;
}

.iphone-rotate-left {
	transform: rotateY(-20deg) rotateX(8deg) rotateZ(-10deg);
}

.iphone-rotate-right {
	transform: rotateY(20deg) rotateX(8deg) rotateZ(10deg);
}

/* Grid iPhone Frame */
.iphone-mockup-container-grid .iphone-frame {
	border-radius: 38px;
	padding: 7px;
	background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
	box-shadow: 
		0 15px 40px rgba(0, 0, 0, 0.4),
		0 0 0 2px rgba(255, 255, 255, 0.1),
		inset 0 0 15px rgba(0, 0, 0, 0.5),
		inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Staggered Grid iPhone Frame - Black Case - Larger */
.iphone-mockup-container-grid-staggered .iphone-frame {
	border-radius: 52px;
	padding: 10px;
	background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
	box-shadow: 
		0 25px 60px rgba(0, 0, 0, 0.4),
		0 10px 30px rgba(0, 0, 0, 0.3),
		0 0 0 2px rgba(255, 255, 255, 0.1),
		inset 0 0 20px rgba(0, 0, 0, 0.5),
		inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Grid Notch */
.iphone-mockup-container-grid .iphone-notch {
	width: 123px;
	height: 25px;
	border-radius: 0 0 17px 17px;
	background: #000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Staggered Grid Notch - Larger */
.iphone-mockup-container-grid-staggered .iphone-notch {
	width: 168px;
	height: 34px;
	border-radius: 0 0 23px 23px;
	background: #000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Grid Screen */
.iphone-mockup-container-grid .iphone-screen {
	border-radius: 31px;
}

/* Staggered Grid Screen - Larger */
.iphone-mockup-container-grid-staggered .iphone-screen {
	border-radius: 42px;
}

/* Grid Home Indicator */
.iphone-mockup-container-grid .iphone-home-indicator {
	bottom: 7px;
	width: 117px;
	height: 4px;
}

/* Staggered Grid Home Indicator - Larger */
.iphone-mockup-container-grid-staggered .iphone-home-indicator {
	bottom: 10px;
	width: 160px;
	height: 5.5px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
}

/* Grid Side Buttons */
.iphone-mockup-container-grid .iphone-button-left {
	left: -4px;
	top: 105px;
	width: 4px;
	height: 35px;
	border-radius: 2px 0 0 2px;
	background: linear-gradient(to right, #2d2d2d, #1a1a1a);
	box-shadow: -2px 0 4px rgba(0, 0, 0, 0.3);
}

.iphone-mockup-container-grid .iphone-button-right {
	right: -4px;
	top: 70px;
	width: 4px;
	height: 27px;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(to left, #2d2d2d, #1a1a1a);
	box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}

/* Staggered Grid Side Buttons - Black - Larger */
.iphone-mockup-container-grid-staggered .iphone-button-left {
	left: -5px;
	top: 142px;
	width: 5px;
	height: 48px;
	border-radius: 2.5px 0 0 2.5px;
	background: linear-gradient(to right, #2d2d2d, #1a1a1a);
	box-shadow: -2px 0 4px rgba(0, 0, 0, 0.3);
}

.iphone-mockup-container-grid-staggered .iphone-button-right {
	right: -5px;
	top: 95px;
	width: 5px;
	height: 37px;
	border-radius: 0 2.5px 2.5px 0;
	background: linear-gradient(to left, #2d2d2d, #1a1a1a);
	box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}

/* Grid Responsive */
@media (max-width: 991px) {
	.iphone-mockup-container-grid {
		width: 250px;
		height: 500px;
	}
	
	.iphone-mockup-container-grid-staggered {
		width: 320px;
		height: 640px;
	}
	
	.iphone-align-left,
	.iphone-align-right {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.iphone-mockup-container-grid {
		width: 220px;
		height: 440px;
		transform: rotateY(-8deg) rotateX(2deg);
	}
	
	.iphone-mockup-container-grid .iphone-frame {
		border-radius: 33px;
		padding: 6px;
	}
	
	.iphone-mockup-container-grid .iphone-screen {
		border-radius: 27px;
	}
	
	.iphone-mockup-container-grid .iphone-notch {
		width: 80px;
		height: 16px;
		border-radius: 0 0 12px 12px;
	}
	
	/* Staggered - Stack on mobile */
	.iphone-mockup-container-grid-staggered {
		width: 280px;
		height: 560px;
	}
	
	.iphone-mockup-container-grid-staggered .iphone-notch {
		width: 110px;
		height: 22px;
		border-radius: 0 0 16px 16px;
	}
	
	.iphone-rotate-left,
	.iphone-rotate-right {
		transform: rotateY(-12deg) rotateX(4deg) rotateZ(0deg);
	}
	
	.iphone-align-left,
	.iphone-align-right {
		justify-content: center;
	}
}

@media (max-width: 575px) {
	.iphone-mockup-container-grid {
		width: 200px;
		height: 400px;
	}
	
	.iphone-mockup-container-grid .iphone-notch {
		width: 70px;
		height: 14px;
		border-radius: 0 0 10px 10px;
	}
	
	.iphone-mockup-container-grid-staggered {
		width: 240px;
		height: 480px;
	}
	
	.iphone-mockup-container-grid-staggered .iphone-notch {
		width: 90px;
		height: 18px;
		border-radius: 0 0 14px 14px;
	}
}