/* ================= PRODUCT PAGE SCROLL ================= */


body.product-page{

    overflow-y:auto;

    overflow-x:hidden;

}

/* =========================
   PRODUCTS EXPERIENCE
   FINAL VERSION
   INSTANT FROZEN
   ========================= */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    background:#000;

    color:#fff;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

    overflow-x:hidden;

}



.product-container{

    width:100%;

}



/* =========================
   COMMON SCENE
   ========================= */


.product-scene{

    position:relative;

    width:100vw;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

}



.scene-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transform:scale(1.08);


    transition:

    opacity 1.4s ease,

    transform 8s cubic-bezier(.2,.8,.2,1);

}



.product-scene.active .scene-image{

    opacity:1;

    transform:scale(1);

}





/* =========================
   INSTANT TEXT
   ========================= */


.scene-content{

    position:relative;

    z-index:10;

    width:auto;

    max-width:900px;

    opacity:0;

    transform:translateY(35px);


    transition:

    opacity 1s ease,

    transform 1s ease;

}



.product-scene.active .scene-content{

    opacity:1;

    transform:translateY(0);

}



.scene-content h1{

    font-size:64px;

    font-weight:600;

    letter-spacing:-2px;

    line-height:1.2;

    white-space:normal;

    margin-bottom:20px;

}



.scene-content .en{

    font-size:16px;

    opacity:.45;

    letter-spacing:.5px;

    margin-bottom:28px;

}



.scene-content span{

    font-size:16px;

    line-height:1.8;

    opacity:.65;

}





/* =========================
 POSITION
 ========================= */


.left{

    margin-left:7vw;

}


.right{

    margin-left:auto;

    margin-right:14vw;

}



.center-bottom{

    position:absolute;

    left:50%;

    bottom:12vh;

    transform:translateX(-50%);

    text-align:center;

}



.product-scene.active .center-bottom{

    transform:

    translateX(-50%)

    translateY(0);

}



.left-bottom{

    position:absolute;

    left:7vw;

    bottom:10vh;

}



/* =========================
 INSTANT PRODUCT SHOWCASE
 保留冻结
 ========================= */


.product-showcase{

    display:block;

}



.food{

    position:absolute;

    z-index:5;

    object-fit:contain;

    opacity:0;


    filter:

    drop-shadow(

    0 30px 45px rgba(0,0,0,.45)

    );


    transition:

    opacity 1s ease,

    transform 1.2s cubic-bezier(.2,.8,.2,1);

}



.product-showcase.active .food{

    opacity:1;

}



.food-left{

    width:22vw;

    left:15%;

    bottom:10%;

}



.food-center{

    width:22vw;

    left:39%;

    bottom:10%;

}



.food-right{

    width:22vw;

    right:15%;

    bottom:10%;

}



.product-showcase.active .food{

    animation:

    foodFloat 5s ease-in-out infinite;

}



@keyframes foodFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


100%{

transform:translateY(0);

}

}



.food-name{

    position:absolute;

    z-index:8;

    bottom:6%;

    font-size:18px;

    letter-spacing:3px;

    opacity:.75;

}


.name-left{

    left:22%;

}


.name-center{

    left:46%;

}


.name-right{

    right:22%;

}



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


@media(max-width:768px){


.scene-content h1{

    font-size:38px;

}


.scene-content{

    padding:30px;

}


.food{

    width:35vw;

}


}

/* =========================
   COLD CHAIN ONLY
   ISOLATED SYSTEM
   ========================= */


.cold-chain-page{

    width:100%;

}



/* =========================
   COLD TEXT
   ========================= */


.cold-chain-text{

    position:absolute;

    z-index:20;

    max-width:700px;

    opacity:0;

    transform:translateY(35px);


    transition:

    opacity 1s ease,

    transform 1s ease;

}



.cold-chain-scene.active .cold-chain-text{

    opacity:1;

    transform:translateY(0);

}



.cold-chain-text h1{

    font-size:64px;

    font-weight:600;

    letter-spacing:-2px;

    line-height:1.2;

    margin-bottom:20px;

}



.cold-chain-text .en{

    font-size:16px;

    opacity:.45;

    letter-spacing:2px;

    margin-bottom:28px;

}



.cold-chain-text span{

    font-size:16px;

    line-height:1.8;

    opacity:.7;

}



/* =========================
   TEXT POSITION
   ========================= */


.cold-text-left{

    left:7vw;

    bottom:12vh;

}



.cold-text-right{

    right:7vw;

    bottom:12vh;

}





/* =========================
   COLD BACKGROUND IMAGE
   ========================= */


.cold-chain-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transform:scale(1.08);


    transition:

    opacity 1.4s ease,

    transform 8s cubic-bezier(.2,.8,.2,1);

}



.cold-chain-scene.active .cold-chain-image{

    opacity:1;

    transform:scale(1);

}





/* =========================
   SCENE 03 / 04
   SPACE FUSION
   ========================= */


.cold-chain-detail{

    position:absolute;

    z-index:5;

    object-fit:cover;

    opacity:0;

    transform:

    translateY(30px)

    scale(1.05);


    transition:

    opacity 1.5s ease,

    transform 1.5s ease;

}



