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

.camp_bloc{
    padding:calc(15px * var(--scale));
    margin:calc(15px * var(--scale)) 0;
    width:95%;
}

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

.camp_bloc h3{
    background:none;
    margin-bottom:calc(10px * var(--scale));
}

/* =========================
   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(12px * var(--scale)) 0;
}

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

.camp_stack{
    position:relative;
    width:calc(100px * var(--scale)); /* légèrement plus grand */
    height:calc(100px * var(--scale));
}

.camp_stack > img{
    position:absolute;
    width:calc(70px * 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(12px * var(--scale));
    top:calc(12px * var(--scale));
}

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

/* hover léger */

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

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

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

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

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

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

.camp_btn{
    margin-left:calc(12px * 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:min(calc(600px * var(--scale)), 95vw);
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,
.fusion_move #fusion_i2,
.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)); }

}

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

@media (max-width:700px){

.camp_fusion_preview{
    flex-direction:column;
    gap:calc(18px * var(--scale));
}

.camp_arrow{
    transform:rotate(90deg);
}

.fusion_scene{
    height:calc(260px * var(--scale));
}

.fusion_items img{
    width:calc(100px * var(--scale));
    height:calc(100px * var(--scale));
}

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

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

}