/* ==========================================================================
   建议一：模拟软件窗口外壳专用样式
   ========================================================================== */

/* 动画外层包装盒：改造成一个精致的虚拟窗口 */
.hero-animation-wrapper {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    background-color: #ffffff; 
    border: 1px solid #dee2e6;
    border-radius: 12px;
    
    /* 👇 只需要改这一行！把阴影从原来的淡蓝色(0.08)改成清晰的黑色半透明(0.12) */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); 
    
    overflow: hidden;
    box-sizing: border-box;
}

/* 模拟浏览器的顶部控制栏 */
.window-header {
    background-color: #f3f2f1;   /* 微软标准的浅灰底色 */
    padding: 12px 18px;          /* 顶栏的上下内边距 */
    border-bottom: 1px solid #edebe9; /* 顶栏与下方动画的分割线 */
    display: flex;               /* 弹性盒子布局 */
    align-items: center;         /* 垂直居中对齐 */
}

/* 三个小圆点（模拟关闭、最小化、最大化按钮） */
.window-dots {
    display: flex;
    gap: 6px;                    /* 圆点之间的间距 */
    margin-right: 15px;          /* 与右侧文字的间距 */
}
.window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.dot-red    { background-color: #ff5f56; }
.dot-yellow { background-color: #ffbd2e; }
.dot-green  { background-color: #27c93f; }

/* 顶栏中心的说明文字 */


.hero-animation-iframe {
    width: 100% !important;
    /* 1. 🌟 核心：使用现代宽高比属性，强制高度跟随宽度动态等比计算，彻底干掉死高度 */
    aspect-ratio: 600 / 400 !important; 
    height: auto !important; /* 覆盖任何第三方或之前写死的高度 */
    border: none;
    display: block;
    box-sizing: border-box;
    transform-origin: top left;
}

/* 2. 📱 针对手机移动端：保持完美缩放的同时，利用负 margin 物理回收底部空白 */
@media (max-width: 767.98px) {
    .hero-animation-iframe {
        width: 166.66% !important; /* 100% / 0.6 = 166.66% */
        transform: scale(0.6);
        
        /* 🌟 终极修复：由于缩放比例是 0.6，iframe 物理上多占据了原本高度的 40%。
           我们使用 margin-bottom 配合 calc() 动态精确计算出多余的空白并将其强行剔除。
           这样下方的轮播指示点和文本就会自然贴合上来。
        */
        margin-bottom: calc(-166.66% * (400 / 600) * 0.4) !important;
    }
}

/* 3. 📱 针对更小屏的设备（如 iPhone SE 等）进行基准联动微调 */
@media (max-width: 375px) {
    .hero-animation-iframe {
        width: 181.81% !important; /* 100% / 0.55 */
        transform: scale(0.55);
        
        /* 缩放比例为 0.55，代表要剔除多余的 45% 空白 */
        margin-bottom: calc(-181.81% * (400 / 600) * 0.45) !important;
    }
}