:root {
    --cloud-text-color: #252080CC;
    --transition-duration: 0.4s;
    --transition-timing: ease-in-out;
    
    /* Responsive sizing variables for 1920px base */
    --logo-width: 925px;
    --holding-logo-under-star-width: 925px;
    --logo-padding-top: 5%;
    --text-enjoy-width: 952px;
    --text-enjoy-bottom: 6%;
    --text-holding-iac-width: 329px;
    --text-holding-iac-left: 5%;
    --text-holding-iac-top: 5%;
    --text-holding-date-width: 179px;
    --text-holding-date-right: 6%;
    --text-holding-date-top: 7%;
    --icon-swan-width: 131px;
    --icon-swan-left: 8.5%;
    --icon-swan-bottom: 26.5%;
    --icon-trumpet-width: 231px;
    --icon-trumpet-left: 18%;
    --icon-trumpet-bottom: 15%;
    --icon-tree-width: 178px;
    --icon-tree-right: 21%;
    --icon-tree-top: 8%;
    --icon-music-note-width: 88px;
    --icon-music-note-right: 7%;
    --icon-music-note-bottom: 13%;
    --cloud-div-1-width: 623px;
    --cloud-div-1-top: 23%;
    --cloud-div-1-left: 0%;
    --cloud-div-2-width: 579px;
    --cloud-div-2-top: 12%;
    --cloud-div-2-right: 1%;
    --cloud-div-3-width: 373px;
    --cloud-div-3-bottom: 15%;
    --cloud-div-3-right: 7%;
    --cloud-div-4-width: 366px;
    --cloud-div-4-bottom: 27%;
    --cloud-div-4-right: 17%;
    --cloud-font-size: 28px;
    --cloud-font-lg: 36px;
    --cloud-div-2-font-size: 26px;
    --cloud-div-2-sub-text-line-height: 29px;
    --cloud-div-3-font-size: 20px;
    --cloud-div-4-font-size: 20px;
    --cloud-line-height: 1.2;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Focus styles for keyboard navigation */
*:focus-visible {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

/* Skip link styling */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 9999;
    text-decoration: none;
    font-size: 14px;
}

.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #FFD700;
}

/* =====================
   Font Utility Classes
   ===================== */
.font-albert {
    font-family: 'Albert Sans', sans-serif;
}

.font-zen {
    font-family: 'Zen Maru Gothic', sans-serif;
}

/* =====================
   Holding Page
   ===================== */

/* Star twinkling animation */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
}

/* Cloud floating animations - each cloud has unique timing and amplitude */
@keyframes float1 {
    0%, 100% {
        transform: translate3d(0px, 0px, 0);
    }
    25% {
        transform: translate3d(6px, -15px, 0);
    }
    50% {
        transform: translate3d(0px, -20px, 0);
    }
    75% {
        transform: translate3d(-6px, -15px, 0);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translate3d(0px, 0px, 0);
    }
    25% {
        transform: translate3d(-8px, -18px, 0);
    }
    50% {
        transform: translate3d(0px, -25px, 0);
    }
    75% {
        transform: translate3d(8px, -18px, 0);
    }
}

@keyframes float3 {
    0%, 100% {
        transform: translate3d(0px, 0px, 0);
    }
    25% {
        transform: translate3d(5px, -22px, 0);
    }
    50% {
        transform: translate3d(-3px, -28px, 0);
    }
    75% {
        transform: translate3d(-5px, -20px, 0);
    }
}

@keyframes float4 {
    0%, 100% {
        transform: translate3d(0px, 0px, 0);
    }
    25% {
        transform: translate3d(-7px, -16px, 0);
    }
    50% {
        transform: translate3d(4px, -24px, 0);
    }
    75% {
        transform: translate3d(7px, -14px, 0);
    }
}

.holding {
    overflow: hidden;
}

.holding main {
    width: 100vw;
    height: 100vh;
    background-image: url('../media/images/common/cloud_holding_bottom.png'), url('../media/images/common/bg_holding.png');
    background-size: 100% auto, cover;
    background-position: center bottom, bottom;
    background-repeat: no-repeat, repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.holding main::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../media/images/common/star_holding_cover_01.png');
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    background-attachment: scroll;
    animation: twinkle 3s ease-in-out infinite alternate;
    pointer-events: none;
}

.holding-star-overlay,
.holding-star-overlay-mobile {
    position: absolute;
    top: 10.28%;
    left: -0.78%;
    width: 95.52%;
    height: 113.33%;
    pointer-events: none;
    animation: twinkle 3s ease-in-out infinite alternate;
    animation-delay: -1.5s;
}

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

.holding .holding-wrapper{
    max-width: 1920px;
    width: 100%;
    position: relative;
}

