/* =========================
   FV
========================= */

#fv{
	position:relative;
	width:100%;
	height:calc(var(--initial-vh, 1vh) * 100);
	overflow:hidden;
}

#fv_main{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}

#fv_main::after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:33%;
	background:linear-gradient(
		to top,
		rgba(25,5,5,0.6) 0%,
		rgba(25,5,5,0.3) 50%,
		rgba(25,5,5,0) 100%
	);
	z-index:2;
	pointer-events:none;
}

#main_img,
#main_video{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

#main_img{
	z-index:0;
}

#main_video{
	z-index:1;
	opacity:0;
	visibility:hidden;
}

#main_video.is-playing{
	opacity:1;
	visibility:visible;
}


/* =========================
   FV LOGO
========================= */

#fv_logo{
    position:absolute;
    bottom:calc(var(--initial-vh, 1vh) * 5);
    left:49%;
    transform:translateX(-50%);
    width:72%;
    z-index:3;
    opacity:0;
    isolation:isolate;
}

#christmas_collection{
    display:block;
    width:100%;
    height:auto;
    filter:
		drop-shadow(0 0 8px rgba(170,85,17,0.47))
		drop-shadow(0 0 16px rgba(170,85,17,0.35))
		drop-shadow(0 0 24px rgba(170,85,17,0.23));
}

/* 紙のアニメーション開始と連動 */
#fv:has(#papers.loaded) #fv_logo{
    animation:logoFadeIn 2s ease-in-out forwards;
}

@keyframes logoFadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}


/* =========================
   PAPERS
========================= */

#papers{
    position:absolute;
    inset:0;
    z-index:10;
    overflow:hidden;
    pointer-events:none;
}

#papers img{
    display:none;
    position:absolute;
    width:140%!important;
    height:calc(var(--initial-vh, 1vh) * 45);
    left:0%;
    object-fit:cover;
    transform-origin:center center;
    opacity:1;
    visibility:visible;
}

/* JSで選択された6枚だけ表示 */
#papers img.show{
    display:block;
}

/* 初期位置ごとのクラス（重なり順はJSでランダム指定） */
#papers .paper-1{ z-index:5; }
#papers .paper-2{ z-index:4; }
#papers .paper-3{ z-index:3; }

/* 左側2枚 */
#papers .paper-4{ z-index:2; }
#papers .paper-5{ z-index:1; }
#papers .paper-6{ z-index:6; transform-origin:top left; }


/* =========================
   PAPER ANIMATION
========================= */

#papers.loaded .paper-1{
    animation:paperOut1 3.5s cubic-bezier(.16,1,.3,1) 0s forwards;
}

#papers.loaded .paper-2{
    animation:paperOut2 4.5s cubic-bezier(.16,1,.3,1) 0s forwards;
}

#papers.loaded .paper-3{
    animation:paperOut3 5s cubic-bezier(.16,1,.3,1) 0s forwards;
}

#papers.loaded .paper-4{
    animation:paperOut4 4s cubic-bezier(.16,1,.3,1) 0s forwards;
}

#papers.loaded .paper-5{
    animation:paperOut5 4s cubic-bezier(.16,1,.3,1) 0s forwards;
}


#papers.loaded .paper-6{
    animation:paperOut6 3s cubic-bezier(.16,1,.3,1) 0s forwards;
}


/* =========================
   SP ANIMATION
========================= */

@keyframes paperOut1{
    0%{
        opacity:1;
        filter:blur(0);
    }
    100%{
        transform:
            translate3d(
                60vw,
                calc(var(--initial-vh, 1vh) * 5),
                0
            )
            rotate(-10deg)
            scale(1.30);
        filter:blur(12px);
        opacity:0;
    }
}

@keyframes paperOut2{
    0%{
        opacity:1;
        filter:blur(0);
    }
    100%{
        transform:
            translate3d(
                -50vw,
                calc(var(--initial-vh, 1vh) * -10),
                0
            )
            rotate(-20deg)
            scale(1.35);
        filter:blur(20px);
        opacity:0;
    }
}

@keyframes paperOut3{
    0%{
        opacity:1;
        filter:blur(0);
    }
    100%{
        transform:
            translate3d(
                90vw,
                calc(var(--initial-vh, 1vh) * -5),
                0
            )
            rotate(7.5deg)
            scale(1.40);
        filter:blur(15px);
        opacity:0;
    }
}

@keyframes paperOut4{
    0%{
        opacity:1;
        filter:blur(0);
    }
    100%{
        transform:
            translate3d(
                -35vw,
                calc(var(--initial-vh, 1vh) * 5),
                0
            )
            rotate(15deg)
            scale(1.4);
        filter:blur(20px);
        opacity:0;
    }
}

@keyframes paperOut5{
    0%{
        opacity:1;
        filter:blur(0);
    }
    100%{
        transform:
            translate3d(
                -40vw,
                calc(var(--initial-vh, 1vh) * 20),
                0
            )
            rotate(25deg)
            scale(1.80);
        filter:blur(30px);
        opacity:0;
    }
}


@keyframes paperOut6{
    0%{
        opacity:1;
        filter:blur(0);
    }
    100%{
        transform:
            translate3d(
                30vw,
                calc(var(--initial-vh, 1vh) * -40),
                0
            )
            rotate(10deg)
            scale(1.60);
        filter:blur(30px);
        opacity:0;
    }
}


/* =========================
   KIRAKIRA
========================= */

#kirakira{
    display:none;
}

.kirakira-item{
    position:absolute;
    width:20px;
    height:auto;
    pointer-events:none;
    z-index:5;
    opacity:0;

    --brightness:1;
    --duration:1s;
}