.cold-chain-scene.active .cold-chain-detail{

    opacity:1;

    transform:

    translateY(0)

    scale(1);

}



.cold-storage-detail{

    width:42vw;

    right:0;

    bottom:0;


    mask-image:

    linear-gradient(

    90deg,

    transparent,

    black 30%

    );

}



.cold-delivery-detail{

    width:45vw;

    right:0;

    bottom:0;


    mask-image:

    linear-gradient(

    90deg,

    transparent,

    black 25%

    );

}





/* =========================
   SCENE 05
   FROM SOURCE TO TABLE
   APPLE SPATIAL PRODUCT SPACE
   ========================= */


/* 背景生产过程氛围层 */

.cold-product-process{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;


    z-index:1;


    opacity:0;


    transform:

    scale(1.08);



    filter:

    brightness(.55)

    contrast(1.05)

    blur(.3px);



    transition:

    opacity 1.8s ease,

    transform 8s cubic-bezier(.2,.8,.2,1);

}



.cold-chain-scene.active .cold-product-process{


    opacity:.45;


    transform:

    scale(1);


}





/* 产品主体 */

.cold-product-main{

    position:absolute;

    z-index:5;


    width:46vw;


    left:-2vw;


    bottom:-2vh;


    object-fit:contain;



    opacity:0;


    transform:
    scale(1.08)
    translateY(35px);



    filter:

    drop-shadow(
    0 35px 60px rgba(0,0,0,.45)
    );



    /*
    左侧保留主体
    右侧渐隐融合
    */

    mask-image:

    linear-gradient(

        90deg,

        black 0%,

        black 55%,

        rgba(0,0,0,.7) 75%,

        transparent 100%

    );


    -webkit-mask-image:

    linear-gradient(

        90deg,

        black 0%,

        black 55%,

        rgba(0,0,0,.7) 75%,

        transparent 100%

    );



    transition:

    opacity 1.5s ease,

    transform 1.5s cubic-bezier(.2,.8,.2,1);

}



.cold-chain-scene.active .cold-product-main{


    opacity:1;



    transform:

    scale(1)

    translateY(0);



}







/* 文字前景 */

.cold-product-text{


    right:10vw;


    top:50%;


    bottom:auto;


    transform:

    translateY(-50%);



    max-width:420px;


    z-index:20;


}





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


@media(max-width:768px){


.cold-product-main{


    width:78vw;


    left:11vw;


    bottom:18vh;


}



.cold-product-text{


    left:8vw;


    right:auto;


    top:auto;


    bottom:8vh;


    transform:none;


}



.cold-product-process{


    object-position:center;

}


}




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


@media(max-width:768px){


.cold-chain-text h1{

    font-size:38px;

}



.cold-product-main{

    width:75vw;

}



.cold-product-detail{

    width:45vw;

}


}

/* Scene 02 产品展示文字定位 */

.product-showcase .scene-content{

    position:absolute;

    top:12vh;

    left:7vw;

    margin:0;

}

/* ===================================
   GIFT PAGE
   =================================== */


.gift-page{

    background:#000;

}


.gift-scene{

    position:relative;

    overflow:hidden;

}



/* =========================
   PRODUCT DISPLAY
   ========================= */


.gift-product-left,
.gift-product-right{


    position:absolute;


    width:58vw;


    bottom:-4vh;


    object-fit:contain;


    opacity:0;


    transition:

    opacity 1.4s ease,

    transform 1.6s cubic-bezier(.2,.8,.2,1);

}





/* 左侧产品 */

.gift-product-left{


    left:-10vw;


    transform:

    translateX(-80px)

    scale(1.03);



    mask-image:

    linear-gradient(

    90deg,

    black 0%,

    black 65%,

    transparent 100%

    );


    -webkit-mask-image:

    linear-gradient(

    90deg,

    black 0%,

    black 65%,

    transparent 100%

    );

}





/* 右侧产品 */

.gift-product-right{


    right:-10vw;


    transform:

    translateX(80px)

    scale(1.03);



    mask-image:

    linear-gradient(

    270deg,

    black 0%,

    black 65%,

    transparent 100%

    );


    -webkit-mask-image:

    linear-gradient(

    270deg,

    black 0%,

    black 65%,

    transparent 100%

    );

}





/* =========================
   ACTIVE ANIMATION
   ========================= */


.gift-scene.active .gift-product-left,
.gift-scene.active .gift-product-right{


    opacity:1;


    transform:

    translateX(0)

    scale(1);


}






/* =========================
   TEXT
   ========================= */


.gift-text{


    position:absolute;


    left:50%;


    top:16vh;


    transform:

    translateX(-50%);



    z-index:20;


    text-align:center;


    color:white;


}





.gift-text h1{


    font-size:

    clamp(42px,5vw,80px);


    font-weight:500;


    letter-spacing:4px;


    margin:0 0 20px;


    white-space:nowrap;


}




.gift-text .en{


    font-size:18px;


    letter-spacing:6px;


    margin-bottom:25px;


    white-space:nowrap;


}




.gift-text span{


    display:block;


    margin-top:20px;


    font-size:22px;


    line-height:2;


    white-space:nowrap;


}





/* =========================
   HERO / FINAL
   ========================= */


.gift-hero-image,
.gift-final-image{


    filter:

    brightness(.65);


}