/* =========================================================
   WANPING HOME PAGE MOTION
   僅供 index.php 使用
   ========================================================= */

:root{
    --index-red:#e60012;
    --index-ease:cubic-bezier(.22,1,.36,1);
    --index-duration:.85s;
}


/* =========================================================
   1. PAGE / BANNER
   ========================================================= */

.home-banner-swiper{
    animation:indexBannerIn 1s ease both;
}

@keyframes indexBannerIn{
    from{ opacity:0; }
    to{ opacity:1; }
}


/* =========================================================
   2. COMMON REVEAL
   ========================================================= */

.index-motion-ready .index-reveal{
    opacity:0;
    transition:
        opacity var(--index-duration) ease,
        transform var(--index-duration) var(--index-ease);
    transition-delay:var(--index-delay,0s);
    will-change:opacity,transform;
}

.index-motion-ready .index-up{
    transform:translate3d(0,42px,0);
}

.index-motion-ready .index-left{
    transform:translate3d(-55px,0,0);
}

.index-motion-ready .index-right{
    transform:translate3d(55px,0,0);
}

.index-motion-ready .index-scale{
    transform:scale(.95);
}

.index-motion-ready .index-reveal.index-visible{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    will-change:auto;
}


/* =========================================================
   3. HOME INTRO TITLE
   ========================================================= */

.index-motion-ready .home-intro-title .title-line{
    transform:scaleY(0);
    transform-origin:top center;
    transition:transform .9s var(--index-ease);
}

.index-motion-ready .home-intro-title.index-visible .title-line{
    transform:scaleY(1);
}

.home-intro-title h2,
.home-intro-title p{
    transition:
        transform .55s var(--index-ease),
        color .4s ease;
}


/* =========================================================
   4. HOME INTRO ROWS
   ========================================================= */

.home-intro-image,
.photo-frame{
    overflow:visible;
}

.photo-frame img{
    transition:
        transform .8s var(--index-ease),
        filter .65s ease;
}

.home-intro-content h3,
.home-intro-content p{
    transition:
        transform .5s var(--index-ease),
        color .4s ease;
}

.intro-watermark{
    transition:
        transform .8s var(--index-ease),
        opacity .6s ease;
}

@media (hover:hover){

    .home-intro-row:hover .photo-frame img{
        transform:scale(1.035);
        filter:saturate(1.04);
    }

    .home-intro-row:hover .home-intro-content h3{
        transform:translateY(-4px);
        color:#5f4827;
    }

    .home-intro-row:hover .intro-watermark{
        transform:translateY(-6px);
        opacity:.1;
    }
}


/* =========================================================
   5. HOME OEM
   ========================================================= */

.home-oem-overlay{
    opacity:1;
    transition:opacity 1.1s ease;
}

.index-motion-ready .home-oem-overlay{
    opacity:0;
}

.index-motion-ready .home-oem.index-section-visible .home-oem-overlay{
    opacity:1;
}

.home-oem-content h2,
.home-oem-content p,
.oem-en,
.oem-tag{
    transition:
        transform .5s var(--index-ease),
        text-shadow .5s ease;
}

.oem-btn{
    position:relative;
    overflow:hidden;
    transition:
        transform .45s var(--index-ease),
        color .35s ease,
        background-color .35s ease,
        box-shadow .45s ease;
}

.oem-btn::before{
    content:"";
    position:absolute;
    top:-60%;
    left:-65%;
    width:38%;
    height:220%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
    pointer-events:none;
}

.oem-btn > *{
    position:relative;
    z-index:1;
}

@media (hover:hover){

    .home-oem-content:hover h2{
        transform:translateY(-3px);
        text-shadow:0 10px 22px rgba(0,0,0,.18);
    }

    .oem-btn:hover{
        transform:translateY(-4px);
        box-shadow:0 12px 24px rgba(0,0,0,.18);
    }

    .oem-btn:hover::before{
        left:130%;
    }
}


/* =========================================================
   6. HOME NEWS TITLE
   ========================================================= */

.index-motion-ready .news-title .title-line{
    transform:scaleX(0);
    transform-origin:center center;
    transition:transform .8s .15s var(--index-ease);
}

.index-motion-ready .news-title.index-visible .title-line{
    transform:scaleX(1);
}


/* =========================================================
   7. HOME NEWS COLUMNS
   ========================================================= */

.news-box{
    transition:
        transform .5s var(--index-ease),
        box-shadow .5s ease;
}

.news-thumb{
    overflow:hidden;
}

.news-thumb img{
    transition:
        transform .65s var(--index-ease),
        filter .55s ease;
}

.news-info h3{
    transition:color .35s ease;
}

.news-more{
    transition:
        transform .4s var(--index-ease),
        color .35s ease,
        background-color .35s ease,
        box-shadow .4s ease;
}

@media (hover:hover){

    .news-column:hover .news-box{
        transform:translateY(-6px);
        box-shadow:0 16px 30px rgba(0,0,0,.09);
    }

    .news-item:hover .news-thumb img{
        transform:scale(1.06);
        filter:saturate(1.05);
    }

    .news-more:hover{
        transform:translateY(-3px);
        box-shadow:0 10px 20px rgba(0,0,0,.10);
    }
}


/* =========================================================
   8. FOOTER CONTACT
   ========================================================= */

.footer-contact-image img,
.footer-contact-button a{
    transition:
        transform .55s var(--index-ease),
        filter .5s ease,
        box-shadow .5s ease;
}

@media (hover:hover){

    .footer-contact:hover .footer-contact-image img{
        transform:translateY(-7px) rotate(-2deg);
        filter:drop-shadow(0 16px 14px rgba(0,0,0,.13));
    }

    .footer-contact-button a:hover{
        opacity:1;
        transform:translateY(-4px);
        box-shadow:0 13px 24px rgba(0,0,0,.16);
    }
}


/* =========================================================
   9. TABLET / MOBILE
   ========================================================= */

@media (max-width:768px){

    .index-motion-ready .index-left,
    .index-motion-ready .index-right,
    .index-motion-ready .index-up{
        transform:translate3d(0,28px,0);
    }

    .index-motion-ready .index-scale{
        transform:scale(.97);
    }

    .index-motion-ready .index-reveal.index-visible{
        transform:translate3d(0,0,0) scale(1);
    }

    .home-oem-overlay{
        opacity:1;
    }
}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .home-banner-swiper{
        animation:none !important;
    }

    .index-motion-ready .index-reveal{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    .home-intro-title .title-line,
    .news-title .title-line{
        transform:none !important;
        transition:none !important;
    }

    .home-oem-overlay{
        opacity:1 !important;
        transition:none !important;
    }
}