/* ===========================
   REALISTIC IPHONE 14 MOCKUPS
   =========================== */

.device-iphone-14 {
    height: 868px;
    width: 428px;
}

.device-iphone-14 .device-frame {
    background: #010101;
    border: 1px solid #101315;
    border-radius: 68px;
    box-shadow: inset 0 0 4px 2px #b0b8c0, inset 0 0 0 6px #272c31;
    height: 868px;
    padding: 19px;
    width: 428px;
}

.device-iphone-14 .device-screen {
    border-radius: 49px;
    height: 830px;
    width: 390px;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.device-iphone-14 .device-header {
    background: #010101;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 30px;
    left: 50%;
    margin-left: -80px;
    position: absolute;
    top: 20px;
    width: 160px;
}

.device-iphone-14 .device-header::after,
.device-iphone-14 .device-header::before {
    content: "";
    height: 10px;
    position: absolute;
    top: 0;
    width: 10px;
}

.device-iphone-14 .device-header::after {
    background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, #010101 75%, #010101 100%);
    left: -10px;
}

.device-iphone-14 .device-header::before {
    background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, #010101 75%, #010101 100%);
    right: -10px;
}

.device-iphone-14 .device-sensors::after,
.device-iphone-14 .device-sensors::before {
    content: "";
    position: absolute;
}

.device-iphone-14 .device-sensors::after {
    background: #151515;
    border: 1px solid #010101;
    border-radius: 4px;
    box-shadow: 0 0 4px #151515;
    height: 7px;
    left: 50%;
    margin-left: -35px;
    top: 8px;
    width: 70px;
}

.device-iphone-14 .device-sensors::before {
    background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%), 
                radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%);
    border-radius: 50%;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, .05);
    height: 9px;
    left: 50%;
    margin-left: -60px;
    top: 26px;
    width: 9px;
}

.device-iphone-14 .device-btns {
    background: #101315;
    border-radius: 2px;
    height: 32px;
    left: -2px;
    position: absolute;
    top: 115px;
    width: 3px;
}

.device-iphone-14 .device-btns::after,
.device-iphone-14 .device-btns::before {
    background: #101315;
    border-radius: 2px;
    content: "";
    height: 62px;
    left: 0;
    position: absolute;
    width: 3px;
}

.device-iphone-14 .device-btns::after {
    top: 60px;
}

.device-iphone-14 .device-btns::before {
    top: 140px;
}

.device-iphone-14 .device-power {
    background: #101315;
    border-radius: 2px;
    height: 100px;
    position: absolute;
    right: -2px;
    top: 200px;
    width: 3px;
}

/* ===========================
   IPHONE COLOR VARIANTS
   =========================== */

/* Purple variant */
.device-iphone-14.device-purple .device-frame {
    border-color: #af9bbf;
    box-shadow: inset 0 0 4px 2px #fff, inset 0 0 0 6px #c8bad3;
}

.device-iphone-14.device-purple .device-btns,
.device-iphone-14.device-purple .device-btns::after,
.device-iphone-14.device-purple .device-btns::before,
.device-iphone-14.device-purple .device-power {
    background: #af9bbf;
}

/* Blue variant */
.device-iphone-14.device-blue .device-frame {
    border-color: #7992aa;
    box-shadow: inset 0 0 4px 2px #fff, inset 0 0 0 6px #98abbe;
}

.device-iphone-14.device-blue .device-btns,
.device-iphone-14.device-blue .device-btns::after,
.device-iphone-14.device-blue .device-btns::before,
.device-iphone-14.device-blue .device-power {
    background: #7992aa;
}

/* Red variant */
.device-iphone-14.device-red .device-frame {
    border-color: #d11813;
    box-shadow: inset 0 0 4px 2px #fff, inset 0 0 0 6px #ec302b;
}

.device-iphone-14.device-red .device-btns,
.device-iphone-14.device-red .device-btns::after,
.device-iphone-14.device-red .device-btns::before,
.device-iphone-14.device-red .device-power {
    background: #d11813;
}

/* Starlight variant */
.device-iphone-14.device-starlight .device-frame {
    border-color: #bdb4aa;
    box-shadow: inset 0 0 4px 2px #fff, inset 0 0 0 6px #d3cdc7;
}

.device-iphone-14.device-starlight .device-btns,
.device-iphone-14.device-starlight .device-btns::after,
.device-iphone-14.device-starlight .device-btns::before,
.device-iphone-14.device-starlight .device-power {
    background: #bdb4aa;
}

/* ===========================
   IPHONE MOCKUP LAYOUT
   =========================== */

.iphones {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 60px 0;
    opacity: 1;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Hide iPhones in black mode (when not in white-mode) */
:root:not(.white-mode) .iphones {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Show iPhones in white mode */
:root.white-mode .iphones {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.iphone-wrapper {
    position: relative;
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

.iphone-wrapper:hover {
    transform: translateY(-15px) scale(1.02);
}

/* Scale down to fit layout */
.iphone-left {
    transform: scale(0.5) rotate(-3deg);
    z-index: 1;
}

.iphone-center {
    transform: scale(0.55);
    z-index: 2;
}

.iphone-right {
    transform: scale(0.5) rotate(3deg);
    z-index: 1;
}

.iphone-left:hover {
    transform: scale(0.52) rotate(0deg) translateY(-20px);
}

.iphone-center:hover {
    transform: scale(0.58) translateY(-20px);
}

.iphone-right:hover {
    transform: scale(0.52) rotate(0deg) translateY(-20px);
}

/* Screenshot inside iPhone */
.device-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    /* Hide iPhones completely on mobile */
    .iphones {
        display: none;
    }
}

@media (max-width: 480px) {
    /* Hide iPhones completely on small mobile */
    .iphones {
        display: none;
    }
}

/* Video styling for iPhone screens */
.device-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}