/* ======================================================
   LUNAIRIA
   CINEMATIC ANIMATIONS
====================================================== */


/* ======================================================
   LOADER - LIVRE MAGIQUE
====================================================== */


#loader{

position:fixed;

inset:0;

background:#020202;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

z-index:9999;


}



#loader h1{


font-family:"Cinzel",serif;


font-size:80px;


letter-spacing:25px;


color:#d8b46a;


animation:

logoReveal 3s ease forwards;


text-shadow:

0 0 40px #d8b46a;


}







.magic-book{


width:220px;

height:150px;


position:relative;


perspective:1000px;


margin-bottom:60px;


}




.page{


position:absolute;


top:0;


width:50%;


height:100%;


background:


linear-gradient(

90deg,

#8b6335,

#d8b46a

);


border:2px solid #f5dc9b;


box-shadow:

0 0 40px rgba(216,180,106,.7);


}




.page.left{


left:0;


transform-origin:right;


animation:


openLeft 2.5s ease forwards;


}



.page.right{


right:0;


transform-origin:left;


animation:


openRight 2.5s ease forwards;


}





/* ======================================================
   LIVRE OUVERTURE
====================================================== */


@keyframes openLeft{


0%{

transform:

rotateY(0deg);

}


100%{

transform:

rotateY(-120deg);

}

}



@keyframes openRight{


0%{

transform:

rotateY(0deg);

}


100%{

transform:

rotateY(120deg);

}

}







/* ======================================================
   LOGO
====================================================== */


@keyframes logoReveal{


0%{

opacity:0;

transform:

scale(.5)

translateY(40px);


filter:

blur(20px);


}



60%{

opacity:1;


}


100%{


transform:

scale(1);


filter:

blur(0);


}

}





/* ======================================================
   FEU / BRAISES
====================================================== */


.loading-fire{


position:absolute;


bottom:15%;


width:250px;


height:10px;


background:

linear-gradient(

90deg,

transparent,

#ff9d3d,

transparent

);



filter:

blur(10px);



animation:

firePulse 1s infinite alternate;


}



@keyframes firePulse{


from{


opacity:.3;

transform:

scaleX(.7);


}



to{


opacity:1;

transform:

scaleX(1.3);


}


}






/* ======================================================
   HERO CINEMA
====================================================== */


.hero-content{


animation:

heroEntrance 2.5s cubic-bezier(.16,1,.3,1);


}




@keyframes heroEntrance{


0%{


opacity:0;


transform:


translateY(100px);


filter:

blur(20px);


}




100%{


opacity:1;


transform:


translateY(0);


filter:

blur(0);


}


}








/* ======================================================
   LUMIERE MAGIQUE
====================================================== */


.gold-button{


animation:

buttonGlow 4s infinite;


}




@keyframes buttonGlow{


0%,100%{


box-shadow:

0 0 20px rgba(216,180,106,.3);


}



50%{


box-shadow:

0 0 60px rgba(216,180,106,.8);


}


}







/* ======================================================
   BROUILLARD
====================================================== */


@keyframes fogMove{


0%{


transform:

translateX(-30%);


}



50%{


transform:

translateX(10%);


}



100%{


transform:

translateX(-30%);


}


}







/* ======================================================
   LIVRES FLOTTANTS
====================================================== */


.book-card{


animation:

floatingBook 8s ease-in-out infinite;


}



.book-card:nth-child(2){

animation-delay:1s;

}



.book-card:nth-child(3){

animation-delay:2s;

}



.book-card:nth-child(4){

animation-delay:3s;

}





@keyframes floatingBook{


0%,100%{


translate:

0 0;


}



50%{


translate:

0 -15px;


}


}








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


.reveal{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);
}

.reveal.active{
  opacity: 1;
  transform: translateY(0);
}






/* ======================================================
   EFFET PELLICULE CINEMA
====================================================== */


body::after{


content:"";


position:fixed;


inset:0;


pointer-events:none;



background:


url("../assets/textures/noise.png");



opacity:.08;



mix-blend-mode:overlay;


z-index:999;


}


/* ===== Fallback overrides for missing textures (ensure override after other CSS) ===== */
.fog{ background: linear-gradient(90deg, rgba(8,6,6,0.6), rgba(30,20,18,0.35)) !important; }
.parchment::before{ background-image: linear-gradient(180deg, rgba(40,30,20,0.08), rgba(10,10,10,0.06)) !important; }
body::after{ background: radial-gradient(circle, rgba(255,255,255,0.02), transparent 60%) !important; }





/* ======================================================
   EFFET ECRITURE MAGIQUE
====================================================== */


.magic-text{


overflow:hidden;


border-right:

2px solid #d8b46a;


white-space:nowrap;



animation:

typing 4s steps(40),

cursorBlink .7s infinite;


}




@keyframes typing{


from{

width:0;

}



to{

width:100%;

}


}




@keyframes cursorBlink{


50%{

border-color:transparent;

}

}





/* ======================================================
   ROTATION 3D CARTES
====================================================== */


.book-card:hover img{


transform:

scale(1.05);



filter:

brightness(1.2);


}



.book-card img{


transition:

.8s;


}







/* ======================================================
   EFFET DRAGON / MOUVEMENT CIEL
====================================================== */


.sky-motion{


animation:

skyMove 40s linear infinite;


}



@keyframes skyMove{


from{


background-position:

0 0;


}



to{


background-position:

1000px 0;


}


}






/* ======================================================
   PULSE LUNAIRE
====================================================== */


.moon{


animation:

moonPulse 8s infinite;


}





@keyframes moonPulse{


0%,100%{


filter:

brightness(.8);


}



50%{


filter:

brightness(1.3);


}


}






/* ======================================================
   TRANSITION ENTRE SECTIONS
   (la révélation est gérée par .reveal.active et par
   GSAP ScrollTrigger dans js/main.js — pas besoin ici)
====================================================== */