/* 公共基础样式 - 所有页面共用 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: 'BlenderPro', 'Arial', sans-serif;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    color: white;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* 背景相关样式已移动到 background.css 组件中 */
/* 请使用 BackgroundComponent 来管理页面背景 */

/* 页面内容区域 */
.content {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 0 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    min-height: auto;
}

/* 针对不同屏幕密度的适配 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .main-content {
        border-width: 0.5px;
    }
}

/* 针对触摸设备的优化 */
@media (hover: none) and (pointer: coarse) {
    .explore-btn {
        min-height: 48px;
    }
    
    .video-play-btn img {
        min-width: 44px;
        min-height: 44px;
    }
}

/* 自定义进入视口动画 - 适用于除顶部导航外的所有页面元素 */
.myCustomAnimation {
    animation-name: myCustomAnimation;
    animation-duration: .8s;
    animation-delay: .6s;
    animation-fill-mode: both;
}

@keyframes myCustomAnimation {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}