/* 超寬桌面：≤1800px */
@media (max-width: 1800px) {
    :root {
        --logo-width: 867px;
        --holding-logo-under-star-width: 867px;
        --text-enjoy-width: 893px;
        --text-holding-iac-width: 308px;
        --text-holding-date-width: 168px;
        --icon-swan-width: 123px;
        --icon-trumpet-width: 217px;
        --icon-tree-width: 167px;
        --icon-music-note-width: 83px;
        --cloud-div-1-width: 584px;
        --cloud-div-2-width: 543px;
        --cloud-div-3-width: 350px;
        --cloud-div-4-width: 343px;
        --cloud-font-size: 26px;
        --cloud-font-lg: 34px;
        --cloud-div-2-font-size: 24px;
        --cloud-div-2-sub-text-line-height: 27px;
        --cloud-div-3-font-size: 19px;
        --cloud-div-4-font-size: 19px;
        --cloud-line-height: 28px;
    }
}

/* 寬屏桌面：≤1600px */
@media (max-width: 1600px) {
    :root {
        --logo-width: 700px;
        --holding-logo-under-star-width: 700px;
        --text-enjoy-width: 830px;
        --text-holding-iac-width: 230px;
        --text-holding-date-width: 138px;
        --cloud-div-1-width: 570px;
        --cloud-div-2-width: 530px;
        --cloud-div-2-right: -3%;
        --cloud-div-3-width: 340px;
        --cloud-div-4-width: 335px;
        --icon-swan-width: 120px;
        --icon-trumpet-width: 210px;
        --icon-tree-width: 160px;
        --icon-music-note-width: 80px;
        --cloud-font-lg: 33px;
        --cloud-div-3-font-size: 18px;
        --cloud-div-4-font-size: 18px;
    }
}

/* 大型桌面：≤1366px */
@media (max-width: 1366px) {
    :root {
        --logo-width: 600px;
        --holding-logo-under-star-width: 600px;
        --text-enjoy-width: 700px;
        --text-holding-iac-left: 4%;
        --text-holding-iac-top: 0%;
        --text-holding-date-width: 160px;
        --text-holding-date-right: 5%;
        --text-holding-date-top: 0%;
        --icon-swan-width: 110px;
        --icon-trumpet-width: 190px;
        --icon-tree-width: 150px;
        --icon-music-note-width: 75px;
        --cloud-div-1-width: 480px;
        --cloud-div-2-width: 430px;
        --cloud-div-3-width: 290px;
        --cloud-div-4-width: 280px;
        --cloud-font-size: 22px;
        --cloud-font-lg: 28px;
        --cloud-div-2-font-size: 20px;
        --cloud-div-2-sub-text-line-height: 17px;
        --cloud-div-3-font-size: 16px;
        --cloud-div-4-font-size: 16px;
        --cloud-line-height: 23px;
    }
}

/* 標準桌面：≤1200px */
@media (max-width: 1200px) {
    :root {
        --logo-width: 544px;
        --holding-logo-under-star-width: 544px;
        --logo-padding-top: 4%;
        --text-enjoy-width: 630px;
        --text-enjoy-bottom: 5%;
        --text-holding-iac-width: 250px;
        --text-holding-date-width: 150px;
        --icon-swan-width: 100px;
        --icon-trumpet-width: 170px;
        --icon-tree-width: 140px;
        --icon-music-note-width: 70px;
        --cloud-div-1-width: 432px;
        --cloud-div-2-width: 383px;
        --cloud-div-3-width: 262px;
        --cloud-div-4-width: 252px;
        --cloud-font-size: 20px;
        --cloud-font-lg: 26px;
        --cloud-div-2-font-size: 18px;
        --cloud-div-2-sub-text-line-height: 15px;
        --cloud-div-3-font-size: 15px;
        --cloud-div-4-font-size: 15px;
        --cloud-line-height: 21px;
    }
    
    .holding-star-overlay{
        object-fit: cover;
    }
}

