/* ========================= 
   SCALE GLOBAL
========================= */

:root{
--scale:2;
}



/* ========================= 
   BLOCS CAMP
========================= */

.camp_bloc{
    padding:15px;
    margin:15px 0;
    width:95%;
}



/* =========================
   TITRES
========================= */

.camp_bloc h3{
    background:none;
    margin-bottom:10px;
}



/* =========================
   PREVIEW
========================= */

.camp_preview{
    display:flex;
    flex-direction:column;
    align-items:center;
}



/* =========================
   LIGNE DE FUSION
========================= */

.camp_fusion_preview{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:calc(25px * var(--scale));
    margin:calc(10px * var(--scale)) 0;
}



/* =========================
   PILE D'OBJETS
========================= */

.camp_stack{
    position:relative;
    width:calc(90px * var(--scale));
    height:calc(90px * var(--scale));
}


.camp_stack > img{
    position:absolute;
    width:calc(65px * var(--scale));
    transition:transform 0.15s ease;
    max-width:none;
}

.camp_stack img:nth-child(1){
    left:0;
    top:0;
}

.camp_stack img:nth-child(2){
    left:calc(10px * var(--scale));
    top:calc(10px * var(--scale));
}

.camp_stack img:nth-child(3){
    left:calc(20px * var(--scale));
    top:calc(20px * var(--scale));
}



/* hover léger */

.camp_stack:hover img{
    transform:scale(1.05);
}



/* =========================
   RESULTAT
========================= */

.camp_result img{
    width:calc(80px * var(--scale));
}



/* =========================
   FLECHE
========================= */

.camp_arrow{
    font-size:calc(28px * var(--scale));
}



/* =========================
   BOUTONS
========================= */

.camp_btn{
    margin-left:calc(10px * var(--scale));
}



/* ===================================
   OVERLAY FUSION
=================================== */

#fusion_animation{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.85);
z-index:9999;
overflow:hidden;
}



/* ===================================
   SOLEIL LEVANT
=================================== */

.fusion_bg{
position:absolute;
top:50%;
left:50%;
width:200vw;
height:200vh;

transform:translate(-50%,-50%);

background:repeating-conic-gradient(
#ffffff 0deg 7deg,
#000000 7deg 14deg
);

opacity:0.12;

animation:rotateSun 30s linear infinite;
}

@keyframes rotateSun{
from{transform:translate(-50%,-50%) rotate(0deg);}
to{transform:translate(-50%,-50%) rotate(360deg);}
}



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

.fusion_scene{
position:relative;
width:calc(600px * var(--scale));
height:calc(300px * var(--scale));
display:flex;
align-items:center;
justify-content:center;
}



/* ===================================
   CONTENEUR OBJETS
=================================== */

.fusion_items{
position:absolute;
left:50%;
top:50%;
width:calc(600px * var(--scale));
height:calc(200px * var(--scale));

transform:translate(-50%,-50%);
}



/* ===================================
   OBJETS
=================================== */

.fusion_items img{

position:absolute;

width:calc(120px * var(--scale));
height:calc(120px * var(--scale));

left:50%;
top:50%;

object-fit:contain;

transform:translate(-50%,-50%);

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

filter:drop-shadow(0 0 0px rgba(255,255,255,0));

}



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

#fusion_i1{
transform:translate(-50%,-50%) translateX(calc(-240px * var(--scale)));
}

#fusion_i2{
transform:translate(-50%,-50%) translateX(0px);
}

#fusion_i3{
transform:translate(-50%,-50%) translateX(calc(240px * var(--scale)));
}



/* ===================================
   RAPPROCHEMENT
=================================== */

.fusion_move #fusion_i1{
transform:translate(-50%,-50%) translateX(0px);
filter:drop-shadow(0 0 calc(25px * var(--scale)) rgba(255,255,255,0.8));
}

.fusion_move #fusion_i2{
transform:translate(-50%,-50%) translateX(0px);
filter:drop-shadow(0 0 calc(25px * var(--scale)) rgba(255,255,255,0.8));
}

.fusion_move #fusion_i3{
transform:translate(-50%,-50%) translateX(0px);
filter:drop-shadow(0 0 calc(25px * var(--scale)) rgba(255,255,255,0.8));
}



/* ===================================
   FUSION
=================================== */

.fusion_merge img{
transform:translate(-50%,-50%) scale(0.1);
opacity:0;
filter:drop-shadow(0 0 calc(45px * var(--scale)) rgba(255,255,255,1));
}



/* ===================================
   RESULTAT
=================================== */

#fusion_result{

position:absolute;

left:50%;
top:50%;

width:calc(170px * var(--scale));

object-fit:contain;

transform:translate(-50%,-50%);

opacity:0;

}



/* ===================================
   APPARITION
=================================== */

.fusion_show{

opacity:1 !important;

animation:
fusionPulse 1.4s ease-in-out infinite,
fusionGlow 2s ease-in-out infinite;

}



/* zoom */

@keyframes fusionPulse{

0%{
transform:translate(-50%,-50%) scale(1);
}

50%{
transform:translate(-50%,-50%) scale(1.2);
}

100%{
transform:translate(-50%,-50%) scale(1);
}

}



/* halo */

@keyframes fusionGlow{

0%{
filter:drop-shadow(0 0 calc(20px * var(--scale)) rgba(255,255,255,0.6));
}

50%{
filter:drop-shadow(0 0 calc(45px * var(--scale)) rgba(255,255,255,1));
}

100%{
filter:drop-shadow(0 0 calc(20px * var(--scale)) rgba(255,255,255,0.6));
}

}