/* ====================================
SIGNATURE PRODUCT ANIMATION
明星商品頁動態
==================================== */


/* ====================================
SCROLL REVEAL
捲動進場
==================================== */

.featured-product.signature-motion-ready .sig-reveal{
    opacity:0;

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);

    transition-delay:var(--sig-delay, 0s);
}


/* 往上進場 */

.featured-product.signature-motion-ready .sig-from-bottom{
    transform:translateY(45px);
}


/* 從左進場 */

.featured-product.signature-motion-ready .sig-from-left{
    transform:translateX(-60px);
}


/* 從右進場 */

.featured-product.signature-motion-ready .sig-from-right{
    transform:translateX(60px);
}


/* 縮放進場 */

.featured-product.signature-motion-ready .sig-from-scale{
    transform:scale(.94);
}


/* 顯示後 */

.featured-product.signature-motion-ready .sig-reveal.sig-visible{
    opacity:1;
    transform:translate(0,0) scale(1);
}


/* ====================================
MAIN PRODUCT IMAGE
主商品圖片
==================================== */

.fp-hero{
    position:relative;
}


.fp-hero img{
    transform-origin:center center;

    filter:drop-shadow(0 20px 20px rgba(0,0,0,.08));

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .7s ease;
}


/* 進場完成後輕微漂浮 */

.fp-hero.sig-visible img{
    animation:signatureProductFloat 5s ease-in-out infinite;
}


@keyframes signatureProductFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}


@media (hover:hover){

    .fp-hero:hover img{
        filter:drop-shadow(0 28px 24px rgba(0,0,0,.14));
    }

}


/* ====================================
SLOGAN
紅色標語
==================================== */

.fp-slogan span{
    transform:scaleX(0);
    opacity:0;

    transition:
        transform .9s cubic-bezier(.22,1,.36,1),
        opacity .6s ease;
}


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


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


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


.fp-slogan h3{
    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        text-shadow .5s ease;
}


@media (hover:hover){

    .fp-slogan:hover h3{
        transform:translateY(-4px);

        text-shadow:
            0 8px 18px rgba(230,0,18,.12);
    }

}


/* ====================================
PRODUCT TITLE
商品名稱
==================================== */

.fp-title{
    position:relative;
    width:max-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}


.fp-title::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-14px;

    width:48px;
    height:2px;

    background:#e60012;

    transform:
        translateX(-50%)
        scaleX(0);

    transition:transform .7s cubic-bezier(.22,1,.36,1);
}


.fp-title.sig-visible::after{
    transform:
        translateX(-50%)
        scaleX(1);
}


/* ====================================
CONTENT
文章與圓點背景
==================================== */

.dot-box{
    animation:signatureDotsMove 14s linear infinite;
}


@keyframes signatureDotsMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:0 56px;
    }

}


.content-text p{
    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        color .4s ease;
}


@media (hover:hover){

    .content-text p:hover{
        transform:translateY(-3px);
        color:#222;
    }

}


/* ====================================
FOOD IMAGE
情境圖片
==================================== */

.fp-food{
    position:relative;
}


.fp-food img{
    transform-origin:center center;

    filter:drop-shadow(0 16px 18px rgba(0,0,0,.07));

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .7s ease;
}


@media (hover:hover){

    .fp-food:hover img{
        transform:
            translateY(-8px)
            scale(1.035);

        filter:
            drop-shadow(0 25px 24px rgba(0,0,0,.14))
            saturate(1.05);
    }

}


/* ====================================
BOTTOM BANNER
下方紅色橫幅
==================================== */

.fp-banner{
    overflow:hidden;
}


.banner-text{
    position:relative;
    overflow:hidden;
}


/* 紅色區塊淡淡掃光 */

.banner-text::after{
    content:"";

    position:absolute;

    top:-50%;
    left:-45%;

    width:28%;
    height:200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        );

    transform:skewX(-20deg);

    pointer-events:none;

    transition:left 1s ease;
}


.banner-text h3,
.banner-text h4,
.banner-text p{
    position:relative;
    z-index:1;

    transition:
        transform .6s cubic-bezier(.22,1,.36,1);
}


.banner-image{
    overflow:hidden;
}


.banner-image img{
    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1),
        filter .8s ease;
}


@media (hover:hover){

    .fp-banner:hover .banner-text::after{
        left:125%;
    }


    .fp-banner:hover .banner-text h3{
        transform:translateX(6px);
    }


    .fp-banner:hover .banner-text h4{
        transform:translateX(10px);
    }


    .fp-banner:hover .banner-text p{
        transform:translateX(10px);
    }


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

}


/* ====================================
MOBILE
==================================== */

@media (max-width:768px){

    .featured-product.signature-motion-ready .sig-from-left,
    .featured-product.signature-motion-ready .sig-from-right,
    .featured-product.signature-motion-ready .sig-from-bottom{
        transform:translateY(30px);
    }


    .featured-product.signature-motion-ready .sig-from-scale{
        transform:scale(.96);
    }


    .featured-product.signature-motion-ready .sig-reveal.sig-visible{
        transform:translateY(0) scale(1);
    }


    .fp-hero.sig-visible img{
        animation:none;
    }


    .fp-title{
        width:auto;
    }

}


/* ====================================
REDUCED MOTION
==================================== */

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

    .fp-hero.sig-visible img,
    .dot-box{
        animation:none;
    }


    .featured-product.signature-motion-ready .sig-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }


    .fp-slogan span{
        opacity:1;
        transform:none;
        transition:none;
    }

}