/* 平板/小型桌面：≤1024px */
@media (max-width: 1024px) {
    :root {
        --logo-width: 70%;
        --holding-logo-under-star-width: 70%;
        --text-enjoy-width: 70%;
        --text-enjoy-bottom: 4%;
        --text-holding-iac-width: 220px;
        --text-holding-iac-left: 3%;
        --text-holding-iac-top: 4%;
        --text-holding-date-width: 130px;
        --text-holding-date-right: 4%;
        --text-holding-date-top: 5%;
        --icon-swan-width: 90px;
        --icon-swan-left: 14%;
        --icon-swan-bottom: 28%;
        --icon-trumpet-width: 150px;
        --icon-trumpet-left: 0%;
        --icon-trumpet-bottom: 5%;
        --icon-tree-width: 125px;
        --icon-tree-right: unset;
        --icon-tree-top: 17%;
        --icon-music-note-width: 65px;
        --icon-music-note-right: 15%;
        --icon-music-note-bottom: 25%;
        --cloud-div-1-width: 365px;
        --cloud-div-1-top: 17%;
        --cloud-div-1-left: 4%;
        --cloud-div-2-width: 318px;
        --cloud-div-2-top: 18%;
        --cloud-div-2-right: 9%;
        --cloud-div-3-width: 225px;
        --cloud-div-3-bottom: 5%;
        --cloud-div-3-right: 5%;
        --cloud-div-4-width: 215px;
        --cloud-div-4-bottom: 8%;
        --cloud-div-4-right: 30%;
        --cloud-font-size: 18px;
        --cloud-font-lg: 24px;
        --cloud-div-2-font-size: 16px;
        --cloud-div-2-sub-text-line-height: 14px;
        --cloud-div-3-font-size: 14px;
        --cloud-div-4-font-size: 14px;
        --cloud-line-height: 20px;
        --logo-padding-top: 15%;
    }

    .holding-wrapper{
        height: 100%;
    }

    .holding .holding-wrapper{
        height: 100%;
    }

    .holding .holding-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .holding .holding-content .text-holding-enjoy{
        bottom: 20%;
    }

    .holding .holding-wrapper .text-holding-IAC,
    .holding .holding-wrapper .text-holding-event-date{
        display: none;
    }

    .holding .holding-wrapper .text-holding-IAC-mix-mobile{
        display: block;
        top: 8%;
    }

    .holding .holding-content .holding-logo-under-star{
        bottom: 6.5%;
    }

    .holding .holding-wrapper .icon-bg-trumpet{
        right: 0;
        margin: 0 auto;
    }

    .holding .holding-wrapper .icon-bg-tree{
        left: 5%;
    }

    .holding main {
        background-size: cover, 150% auto, cover;
    }
    
    .holding main{
        background-image: url('../media/images/common/cloud_holding_bottom.png'), url('../media/images/common/bg_holding_mobile.png');
        background-position: center bottom, top;
        background-size: 230% auto, cover;
        background-repeat: no-repeat, repeat;
    }
}

@media (max-width: 820px) {
    .holding .holding-wrapper .text-holding-IAC-mix-mobile {
        top: 7%;
    }

    :root{
        --cloud-div-1-top: 14%;
        --cloud-div-2-top: 15%;
    }
}