/* 1回明滅 */
.kirakira-item.single{
    animation:
        kirakiraSingle
        var(--duration)
        ease-in-out
        forwards;
}

/* 2回明滅 */
.kirakira-item.double{
    animation:
        kirakiraDouble
        var(--duration)
        ease-in-out
        forwards;
}

/* 高速2回明滅 */
.kirakira-item.quick-double{
    animation:
        kirakiraQuickDouble
        var(--duration)
        linear
        forwards;
}





/* =========================
   KIRAKIRA SINGLE
========================= */

@keyframes kirakiraSingle{
	0%, 35%{
		opacity:0;
		filter:blur(1px);
		transform:scale(0.5);
	}
	45%{
		opacity:var(--brightness);
		filter:blur(0);
		transform:scale(1.2);
	}
	55%{
		opacity:0;
		filter:blur(1px);
		transform:scale(0.5);
	}
	100%{
		opacity:0;
	}
}




/* =========================
   KIRAKIRA DOUBLE
========================= */

@keyframes kirakiraDouble{
    0%{
        opacity:0;
        filter:blur(3px);
        transform:scale(0.3);
    }

    20%{
        opacity:var(--brightness);
        filter:blur(0);
        transform:scale(1.1);
    }

    38%{
        opacity:0.1;
        filter:blur(2px);
        transform:scale(0.65);
    }

    58%{
        opacity:var(--brightness);
        filter:blur(0);
        transform:scale(1.25);
    }

    100%{
        opacity:0;
        filter:blur(3px);
        transform:scale(0.3);
    }
}




/* =========================
   KIRAKIRA QUICK DOUBLE
========================= */

@keyframes kirakiraQuickDouble{
    0%{
        opacity:0;
        filter:blur(2px);
        transform:scale(0.5);
    }

    15%{
        opacity:var(--brightness);
        filter:blur(0);
        transform:scale(1.2);
    }

    30%{
        opacity:0;
        filter:blur(2px);
        transform:scale(0.6);
    }

    45%{
        opacity:var(--brightness);
        filter:blur(0);
        transform:scale(1.3);
    }

    65%{
        opacity:0;
        filter:blur(2px);
        transform:scale(0.5);
    }

    100%{
        opacity:0;
        filter:blur(3px);
        transform:scale(0.3);
    }
}


/* =========================
   PC
========================= */

@media (min-width:768px){

    #fv{
        width:480px;
        margin:0 auto;
    }

    #papers img{
        width:602px!important;
        left:0;
        height:calc(var(--initial-vh, 1vh) * 45);
    }

    @keyframes paperOut1{
        0%{
            opacity:1;
            filter:blur(0);
        }
        100%{
            transform:
                translate3d(
                    258px,
                    calc(var(--initial-vh, 1vh) * 5),
                    0
                )
                rotate(-10deg)
                scale(1.30);
            filter:blur(12px);
            opacity:0;
        }
    }

    @keyframes paperOut2{
        0%{
            opacity:1;
            filter:blur(0);
        }
        100%{
            transform:
                translate3d(
                    -215px,
                    calc(var(--initial-vh, 1vh) * -10),
                    0
                )
                rotate(-20deg)
                scale(1.35);
            filter:blur(20px);
            opacity:0;
        }
    }

    @keyframes paperOut3{
        0%{
            opacity:1;
            filter:blur(0);
        }
        100%{
            transform:
                translate3d(
                    387px,
                    calc(var(--initial-vh, 1vh) * -5),
                    0
                )
                rotate(7.5deg)
                scale(1.40);
            filter:blur(15px);
            opacity:0;
        }
    }

    @keyframes paperOut4{
        0%{
            opacity:1;
            filter:blur(0);
        }
        100%{
            transform:
                translate3d(
                    -150.5px,
                    calc(var(--initial-vh, 1vh) * 5),
                    0
                )
                rotate(15deg)
                scale(1.4);
            filter:blur(20px);
            opacity:0;
        }
    }

    @keyframes paperOut5{
        0%{
            opacity:1;
            filter:blur(0);
        }
        100%{
            transform:
                translate3d(
                    -172px,
                    calc(var(--initial-vh, 1vh) * 20),
                    0
                )
                rotate(25deg)
                scale(1.80);
            filter:blur(30px);
            opacity:0;
        }
    }

    @keyframes paperOut6{
        0%{
            opacity:1;
            filter:blur(0);
        }
        100%{
            transform:
                translate3d(
                    129px,
                    calc(var(--initial-vh, 1vh) * -40),
                    0
                )
                rotate(10deg)
                scale(1.60);
            filter:blur(30px);
            opacity:0;
        }
    }

}


/* =========================
   FV LOADER
========================= */

#fv_loader{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:#660f13;
    z-index:2147483647;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* 読み込み完了後 */
#fv_loader.loaded{
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity 0.4s ease,
        visibility 0s 0.4s;
}


@media screen and (min-width: 768px) {
	#fv_logo {
		position: fixed;
		top: 380px;
		bottom: auto;
		left: calc(50% - 240px - 90px);
		transform: translate(-100%, -50%);
		width: 280px;
		z-index: 3;
		opacity: 1;
		animation: none !important;
		filter: none;
	}
	#christmas_collection {
		filter:
			drop-shadow(0 0 8px rgba(170, 85, 17, 0.20))
			drop-shadow(0 0 16px rgba(170, 85, 17, 0.10));
		animation: none !important;
	}
}

@media screen and (min-width: 768px) {
	#fv_main::after {
		display: none;
	}
}

html {
	scrollbar-gutter: stable;
}