/* ==============================
   RESPONSIVE & TYPOGRAPHY
   ============================== */

html{ font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body{ font-family: "Cormorant Garamond", Georgia, serif; color:#efecea; background: radial-gradient(circle at 20% 10%, rgba(255,235,180,0.08), transparent 16%), radial-gradient(circle at 85% 12%, rgba(216,180,106,0.08), transparent 14%), linear-gradient(180deg, #050504 0%, #070606 55%, #060505 100%); }

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* reduce nav padding on small screens */
@media (max-width:900px){
   nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 72px;
  z-index:100;
  background: rgba(7,7,8,0.92);
  border-bottom:1px solid rgba(255,215,115,0.08);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}




.logo{ font-size:28px; letter-spacing:8px; }
}

@media (max-width:768px){
   /* hide heavy canvas for mobile */
   #world{ display:none !important; }
   .parchment{ margin:40px auto; padding:30px; }
   .hero h1{
  font-family: "Cinzel", serif;
  font-size: 90px;
  line-height: 1.1;
  font-weight: 700;
  color: #f8f0de;
  text-shadow: 0 0 45px rgba(0,0,0,.8), 0 0 18px rgba(216,180,106,.25);
}
   .hero p{
  font-size: 32px;
  margin: 40px auto;
  max-width: 850px;
  color: rgba(248,240,222,.94);
  text-shadow: 0 0 18px rgba(0,0,0,.55);
}
   #books{ padding:60px 20px; }
   footer{ padding:40px 20px; }
}

@media (max-width:420px){
   .links{ display:none; }
   .logo{ letter-spacing:6px; }
   .book-card img{ height:260px; }
}

/* small enhancement for luxury look */
h1, h2, h3{ text-rendering:optimizeLegibility; }
/* ======================================================
   LUNAIRIA
   DARK FANTASY DESIGN SYSTEM
   ====================================================== */


:root{

    --gold:#d8b46a;
    --gold-light:#ffe7a3;
    --dark:#050505;
    --dark-soft:#111;
    --red:#6e1616;

    --glass:
    rgba(255,255,255,.06);

    --border:
    rgba(216,180,106,.35);


    --shadow:
    0 0 40px rgba(216,180,106,.15);

}


   /* ===== Fallback overrides for missing textures ===== */
   .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; }






/* ======================================================
   RESET
====================================================== */


*{

margin:0;
padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:auto;

}



body{

background:#020202;

color:white;

font-family:
"Cormorant Garamond",
serif;

overflow-x:hidden;

}

/* Skip link */
.skip-link{
   position:fixed;
   left:12px;
   top:12px;
   background:var(--gold);
   color:#050505;
   padding:8px 12px;
   border-radius:6px;
   z-index:1200;
   transform:translateY(-120%);
   transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); outline:3px solid #fff; }

/* Focus-visible improvements */
:focus{ outline: 3px solid var(--gold); outline-offset:3px; }

/* Back to top button */
.back-to-top{
   position:fixed; right:24px; bottom:24px; width:48px; height:48px; border-radius:50%; background:var(--gold); color:#050505; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.4); cursor:pointer; z-index:1200; opacity:0; transform:translateY(20px); transition:opacity .25s, transform .25s; }
.back-to-top.show{ opacity:1; transform:none; }





/* ======================================================
   CANVAS THREE JS
====================================================== */


#world{


position:fixed;

top:0;
left:0;

width:100%;
height:100%;


z-index:-10;


}





/* ======================================================
   PARTICULES
====================================================== */


#particles{


position:fixed;

inset:0;

pointer-events:none;

z-index:5;


}







/* ======================================================
   CURSEUR MAGIQUE
====================================================== */


#magic-cursor{


position:fixed;

width:35px;

height:35px;


border-radius:50%;


border:1px solid var(--gold);


pointer-events:none;


z-index:999;


box-shadow:

0 0 25px var(--gold);


transform:

translate(-50%,-50%);


}





/* ======================================================
   NAVIGATION
====================================================== */


nav{


position:fixed;

top:0;

left:0;

width:100%;


display:flex;

justify-content:space-between;

align-items:center;


padding:35px 80px;


z-index:100;



background:

linear-gradient(

to bottom,

rgba(0,0,0,.75),

transparent

);



}





.logo{


font-family:"Cinzel",serif;


font-size:38px;


letter-spacing:12px;


color:var(--gold);


text-shadow:

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


}




.links{


display:flex;

gap:45px;


}



.links a{
  text-decoration:none;
  color:rgba(246,238,217,.96);
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.18em;
  position:relative;
  transition: color .3s ease, transform .3s ease;
}


.links a::after{


content:"";


position:absolute;


bottom:-10px;

left:0;


width:0;


height:1px;


background:var(--gold);


transition:.4s;


}



.links a:hover{


color:var(--gold);


}



.links a:hover::after{


width:100%;


}





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