/* 平板：≤768px */
@media (max-width: 768px) {
    :root {
        --logo-width: 70%;
        --holding-logo-under-star-width: 70%;
        --logo-padding-top: 20%;
        --text-enjoy-width: 70%;
        --text-enjoy-bottom: 3%;
        --text-holding-iac-width: 180px;
        --text-holding-iac-left: 2%;
        --text-holding-iac-top: 3%;
        --text-holding-date-width: 110px;
        --text-holding-date-right: 3%;
        --text-holding-date-top: 4%;
        --icon-swan-width: 75px;
        --icon-swan-left: 15%;
        --icon-swan-bottom: 23%;
        --icon-trumpet-width: 120px;
        --icon-trumpet-left: 0;
        --icon-trumpet-bottom: 3%;
        --icon-tree-width: 100px;
        --icon-tree-right: 15%;
        --icon-tree-top: 4%;
        --icon-music-note-width: 55px;
        --icon-music-note-right: 14%;
        --icon-music-note-bottom: 25%;
        --cloud-div-1-width: 288px;
        --cloud-div-1-top: 15%;
        --cloud-div-1-left: 5%;
        --cloud-div-2-width: 252px;
        --cloud-div-2-top: 12%;
        --cloud-div-2-right: 6%;
        --cloud-div-3-width: 178px;
        --cloud-div-3-bottom: 2%;
        --cloud-div-4-width: 168px;
        --cloud-div-4-bottom: 5%;
        --cloud-div-4-right: 31%;
        --cloud-font-size: 15px;
        --cloud-font-lg: 19px;
        --cloud-div-2-font-size: 13px;
        --cloud-div-2-sub-text-line-height: 11px;
        --cloud-div-3-font-size: 11px;
        --cloud-div-4-font-size: 11px;
        --cloud-line-height: 17px;
    }

    .holding .holding-wrapper .text-holding-IAC-mix-mobile{
        width: 80%;
        top: 6%;
    }

    @keyframes float1 {
        0%, 100% { transform: translateX(0px) translateY(0px); }
        25%  { transform: translateX(4px) translateY(-10px); }
        50%  { transform: translateX(0px) translateY(-14px); }
        75%  { transform: translateX(-4px) translateY(-10px); }
    }

    @keyframes float2 {
        0%, 100% { transform: translateX(0px) translateY(0px); }
        25%  { transform: translateX(-5px) translateY(-12px); }
        50%  { transform: translateX(0px) translateY(-17px); }
        75%  { transform: translateX(5px) translateY(-12px); }
    }

    @keyframes float3 {
        0%, 100% { transform: translateX(0px) translateY(0px); }
        25%  { transform: translateX(3px) translateY(-15px); }
        50%  { transform: translateX(-2px) translateY(-19px); }
        75%  { transform: translateX(-3px) translateY(-13px); }
    }

    @keyframes float4 {
        0%, 100% { transform: translateX(0px) translateY(0px); }
        25%  { transform: translateX(-5px) translateY(-11px); }
        50%  { transform: translateX(3px) translateY(-16px); }
        75%  { transform: translateX(5px) translateY(-9px); }
    }
}

/* 手機：≤576px */
@media (max-width: 576px) {
    :root {
        --logo-width: 65vw;
        --holding-logo-under-star-width: 240px;
        --logo-padding-top: 12%;
        --text-enjoy-width: 71%;
        --text-enjoy-bottom: 2%;
        --text-holding-iac-width: 140px;
        --text-holding-iac-left: 1%;
        --text-holding-iac-top: 2%;
        --text-holding-date-width: 85px;
        --text-holding-date-right: 2%;
        --text-holding-date-top: 3%;
        --icon-swan-width: 60px;
        --icon-swan-left: 17%;
        --icon-swan-bottom: 23%;
        --icon-trumpet-width: 95px;
        --icon-trumpet-left: 0%;
        --icon-trumpet-bottom: 2%;
        --icon-tree-width: 80px;
        --icon-tree-right: 12%;
        --icon-tree-top: 17%;
        --icon-music-note-width: 45px;
        --icon-music-note-right: 15%;
        --icon-music-note-bottom: 26%;
        --cloud-div-1-width: 230px;
        --cloud-div-1-top: 15.5%;
        --cloud-div-1-left: 5%;
        --cloud-div-2-width: 201px;
        --cloud-div-2-top: 16%;
        --cloud-div-2-right: 8%;
        --cloud-div-3-width: 140px;
        --cloud-div-3-bottom: 2%;
        --cloud-div-3-right: 19%;
        --cloud-div-4-width: 135px;
        --cloud-div-4-bottom: 7%;
        --cloud-div-4-right: 43%;
        --cloud-font-size: 11px;
        --cloud-font-lg: 15px;
        --cloud-div-2-font-size: 9px;
        --cloud-div-2-sub-text-line-height: 7px;
        --cloud-div-3-font-size: 8px;
        --cloud-div-4-font-size: 8px;
        --cloud-line-height: 13px;
    }

    /* .holding main{
        background-image: url('../media/images/common/cloud_holding_bottom.png'), url('../media/images/common/bg_holding_mobile.png');
        background-position: center bottom, top;
        background-size: 230% auto, cover;
        background-repeat: no-repeat, repeat;
    } */

    .holding .holding-content .text-holding-enjoy {
        bottom: 20%;
    }

    .holding-star-overlay{
        display: none;
    }


    .holding-star-overlay-mobile{
        display: block;
        top: -4%;
        left: 0;
        object-fit: cover;
    }

    .holding main::before{
        display: none;
    }
}

