/* --- 基礎設定 --- */
:root {
    --primary-blue: #007bff; /* 登錄按鈕顏色 */
    --copier-light: #f5f8fb; /* 影印機主體淺色 */
    --copier-dark: #e0e6ec;  /* 影印機邊緣深色 */
    --copier-accent: #34495e; /* 控制面板深色 */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    /* 乾淨、柔和的背景 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden; 
}

/* 場景容器 */
.scene-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    perspective: 800px;
}

/* --- 影印機 (簡約美化版) --- */
.copier {
    position: relative;
    width: 320px;
    z-index: 2;
    transition: opacity 1s ease, transform 1s ease;
    /* 增加微小的 3D 視角 */
    transform: rotateX(5deg) translateY(10px);
    /* 增加更柔和的陰影 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05);
}

.copier-top {
    height: 80px;
    background: var(--copier-light);
    border-radius: 12px 12px 0 0;
    border-bottom: 3px solid var(--copier-dark);
    position: relative;
    overflow: hidden;
    /* 頂部高光 */
    box-shadow: inset 0 5px 10px rgba(255,255,255,0.8);
}

/* 掃描光條動畫 (使用亮白色) */
.scanner-bar {
    height: 100%;
    width: 15px;
    background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,1), rgba(255,255,255,0.1));
    box-shadow: 0 0 25px 8px #fff;
    position: absolute;
    left: 0;
    animation: scan-clean 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    display: none; 
}

.copier.scanning .scanner-bar {
    display: block;
}

.copier-body {
    height: 200px;
    background: var(--copier-light);
    border-radius: 0 0 12px 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    border-top: 1px solid var(--copier-dark);
}

/* 出紙口 */
.paper-slot {
    width: 80%;
    height: 10px;
    background: var(--copier-accent); /* 深色縫隙 */
    border-radius: 4px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    z-index: 5; /* 確保在紙張上方 */
}

/* 控制面板 - 簡化為一個指示燈 */
.control-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: #2ecc71; /* 綠色指示燈 */
    border-radius: 50%;
    box-shadow: 0 0 8px #2ecc71;
}


/* --- 紙張與變形動畫核心 (微調位置以適應新尺寸) --- */
.paper {
    position: absolute;
    width: 280px;
    height: 0px; 
    background: white;
    top: 50%; 
    left: 50%;
    /* 初始位置微調：在出紙口下方一點點 */
    transform: translate(-50%, -40px); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 4; 
    overflow: hidden;
    
    /* 變形過渡效果：保持流暢 */
    transition: 
        height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s ease-in-out,
        width 0.8s ease-in-out,
        top 0.8s ease-in-out,
        left 0.8s ease-in-out,
        border-radius 0.8s ease,
        box-shadow 0.8s ease;
}

/* 狀態 1: 列印中 (紙張滑出) */
.paper.printing {
    height: 200px;
    /* 向下移動到機身下方 */
    transform: translate(-50%, 100px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 狀態 2: 浮動並變成網頁 (核心變身過程) */
.paper.floating {
    z-index: 10;
    width: 85vw; /* 縮小一點，留邊距 */
    height: 85vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 16px; /* 更大的圓角 */
    box-shadow: 0 25px 60px rgba(0,0,0,0.4); /* 更戲劇性的浮動陰影 */
    overflow-y: auto; 
    background: white;
}


/* --- 網頁內容與登錄框美化 --- */
.website-content {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.paper.floating .website-content {
    opacity: 1;
}

/* 登錄容器 - 使用 flexbox 確保內容置中 */
.login-wrapper {
    min-height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px; /* 增加內邊距 */
}

/* 登錄卡片美化 */
.card {
    border: none; /* 移除邊框 */
    border-radius: 12px; /* 統一圓角 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* 卡片內部陰影 */
}

/* 輸入框美化 */
.form-control {
    height: 50px;
    border-radius: 8px; /* 圓角 */
    border: 1px solid #ced4da;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.15); /* 柔和的藍色光暈 */
}

/* 登錄按鈕強化 */
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    padding: 10px 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.1s;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}
.btn-primary:active {
    transform: translateY(1px);
}

/* 登錄圖標與標題 */
.text-center h2 {
    font-weight: 700;
    color: var(--copier-accent);
}
.bi-person-bounding-box {
    color: var(--primary-blue) !important;
}


/* --- 動畫關鍵影格 --- */
@keyframes scan-clean {
    0% { left: 0%; opacity: 0.5; }
    50% { left: 100%; opacity: 1; }
    100% { left: 0%; opacity: 0.5; }
}

.scene-container.finished .copier {
    opacity: 0;
    transform: rotateX(5deg) translateY(100px) scale(0.8);
    pointer-events: none;
}

.scene-container.finished {
    overflow: auto;
    align-items: flex-start;
    padding-top: 0; 
}