.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:0 24px;
  background: radial-gradient(circle at center, rgba(255,245,210,0.06), transparent 24%), radial-gradient(circle at top right, rgba(216,180,106,0.08), transparent 14%), linear-gradient(180deg, #090908 0%, #040404 100%);
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,0.08), transparent 20%), radial-gradient(circle at 18% 82%, rgba(216,180,106,0.06), transparent 12%);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.54) 100%);
  pointer-events:none;
}





.hero-content{
  position: relative;
  z-index: 1;
  max-width: 1000px;
  animation: heroAppear 2s ease;
}





.subtitle{


font-size:25px;


letter-spacing:8px;


text-transform:uppercase;


color:var(--gold);


margin-bottom:40px;


}




.hero h1{


font-family:"Cinzel",serif;


font-size:90px;


line-height:1.1;


font-weight:700;



text-shadow:


0 0 40px black;



}




.hero p{


font-size:32px;


margin:40px auto;


max-width:850px;


}





.hero-about{
  background: radial-gradient(circle at top, rgba(255,230,160,0.12), transparent 28%),
              radial-gradient(circle at 20% 18%, rgba(216,180,106,0.18), transparent 10%),
              linear-gradient(180deg, rgba(8,7,12,0.98), rgba(12,11,18,0.96));
  color:#f3ebd8;
  overflow:hidden;
}
.hero-about::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle at 55% 15%, rgba(255,255,255,0.14), transparent 20%),
                    radial-gradient(circle at 85% 70%, rgba(216,180,106,0.1), transparent 15%);
  opacity:0.8;
  pointer-events:none;
}
.hero-about .hero-content{
  position:relative;
  z-index:2;
  padding:0 24px;
}
.hero-about h1{
  letter-spacing:1px;
  text-shadow: 0 0 24px rgba(0,0,0,.4), 0 0 36px rgba(216,180,106,.18);
}
.about-hero{
  margin-top:70px;
}
.about-details .text p{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.signature{
  font-size:22px;
  font-style:italic;
  margin-top:40px;
  text-align:center;
}

/* ======================================================
   BOUTON OR
====================================================== */


.gold-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 46px;
  border-radius:999px;
  border:1px solid rgba(255,225,145,0.28);
  background: rgba(255,255,255,0.08);
  color:#f7e8be;
  font-family:"Cinzel", serif;
  font-size:17px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.26), inset 0 0 0 rgba(255,255,255,.08);
  transition:.35s ease;
}



.gold-button::before{


content:"";


position:absolute;


top:0;

left:-100%;


height:100%;

width:100%;


background:

linear-gradient(

90deg,

transparent,

white,

transparent

);



transition:.6s;


}



.gold-button:hover::before{


left:100%;


}



.gold-button:hover{
  transform: translateY(-4px);
  color:#050505;
  background: linear-gradient(135deg, rgba(255,232,158,0.95), rgba(210,160,80,0.95));
  box-shadow: 0 20px 55px rgba(0,0,0,.3), inset 0 0 30px rgba(255,255,255,.08);
}





/* ======================================================
   PARCHEMIN
====================================================== */


.parchment{
  width:85%;
  margin:120px auto;
  padding:90px;
  border-radius:28px;
  background: rgba(12,10,10,0.92);
  border:1px solid rgba(255,215,120,0.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.32);
  backdrop-filter: blur(20px);
}


.parchment h2{


position:relative;


font-family:"Cinzel";


font-size:55px;


color:var(--gold);


text-align:center;


margin-bottom:50px;


}



.text{


position:relative;

}



.text p{


font-size:27px;


line-height:1.8;


margin-bottom:35px;


}





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


#books{


padding:120px 80px;


}



#books h2{


text-align:center;


font-family:"Cinzel";


font-size:70px;


color:var(--gold);


margin-bottom:80px;


}





.books-container{


display:grid;


grid-template-columns:

repeat(

auto-fit,

minmax(260px,1fr)

);



gap:50px;


}





.book-card{


background:


linear-gradient(

145deg,

#171717,

#050505

);



padding:25px;


border-radius:20px;



border:

1px solid rgba(216,180,106,.3);



transition:

transform .6s,

box-shadow .6s;



transform-style:

preserve-3d;



overflow:hidden;



}




.book-card:hover{


transform:

translateY(-25px)

rotateY(10deg);



box-shadow:


0 30px 70px rgba(216,180,106,.35);


}





.book-card img{


width:100%;


height:380px;


object-fit:cover;


border-radius:15px;


}



.book-card h3{


font-family:"Cinzel";


font-size:30px;


text-align:center;


margin:25px;


color:var(--gold);


}





.book-card a{


display:block;


text-align:center;


color:white;


font-size:20px;


cursor:pointer;


}





/* ======================================================
   FOOTER
====================================================== */