/* 手機：≤520px */
@media (max-width: 520px) {
    :root {
        --logo-width: 90%;
        --text-enjoy-width: 90%;
        --icon-swan-left: 9%;
        --icon-swan-bottom: 27%;
        --icon-trumpet-width: 73px;
        --icon-tree-top: 14%;
        --icon-music-note-width: 34px;
        --icon-music-note-right: 8%;
        --icon-music-note-bottom: 30%;
        --cloud-div-1-top: 13%;
        --cloud-div-1-left: 4%;
        --cloud-div-2-top: 13%;
        --cloud-div-2-right: 0%;
        --cloud-div-3-width: 150px;
        --cloud-div-3-bottom: 5%;
        --cloud-div-3-right: 3%;
        --cloud-div-4-bottom: 9%;
        --cloud-div-4-right: 38%;
        --cloud-div-2-font-size: 11px;
        --cloud-div-3-font-size: 9px;
        --cloud-div-4-font-size: 9px;
        --cloud-line-height: 14px;
    }
    
    .holding main{
        background-image: url('../media/images/common/cloud_holding_bottom_mobile_v2.png'), url('../media/images/common/bg_holding_mobile.png');
        background-position: center bottom, top;
        background-size: 100% auto, cover;
        background-repeat: no-repeat, repeat;
    }

    .holding .holding-wrapper .text-holding-IAC-mix-mobile{
        top: 7%;
    }

    .holding .holding-content .text-holding-enjoy {
        bottom: 25%;
    }

    .holding .holding-wrapper .icon-bg-tree {
        left: 12%;
    }

    .holding {
        overflow-y: scroll;
    }

    .holding main {
        background-attachment: scroll;
    }

    .holding .holding-content .holding-logo-under-star {
        bottom: 18.5%;
    }
}

@media (max-width: 375px) {
    .holding .holding-wrapper .text-holding-IAC-mix-mobile {
        top: 5%;
    }
    
    :root {
        --logo-width: 80%;
        --cloud-div-1-top: 12%;
        --cloud-div-1-left: -7%;
        --cloud-div-2-top: 15%;
        --cloud-div-2-right: -8%;
    }

    .holding main{
        height: 110vh;
    }
}

@media (min-width: 700px) and (max-width: 1025px) and (max-height: 950px) {

    .holding main{
        height:200vh;
        max-height: 1300px;
        background-attachment: scroll;
    }
    
    .holding {
        overflow-y: scroll;
    }
}

/* 矮屏桌面：≤1000px 高（桌面限定） */
@media (min-width: 1025px) and (max-height: 1000px) {
    :root {
        --logo-width: 38vw;
        --holding-logo-under-star-width: 38vw;
        --logo-padding-top: 14%;
        --text-enjoy-width: 694px;
        --text-enjoy-bottom: 4%;
        --text-holding-iac-width: 216px;
        --text-holding-date-width: 110px;
        --icon-swan-width: 109px;
        --icon-trumpet-width: 192px;
        --icon-tree-width: 148px;
        --icon-music-note-width: 73px;
        --cloud-div-1-width: 498px;
        --cloud-div-2-width: 451px;
        --cloud-div-3-width: 291px;
        --cloud-div-4-width: 285px;
        --cloud-font-size: 21px;
        --cloud-font-lg: 28px;
        --cloud-div-2-font-size: 20px;
        --cloud-div-2-sub-text-line-height: 16px;
        --cloud-div-3-font-size: 16px;
        --cloud-div-4-font-size: 16px;
        --cloud-line-height: 25px;
    }
}

