/* iPhone 3D Box Model - Complete Implementation */

/* All iPhone Faces - Base Styles */
.iphone-face {
    position: absolute;
    border: 2px solid #333;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Define dimensions for iPhone 14 Pro aspect ratio */
/* Width: 280px, Height: 600px, Depth: 15px */

/* Front and Back faces - Full size */
.iphone-face--front,
.iphone-face--back {
    width: 280px;
    height: 600px;
    border-radius: 35px;
}

/* Left and Right sides - Height x Depth */
.iphone-face--left,
.iphone-face--right {
    width: 15px;
    height: 600px;
    left: 132.5px; /* (280 - 15) / 2 */
}

/* Top and Bottom edges - Width x Depth */
.iphone-face--top,
.iphone-face--bottom {
    width: 280px;
    height: 15px;
    top: 292.5px; /* (600 - 15) / 2 */
}

/* Position each face in 3D space */
.iphone-face--front {
    transform: rotateY(0deg) translateZ(7.5px); /* Half of depth */
    background: linear-gradient(145deg, #1c1c1c, #000);
}

.iphone-face--back {
    transform: rotateY(180deg) translateZ(7.5px);
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
}

.iphone-face--right {
    transform: rotateY(90deg) translateZ(132.5px); /* Half of width - half of depth */
    background: linear-gradient(180deg, #4a4a4a, #2a2a2a, #4a4a4a);
    border-radius: 0;
}

.iphone-face--left {
    transform: rotateY(-90deg) translateZ(132.5px);
    background: linear-gradient(180deg, #4a4a4a, #2a2a2a, #4a4a4a);
    border-radius: 0;
}

.iphone-face--top {
    transform: rotateX(90deg) translateZ(292.5px); /* Half of height - half of depth */
    background: linear-gradient(90deg, #3a3a3a, #2a2a2a, #3a3a3a);
    border-radius: 35px 35px 0 0;
}

.iphone-face--bottom {
    transform: rotateX(-90deg) translateZ(292.5px);
    background: linear-gradient(90deg, #3a3a3a, #2a2a2a, #3a3a3a);
    border-radius: 0 0 35px 35px;
}

/* iPhone Screen on Front Face */
.iphone-face--front .iphone-screen {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: linear-gradient(135deg, #0a0f1b, #1a1f2e);
    border-radius: 30px;
    overflow: hidden;
    box-shadow:
        inset 0 2px 10px rgba(0, 0, 0, 0.8),
        inset 0 -2px 10px rgba(0, 0, 0, 0.5);
}

/* Notch */
.iphone-face--front .iphone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #000;
    border-radius: 0 0 15px 15px;
    z-index: 10;
}

/* Camera Module on Back */
.iphone-face--back .iphone-camera-module {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 90px;
    height: 90px;
    background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
    border-radius: 22px;
    padding: 12px;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.camera-lens {
    width: 32px;
    height: 32px;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.2),
        transparent 40%),
        radial-gradient(circle, #1a1a1a, #000);
    border-radius: 50%;
    border: 2px solid #333;
    display: inline-block;
    margin: 3px;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.3);
}

.camera-flash {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #ffe500, #ffb700);
    border-radius: 50%;
    display: inline-block;
    margin: 3px;
}

/* Apple Logo */
.apple-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    opacity: 0.3;
}

/* Side Buttons */
.side-button {
    background: linear-gradient(180deg, #666, #444, #666);
    border-radius: 2px;
    position: absolute;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Right Side - Power Button */
.iphone-face--right .power-button {
    width: 3px;
    height: 60px;
    top: 150px;
    left: 6px;
}

/* Left Side - Volume and Mute */
.iphone-face--left .volume-up {
    width: 3px;
    height: 35px;
    top: 120px;
    left: 6px;
}

.iphone-face--left .volume-down {
    width: 3px;
    height: 35px;
    top: 170px;
    left: 6px;
}

.iphone-face--left .mute-switch {
    width: 3px;
    height: 20px;
    top: 80px;
    left: 6px;
    background: linear-gradient(180deg, #ff6b35, #ff4500, #ff6b35);
}

/* Bottom - Charging Port */
.iphone-face--bottom .charging-port {
    position: absolute;
    width: 60px;
    height: 8px;
    background: #111;
    border-radius: 4px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.iphone-face--bottom .speaker-holes {
    position: absolute;
    width: 40px;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        #222 0px,
        #222 2px,
        #111 2px,
        #111 4px
    );
    border-radius: 2px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* App Content Styles */
.app-content {
    padding: 40px 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.app-header {
    margin-bottom: 30px;
}

.app-logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.app-circles {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.app-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0.8;
}

.circle-1 { background: linear-gradient(135deg, #667eea, #764ba2); }
.circle-2 { background: linear-gradient(135deg, #f093fb, #f5576c); }
.circle-3 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.circle-4 { background: linear-gradient(135deg, #43e97b, #38f9d7); }

.app-text h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 15px;
    font-weight: 600;
}

.app-text p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    line-height: 1.4;
}

.app-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.app-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

/* New Rotation Animation */
@keyframes rotate3DPhone {
    0% {
        transform: rotateY(0deg) rotateX(5deg);
    }
    25% {
        transform: rotateY(90deg) rotateX(5deg);
    }
    50% {
        transform: rotateY(180deg) rotateX(5deg);
    }
    75% {
        transform: rotateY(270deg) rotateX(5deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(5deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .phone-container {
        height: 500px;
    }

    .iphone-3d-wrapper {
        width: 200px;
        height: 430px;
    }

    .iphone-face--front,
    .iphone-face--back {
        width: 200px;
        height: 430px;
    }

    .iphone-face--left,
    .iphone-face--right {
        left: 92.5px;
        height: 430px;
    }

    .iphone-face--top,
    .iphone-face--bottom {
        top: 207.5px;
        width: 200px;
    }

    .iphone-face--front {
        transform: rotateY(0deg) translateZ(7.5px);
    }

    .iphone-face--back {
        transform: rotateY(180deg) translateZ(7.5px);
    }

    .iphone-face--right {
        transform: rotateY(90deg) translateZ(92.5px);
    }

    .iphone-face--left {
        transform: rotateY(-90deg) translateZ(92.5px);
    }

    .iphone-face--top {
        transform: rotateX(90deg) translateZ(207.5px);
    }

    .iphone-face--bottom {
        transform: rotateX(-90deg) translateZ(207.5px);
    }
}