/* 雲朵過渡動畫樣式 - 獨立覆蓋層版本 */

/* 
 * 關鍵：這個層必須完全獨立於主頁面內容
 * 不影響布局、滾動或結構
 */
#cloud-transition-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #ffffff;
    /* 減少過場層本身的重繪閃爍 */
    backface-visibility: hidden;
    transform: translateZ(0);
    
    pointer-events: auto;
    overflow: hidden;
    
    /* 確保在頂層 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* 不影響文檔流 */
    display: block;
    isolation: isolate;
    
    /* 防止選擇和拖拽 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 當動畫完成後，通過JavaScript設置 pointer-events: none 來允許點擊穿透 */

.transition-cloud {
    position: absolute;
    user-select: none;
    pointer-events: none;
    will-change: transform, opacity;
    /* 強制 GPU 圖層、減少重繪閃爍 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    /* 避免圖片首次繪製時的鋸齒閃動 */
    image-rendering: auto;
    
    touch-action: none;
}

.transition-cloud.hero-cloud {
    z-index: 200 !important;
}

/* 確保雲朵圖片正確顯示 */
.transition-cloud img {
    display: block;
    width: 100%;
    height: auto;
}

/* 音頻元素隱藏 */
#cloud-transition-layer audio {
    display: none;
    visibility: hidden;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .transition-cloud {
        /* 移動端稍微縮小基礎大小 */
        min-width: 200px;
        max-width: 600px;
    }
}

@media (max-width: 480px) {
    .transition-cloud {
        min-width: 150px;
        max-width: 400px;
    }
}

/* 確保主內容不受影響 */
#main-content {
    position: relative;
    z-index: 1;
}

/* 確保過渡層不會影響body的滾動 */
body {
    overflow-x: hidden;
}

/* 當過渡層可見時，防止body滾動（可選） */
body.transition-active {
    overflow: hidden;
}