@media (min-width: 1500px) and (max-height: 1000px) {
    :root{
        --logo-padding-top: 3%;
        --logo-width: 720px;
        --holding-logo-under-star-width: 720px;
        --cloud-div-1-top: 25%;
        --cloud-line-height: 27px;
    }
}

@media (min-width: 769px) and (max-width: 1000px) and (min-height: 800px) and (max-height: 1000px) {
    :root {
        --logo-width: 50%;
        --holding-logo-under-star-width: 50%;
        --logo-padding-top: 20%;
        --text-enjoy-width: 592px;
        --text-enjoy-bottom: 3%;
        --icon-swan-width: 93px;
        --icon-swan-bottom: 16%;
        --icon-trumpet-width: 164px;
        --icon-tree-width: 127px;
        --icon-music-note-width: 63px;
        --icon-music-note-right: 21%;
        --icon-music-note-bottom: 17%;
        --cloud-div-1-width: 425px;
        --cloud-div-1-top: 15%;
        --cloud-div-1-left: -4%;
        --cloud-div-1-right: -0%;
        --cloud-div-2-width: 385px;
        --cloud-div-2-top: 11%;
        --cloud-div-2-right: -2%;
        --cloud-div-3-width: 248px;
        --cloud-div-3-bottom: 9%;
        --cloud-div-3-right: 0%;
        --cloud-div-4-width: 243px;
        --cloud-div-4-bottom: 22%;
        --cloud-div-4-right: 12%;
        --cloud-font-size: 18px;
        --cloud-font-lg: 24px;
        --cloud-div-2-font-size: 17px;
        --cloud-div-2-sub-text-line-height: 14px;
        --cloud-div-3-font-size: 13px;
        --cloud-div-4-font-size: 13px;
        --cloud-line-height: 21px;
    }

    .holding .holding-wrapper .text-holding-IAC-mix-mobile{
        top: 5%;
    }
    
    .holding .holding-content .text-holding-enjoy {
        bottom: 12%;
    }
}

/* 矮屏桌面：≤768px 高（桌面限定） */
@media (min-width: 1025px) and (max-height: 768px) {
    :root {
        --logo-width: 630px;
        --holding-logo-under-star-width: 630px;
        --logo-padding-top: 2%;
        --text-enjoy-width: 592px;
        --text-enjoy-bottom: 3%;
        --icon-swan-width: 93px;
        --icon-trumpet-width: 164px;
        --icon-tree-width: 127px;
        --icon-music-note-width: 63px;
        --cloud-div-1-width: 425px;
        --cloud-div-2-width: 385px;
        --cloud-div-2-top: 14%;
        --cloud-div-2-right: 2%;
        --cloud-div-3-width: 248px;
        --cloud-div-4-width: 243px;
        --cloud-font-size: 18px;
        --cloud-font-lg: 24px;
        --cloud-div-2-font-size: 17px;
        --cloud-div-2-sub-text-line-height: 14px;
        --cloud-div-3-font-size: 13px;
        --cloud-div-4-font-size: 13px;
        --cloud-line-height: 21px;
    }
}

/* 桌面高度不足：允許垂直捲動（桌面限定，height < 700px） */
@media (min-width: 1025px) and (max-height: 700px) {
    .holding {
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 1080px;
    }
    .holding main {
        min-height: 1080px;
        background-attachment: scroll;
    }
}

/* 減少動態效果（WCAG 2.2 AA） */
@media (prefers-reduced-motion: reduce) {
    .holding .holding-wrapper .cloud-div {
        animation-play-state: paused;
        will-change: auto;
    }
}