/* 手机模拟器样式 */
.phone-mock {
    position: relative;
    width: 375px;
    height: 812px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.phone-mock:hover {
    transform: scale(1.01) translateY(-4px);
}

.phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 12px;
    box-shadow:
        0 0 0 8px #2a2a2a,
        0 0 0 10px #1a1a1a,
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 16px 32px rgba(0, 0, 0, 0.12),
        0 24px 48px rgba(0, 0, 0, 0.08);
}

/* 刘海 - 隐藏 */
.phone-notch {
    display: none;
}

/* 屏幕 */
.phone-screen {
    width: 100%;
    height: 100%;
    background: #f5f6f8;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.phone-screen iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #f5f6f8;
}

/* 加载动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.phone-mock {
    animation: fadeIn 0.6s ease-out;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .phone-mock {
        width: 280px;
        height: 606px;
    }

    .phone-frame {
        padding: 8px;
        border-radius: 30px;
    }

    .phone-screen {
        border-radius: 24px;
    }

    .phone-notch {
        width: 130px;
        height: 22px;
        top: 8px;
    }

    .phone-notch::before {
        width: 45px;
        height: 5px;
        top: 8px;
    }
}

@media (max-width: 480px) {
    .phone-mock {
        width: 240px;
        height: 520px;
    }

    .phone-frame {
        padding: 6px;
        border-radius: 24px;
    }

    .phone-screen {
        border-radius: 20px;
    }

    .phone-notch {
        width: 110px;
        height: 18px;
        top: 6px;
    }

    .phone-notch::before {
        width: 38px;
        height: 4px;
        top: 6px;
    }
}