/* Animation */

@keyframes fade-in {
    0% {
		opacity:0;
	}
    100% {
		opacity:1;
	}
}


.order-in > * {
	transition: calc(var(--transition) * 2);
}
.order-in-fast > * {
	transition: var(--transition);
}
:is(.order-in, .order-in-fast) > * {
	opacity:0;
	top:10px;
}
:is(.order-in, .order-in-fast) > *.visible {
	opacity:1;
	top:0;
}

.slide-in {
	transition: var(--transition);
	opacity:0;
}
.slide-in.slide-left {
	translate: -40px;
}
.slide-in.slide-left.visible {
	translate: 0;
	opacity:1;
}
.slide-in.slide-right {
	translate: 40px;
}
.slide-in.slide-right.visible {
	translate: 0;
	opacity:1;
}
.slide-in.slide-up {
	transform: translateY(40px);
}
.slide-in.slide-up.visible {
	transform: translateY(0);
	opacity:1;
}
.slide-in.slide-down {
	transform: translateY(-40px);
}
.slide-in.slide-down.visible {
	transform: translateY(0);
	opacity:1;
}

.fade-in {
	opacity:0;
	transition: var(--transition);
}
.fade-in.visible {
	opacity:1;
}

.character-in {
    opacity:0;
}
.character-in:has(span:first-of-type i.visible) {
    opacity:1;
}
.character-in span {
    overflow:hidden;
    line-height:1.1;
    margin:0;
    display: inline-block;
}
.character-in span i {
    font-style:normal;
    margin:0;
	transition: calc(var(--transition) * 2);
}
.character-in.left-in i { left: -2em ; }
.character-in.right-in i { left: 2em; }
.character-in.top-in i { top: -2em; }
.character-in.bottom-in i { top: 2em; }
.character-in i.visible {
    top: 0;
    left: 0;
}

.pop-in {
	opacity:0;
	transition: var(--transition);
}
.pop-in.visible {
	animation:pop-in 0.2s ease 0s forwards;
}
@keyframes pop-in {
	0% {
	  opacity: 0;
	  transform: scale(0.8);
	}
	100% {
	  opacity: 1;
	  transform: scale(1);
	}
}


.smooth-in {
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    font-size: 36px;
    font-weight: bold;
    transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
    transition-property: clip-path;
    line-height: 1;
    height: 40px;
    margin-top: 15px;
}
.smooth-in.visible {
    clip-path: inset(0);
}


/* Dialog */
dialog {
	position:fixed;
	inset: 0;
	/* top:50%; */
	/* left:50%; */
	/* translate: -50% -50%; */
	border:solid 1px var(--color-lightgray);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	min-width:400px;
	max-width:800px;
    max-height:80dvh;
    /* overflow-y: auto; */
	/* padding:var(--padding); */
	/* margin:0 !important; */
	margin: auto;
	z-index:10;
	/* zoom:1; */
}
dialog button.close {
    position:fixed;
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    border-radius:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:30px;
    background:var(--color-lightgray);
    color:var(--color-gray);
    border:none;
    cursor: pointer;
}

#nav-cover.is-dialog {
	background: rgba(0, 0, 0, 0.65); /* dialog 専用カラー */
}

/* Parallax */
.parallax {
	position:absolute;
}



@media (max-width:820px ){
    dialog {
        width:90vw;
		min-width:auto;
    }
}
@media (max-width:520px ){
    dialog {
        top:0;
        left:0;
        translate: 0 0;
        border:none;
        border-radius:0;
        box-shadow:none;
        max-height:none;
        width:100vw;
        height:100vh;
        z-index:20;
    }
}


/* scrolly */
.scrolly {
    --mask--top: 200px;
}
.scrolly__inner { position: relative; }
  
.scrolly__bg {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 0;
}
.scrolly__bg .bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-color: var(--main-color);
}

.scrolly[data-step="1"] .bg--1 { opacity: 1; }
.scrolly[data-step="2"] .bg--2 { opacity: 1; }
.scrolly[data-step="3"] .bg--3 { opacity: 1; }
.scrolly__mask {
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--mask--top);
	z-index: 2;
	pointer-events: none;
}
.scrolly__text {
	padding-block: var(--section-space);
	position: relative;
	z-index: 0;
}
.scene {
	padding-top: 100vh;
	padding-bottom: 30vh;
	position: relative;
}