/* 顯示區域可scroll下方以漸層mask方式顯示 */
.fade-bottom-mask {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
}

/* 隱藏原生滾動條但保持滾動功能 */
.custom-scroll::-webkit-scrollbar {
    width: 5px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(201, 119, 21, 0.25);
    border-radius: 9999px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 119, 21, 0.45);
}

/* 浮動小動畫 */
@keyframes subtle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.animate-float {
    animation: subtle-bounce 3s ease-in-out infinite;
}

/* 頁面切換過渡效果 */
.view-transition {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

section#view-auth, section#view-album{
    width: calc(100dvw * 960 / 1920);
    min-height: calc(100dvw * 1131 / 1920);
}
section#view-detail{
    width: calc(100dvw * 960 / 1920);
    min-height: calc(100dvw * 1131 / 1920);
}


.card-panel{
    /* width: calc(100dvw * 960 / 1920);; */
    padding: calc(100dvw * 80 / 1920);
}
input#auth-phone, input#auth-email{
    width: calc(100dvw * 640 / 1920);
}
@media (max-width: 768px) {
    section#view-auth,
    section#view-detail,
    section#view-album{
        width: calc(100dvw * 584 / 640);
        min-height: calc(100dvw * 1069 / 640);
    }
    .card-panel{
        padding: calc(100dvw * 60 / 640) calc(100dvw * 20 / 640);
    }
    input#auth-phone, input#auth-email{
        width: calc(100dvw * 376 / 640);
    }
}



/* 裝飾小熊 */
.card-deco-1{
    position: absolute;
    top: calc(100dvw * -40 / 1920);
    left: 50%;
    width: calc(100dvw * 159 / 1920);
    height: calc(100dvw * 192 / 1920);
    transform: translate(100%, -50%);
}
.card-deco-2{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100dvw * 230 / 1920);
    height: calc(100dvw * 171 / 1920);
    transform: translate(-30%, -85%);
}
.card-deco-3{
    position: absolute;
    top: 100%;
    left: 100%;
    width: calc(100dvw * 147 / 1920);
    height: calc(100dvw * 170 / 1920);
    transform: translate(0, -50%);
}
.card-deco-4{
    position: absolute;
    top: 0;
    left: calc(100dvw * 90 / 1920);
    width: calc(100dvw * 164 / 1920);
    height: calc(100dvw * 177 / 1920);
    transform: translate(0%, -80%);
}
.card-deco-5{
    position: absolute;
    top: 0;
    right: calc(100dvw * 90 / 1920);
    width: calc(100dvw * 154 / 1920);
    height: calc(100dvw * 176 / 1920);
    transform: translate(0%, -35%);
}
@media (max-width: 768px) {
    .card-deco-1{
        width: calc(100dvw * 121 / 640);
        height: calc(100dvw * 146 / 640);
        top: calc(100dvw * -20 / 640);
        left: initial;
        right: 0;
        transform: translate(0, -60%);
    }
    .card-deco-2{
        width: calc(100dvw * 162 / 640);
        height: calc(100dvw * 121 / 640);
        transform: translate(-15%, -80%);
    }

    .card-deco-3{
        top: 33%;
        left: initial;
        right: 0;
        width: calc(100dvw * 103 / 640);
        height: calc(100dvw * 120 / 640);
        transform: translate(25%, -50%);
    }

    .card-deco-4{
        left: initial;
        width: calc(100dvw * 115 / 640);
        height: calc(100dvw * 125 / 640);
    }

    .card-deco-5{
        right: calc(100dvw * 80 / 640);
        width: calc(100dvw * 108 / 640);
        height: calc(100dvw * 124 / 640);
        transform: translate(0%, 10%);
    }
}


#auth-form{
    gap: calc(100dvw*30/1920);
    font-size: calc(100dvw*32/1920);
}

.info-result{width: calc(100dvw * 864 / 1920);}
.info-up{
    gap: calc(100dvw*32/1920);
    padding:calc(100dvw*80/1920) calc(100dvw*60/1920) calc(100dvw*60/1920) calc(100dvw*80/1920);
}
.info-down-h{padding: calc(100dvw*40/1920) calc(100dvw*80/1920) 0;}
.info-down{padding:0 calc(100dvw*80/1920) calc(100dvw*40/1920);}

.info-t-size-20{font-size: calc(100dvw*20/1920);}
.info-t-size-24{font-size: calc(100dvw*24/1920);}
.info-t-size-32{font-size: calc(100dvw*32/1920);}
@media (max-width: 768px) {
    #auth-form {
        gap: calc(100dvw*25/640); 
        font-size: calc(100dvw*32/640);
    }
    .info-result{width: calc(100dvw * 584 / 640);}
    .info-up{
        gap: calc(100dvw*40/640);
        padding:calc(100dvw*80/640) calc(100dvw*30/640) calc(100dvw*30/640) ;
    }
    .info-up>div{gap: calc(100dvw*40/640);}
    .info-down-h{padding: calc(100dvw*30/640) calc(100dvw*30/640) 0;}
    .info-down{padding:0 calc(100dvw*30/640) calc(100dvw*30/640);}
    .info-t-size-20{font-size: calc(100dvw*20/640);}
    .info-t-size-24{font-size: calc(100dvw*24/640);}
    .info-t-size-32{font-size: calc(100dvw*32/640);}
}