@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/a-antara-distance?styles=59701');

.intro {position: fixed; display: grid; place-items: center; height: 100vh; width: 100%; color: #e4dfd6; text-align: center; background: no-repeat center url('/img/intro/introBg.jpg'); background-size: cover; z-index: 5;}
.intro_title {letter-spacing: 0; max-width: 90%; mix-blend-mode: hard-light; filter: brightness(1.1); z-index: 2; transform: translateY(40px); padding: .7rem 0;}
.enTitle {font-family: 'a Antara Distance', sans-serif; font-style: italic; font-size: 18.5625rem; line-height: 1;}
.w_line {font-weight: 700; --line-size: 1.3rem; line-height: 1.3em; width: fit-content; display: inline;background-image: linear-gradient(transparent calc(100% - var(--line-size)), rgba(0,0,0,.35) var(--line-size));}
.intro_bg {position: absolute; top: 0; background-color: rgba(0,0,0,.3); width: 100%; height: 100%; transform: scaleX(0);}
  
.intro_bgLeft {left: 0; transform-origin: left center;}  
.intro_bgRight {left: 50%; transform-origin: right center;}

@media(max-width:500px) {
    .enTitle {font-size: 10.5rem;}
    .intro_title .xsBox {padding: 0 9rem;}
}


.inner .flex {height: 100vh; width: 100%; overflow: hidden; flex-wrap: wrap;}
.inner .Box {background: no-repeat center / cover; background-blend-mode: multiply; cursor: pointer; width: 50%; background-color: rgba(0,0,0,.2); transition: .5s;}
.inner .Box.Left {background-image: url('/img/intro/LeftBg.jpg');}
.inner .Box.Right {background-image: url('/img/intro/RightBg.jpg');}  

.inner .Desc {width: 90%;}
.inner .BgTxt {font-size: 4.0625rem; color:rgba(255,255,255,.15); font-family: "Bodoni Moda", serif; position: absolute; height: fit-content; top:0; bottom: 20%; left: 0; right:0; margin: auto;}


.inner .Box.on {width: 75%; transition: 1s;}
.inner .Box.off {width: 25%; transition: 1s; filter: brightness(0.5);}

.inner .Box .Txt_sm {margin-top: 5rem;}
.inner .Box.on .Txt_sm {margin-top: 2.5rem;}

.inner .Box .Desc {transform: scale(1); transition: .3s;}
.inner .Box.off .Desc {transform: scale(.7); transition: .3s;}

.inner .Box .hiddenBox {display: none; opacity: 0; transition: .3s;}
.inner .Box.on .hiddenBox {margin-top: 3rem; display: block; opacity: 1; transition: .3s;}
.inner .hiddenBox .box {position: relative; border-radius: 0px; transition: .3s;}
.inner .hiddenBox .box:hover {border-radius: 1.875rem; overflow: hidden; transition: .3s; }
.inner .hiddenBox .box img {filter: brightness(.5);}
.inner .hiddenBox .box:hover img {filter: brightness(1);}
.inner .hiddenBox p {text-shadow: rgba(0,0,0,.5) 1px 0 10px;}

.inner .hiddenBox .Desc_txt {position: absolute; z-index: 3; color:#fff; line-height: 1.2; width: fit-content; height: fit-content; right:0; left:0; top:0; bottom:0; margin: auto;}

@media(max-width:1240px) {
    .inner .flexList {width:100%; max-width: 38rem; margin: 3rem auto;} 
}
@media(max-width:768px) {
    .inner {height: 100vh;}
    .inner .Box {width: 100%;}
    .inner .Box.on {width: 100%; height: 80%; transition: .5s;}
    .inner .Box.off {width: 100%; height: 20%; transition: .5s;}
    
    .inner .BgTxt {font-size: 3rem;}
    .inner .Box.off .BgTxt {bottom:0;}
    .inner .Box.off .Txt_sm {display: none;}

    .inner .font-50 {font-size: 2.5rem;}
    .inner .font-80 {font-size: 3.5rem;}
}

@media(max-width:500px) {
    .inner .BgTxt {font-size: 2.5rem;}
    .inner .Box.on {height: 80%; transition: .5s;}
    .inner .Box.off {height: 20%; transition: .5s;}

    .inner .Box.on .Txt_sm {margin-top: 1rem;}
    .inner .Box.on .hiddenBox {margin-top: 2rem;}

    .inner .flexList {width:100%; max-width: 30rem; margin: 3rem auto;} 
}

/* danielBtn */
.introBtn {pointer-events: auto; cursor: pointer; background: var(--pointcolor); border: none; padding: 1rem; max-width: 27.5rem; width: 70%; margin: 0; font-size: 1.875rem; position: relative; display: inline-block; font-weight: 700; overflow: hidden; color: var(--pointcolor);}
.introBtn::before, .introBtn::after {position: absolute;	top: 0;	left: 0; width: 100%; height: 100%;}
.introBtn.hyperion span {display: block; position: relative;}
.introBtn img {width: 1.5rem;}

.introBtn.hyperion > span {overflow: hidden; display: flex; align-items: center; justify-content: center; gap:0 1rem;}

.introBtn.hyperion > span > span {overflow: hidden; mix-blend-mode: multiply;}

.introBtn.hyperion:hover > span > span {animation: MoveUpInitial 0.5s forwards, MoveUpEnd 0.5s forwards 0.5s; mix-blend-mode:color-dodge; filter: brightness(10);}
.introBtn.hyperion:hover > span img {filter: brightness(6);}
@keyframes MoveUpInitial {
	to {transform: translate3d(0,-105%,0);}
}

@keyframes MoveUpEnd {
	from {transform: translate3d(0,100%,0);}
	to {transform: translate3d(0,0,0);}
}

.introBtn.hyperion::before {content: ''; background: #e4e0d7; transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1); transform-origin: 100% 50%;}
.introBtn.hyperion:hover::before {transform: scale3d(0,1,1);	transform-origin: 0% 50%;}