/* ====================================
FOOTER CONTACT ANIMATION
聯絡我們區塊動態
==================================== */

.footer-contact{
    position:relative;
    isolation:isolate;
}


/* 背景柔和光影 */

.footer-contact::before{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-180px;
    top:-260px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.32) 0%,
            rgba(255,255,255,.10) 42%,
            rgba(255,255,255,0) 70%
        );

    pointer-events:none;
    z-index:-1;

    animation:contactLightMove 9s ease-in-out infinite alternate;
}


.footer-contact::after{
    content:"";

    position:absolute;

    width:480px;
    height:480px;

    right:-170px;
    bottom:-280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.22) 0%,
            rgba(255,255,255,.07) 45%,
            rgba(255,255,255,0) 72%
        );

    pointer-events:none;
    z-index:-1;

    animation:contactLightMove 11s ease-in-out infinite alternate-reverse;
}


@keyframes contactLightMove{

    0%{
        transform:translate3d(0,0,0) scale(1);
    }

    100%{
        transform:translate3d(45px,20px,0) scale(1.08);
    }

}


/* ====================================
CHILI IMAGE
辣椒圖片
==================================== */

.footer-contact-image img{
    transform-origin:center bottom;

    filter:drop-shadow(0 14px 14px rgba(0,0,0,.10));

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


@media (hover:hover){

    .footer-contact:hover .footer-contact-image img{
        transform:
            translateY(-8px)
            rotate(-2deg)
            scale(1.04);

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

}


/* ====================================
TEXT
文字效果
==================================== */

.footer-contact-tag{
    position:relative;
    overflow:hidden;

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease;
}


/* 紅色標籤掃光 */

.footer-contact-tag::after{
    content:"";

    position:absolute;

    top:-50%;
    left:-70%;

    width:45%;
    height:200%;

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

    transform:skewX(-20deg);

    transition:left .8s ease;
}


.footer-contact-title{
    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        letter-spacing .6s ease,
        color .5s ease;
}


.footer-contact-subtitle{
    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        color .5s ease;
}


@media (hover:hover){

    .footer-contact:hover .footer-contact-tag{
        transform:translateY(-3px);

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


    .footer-contact:hover .footer-contact-tag::after{
        left:130%;
    }


    .footer-contact:hover .footer-contact-title{
        transform:translateX(4px);
        letter-spacing:3px;
        color:#b09a79;
    }


    .footer-contact:hover .footer-contact-subtitle{
        transform:translateX(4px);
        color:#5f4827;
    }

}


/* ====================================
PHONE
電話區塊
==================================== */

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


.footer-contact-tel-number{
    position:relative;
    display:inline-block;

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


.footer-contact-tel-number::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:100%;
    height:2px;

    background:#e60012;

    transform:scaleX(0);
    transform-origin:left center;

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


@media (hover:hover){

    .footer-contact-center:hover .footer-contact-tel{
        transform:translateY(-5px);
    }


    .footer-contact-center:hover .footer-contact-tel-number{
        color:#5f4827;

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


    .footer-contact-center:hover .footer-contact-tel-number::after{
        transform:scaleX(1);
    }

}


/* ====================================
CONTACT BUTTON
問題諮詢按鈕
==================================== */

.footer-contact-button a{
    position:relative;
    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease,
        background-color .4s ease;
}


/* 按鈕掃光 */

.footer-contact-button a::before{
    content:"";

    position:absolute;

    top:-50%;
    left:-70%;

    width:40%;
    height:200%;

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

    transform:skewX(-20deg);

    transition:left .75s ease;
}


.footer-contact-button a span,
.footer-contact-icon{
    position:relative;
    z-index:1;
}


.footer-contact-icon{
    transition:
        transform .5s cubic-bezier(.22,1,.36,1);
}


@media (hover:hover){

    .footer-contact-button a:hover{
        opacity:1;

        transform:
            translateY(-5px)
            scale(1.02);

        background:#c91d0b;

        box-shadow:
            0 16px 30px rgba(0,0,0,.18);
    }


    .footer-contact-button a:hover::before{
        left:130%;
    }


    .footer-contact-button a:hover .footer-contact-icon{
        transform:
            translateX(4px)
            rotate(-5deg);
    }

}


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

.footer-contact.contact-ready .footer-contact-left,
.footer-contact.contact-ready .footer-contact-center,
.footer-contact.contact-ready .footer-contact-button{
    opacity:0;

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


.footer-contact.contact-ready .footer-contact-left{
    transform:translateX(-45px);
}


.footer-contact.contact-ready .footer-contact-center{
    transform:translateY(35px);
}


.footer-contact.contact-ready .footer-contact-button{
    transform:translateX(45px);
}


/* 顯示 */

.footer-contact.contact-visible .footer-contact-left,
.footer-contact.contact-visible .footer-contact-center,
.footer-contact.contact-visible .footer-contact-button{
    opacity:1;
    transform:translate(0,0);
}


/* 依序出現 */

.footer-contact.contact-visible .footer-contact-center{
    transition-delay:.15s;
}


.footer-contact.contact-visible .footer-contact-button{
    transition-delay:.3s;
}


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

@media (max-width:768px){

    .footer-contact.contact-ready .footer-contact-left,
    .footer-contact.contact-ready .footer-contact-center,
    .footer-contact.contact-ready .footer-contact-button{
        transform:translateY(30px);
    }


    .footer-contact.contact-visible .footer-contact-left,
    .footer-contact.contact-visible .footer-contact-center,
    .footer-contact.contact-visible .footer-contact-button{
        transform:translateY(0);
    }


    .footer-contact::before{
        width:350px;
        height:350px;
    }


    .footer-contact::after{
        width:320px;
        height:320px;
    }

}


/* 減少動畫偏好 */

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

    .footer-contact::before,
    .footer-contact::after{
        animation:none;
    }


    .footer-contact.contact-ready .footer-contact-left,
    .footer-contact.contact-ready .footer-contact-center,
    .footer-contact.contact-ready .footer-contact-button{

        opacity:1;
        transform:none;
        transition:none;
    }

}