@charset "utf-8";
/*=========================================
  BAGUS Framework 2.0
=========================================*/

/* Heading */
.heading{position:relative;display:inline-block;margin:0;padding-left:24px;font-size:1rem;font-weight:500}
.heading::before{content:"";position:absolute;top:50%;left:-10px;width:24px;height:24px;background:url(../images/logo.png) no-repeat center;background-size:contain;transform:translateY(-50%);animation:symbolHeading 10s linear infinite;pointer-events:none}

/* Flow (Headline) */
.flow{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;width:100%;font-size:1.4rem;position:relative;display:block;margin:80px 0 40px;padding:20px 0 16px 56px;border-top:1px solid #d8d2ca;border-bottom:1px solid #d8d2ca;line-height:1.6;overflow:hidden;box-sizing:border-box}
.flow::before{content:"";position:absolute;left:8px;top:16px;width:40px;height:40px;background:url(../images/logo.png) no-repeat center;background-size:contain;animation:symbol var(--rotate-speed) linear infinite;pointer-events:none}
.flow span{display:inline-block;opacity:0;transform:translateX(-30px)}
.flow.show span{animation:headline .6s forwards}
@keyframes headline{to{opacity:1;transform:translateX(0)}}

/* Page Description */
#description{width:100%;font-size:.95rem;line-height:1.6;margin:0 0 40px;padding:14px 0;position:relative;overflow:hidden;white-space:nowrap;color:#555;box-sizing:border-box;background:rgba(255,255,255,.6);border-top:1px solid #d8d2ca;border-bottom:1px solid #d8d2ca;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6% 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6% 94%,transparent 100%)}
#description.is-marquee{opacity:1}
#description .medium{text-decoration:underline}
#description .description-text{width:max-content;padding-left:100%;display:block;will-change:transform;animation:18s linear infinite description-marquee}
@keyframes description-marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}

/* Flow (Content h3) */
.lead .flow{font-size:2.4rem;text-align:center;line-height:1.3;margin:0 0 70px;padding:.1em 0;border:0}
.lead .flow::before{display:none;content:none}

.exceeding{letter-spacing:-0.01em}
h3.extension{letter-spacing:.03em}

/* Bottom Link */
#BottomLink{transition:opacity .9s var(--ease-main),transform .9s var(--ease-main)}
#BottomLink:hover{transform:translateY(-4px)}
#BottomLink::before{animation:symbolCenter var(--rotate-speed) linear infinite}

/* Scroll Button */
#return{transition:opacity .5s ease,transform .5s ease}
#return:hover{transform:translateY(-3px)}
#return::before{animation:symbolCenter var(--rotate-speed) linear infinite}

/* Keyframes */
@keyframes symbolHeading{from{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(360deg)}}
@keyframes symbolCenter{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes symbol{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/*=========================================
  Scroll Animation
=========================================*/

/* Fade */
.vertical{opacity:0;transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.vertical.show{opacity:1}

/* Slide Left */
[data-animate="left"]{opacity:0;transform:translateX(-80px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
[data-animate="left"].show{opacity:1;transform:translateX(0)}

/* Slide Right */
[data-animate="right"]{opacity:0;transform:translateX(80px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
[data-animate="right"].show{opacity:1;transform:translateX(0)}

/*=========================================
  Product Card Animation
=========================================*/

#ProductServices .product_card[data-animate]{opacity:0;transform:translateY(40px) scale(.96);filter:blur(2px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1)}
#ProductServices .product_card[data-animate].show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* Fade */

/* Zoom */
.hover_zoom{overflow:hidden;border-radius:8px}
.hover_zoom img{display:block;width:100%;height:auto;transition:.6s ease}
.hover_zoom:hover img{transform:scale(1.03)}

/*=========================================
  Text Animation
=========================================*/

/* Text Marker */
.TextMarker{font-weight:500;background:linear-gradient(transparent 60%,#FFE66D 60%);background-repeat:no-repeat;background-size:0% 100%;transition:0.8s ease}
.TextMarker.on{background-size:100% 100%}

/* Typing */

/* Split */

/* Blur */

/* Wave */