/* CSS Variables for synchronized sizing */
:root {
    --mask-width: 6.9658525900323891%; /* Central mask width variable (increased by 0.5%) */
    --mask-height: 5.2243894425242918%; /* Height calculated from 4:3 ratio (6.9658525900323891% * 3/4) */
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    background: #f7d218; /* Initial yellow, will be updated by JS */
    color: #fff;
    transition: background-color 0.5s ease; /* Smooth color transitions */
}

/* Header styles */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 125px;
    background-color: red; /* 藍色背景 */
    z-index: 1000; /* 確保在最上層 */
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

#main-header h1 {
    color: white;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}

#canvas-container {
    position: relative;
    left: 0;
    width: 100%;
    /* height: calc(100%); /* 調整高度以配合 top 偏移 */
    z-index: 1; /* Above center image (z-index: 0) */
    background: transparent; /* Transparent to let image show through */
    pointer-events: none; /* Allow clicks to pass through to center image if needed */
    perspective: 1000px; /* Enable 3D perspective for child elements */
    /* transform: translateY(-2%); 整體往上調整 2% */
}

/* Ensure canvas (daniel) renders above center image */
#canvas-container canvas {
    position: relative;
    z-index: 2;
    pointer-events: auto; /* Re-enable pointer events for canvas */
    background: transparent !important; /* Force transparent canvas */
}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Progress display in top-right corner */
.progress-display {
    position: fixed;
    top: 110px; /* 90px header + 20px margin */
    right: 20px; /* 改為右上角位置 */
    z-index: 200; /* Above all other elements */
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    user-select: none;
    min-width: 120px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Light Control Panel */
.light-control-panel,
.sausage-control-panel {
    position: fixed;
    top: 150px;
    right: 20px;
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0;
    z-index: 1001;
    min-width: 320px; /* 增加最小寬度以容納進度顯示 */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: all; /* 確保面板可以接收鼠標事件 */
    display: none; /* 初始隱藏，由 JavaScript 控制顯示 */
}

/* Sausage Control Panel specific positioning */
.sausage-control-panel {
    top: 150px;
    left: 20px; /* 放在左側，避免與右側的 Light Control Panel 重疊 */
    right: auto;
}


.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(40, 40, 40, 0.8);
    border-radius: 8px 8px 0 0;
    gap: 15px;
    cursor: move;
    user-select: none;
}

.drag-handle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: grab;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s;
    line-height: 1;
    font-weight: bold;
    letter-spacing: -1px;
}

.drag-handle:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.drag-handle:active {
    cursor: grabbing;
    background: rgba(255, 255, 255, 0.15);
}

.light-control-panel.dragging {
    transition: none;
    z-index: 1010;
}

.light-control-panel.dragging .panel-header {
    cursor: grabbing;
}

.panel-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    flex-shrink: 0;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.progress-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.progress-value {
    color: #4CAF50;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    background: rgba(76, 175, 80, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(76, 175, 80, 0.3);
    min-width: 80px; /* 增加到足夠容納 000.00% */
    text-align: center;
    display: inline-block;
}