.site-footer{
  padding:80px 50px;
  background: linear-gradient(180deg, rgba(5,5,5,0.98), rgba(12,11,18,0.96));
  border-top:1px solid rgba(216,180,106,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.footer-content{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 0.9fr 1fr;
  gap:30px;
  align-items:center;
  color:#f5eed9;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
}
.footer-logo{
  font-family:"Cinzel", serif;
  font-size:38px;
  letter-spacing:.18em;
  color:var(--gold);
}
.footer-brand p{
  font-size:17px;
  line-height:1.9;
  max-width:420px;
  color:rgba(248,240,222,0.88);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.footer-links a{
  color:#e9dfb8;
  text-decoration:none;
  letter-spacing:0.06em;
  font-size:17px;
  transition: color .25s ease;
}
.footer-links a:hover{
  color:var(--gold);
}
.footer-note{
  text-align:left;
  color:rgba(248,240,222,0.82);
}
.footer-note p{
  margin-bottom:12px;
  font-size:16px;
  line-height:1.8;
}
.footer-note small{
  display:block;
  opacity:.75;
}
@media (max-width: 900px){
  .footer-content{
    grid-template-columns:1fr;
    text-align:center;
    align-items:center;
  }
  .footer-brand,
  .footer-links,
  .footer-note{
    align-items:center;
  }
  .footer-links{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
  }
  .footer-links a{
    font-size:16px;
  }
}

/* ======================================================
   FOG
====================================================== */


.fog{


position:fixed;


bottom:-20%;


width:150%;


height:300px;



/* fallback gradient first, then texture if available */
background: linear-gradient(90deg, rgba(8,6,6,0.6), rgba(30,20,18,0.35)), url("../assets/textures/smoke.png");



background-size:cover;


opacity:.25;



filter:

blur(20px);


z-index:10;


pointer-events:none;


}



.fog-one{


animation:

fogMove 30s linear infinite;


}



.fog-two{


animation:

fogMove 45s linear infinite reverse;


opacity:.15;


}





/* ======================================================
   MUSIC BUTTON
====================================================== */


#music-button{


position:fixed;


right:40px;


bottom:40px;


width:60px;

height:60px;


border-radius:50%;


border:1px solid var(--gold);


background:#080808;


color:var(--gold);


font-size:25px;


z-index:200;


cursor:pointer;


box-shadow:

0 0 30px rgba(216,180,106,.5);


}

.fog{

mix-blend-mode:screen;

}


.fog::after{

content:"";

position:absolute;

inset:0;


background:

radial-gradient(

circle,

rgba(255,255,255,.15),

transparent 70%

);


animation:

fogLight 12s infinite alternate;


}



@keyframes fogLight{


from{

opacity:.3;

transform:scale(1);

}


to{

opacity:.8;

transform:scale(1.3);

}


}

/* ======================================================
   BOOK MAGIC EFFECT
====================================================== */


.book-card{


position:relative;


transform-style:preserve-3d;


overflow:hidden;


}



.book-card::before{


content:"";


position:absolute;


inset:0;


background:

radial-gradient(

circle at var(--mouse-x) var(--mouse-y),

rgba(255,220,130,.35),

transparent 180px

);



opacity:0;


transition:.4s;


pointer-events:none;


z-index:5;


}



.book-card:hover::before{


opacity:1;


}




.book-glow{


position:absolute;


inset:-50%;


background:


linear-gradient(

120deg,

transparent,

rgba(255,220,150,.7),

transparent

);



transform:

translateX(-100%)

rotate(25deg);



transition:.8s;


pointer-events:none;


z-index:4;


}



.book-card:hover .book-glow{


transform:

translateX(100%)

rotate(25deg);


}





.book-card img{


position:relative;


z-index:2;


}




.book-card h3,

.book-card a{


position:relative;


z-index:6;


}
/* MOBILE MENU PREMIUM */
.mobile-menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:none;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50%;
  cursor:pointer;
  position:relative;
  z-index:110;
  transition:background .25s, transform .25s;
}
.mobile-menu-toggle:hover{ background:rgba(255,255,255,0.12); }
.mobile-menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  background:#fff;
  border-radius:2px;
  transition:transform .3s, opacity .3s;
}
.mobile-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,5,5,.95);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:105;
}
.mobile-menu-overlay.open{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}
.mobile-menu-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  gap:32px;
}
.mobile-menu-panel a{
  color:#fff;
  font-size:32px;
  text-decoration:none;
  letter-spacing:2px;
  transition:color .25s;
}
.mobile-menu-panel a:hover{ color:var(--gold); }
.mobile-menu-toggle.open span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.open span:nth-child(2){
  opacity:0;
}
.mobile-menu-toggle.open span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu-panel a[aria-current="page"],
.links a[aria-current="page"]{
  color:var(--gold);
}

@media (max-width: 900px){
  nav { padding:20px 24px; }
  .links { display:none; }
  .mobile-menu-toggle { display:block; }
}