/* =========================================================
   WANPING INNER PAGE MOTION
   共用頁面：signature / oem / news / company / brand /
             history / contact / sale

   使用方式：放在原本 css.css 之後載入
   ========================================================= */

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


/* =========================================================
   1. COMMON REVEAL
   ========================================================= */

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

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

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

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

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

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


/* =========================================================
   2. COMMON HERO BANNER
   ========================================================= */

.hero-content{
    animation:wanpingHeroIn 1s var(--motion-ease) both;
}

.hero-subtitle{
    animation:wanpingHeroIn 1s .16s var(--motion-ease) both;
}

@keyframes wanpingHeroIn{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================================
   3. COMMON INNER-PAGE TITLE
   .company-en + .company-line + .company-title
   ========================================================= */

.company-heading.motion-title .company-en,
.company-heading.motion-title .company-title{
    opacity:0;
    transform:translateY(24px);
    transition:
        opacity .75s ease,
        transform .75s var(--motion-ease);
}

.company-heading.motion-title .company-line{
    transform:scaleX(0);
    transform-origin:center center;
    transition:transform .75s .16s var(--motion-ease);
}

.company-heading.motion-title .company-title{
    transition-delay:.22s;
}

.company-heading.motion-title.is-visible .company-en,
.company-heading.motion-title.is-visible .company-title{
    opacity:1;
    transform:translateY(0);
}

.company-heading.motion-title.is-visible .company-line{
    transform:scaleX(1);
}


/* =========================================================
   4. SIGNATURE PRODUCT
   ========================================================= */

.fp-hero img,
.fp-food img{
    transition:
        transform .8s var(--motion-ease),
        filter .7s ease;
}

.fp-slogan span{
    transform:scaleX(0);
    transition:transform .8s .2s var(--motion-ease);
}

.fp-slogan span:first-child{
    transform-origin:right center;
}

.fp-slogan span:last-child{
    transform-origin:left center;
}

.fp-slogan.is-visible span{
    transform:scaleX(1);
}

.fp-banner,
.banner-image{
    overflow:hidden;
}

.banner-image img{
    transition:transform 1.1s var(--motion-ease);
}

@media (hover:hover){

    .fp-hero:hover img{
        transform:translateY(-9px) scale(1.025);
        filter:drop-shadow(0 22px 20px rgba(0,0,0,.13));
    }

    .fp-food:hover img{
        transform:translateY(-7px) scale(1.03);
        filter:drop-shadow(0 20px 18px rgba(0,0,0,.12));
    }

    .fp-banner:hover .banner-image img{
        transform:scale(1.055);
    }
}


/* =========================================================
   5. OEM / ODM
   ========================================================= */

.oem-image,
.gallery-item{
    overflow:hidden;
}

.oem-image img,
.gallery-item img{
    transition:
        transform .75s var(--motion-ease),
        filter .6s ease;
}

.process-item,
.gallery-item{
    transition:
        transform .45s var(--motion-ease),
        box-shadow .45s ease,
        border-color .4s ease;
}

@media (hover:hover){

    .oem-intro:hover .oem-image img{
        transform:scale(1.035);
    }

    .process-item:hover{
        transform:translateY(-8px);
        box-shadow:0 16px 30px rgba(0,0,0,.10);
        border-color:rgba(230,0,18,.35);
    }

    .gallery-item:hover{
        transform:translateY(-6px);
        box-shadow:0 16px 30px rgba(0,0,0,.12);
    }

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


/* =========================================================
   6. NEWS / MEDIA
   ========================================================= */

.media-card{
    transition:
        transform .5s var(--motion-ease),
        box-shadow .5s ease,
        border-color .4s ease;
}

.media-image{
    overflow:hidden;
}

.media-image img{
    transition:
        transform .75s var(--motion-ease),
        filter .6s ease;
}

.media-title-link,
.media-card-link{
    transition:
        color .35s ease,
        transform .4s var(--motion-ease);
}

@media (hover:hover){

    .media-card:hover{
        transform:translateY(-9px);
        box-shadow:0 18px 34px rgba(0,0,0,.12);
    }

    .media-card:hover .media-image img{
        transform:scale(1.06);
        filter:saturate(1.06);
    }

    .media-card:hover .media-title-link{
        color:var(--motion-red);
    }

    .media-card:hover .media-card-link{
        transform:translateX(5px);
    }
}


/* =========================================================
   7. COMPANY
   ========================================================= */

.company-card,
.company-safe-card{
    transition:
        transform .5s var(--motion-ease),
        box-shadow .5s ease,
        border-color .4s ease;
}

.company-icon,
.company-card-title{
    transition:
        transform .45s var(--motion-ease),
        color .4s ease;
}

.company-founder-image{
    overflow:hidden;
}

.company-founder-image img{
    transition:transform .9s var(--motion-ease);
}

.company-founder-signature{
    transition:transform .55s var(--motion-ease);
}

@media (hover:hover){

    .company-card:hover,
    .company-safe-card:hover{
        transform:translateY(-8px);
        box-shadow:0 16px 30px rgba(0,0,0,.10);
        border-color:rgba(230,0,18,.3);
    }

    .company-card:hover .company-icon{
        transform:translateY(-4px) scale(1.05);
    }

    .company-card:hover .company-card-title{
        color:var(--motion-red);
    }

    .company-founder:hover .company-founder-image img{
        transform:scale(1.04);
    }

    .company-founder:hover .company-founder-signature{
        transform:translateX(6px);
    }
}


/* =========================================================
   8. BRAND STORY
   ========================================================= */

.brand-logo img{
    transition:
        transform .7s var(--motion-ease),
        filter .6s ease;
}

.story-image{
    overflow:hidden;
}

.story-image img{
    transition:
        transform .85s var(--motion-ease),
        filter .7s ease;
}

.story-content,
.story-highlight{
    transition:
        transform .5s var(--motion-ease),
        box-shadow .5s ease;
}

@media (hover:hover){

    .brand-logo:hover img{
        transform:translateY(-5px) scale(1.025);
        filter:drop-shadow(0 12px 12px rgba(0,0,0,.10));
    }

    .story-row:hover .story-image img,
    .story-highlight:hover .story-image img{
        transform:scale(1.045);
        filter:saturate(1.04);
    }

    .story-row:hover .story-content,
    .story-highlight:hover{
        transform:translateY(-4px);
    }
}


/* =========================================================
   9. HISTORY TIMELINE
   ========================================================= */

.timeline-line.motion-timeline-line{
    transform:scaleY(0);
    transform-origin:top center;
    transition:transform 1.5s .15s var(--motion-ease);
}

.timeline-line.motion-timeline-line.is-visible{
    transform:scaleY(1);
}

.history-node{
    transition:
        transform .4s var(--motion-ease),
        box-shadow .4s ease,
        background-color .4s ease;
}

.history-year,
.history-content{
    transition:
        transform .45s var(--motion-ease),
        color .4s ease;
}

/* 
@media (hover:hover){

    .history-item:hover .history-node{
        transform:scale(1.2);
        background-color:var(--motion-red);
        box-shadow:0 0 0 7px rgba(230,0,18,.12);
    }

    .history-item:hover .history-year,
    .history-item:hover .history-content{
        transform:translateY(-3px);
    } */
}


/* =========================================================
   10. CONTACT PAGE
   ========================================================= */

.contact-card,
.contact-map,
.contact-form{
    transition:
        transform .55s var(--motion-ease),
        box-shadow .55s ease;
}

.contact-card{
    overflow:hidden;
}

.company-photo{
    transition:transform .85s var(--motion-ease);
}

.form-row input,
.form-row textarea,
.form-row select{
    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background-color .35s ease;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus{
    border-color:var(--motion-red);
    box-shadow:0 0 0 3px rgba(230,0,18,.09);
    outline:none;
}

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

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

@media (hover:hover){

    .contact-card:hover{
        transform:translateY(-7px);
        box-shadow:0 18px 34px rgba(0,0,0,.13);
    }

    .contact-card:hover .company-photo{
        transform:scale(1.04);
    }

    .contact-map:hover{
        transform:translateY(-5px);
        box-shadow:0 16px 30px rgba(0,0,0,.11);
    }

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

    .submit-btn:hover::after{
        left:130%;
    }
}


/* =========================================================
   11. SALES OUTLETS
   ========================================================= */

.sales-brand img{
    transition:
        transform .7s var(--motion-ease),
        filter .6s ease;
}

.outlet-item{
    transition:
        transform .48s var(--motion-ease),
        box-shadow .48s ease,
        border-color .4s ease;
}

.outlet-item img{
    transition:
        transform .55s var(--motion-ease),
        filter .5s ease;
}

@media (hover:hover){

    .sales-brand:hover img{
        transform:translateY(-5px) scale(1.025);
        filter:drop-shadow(0 12px 12px rgba(0,0,0,.09));
    }

    .outlet-item:hover{
        transform:translateY(-8px);
        box-shadow:0 15px 28px rgba(0,0,0,.10);
        border-color:rgba(230,0,18,.28);
    }

    .outlet-item:hover img{
        transform:scale(1.045);
        filter:saturate(1.05);
    }
}


/* =========================================================
   12. COMMON FOOTER CONTACT
   ========================================================= */

.footer-contact-image img,
.footer-contact-button a{
    transition:
        transform .55s var(--motion-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);
    }
}


/* =========================================================
   13. TABLET / MOBILE
   ========================================================= */

@media (max-width:768px){

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

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

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

    .timeline-line.motion-timeline-line{
        transform:scaleY(0);
    }

    .timeline-line.motion-timeline-line.is-visible{
        transform:scaleY(1);
    }
}


/* =========================================================
   14. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
    }

    .hero-content,
    .hero-subtitle{
        animation:none !important;
    }

    .motion-ready .motion-reveal,
    .company-heading.motion-title .company-en,
    .company-heading.motion-title .company-title{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    .company-heading.motion-title .company-line,
    .fp-slogan span,
    .timeline-line.motion-timeline-line{
        transform:none !important;
        transition:none !important;
    }
}