.holding .holding-content{
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.holding .holding-content .logo-IAC {
    width: var(--logo-width);
    max-width: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
    padding-top: var(--logo-padding-top);
    z-index: 2;
    transition: width var(--transition-duration) var(--transition-timing), padding-top var(--transition-duration) var(--transition-timing);
}

.holding .holding-content .text-holding-enjoy{
    width: var(--text-enjoy-width);
    margin: 0 auto;
    position: absolute;
    bottom: var(--text-enjoy-bottom);
    left: 0;
    right: 0;
    z-index: 3;
    transition: width var(--transition-duration) var(--transition-timing), bottom var(--transition-duration) var(--transition-timing);
}

.holding .holding-content .holding-logo-under-star{
    width: var(--holding-logo-under-star-width);
    position: absolute;
    display: block;
    margin: 0 auto;
    bottom: -15.5%;
    left: 0;
    right: 0;
    z-index: 1;
    transition: width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .text-holding-IAC{
    position: absolute;
    left: var(--text-holding-iac-left);
    top: var(--text-holding-iac-top);
    width: var(--text-holding-iac-width);
    transition: left var(--transition-duration) var(--transition-timing), top var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .text-holding-event-date{
    position: absolute;
    right: var(--text-holding-date-right);
    top: var(--text-holding-date-top);
    width: var(--text-holding-date-width);
    transition: right var(--transition-duration) var(--transition-timing), top var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .text-holding-IAC-mix-mobile{
    display: none;
    position: absolute;
    width: 674px;
    left: 0;
    right: 0;
    top: 10%;
    margin: 0 auto;
}

.holding .holding-wrapper .icon-bg-swan{
    position: absolute;
    left: var(--icon-swan-left);
    bottom: var(--icon-swan-bottom);
    width: var(--icon-swan-width);
    transition: left var(--transition-duration) var(--transition-timing), bottom var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .icon-bg-trumpet{
    position: absolute;
    left: var(--icon-trumpet-left);
    bottom: var(--icon-trumpet-bottom);
    width: var(--icon-trumpet-width);
    transition: left var(--transition-duration) var(--transition-timing), bottom var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .icon-bg-tree{
    position: absolute;
    right: var(--icon-tree-right);
    top: var(--icon-tree-top);
    width: var(--icon-tree-width);
    transition: right var(--transition-duration) var(--transition-timing), top var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .icon-bg-music-note{
    position: absolute;
    right: var(--icon-music-note-right);
    bottom: var(--icon-music-note-bottom);
    width: var(--icon-music-note-width);
    transition: right var(--transition-duration) var(--transition-timing), bottom var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing);
}

/* Shared cloud-div styles */
.holding .holding-wrapper .cloud-div {
    position: absolute;
    z-index: 5;
    will-change: transform;
}

.holding .holding-wrapper .cloud-div .cloud-main{
    position: relative;
}

.holding .holding-wrapper .cloud-div img {
    width: 100%;
    display: block;
}

.holding .holding-wrapper .cloud-div p,
.holding .holding-wrapper .cloud-div a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    font-family: 'Zen Maru Gothic', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    font-size: var(--cloud-font-size);
    font-weight: 700;
    line-height: var(--cloud-line-height);
    color: var(--cloud-text-color);
    transition: font-size var(--transition-duration) var(--transition-timing), line-height var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div a{
    text-decoration: none;
}

.holding .holding-wrapper .cloud-div span.lg{
    font-size: var(--cloud-font-lg);
    transition: font-size var(--transition-duration) var(--transition-timing);
}

/* Individual cloud-div styles */
/* .cloud-div-1 ~ .cloud-div-4: add position, offset, etc. here as needed */
.holding .holding-wrapper .cloud-div.cloud-div-1{
    top: var(--cloud-div-1-top);
    left: var(--cloud-div-1-left);
    animation: float1 8s ease-in-out infinite;
    transition: top var(--transition-duration) var(--transition-timing), left var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-1 img{
    width: var(--cloud-div-1-width);
    transition: width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-1 p{
    left: 44%;
}

.holding .holding-wrapper .cloud-div.cloud-div-2{
    top: var(--cloud-div-2-top);
    right: var(--cloud-div-2-right);
    animation: float2 9.3s ease-in-out infinite 1.5s;
    transition: top var(--transition-duration) var(--transition-timing), right var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-2 img{
    width: var(--cloud-div-2-width);
    transition: width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-2 p{
    top: 52%;
    left: 54%;
    font-size: var(--cloud-div-2-font-size);
    transition: font-size var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-2 span.sub-text{
    line-height: var(--cloud-div-2-sub-text-line-height);
}

.holding .holding-wrapper .cloud-div.cloud-div-3{
    bottom: var(--cloud-div-3-bottom);
    right: var(--cloud-div-3-right);
    animation: float3 10.7s ease-in-out infinite 0.8s;
    transition: bottom var(--transition-duration) var(--transition-timing), right var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-3 img{
    width: var(--cloud-div-3-width);
    transition: width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-3 a{
    left: 54%;
    font-size: var(--cloud-div-3-font-size);
    line-height: 100%;
    transition: font-size var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-3 span.sub-text{
    font-weight: 600;
}

.holding .holding-wrapper .cloud-div.cloud-div-4{
    bottom: var(--cloud-div-4-bottom);
    right: var(--cloud-div-4-right);
    animation: float4 12s ease-in-out infinite 2.2s;
    transition: bottom var(--transition-duration) var(--transition-timing), right var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-4 img{
    width: var(--cloud-div-4-width);
    transition: width var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-4 a{
    left: 54%;
    font-size: var(--cloud-div-4-font-size);
    line-height: 1.1;
    transition: font-size var(--transition-duration) var(--transition-timing);
}

.holding .holding-wrapper .cloud-div.cloud-div-4 span.sub-text{
    font-weight: 600;
}

.char-stroke {
    -webkit-text-stroke: 0.4px currentColor;
}