.toggle-button {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.toggle-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.panel-content {
    padding: 15px;
    transition: all 0.3s ease;
    max-height: 750px;
    overflow: hidden;
}

.panel-content.collapsed {
    max-height: 0;
    padding: 0 15px;
}

.control-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group label {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    min-width: 100px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.control-group input[type="range"] {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all; /* 確保滑桿可以接收鼠標事件 */
    cursor: pointer;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

.control-group input[type="range"]::-webkit-slider-thumb:hover {
    background: #66BB6A;
    transform: scale(1.1);
}

.control-group input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.control-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #4CAF50;
    margin-left: 10px;
}

.value-display {
    color: #4CAF50;
    font-size: 12px;
    font-weight: 600;
    min-width: 35px;
    text-align: right;
    font-family: monospace;
}

.axis-select {
    background: rgba(50, 50, 50, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    min-width: 80px;
    cursor: pointer;
}

.axis-select:focus {
    outline: 1px solid #4CAF50;
    border-color: #4CAF50;
}

/* Hide old standalone progress display */
.progress-display {
    display: none;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    .light-control-panel {
        top: 60px;
        right: 10px;
        min-width: 260px;
    }

    .panel-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .panel-header h3 {
        font-size: 13px;
    }

    .progress-label {
        font-size: 11px;
    }

    .progress-value {
        font-size: 12px;
        padding: 3px 6px;
        min-width: 70px; /* 手機版也要足夠寬度 */
    }

    .control-group label {
        min-width: 85px;
        font-size: 11px;
    }

    .value-display {
        min-width: 30px;
        font-size: 11px;
    }
}

/* Folder section in top-left corner */
.folder-section {
    position: absolute;
    left: 24px !important; /* 再往左移5%：25px - 1px = 24px */
    z-index: 100; /* Always on top, above center image (30) and side images (50) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
    pointer-events: auto; /* Re-enable pointer events for folder links */
    width: 200px;
}

.folder-section-first {
    top: 108.785947px !important; /* 往下移3%：105.617424px * 1.03 = 108.785947px */
}

.folder-section-second {
    top: 304.761666px !important; /* 往下移2%：298.785947px * 1.02 = 304.761666px */
}

.folder-section:hover {
    transform: scale(1.05);
}

.folder-icon {
    width: 123.843128px; /* 再放大2%：121.414831px * 1.02 = 123.843128px */
    height: 95.224446px; /* 再放大2%：93.357300px * 1.02 = 95.224446px */
    margin-bottom: 12px;
    /*filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));*/
    transition: filter 0.2s ease;
}

.folder-section:hover .folder-icon {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}

.folder-text {
    color: #fff;
    font-weight: bold;
    font-size: 28px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    user-select: none;
}

/* Side images positioned in center of left/right halves */
.side-image {
    position: absolute;
    top: 42.8%; /* 往下移0.1% (從42.7%改為42.8%) */
    z-index: 50;
    width: 294px; /* 放大5% (280 * 1.05 = 294) */
    height: auto;
    opacity: 1;
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.side-image-left {
    left: 17.9%; /* 往左移0.3% (從18.2%改為17.9%) */
    transform: translate(-50%, -50%);
}

.side-image-right {
    right: 20%; /* 右移1% (從21%改為20%) */
    transform: translate(50%, -50%);
}

/* 右側圖片獨立樣式 - 縮小2% */
#rightImage {
    width: 384.359283px; /* 縮小2% (392.20335 * 0.98 = 384.359283) */
}

.side-image.fade-out {
    opacity: 0;
    transform: translate(-50%, -150%) !important;
}

.side-image-right.fade-out {
    transform: translate(50%, -150%) !important;
}

/* Center image positioned absolutely centered */
.center-image {
    position: fixed;
    top: 38.33%; /* Moved down 0.1% from 38.23% */
    left: 49.9%; /* Moved right 0.2% from 49.7% */
    transform: translate(-50%, 20%); /* Start below center */
    z-index: 0; /* Behind canvas container */
    width: 652.35px; /* Scaled up 0.1% (651.7px * 1.001) */
    height: auto;
    opacity: 0; /* Start invisible */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.center-image.fade-in {
    opacity: 1;
    transform: translate(-50%, -50%); /* End at center */
}

/* Second center image - scales from smallest to 100% width */
.center-image-second {
    position: fixed;
    top: 45.7%; /* Moved down 0.2% from 45.5% */
    left: 50.2%; /* Moved right 0.2% from 50% */
    transform: translate(-50%, -50%) scale(0.01); /* Start extremely small */
    z-index: 0; /* Same layer as first image */
    width: 95%; /* Final width - 100% of viewport (full width) */
    height: auto;
    opacity: 0; /* Hidden until first image completes */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.center-image-second.scale-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* End at full size */
}

/* Third center image - scales from center smallest to top-left smaller size */
.center-image-third {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.01); /* Start extremely small at center */
    z-index: 0; /* Same layer as other images */
    width: 18%; /* Final width - smaller than before (was 25%) */
    height: auto;
    opacity: 0; /* Hidden until first image completes */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.center-image-third.scale-move {
    opacity: 1;
    /* Final position: adjusted - moved left 0.5% and down 1% */
    /* From 13%, 30% to 14%, 29.5% with 4% larger scale */
    top: 14%; /* Moved down 1% from 13% */
    left: 29.5%; /* Moved left 0.5% from 30% */
    transform: translate(-50%, -50%) scale(1.05025); /* Scaled up 5.025% from 1.0 */
}

/* Fourth center image - scales from center smallest to bottom-left smaller width */
.center-image-fourth {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.01); /* Start extremely small at center */
    z-index: 0; /* Same layer as other images */
    width: 35%; /* Final width - smaller than before (was 50%) */
    height: auto;
    opacity: 0; /* Hidden until first image completes */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.center-image-fourth.scale-move {
    opacity: 1;
    /* Final position: adjusted - moved down 1.0% total */
    /* From 62%, 30.8% to 63%, 30.8% */
    top: 63%; /* Moved down 0.2% from 62.8% */
    left: 30.8%; /* No horizontal change */
    transform: translate(-50%, -50%) scale(1); /* End at normal size */
}

/* Fifth center image - scales from smallest next to Daniel to 3/4 height, bottom-left anchored growth */
.center-image-fifth {
    position: fixed;
    top: 59.19%; /* Moved down 0.1% from 59.09% */
    left: 58.05%; /* Moved left 0.05% from 58.1% */
    transform: translate(0%, -100%) scale(0.025); /* Much smaller starting size, bottom-left anchor */
    z-index: 0; /* Same layer as other images */
    height: 60.120263vh; /* Final height scaled down 0.5% (60.422375vh * 0.995) */
    width: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until first image completes */
    pointer-events: none;
    transform-origin: 0% 100%; /* Bottom-left anchor for scaling */
    /* No transition - controlled by JavaScript */
}

.center-image-fifth.scale-in {
    transform: translate(-50%, -100%) scale(1); /* End at full size with bottom-center anchor */
}

/* Sixth center image - fades in from bottom in right corner after first image completes */
.center-image-sixth {
    position: fixed;
    bottom: 19.95%; /* Position moved down 0.05% (20% - 0.05% = 19.95%) */
    right: 0.8%; /* Position moved right 0.05% (0.85% - 0.05% = 0.8%) */
    transform: translateY(100%) scale(0.9109090441853720); /* Start below viewport, no scale change */
    z-index: 0; /* Same layer as other images */
    width: 30%; /* Larger width - more than 1/4 */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until first image completes */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.center-image-sixth.fade-slide-in {
    opacity: 1;
    transform: translateY(0%) scale(0.9109090441853720); /* End at natural position, scaled down 1% */
}

/* Seventh center image - scales from center smallest to 70% width at 1又3/4圈 */
.center-image-seventh {
    position: fixed;
    top: 41.65%; /* Moved up 8.35% from center (down 0.25%) */
    left: 50%; /* Back to center horizontally */
    transform: translate(-50%, -50%) scale(0); /* Start at zero size */
    z-index: 0; /* Same layer as other images */
    width: 67.721834%; /* Final width - reduced by 3.3% total (70% × 0.995² × 0.999⁶ × 0.998² × 0.997 × 0.99) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.center-image-seventh.scale-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* End at full size */
}

/* Right flying image - flies from right side screen to final position */
.right-flying-image {
    position: fixed;
    top: 29%; /* Move up 6% from 35% to 29% */
    right: -20%; /* Start outside screen on the right */
    transform: translateY(-50%); /* Center vertically */
    z-index: 0; /* Same layer as other images */
    width: 16.977696%; /* Enlarged by 6% from 16% (16% × 1.06) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.right-flying-image.fly-in {
    opacity: 1;
    right: -2.3%; /* Final position: right 0.3% from -2.0% to -2.3% */
}

/* Right flying image lower - flies diagonally from lower-right to upper-left position */
.right-flying-image-lower {
    position: fixed;
    top: 57.15%; /* Start position: moved up 8.85% total (5%+2%+1%+0.5%+0.1%+0.2%+0.05%) */
    right: -20.15%; /* Start outside screen on the right - left 0.15% total */
    transform: translateY(-50%) rotate(0deg); /* Center vertically and tilt more left-up */
    z-index: 0; /* Same layer as other images */
    width: 13.6204%; /* Enlarged by 2.4% from reduced size (13.3% × 1.024) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.right-flying-image-lower.fly-in {
    opacity: 1;
    top: 38.15%; /* Final position: moved up 8.85% total (5%+2%+1%+0.5%+0.1%+0.2%+0.05%) */
    right: 6.85%; /* Final position: left 0.15% total */
}

/* Bottom right sliding image - slides diagonally from bottom to upper-right position */
.bottom-right-sliding-image {
    position: fixed;
    bottom: -15%; /* Start below screen - moved up 5% */
    right: 21%; /* Start position shifted left - moved left 3% */
    z-index: 0; /* Same layer as other images */
    width: 15%; /* Smaller size for sliding image */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.bottom-right-sliding-image.slide-in {
    opacity: 1;
    bottom: 4%; /* Final position - moved up 5% */
    right: 26%; /* Final position - moved left 3% */
}

/* Top right corner flying image - flies from top-right outside to top-right corner */
.top-right-flying-image {
    position: fixed;
    top: -15%; /* Start above screen */
    right: -15%; /* Start outside screen on the right */
    z-index: 0; /* Same layer as other images */
    width: 13.38019425%; /* Reduced by 10.8% total from 15% (15% × 0.95³ × 1.02²) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.top-right-flying-image.fly-in {
    opacity: 1;
    top: 6%; /* Final position: up 1% from 7% to 6% */
    right: 1.6%; /* Final position: right 0.1% from 1.7% to 1.6% */
}

/* Bottom left corner flying image - flies from bottom-left outside toward center, then to corner */
.bottom-left-flying-image {
    position: fixed;
    bottom: -44.7%; /* Start even further below screen - moved up 15.3% total */
    left: -25.3%; /* Start position moved more right and down for stronger diagonal - left 0.3% */
    z-index: 0; /* Same layer as other images */
    width: 40%; /* Reduced by 5% (45% - 5% = 40%) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.bottom-left-flying-image.fly-in {
    opacity: 1;
    bottom: -9.7%; /* Final position: moved down more - moved up 15.3% total */
    left: -10.3%; /* Final position: further left - left 0.3% */
}

/* Bottom right center flying image - flies from bottom-right outside toward center, then to corner */
.bottom-right-center-flying-image {
    position: fixed;
    bottom: -47.375%; /* Start far below screen - moved up 12.625% total (up 0.2%) */
    right: -21.875%; /* Start position outside screen on right - left 0.15% */
    z-index: 0; /* Same layer as other images */
    width: 15.5509354%; /* Enlarged by 1.5% total (原15.319937% × 1.005 × 1.005 × 1.005 = 15.5509354%) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.bottom-right-center-flying-image.fly-in {
    opacity: 1;
    bottom: 14.625%; /* Final position: backed away from center a bit - moved up 12.625% total (up 0.2%) */
    right: 1.525%; /* Final position: backed away from center a bit - left 0.15% */
}

/* Top left center flying image - flies from top-left outside toward center, then to corner */
.top-left-center-flying-image {
    position: fixed;
    top: -60%; /* Start far above screen */
    left: -25%; /* Start position outside screen on left */
    z-index: 0; /* Same layer as other images */
    width: 15.0195%; /* Reduced by 3% from 15.5% (15.5% × 0.95 × 1.02) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.top-left-center-flying-image.fly-in {
    opacity: 1;
    top: 4.11%; /* Final position: down 0.11% from 4% */
    left: 2.2%; /* Final position: left 0.1% from 2.3% */
}

/* Center expanding mask - aligned with 9-grid center */
.center-expanding-mask {
    position: fixed;
    top: 45%; /* Moved up 5% from center, up 1% from previous (46% to 45%) */
    left: 49%; /* Moved right 1% from previous 48% */
    transform: translate(-50%, -50%); /* Only translate, NO SCALE - size controlled by width/height */
    z-index: -7; /* Top layer - above grid, SNAP and red background */
    width: 1000px; /* Initial size (custom) - will be dynamically updated by JavaScript */
    height: 562.5px; /* Initial size - maintain 16:9 ratio - will be dynamically updated by JavaScript */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* Optimize SVG rendering quality - TRUE vector quality without pre-rasterization */
    image-rendering: auto;
    shape-rendering: geometricPrecision;
    will-change: width, height, opacity;
    /* NO backface-visibility or transform optimizations that cause rasterization */
}

/* Removed - animation now handled on container */

/* Nine-grid design helper system */
.design-grid-container {
    position: fixed;
    top: 42.5%; /* Moved up 0.5% from 43% */
    left: 50%; /* Moved left by 5% from 55% */
    transform: translate(-50%, -50%) scale(0.5710112226); /* Increased by 1% from 0.56535764613 (0.56535764613 × 1.01) */
    z-index: -11; /* Above SNAP (-12), above red-bg (-13), below mask (-7) */
    width: 133.0846054808%; /* Increased by 5% again from 126.747243315% (126.747243315% × 1.05) */
    height: 84.3401754%; /* Increased by 10% from 76.6728867% (76.6728867% × 1.1) */
    display: grid;
    grid-template-columns: 1fr var(--center-width, 1fr) 1fr;
    grid-template-rows: 1fr var(--center-height, 1fr) 1fr;
    gap: 0; /* No gap between cells */
    border: 0; /* No border */
    opacity: 0; /* Hidden by default */
    pointer-events: none;
    transform-origin: center center;
    /* Performance optimizations */
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.grid-cell {
    background-color: #f7d218; /* Yellow background */
    border: none !important; /* Remove border */
    outline: none !important; /* No outline */
    box-shadow: 0 0 0 0.05px #f7d218 !important; /* Hair-thin yellow border */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-cell.center-cell {
    background-color: transparent; /* Transparent center cell */
    position: relative;
    overflow: visible; /* Allow mask to extend beyond cell boundaries */
    border: none !important; /* Remove border */
    outline: none !important; /* No outline */
    box-shadow: 0 0 0 0.05px #f7d218 !important; /* Hair-thin yellow border for center cell */
}

/* Show design grid helper */
.design-grid-container.show {
    opacity: 1;
}

/* Top center sliding image - slides from top-center outside down-left */
.top-center-sliding-image {
    position: fixed;
    top: 4.15%; /* Show at top center position - up 0.85% */
    left: 50%; /* Centered horizontally */
    transform: translateX(-50%); /* Center horizontally */
    z-index: 0; /* Same layer as other images */
    width: 20.35617%; /* Enlarged by 2.4% from 19.875% (19.875% × 1.024) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.top-center-sliding-image.slide-in {
    opacity: 1;
    /* Final position will be controlled by JavaScript */
}

/* Top left corner moving image - moves from top-left outside toward center then to corner */
.top-left-corner-moving-image {
    position: fixed;
    top: -30%; /* Start above screen */
    left: -30%; /* Start outside screen on left */
    z-index: -1; /* Behind other animation images (z-index: 0) */
    width: 8.82%; /* Reduced by 11.8% from 10% (10% × 0.7 × 1.2 × 1.05) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.top-left-corner-moving-image.move-in {
    opacity: 1;
    top: 5.75%; /* Final position: down 0.05% from 5.7% */
    left: 12.75%; /* Final position: right 0.05% from 12.7% */
}

/* Bottom center rising image - rises from bottom-center outside up-right */
.bottom-center-rising-image {
    position: fixed;
    bottom: -30%; /* Start below screen */
    left: 45%; /* Start at center-left (50% - 5%) */
    transform: translateX(-50%); /* Center horizontally */
    z-index: 0; /* Same layer as other images */
    width: 10%; /* Smaller size (reduced from 12.5%) */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

/* Daniel head tracking exclamation - follows Daniel's head rotation as he thinks */
.daniel-head-tracking-exclamation {
    position: fixed;
    top: 50%; /* Will be dynamically adjusted based on Daniel's head position */
    left: 50%; /* Will be dynamically adjusted based on Daniel's head position */
    z-index: 15; /* Above Daniel and other elements to show he's thinking */
    width: 2.5%; /* Appropriate size for thought indicator */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered (175-600%) */
    pointer-events: none;
    /* 使用左上角定位，更簡單精確 */
}

/* Dynamic question mark image - changes at different stages (213%-599%) */
.red-question-mark-image {
    position: fixed;
    top: 15%; /* Same height as orbit image final position */
    left: 65%; /* Same left position as orbit image final position */
    transform: translate(-50%, -50%); /* Center on position */
    z-index: 10; /* Above Daniel (canvas z-index: 2) and other images */
    width: 2.8125%; /* Default size, may adjust based on image content */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
    /* Images will change at: 213%(問號) -> 300%(ZZZ) -> 430%(向量圖) -> 599%(end) */
}

.bottom-center-rising-image.rise-up {
    opacity: 1;
    bottom: 5%; /* Final position with 5% margin */
    /* Right movement will be controlled by JavaScript */
}

/* SNAP center image - fixed position to stay centered and unaffected by container transforms */
.snap-center-image {
    position: fixed;
    top: 40.6%; /* Moved up 0.05% from 40.65% */
    left: 54.1%; /* Moved left 0.05% from 54.15% */
    transform: translate(-50%, -50%) scale(0.990025); /* Reduced by 0.5% again (0.995 × 0.995) */
    width: 63.125%; /* Original size relative to viewport */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    z-index: -12; /* Above red-bg (-13), below 9-grid (-11), below mask (-7) */
    /* No transition - controlled by JavaScript */
}

.snap-center-image.show {
    opacity: 1;
}

/* Red vector object 26 - appears at center-bottom-left position */
.red-vector-object-26 {
    position: fixed;
    bottom: 11%; /* Moved down 2% (13% - 2% = 11%) */
    left: 35%; /* Moved right 2% (33% + 2% = 35%) */
    transform: translateX(-50%); /* Center horizontally on position */
    z-index: 0; /* Same layer as other animation images */
    width: 17.325%; /* Enlarged by 15% total (16.5% × 1.05 = 17.325%) */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

/* Red layer 6 - vertical dropping animation from top-right to bottom center */
.red-layer-6 {
    position: fixed;
    top: -20%; /* Start above screen */
    right: -1%; /* Moved right 0.5% (from -0.5% to -1%) */
    z-index: 0; /* Same layer as other animation images */
    width: 18.28462309%; /* Enlarged 3% (17.75206125% × 1.03 = 18.28462309%) */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    transform-origin: center center; /* Rotation from center of image */
    transform-style: preserve-3d; /* Enable 3D transformations */
    backface-visibility: visible; /* Keep image visible from all angles */
    /* No transition - controlled by JavaScript */
}

/* Red layer 4 - vertical dropping animation from top-left to bottom center (mirror of layer 6) */
.red-layer-4 {
    position: fixed;
    top: -20%; /* Start above screen */
    left: 6.5%; /* Moved right 0.5% (from 6% to 6.5%) */
    z-index: 0; /* Same layer as other animation images */
    width: 16.071825%; /* Enlarged 10% (14.61075% × 1.1 = 16.071825%) */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    transform-origin: center center; /* Rotation from center of image */
    /* No transition - controlled by JavaScript */
}

/* Red layer 8 - simple drop animation behind layer 6 */
.red-layer-8 {
    position: fixed;
    top: -20%; /* Start above screen */
    right: 8%; /* Moved left 2% (from 6% to 8%) */
    z-index: -1; /* Behind layer 6 */
    width: 10.43625%; /* 50% of layer 6 size (20.8725% × 0.5) */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    transform-origin: center center; /* Rotation from center of image */
    /* No transition - controlled by JavaScript */
}

/* Red layer 10 - drop animation similar to layer 8 but center-left position */
.red-layer-10 {
    position: fixed;
    top: -20%; /* Start above screen (moved up 5% more) */
    left: 39%; /* Moved right 2% more (37% + 2% = 39%) */
    z-index: -1; /* Behind other layers */
    width: 4.709358%; /* 5% smaller (4.957219% × 0.95 = 4.709358%) */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    transform-origin: center center; /* Rotation from center of image */
    /* No transition - controlled by JavaScript */
}

/* Red layer 9 - slow slide-in from top-left side downward, then slide-out down */
.red-layer-9 {
    position: fixed;
    top: -5%; /* Start above screen */
    left: 5%; /* Start from left side (not corner) */
    z-index: 0; /* Same layer as other animation images */
    width: 8%; /* Enlarged 2 times (4% × 2 = 8%) */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    transform-origin: center center; /* Rotation from center of image */
    /* No transition - controlled by JavaScript */
}

/* Red layer 4_1 - smooth slide-in from top center downward, then slide-out down */
.red-layer-4-1 {
    position: fixed;
    top: -20%; /* Start above screen */
    left: 68%; /* Moved right 1% (67% + 1% = 68%) */
    transform: translateX(-50%); /* Center horizontally */
    z-index: 0; /* Same layer as other animation images */
    width: 11.058%; /* Shrunk 3% more (11.4% × 0.97 = 11.058%) */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    transform-origin: center center; /* Rotation from center of image */
    /* No transition - controlled by JavaScript */
}

/* Red layer 7 - deceleration drop animation from top center, then normal speed slide-out */
.red-layer-7 {
    position: fixed;
    top: -30%; /* Start above screen */
    left: 62.5%; /* Moved right 1% more (61.5% + 1% = 62.5%) */
    transform: translateX(-50%); /* Center horizontally */
    z-index: 0; /* Same layer as other animation images */
    width: 10%; /* Shrunk 50% (20% × 0.5 = 10%) */
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    transform-origin: center center; /* Rotation from center of image */
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-31 {
    position: fixed;
    top: 46%; /* Moved up 10% from original 55%, then down 1% total */
    left: 50.05%; /* Moved right 0.05% */
    transform: translate(-50%, -60%) scale(0.71931392); /* Center and scale 0.71931392x (0.71859533 × 1.001 = 0.1% larger), start 10% higher for fade-in effect */
    z-index: 0; /* Same layer as other animation images */
    width: auto;
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-29 {
    position: fixed;
    top: 20%; /* Moved up 10% from original 30% */
    right: -24%; /* Move left 1% (-25% + 1% = -24%) */
    transform: translateY(-50%) scale(0.728); /* Center vertically and scale to 72.8% (69.3% × 1.05 = 72.8%) */
    z-index: 0; /* Same layer as other animation images */
    width: auto;
    height: auto;
    opacity: 0; /* Hidden until triggered */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-35 {
    position: fixed;
    top: 75%; /* Moved up 10% from original 85% */
    left: 36%; /* 往左移動2% (38% - 2% = 36%) */
    transform: translate(-50%, -50%) scale(0.76); /* 置中對齊並縮小25% (0.8 * 0.95 = 0.76) */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-32 {
    position: fixed;
    top: 55%; /* Moved up 10% from original 65% */
    left: 0%; /* 往左1% (1% - 1% = 0%) */
    transform: translateY(-50%) scale(0.694575); /* 垂直居中並再放大5% (0.6615 × 1.05 = 0.694575) */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-30 {
    position: fixed;
    bottom: 10%; /* Moved up 10% from original bottom 0% */
    left: -2%; /* 往左移2% (0% - 2% = -2%) */
    transform: scale(0.694575); /* 使用相同尺寸，移除垂直居中 */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-28 {
    position: fixed;
    top: 7%; /* Moved up 10% from original 17% */
    left: 54%; /* 往右2% (52% + 2% = 54%) */
    transform: translate(-50%, -50%) scale(0.72930375); /* 居中並放大5% (0.694575 × 1.05 = 0.72930375) */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-27 {
    position: fixed;
    bottom: 21%; /* Moved up 10% from original bottom 11% */
    left: 75%; /* 往右移5% (70% + 5% = 75%) */
    transform: translate(-50%, 50%) scale(0.72930375); /* 居中並使用與28相同尺寸 */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-33 {
    position: fixed;
    bottom: 10%; /* Moved up 10% from original bottom 0% */
    right: -2%; /* 往左移3% (-5% + 3% = -2%) */
    transform: scale(0.72930375); /* 使用與27相同尺寸 */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.red-cut2-vector-34 {
    position: fixed;
    top: 9%; /* Moved up 10% from original 19% */
    left: 0%; /* 往左移動1% (1% - 1% = 0%) */
    transform: scale(0.708467); /* 放大2% (0.694575 × 1.02 = 0.708467) */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut5-layer-14-copy-3-merged {
    position: fixed;
    top: 56%; /* 往下調 3% from 53% */
    left: -7.4%; /* 往左移動1% (-6.4% - 1% = -7.4%) */
    transform: translateY(-50%) scale(0.7005); /* 垂直居中並再縮小5% (0.73735 × 0.95 = 0.7005) */
    z-index: 2; /* 提升層級到向量圖智慧型物件之上 (1 + 1 = 2) */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut5-vector-smart-object-merged {
    position: fixed;
    top: 33%; /* 往下調 3% from 30% */
    left: -28%; /* 往右移動7% (-35% + 7% = -28%) */
    transform: translateY(-50%) scale(0.7); /* 垂直居中並縮小30% (1 - 0.3 = 0.7) */
    z-index: 1; /* 保持原層級，現在在圖層14下方 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut5-angle-1-merged {
    position: fixed;
    bottom: -8%; /* 再往上移 3% from bottom -11% */
    left: -6%; /* 往右移動3% (-9% + 3% = -6%) */
    transform: scale(0.72183); /* 放大3% (0.70081 × 1.03 = 0.72183) */
    z-index: 3; /* 高於圖層14 (z-index: 2) 和向量圖智慧型物件 (z-index: 1) */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut5-group-6-merged {
    position: fixed;
    bottom: 25%; /* 往上移動10% from original bottom 15% */
    left: 73%; /* 往左2% (75% - 2% = 73%) */
    transform: translateX(-50%) scale(0.7695); /* 水平置中並縮小23.05% (0.855 × 0.9 = 0.7695) */
    z-index: 4; /* 高於所有其他BLACK_Cut5圖片 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut5-group-4 {
    position: fixed;
    bottom: 12%; /* 往上移動10% from original bottom 2% */
    right: 2%; /* 往右3% (5% - 3% = 2%) */
    transform: scale(0.75272); /* 再縮小3% (0.776 × 0.97 = 0.75272) */
    z-index: 5; /* 高於群組6 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut5-layer-13 {
    position: fixed;
    bottom: 10%; /* 往上移動10% from original bottom 0% */
    left: 76%; /* 往右1% (75% + 1% = 76%) */
    transform: translateX(-50%) scale(0.69497); /* 水平置中並放大5% (0.66188 × 1.05 = 0.69497) */
    z-index: 6; /* 高於群組4 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut5-lens-merged {
    position: fixed;
    top: -4%; /* 往下調 3% from -7% */
    left: 89%; /* 往左1% (90% - 1% = 89%) */
    transform: translateX(-50%) scale(0.66413); /* 水平置中並再放大5% (0.6325 × 1.05 = 0.66413) */
    z-index: 1; /* 在 Daniel 模型之後 (canvas z-index: 2) */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

/* BLACK Cut6 animations */
.black-cut6-layer-17 {
    position: fixed;
    top: 9%; /* 再往上移1%（10% → 9%） */
    left: 11%; /* 再往左移0.5%（11.5% → 11%） */
    transform: scale(0.7); /* 預設縮小30% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-accessory-01 {
    position: fixed;
    top: 16.65%; /* 往下移0.05%（16.6% → 16.65%） */
    left: 10.45%; /* 往左移0.05%（10.5% → 10.45%） */
    transform: scale(0.81027955); /* 再放大0.5%（0.80624831 × 1.005 = 0.81027955） */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-accessory-02 {
    position: fixed;
    top: 8.25%; /* 上移0.1%（8.35% - 0.1% = 8.25%） */
    left: 3.95%; /* 右移0.5%（3.45% + 0.5% = 3.95%） */
    transform: scale(0.55831290); /* 縮小0.5%（0.56111849 × 0.995 = 0.55831290） */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-accessory-03 {
    position: fixed;
    top: 7.0227%; /* 再往上移15%：8.262% * 0.85 = 7.0227% */
    left: 13.526473%; /* 往右移2%：13.261248% * 1.02 = 13.526473% */
    transform: scale(0.735); /* 放大5%：0.7 * 1.05 = 0.735 */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-accessory-04 {
    position: fixed;
    top: 11.26363%; /* 上移1%：11.3774% * 0.99 = 11.26363% */
    left: 7.68464%; /* 左移0.5%：7.723% * 0.995 = 7.68464% */
    transform: scale(0.98553); /* 再縮小5%：1.0374 * 0.95 = 0.98553 */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-accessory-05 {
    position: fixed;
    top: 13.2%; /* 往下移30%：10% * 1.3 = 13% → 11% * 1.2 = 13.2% */
    left: 10%; /* 中間偏左位置 */
    transform: scale(0.7); /* 預設縮小30%，與其他配飾相同基準 */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-accessory-06 {
    position: fixed;
    top: 19.771375%; /* 往下15%：17.1925% * 1.15 = 19.771375% */
    left: 8.316%; /* 往右10%：7.56% * 1.1 = 8.316% */
    transform: scale(0.7438); /* 放大15%：0.6468 * 1.15 = 0.7438 */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-vector-41 {
    position: fixed;
    top: 11.5%; /* 往上移0.5% (12% - 0.5% = 11.5%) */
    right: 2.7025%; /* 往左移0.02% (2.6825% + 0.02% = 2.7025%) */
    transform: scale(0.721); /* 縮小30%後放大3% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-vector-43 {
    position: fixed;
    top: 22.775%; /* 往上移0.025% (22.8% - 0.025% = 22.775%) */
    left: 36.125%; /* 往右移0.025% (36.1% + 0.025% = 36.125%) */
    transform: translateX(-50%) translateY(-50%) scale(0.7244); /* 置中並縮小30%後放大3.5% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-vector-40 {
    position: fixed;
    bottom: 40.25%; /* 往上移0.05% (40.2% + 0.05% = 40.25%) */
    left: 17.18%; /* 往右移0.015% (17.165% + 0.015% = 17.18%) */
    transform: scale(0.719235); /* 縮小30%後放大3% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-vector-44 {
    position: fixed;
    bottom: 13.175%; /* 往下移0.05% (13.225% - 0.05% = 13.175%) */
    left: 17.7%; /* 往左移0.025% (17.725% - 0.025% = 17.7%) */
    transform: scale(0.7179347995); /* 縮小30%後放大2.55% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-vector-42 {
    position: fixed;
    bottom: 13.4%; /* 往下移0.1% (13.5% - 0.1% = 13.4%) */
    right: 0.6%; /* 往右移0.2% (0.8% - 0.2% = 0.6%) */
    transform: scale(0.72072); /* 縮小30%後放大3% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-vector-45 {
    position: fixed;
    bottom: 9.05%; /* 左下角位置，往下移0.1% */
    left: -1.3%; /* 左下角，往右移0.05% */
    transform: scale(0.71936); /* 縮小30%後放大2.75% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-group-8-merged {
    position: fixed;
    top: 40.1%; /* 往上9.9% (50% - 9.9% = 40.1%) */
    left: 50%; /* 正中間位置 */
    transform: translateX(-50%) translateY(-50%) scale(0.71958); /* 完全置中並放大3%後縮小0.5%再放大0.25% (0.71779 × 1.0025 = 0.71958) */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.black-cut6-layer-16 {
    position: fixed;
    top: 67%; /* 往下移5% (62% + 5% = 67%) */
    left: 68%; /* 正中間位置，往右移18% */
    transform: translateX(-50%) translateY(-50%) scale(0.5985); /* 完全置中並縮小40.15% */
    z-index: 3; /* 在 Daniel 模型之上 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-52 {
    position: fixed;
    top: -4.5%; /* 起始位置在-4.5%（往下移0.1%） */
    left: 50.0%; /* 正中央位置 */
    transform: translateX(-50%) translateY(0%) scale(0.72054); /* 左右置中，頂部對齊，縮小27.946%（放大0.3%） */
    z-index: 1; /* 在 Daniel 模型之後 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-63 {
    position: fixed;
    bottom: 15.5%; /* 右下角位置，再下移0.5% */
    right: 2.75%; /* 右側留2.75%空白，右移0.25% */
    transform: scale(0.7); /* 縮小30% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-58 {
    position: fixed;
    top: -0.8%; /* 左上角位置，再上移0.1% */
    left: -1.9%; /* 左側位置，右移0.5% */
    transform: scale(0.71407); /* 縮小28.593%，再放大1% */
    z-index: 2; /* 在 Vector 52 (z-index: 1) 之上 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-54 {
    position: fixed;
    top: 48.5%; /* 垂直置中，再往上移0.5% */
    right: -3.5%; /* 往左移0.5%，精細調整 */
    transform: translateY(-50%) scale(0.7); /* 垂直置中並縮小30% */
    z-index: 0; /* 與其他動畫圖片同層 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-60 {
    position: fixed;
    top: 51.4%; /* 垂直置中，再往下移0.3% */
    left: 2.8%; /* 左邊中間位置，再往左移0.2% */
    transform: translateY(-50%) scale(0.7); /* 垂直置中並縮小30% */
    z-index: 3; /* 在 Vector 58 (z-index: 2) 之上 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-59 {
    position: fixed;
    top: -1.6%; /* 中間上方位置，往上移16.6% */
    left: 35.9%; /* 水平置中，往左移14.1% */
    transform: translateX(-50%) scale(0.707); /* 水平置中並縮小29.3% */
    z-index: 2; /* 在 Vector 52 之上 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-61 {
    position: fixed;
    top: -2.6%; /* 右上角位置，往上移動7.6% */
    right: -5.8%; /* 右上角位置，往右移動10.8%（往左0.3%） */
    transform: scale(0.714); /* 縮小28.6% */
    z-index: 3; /* 在 Vector 57 (z-index: 2) 之上 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-62 {
    position: fixed;
    bottom: -6.15%; /* 左下角位置，往下移動11.15% */
    left: 0.93%; /* 左下角位置，往左移動4.07% */
    transform: scale(0.71757); /* 縮小28.243% */
    z-index: 2; /* 在 Vector 52 之上 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.beige-cut7-vector-64 {
    position: fixed;
    top: 53.46%; /* 正中間位置往下4.54% */
    left: 62.79%; /* 正中間位置往右12.79% */
    transform: translateX(-50%) translateY(-50%) scale(0.6426); /* 置中並縮小（0.714 × 0.9 = 0.6426） */
    z-index: 1000; /* 高於香腸模型(renderOrder: 600)，在最上層顯示 */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏 */
    pointer-events: none;
    /* No transition - controlled by JavaScript */
}

.snap-red-image {
    position: fixed;
    bottom: 5.6%; /* 再上移0.1%，總共往上移5.6% */
    left: -95.05%; /* 起始位置：左移0.05%，調整為-95.05% */
    width: auto;
    height: auto;
    opacity: 0; /* 預設隱藏，由 JavaScript 控制 */
    pointer-events: none;
    z-index: 1; /* 在Daniel之後 */
    transform: scale(0.71887); /* 再放大1% (0.71175 * 1.01 = 0.71887) */
    /* No transition - controlled by JavaScript */
}

/* Content hidden class - hides all content until loading completes */
.content-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f7d218; /* 黃底背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* 確保在所有內容之上 */
}

.loading-content {
    text-align: center;
    max-width: 300px;
    padding: 2rem;
}

/* Spinner animation */
.spinner {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
}

.loading-gif {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #000; /* 黑色文字，在黃底上更清晰 */
    font-weight: bold;
}

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.2); /* 深色背景條 */
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #81C784);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* Instructions */
.instructions {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    background: rgba(0, 0, 0, 0.8);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    opacity: 1;
    transition: opacity 1s ease;
}

.instruction-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.instruction-item:last-child {
    margin-bottom: 0;
}

.instruction-item .icon {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

/* Error message */
.error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(244, 67, 54, 0.9);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    text-align: center;
    z-index: 1001;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive design */
@media (max-width: 768px) {
    .instructions {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        padding: 0.8rem 1rem;
    }

    .instruction-item {
        font-size: 0.8rem;
    }

    .loading-content {
        padding: 1.5rem;
        max-width: 280px;
    }

    .spinner {
        width: 60px; /* 手機版縮小 gif */
        height: 60px;
        margin: 0 auto 0.8rem;
    }

    .loading-text {
        font-size: 0.95rem; /* 手機版稍微縮小文字 */
        margin-bottom: 1.2rem;
    }

    .progress-bar {
        height: 3px; /* 手機版稍微細一點的進度條 */
    }

    .progress-display {
        font-size: 22px; /* Smaller on mobile */
        padding: 6px 12px;
        top: 15px;
        right: 15px; /* 行動版也改為右上角位置 */
        min-width: 100px;
    }

    .folder-section {
        left: 46px !important; /* 再往左移5%：48px - 2px = 46px */
    }

    .folder-section-first {
        top: 48.366453px !important; /* 往下移3%：46.957721px * 1.03 = 48.366453px */
    }

    .folder-section-second {
        top: 243.133782px !important; /* 往下移2%：238.366453px * 1.02 = 243.133782px */
    }

    .folder-icon {
        width: 114.335647px; /* 再放大2%：112.093772px * 1.02 = 114.335647px */
        height: 114.335647px; /* 再放大2%：112.093772px * 1.02 = 114.335647px */
        margin-bottom: 8px;
    }

    .folder-text {
        font-size: 14px;
    }

    .side-image {
        width: 180px;
        height: auto;
    }

    .side-image-left {
        left: 15px;
    }

    .side-image-right {
        right: 15px;
    }

    .center-image {
        width: 521.88px; /* Scaled up 0.1% (521.36px * 1.001) */
    }

    .center-image-second {
        width: 100%; /* Full width on mobile */
    }

    .center-image-fifth {
        height: 46.246356vh; /* Smaller on mobile - scaled down 0.5% (46.47875vh * 0.995) */
        left: 66.05%; /* Adjust position for mobile - moved left 0.05% from 66.1% */
        top: 59.19%; /* Adjust vertical position for mobile - moved down 0.1% from 59.09% */
    }

    .center-image-sixth {
        width: 35%; /* Even larger on mobile */
        bottom: 17.95%; /* Moved down 0.05% (18% - 0.05% = 17.95%) */
        right: -0.2%; /* Moved right 0.05% (from -0.15% - 0.05% = -0.2%) */
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
    }

    .progress-fill {
        transition: none;
    }

    .instructions {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .loading-overlay {
        background: #000;
    }

    .instructions {
        background: #000;
        border: 2px solid #fff;
    }

    .error-message {
        background: #d32f2f;
        border: 2px solid #fff;
    }
}

/* BEIGE Cut8 Vector 66 動畫 */
.beige-cut8-vector-66 {
    position: fixed;
    top: 4.6%;
    right: -5.2%;
    width: auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transform: scale(0.72114);
}

/* BEIGE Cut8 Vector 69 動畫 */
.beige-cut8-vector-69 {
    position: fixed;
    top: 0.5%;
    left: 3.25%;
    width: auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transform: scale(0.7);
}

/* BEIGE Cut8 Vector 68 動畫 */
.beige-cut8-vector-68 {
    position: fixed;
    top: 14.4%;
    left: 26.4%;
    width: auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%) scale(0.7203);
}

/* BEIGE Cut7 Vector 57 動畫 */
.beige-cut7-vector-57 {
    position: fixed;
    top: 38.05%;
    left: 63.5%;
    width: auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transform: translateX(-50%) translateY(-50%) scale(0.71407);
}

/* BEIGE Cut8 Vector Copy 2 動畫 */
.beige-cut8-vector-copy-2 {
    position: fixed;
    bottom: -11.1%;
    right: -29.8%;
    width: auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transform: scale(0.71407);
}

/* Animation control button style */
.anim-control-btn {
    padding: 5px 15px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.anim-control-btn:hover {
    background: #45a049;
}

.anim-control-btn:active {
    transform: scale(0.95);
}

/* Fine adjustment buttons */
.fine-adjust-btn {
    padding: 2px 8px;
    margin: 0 2px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.3s;
}

.fine-adjust-btn:hover {
    background: #1976D2;
}

/* Preset buttons */
.preset-btn {
    padding: 3px 8px;
    margin: 1px;
    background: #FF9800;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    transition: background 0.3s;
}

.preset-btn:hover {
    background: #F57C00;
}