/* Lore Page Styles */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');

:root {
    --bg-overlay: rgba(0,0,0,0.6);
}

body {
    font-family: 'Inter', sans-serif;
    color: #fff;
    background: #0d0d0d;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,var(--bg-overlay) 0%,rgba(0,0,0,0.9) 100%), url("../images/Lore/chapter1.2df8dd4889ae.webp") center/cover no-repeat;
    background-attachment: fixed;
    filter: brightness(0.85);
    animation:lore-bg-zoom 4s ease-out forwards;
    transform-origin:center;
}

@keyframes lore-bg-zoom{
    0%{transform:scale(1.25);}
    100%{transform:scale(1);}
}

/* HERO */
.title-section {
    height: calc(100vh - var(--nh-nav-h));
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;
}
.page-title {
    font-family:'Montserrat',sans-serif;
    font-size:5rem;
    letter-spacing:0.15em;
    margin:0;
}
.page-subtitle{font-size:1.2rem;color:rgba(255,255,255,0.8);margin-top:20px;max-width:600px}

/* CHAPTERS */
.section-block {
    max-width:900px;
    margin:0 auto 60px auto;
    padding:50px 40px;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    backdrop-filter:blur(8px);
}
.chapter-title {
    font-family:'Cinzel',serif;
    font-size:2rem;
    margin-bottom:20px;
    letter-spacing:1px;
    text-transform:uppercase;
}
.chapter-text {line-height:1.7;color:rgba(255,255,255,0.85);font-size:1rem;margin-bottom:24px;}
.chapter-text strong{color:#ffd570;font-weight:600;text-shadow:0 0 6px rgba(255,215,112,0.6);}

/* ANIMATIONS */
.animate-on-scroll{opacity:0;transform:translateY(40px);transition:all 0.6s ease-out;}
.animate-on-scroll.animate-visible.animate-fade-up{opacity:1;transform:none;}

.stagger-delay-1{transition-delay:0.1s}.stagger-delay-2{transition-delay:0.2s}.stagger-delay-3{transition-delay:0.3s}

@media(max-width:700px){
    .page-title{font-size:3.5rem}
    .section-block{padding:40px 25px}
}

.chapter-nav{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:40px}
.chapter-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:8px 40px 8px 12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);color:#fff;border-radius:6px;font-size:0.95rem;min-width:220px;line-height:1.2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='white'><path d='M0 0l5 6 5-6H0z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}
.chapter-select option{background:#1a1a1a}
.chapter-select:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,0.3)}
.nav-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);color:#fff;padding:8px 14px;border-radius:6px;font-size:1rem;cursor:pointer;transition:background .3s}
.nav-btn:disabled{opacity:0.4;cursor:not-allowed}
.nav-btn:hover:not(:disabled){background:rgba(255,255,255,0.18)}

.lore-chapter{display:none;opacity:0;transform:translateY(40px);transition:all .6s ease}
.lore-chapter.active{display:block;opacity:1;transform:none}

.nh-highlight{color:#ffd570;font-weight:600;text-shadow:0 0 6px rgba(255,215,112,0.6);}
.lancers-highlight{color:#b22222;font-weight:600;text-shadow:0 0 4px rgba(178,34,34,0.6);}
.sentries-highlight{color:#a0a0a0;font-weight:600;text-shadow:0 0 4px rgba(160,160,160,0.5);}