/* 풀스크린 컨테이너 (실시간 측정된 배너 높이를 차감하여 완벽한 풀스크린 비율 유지) */
.viewport-container {
    position: relative;
    width: 100vw;
    #height: calc(100vh - var(--banner-height, 60px));
    height: 880px;
    overflow: hidden;
    cursor: default;
}
/* 배경 레이어: new (이미지 2) */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 880px;
    background-image: url('../images/visual/new.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.bg-layer.prev {
    background-image: url('../images/visual/old.jpg');
}
/* 지워질 전면 레이어: old (이미지 1) 캔버스 */
.scratch-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 880px;
    z-index: 2;
    transition: opacity 1s ease-in-out;
}
/* 완전히 지워진 후 미세하게 남은 잔상을 지우기 위한 부드러운 페이드아웃 */
.fade-out {
    opacity: 0;
    pointer-events: none;
}
/* 메인비주얼 상단 타이틀 이미지 스타일 */
.title-image-container {
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 10;
    pointer-events: none;
    width: 100%;
    max-width:1920px;
    display:flex;
    justify-content: center;
}
.title-image-container img {
    width: 100%;
    max-width: 750px;
    height: auto;
    display: block;
}

.people-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    width: max-content;
    transform: translate3d(calc(-100% - 50vw), 0, 0);
    will-change: transform;
    transition: transform 8s linear;
}
.people-container img {
    width: auto;
    height: auto;
    max-width: none;
    display: block;
}
.people-container img:not(:first-child) {
    margin-left: -32px;
}

/* 1단계: 화면 중앙으로 진입 */
.people-container.walk-in {
    transition: transform 8s linear;
    transform: translate3d(-50%, 0, 0);
}

/* 2단계: 화면 오른쪽 바깥으로 퇴장 */
.people-container.walk-out {
    transition: transform 8s linear;
    transform: translate3d(50vw, 0, 0);
}

.firework-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}
.firework {
    position: absolute;
    opacity: 0;
    transform: scale(0);
    width: auto;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s linear;
}
.firework.explode {
    opacity: 1;
    transform: scale(1);
}
.firework.fade-away {
    opacity: 0;
    transform: scale(0.85);
    transition: transform 0.8s ease-in, opacity 0.8s ease-in;
}

/* FHD 정밀 비율 배치 */
.fire-blue { top: 26%; left: 20%; }
.fire-yellow { top: 15%; right: 20%; }
.fire-pink { top: 36.94%; right: 38.96%; }

/* 작은 노란색 폭죽 (50% 크기 구동) */
.fire-yellow-small { top: 45.00%; left: 35.42%; }
.fire-yellow-small.explode { opacity: 1; transform: scale(0.5); }
.fire-yellow-small.fade-away { opacity: 0; transform: scale(0.425); }

/* 추가 외곽 폭죽 */
.fire-pink-left { top: 15.00%; left: 10.00%; }
.fire-blue-right { top: 15.00%; right: 4.00%; }

.balloon-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

@keyframes sway-1 {
    0% { transform: translateX(-15px) rotate(-6deg); }
    50% { transform: translateX(15px) rotate(6deg); }
    100% { transform: translateX(-15px) rotate(-6deg); }
}
@keyframes sway-2 {
    0% { transform: translateX(-20px) rotate(-9deg); }
    50% { transform: translateX(20px) rotate(9deg); }
    100% { transform: translateX(-20px) rotate(-9deg); }
}
@keyframes sway-3 {
    0% { transform: translateX(-12px) rotate(-4deg); }
    50% { transform: translateX(12px) rotate(4deg); }
    100% { transform: translateX(-12px) rotate(-4deg); }
}
@keyframes sway-4 {
    0% { transform: translateX(-16px) rotate(-7deg); }
    50% { transform: translateX(16px) rotate(7deg); }
    100% { transform: translateX(-16px) rotate(-7deg); }
}
@keyframes sway-5 {
    0% { transform: translateX(-14px) rotate(-5deg); }
    50% { transform: translateX(14px) rotate(5deg); }
    100% { transform: translateX(-14px) rotate(-5deg); }
}
@keyframes sway-6 {
    0% { transform: translateX(-18px) rotate(-7.5deg); }
    50% { transform: translateX(18px) rotate(7.5deg); }
    100% { transform: translateX(-18px) rotate(-7.5deg); }
}
@keyframes sway-7 {
    0% { transform: translateX(-15px) rotate(-5.5deg); }
    50% { transform: translateX(15px) rotate(5.5deg); }
    100% { transform: translateX(-15px) rotate(-11deg); }
}
@keyframes sway-8 {
    0% { transform: translateX(-17px) rotate(-6.5deg); }
    50% { transform: translateX(17px) rotate(6.5deg); }
    100% { transform: translateX(-17px) rotate(-6.5deg); }
}

.balloon-item-wrapper {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
    width: auto;
    height: auto;
}
.balloon-item-wrapper img {
    width: auto;
    height: auto;
    display: block;
}

.sub-content-section {
    width: 100%;
    background-color: #0c0c0c;
}

@media (max-width: 768px) {
    .title-image-container {
        top: 35px;
    }
    .people-container img:not(:first-child) {
        margin-left: -20px;
    }
    /* 모바일 레이아웃에 최적화된 폭죽 재배치 */
    .fire-blue { top: 28%; left: 10%; }
    .fire-yellow { top: 24%; right: 10%; }
    .fire-pink { top: 38%; right: 28%; }
    .fire-yellow-small { top: 44%; left: 22%; }
    .fire-pink-left { top: 18%; left: 4%; }
    .fire-blue-right { top: 18%; right: 4%; }
}