.scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 0s linear 1s; /* 淡入淡出效果 */
    overflow: hidden; /* 確保內容不溢出 */
}

.scene.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-in-out;
    z-index: 10; /* Active scenes (starfield initially, then card) */
}

/* Specific z-index for starfield when it's acting as a dimmed background for the card */
#starfield-scene {
    /* Default state for starfield-scene when not active (e.g., when card is active) */
    /* It will have its opacity set by JS to be dim. */
    /* Its z-index should be below the active card scene but above the body's solid background. */
    z-index: 1; /* Lower than active card scene, but visible over body background */
    /* Ensure opacity transition applies when it becomes active again, or when JS changes opacity */
    transition: opacity 1s ease-in-out; 
}


#starfield-scene.active {
    z-index: 10; /* Higher z-index when it's the main active scene */
    opacity: 1; /* Ensure full opacity when active */
}


#card-scene {
    /* 繼承 .scene 的樣式 */
    /* 賀卡場景的背景由 card.css 中的 body 樣式控制 */
    /* 但由於 scene 是 fixed 定位，這裡需要確保背景能正確顯示 */
    /* 或者在 JS 中切換 body 的 class 來改變背景 */
}

#card-scene.active {
    z-index: 20; /* 賀卡在最上層 */
    display: flex; /* 新增：使用 flex 佈局 */
    justify-content: center; /* 新增：水平置中 */
    align-items: center; /* 新增：垂直置中 */
    /* 當賀卡激活時，確保其背景能覆蓋星空 */
    /* 這裡的背景是透明的，依賴 card.css 中的 body 樣式 */
}

/* 如果需要在 JS 中動態改變 body 背景，可以預定義 class */
body.starfield-background {
    background: #000;
    margin: 0;
    overflow: hidden;
    font-family: 'Noto Sans TC', sans-serif;
}

body.card-background {
    /* 粉紅 + 深紫漸層背景 */
    background: linear-gradient(135deg, #fd79a8, #a29bfe, #6a0dad, #483D8B); /* 粉紅(#fd79a8) -> 淺藍紫(#a29bfe) -> 紫(#6a0dad) -> 深藍紫(#483D8B) */
    background-size: 400% 400%; /* 恢復/保持較大的 background-size 以獲得更平滑的漸變動畫 */
    animation: gradientShiftPinkPurple 12s ease infinite; /* 新動畫名和稍長的時間 */
    margin: 0; /* 確保 margin:0 */
    padding: 0; /* 移除全局 padding */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* 避免賀卡場景出現滾動條 */
    font-family: 'Noto Sans TC', sans-serif;
}

@keyframes gradientShiftPinkPurple { /* 新的動畫名 */
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}