/* ===== style_part1.css ===== */

/* ==========================================================
   THE FRENCH REVOLUTION
   Museum / Dark Academia Theme
   Part 1 of complete stylesheet
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

:root{
    --parchment:#f4ecd8;
    --paper:#fbf6eb;
    --brown:#2f2218;
    --brown-light:#4b3929;
    --gold:#b68b2d;
    --red:#7f1d1d;
    --shadow:0 14px 35px rgba(0,0,0,.22);
    --radius:10px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Libre Baskerville", serif;
    color:var(--brown);
    line-height:1.8;
    overflow-x:hidden;
    background:
    linear-gradient(
        rgba(244,236,216,.65),
        rgba(244,236,216,.65)
    ),
    url("images/parchment.jpeg");
    background-size:cover;
    background-attachment:fixed;
}

.container{
    width:min(1200px,92%);
    margin:auto;
}

section{
    padding:100px 0;
}

h1,h2,h3{
    font-family:"Cormorant Garamond", serif;
    font-weight:700;
    color:var(--brown);
}

h1{
    font-size:5rem;
    text-transform:uppercase;
    letter-spacing:3px;
}

h2{
    font-size:3rem;
    text-align:center;
    margin-bottom:2rem;
    position:relative;
}

p{
    font-size:1.03rem;
}

.navbar{
    position:fixed;
    inset:0 0 auto 0;
    height:78px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 7%;
    background:rgba(32,22,15,.93);
    border-bottom:2px solid var(--gold);
    z-index:1000;
}

.logo h1{
    color:#f6ead2;
    font-size:1.8rem;
    letter-spacing:1px;
}

.nav-links{
    list-style:none;
    display:flex;
    gap:2rem;
}

.nav-links a{
    color:#f7f2e9;
    text-decoration:none;
    transition:.3s;
    position:relative;
}

.nav-links a:hover{
    color:#f0c85a;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.3s;
}

.nav-links a:hover::after{
    width:100%;
}

.hero{
    height:100vh;
    background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
        url("images/hero.jpeg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-content{
    max-width:850px;
    color:#fff7e6;
    animation:fadeUp 1.2s ease;
}

.hero-content h1{
    color:#fff5de;
    text-shadow:0 6px 25px rgba(0,0,0,.7);
}

.hero-content h2{
    color:#d9b24c;
}

.hero-content h2::before,
.hero-content h2::after{
    display:none;
}

.hero-content p{
    color:#f6f0e6;
    font-size:1.2rem;
    margin:2rem 0;
}

.hero-button{
    display:inline-block;
    padding:16px 38px;
    text-decoration:none;
    color:#fff;
    border:2px solid var(--gold);
    background:rgba(127,29,29,.8);
    transition:.35s;
    letter-spacing:1px;
}

.hero-button:hover{
    background:var(--gold);
    color:#24170e;
    transform:translateY(-3px);
}

.card{
    background:var(--paper);
    border:2px solid #d5bf87;
    box-shadow:var(--shadow);
    overflow:hidden;
    border-radius:var(--radius);
    transition:.35s;
}

.card:hover{
    transform:translateY(-8px);
}

.card img{
    width:100%;
    height:230px;
    object-fit:cover;
    border-bottom:3px solid var(--gold);
    transition:.4s;
}

.card:hover img{
    transform:scale(1.04);
}

.card h3{
    padding:1.25rem 1.5rem .5rem;
}

.card p{
    padding:0 1.5rem 1.5rem;
}

blockquote{
    background:rgba(255,255,255,.4);
    border-left:5px solid var(--gold);
    padding:2rem;
    margin-top:2rem;
    font-style:italic;
    font-size:1.2rem;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================================
   PART 2 - Timeline, Figures, Effects & Sources
========================================================== */

.section-description{
    max-width:850px;
    margin:0 auto 4rem;
    text-align:center;
    color:#5b4a39;
}

/* Decorative divider */

.decorative-divider{
    width:180px;
    height:2px;
    background:#b68b2d;
    margin:2rem auto 4rem;
    position:relative;
}

.decorative-divider::after{
    content:"⚜";
    position:absolute;
    left:50%;
    transform:translate(-50%,-55%);
    top:50%;
    color:#b68b2d;
    background:#f4ecd8;
    padding:0 .5rem;
}

/* Grid */

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}

/* Timeline */

.timeline{
    position:relative;
    max-width:1100px;
    margin:5rem auto;
    padding:2rem 0;
}

.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(#8b6a24,#d5bf87,#8b6a24);
    transform:translateX(-50%);
}

.timeline-event{
    width:50%;
    position:relative;
    padding:2rem 2.5rem;
}

.timeline-event:nth-child(odd){
    left:0;
    text-align:right;
}

.timeline-event:nth-child(even){
    left:50%;
}

.timeline-event::before{
    content:"";
    position:absolute;
    top:48px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#7f1d1d;
    border:4px solid #f4ecd8;
    box-shadow:0 0 0 3px #b68b2d;
}

.timeline-event:nth-child(odd)::before{
    right:-11px;
}

.timeline-event:nth-child(even)::before{
    left:-11px;
}

.timeline-content{
    background:#fbf6eb;
    border:2px solid #d5bf87;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    transition:.35s;
}

.timeline-content:hover{
    transform:translateY(-6px);
}

.timeline-content img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-bottom:3px solid #b68b2d;
}

.timeline-content h3{
    padding:1rem 1.4rem .25rem;
}

.timeline-content p{
    padding:0 1.4rem 1.5rem;
}

.timeline-date{
    color:#7f1d1d;
    font-weight:bold;
    margin-bottom:1rem;
    letter-spacing:1px;
    text-transform:uppercase;
}

/* Figures */

#figures .card img{
    filter:sepia(.15);
}

#figures .card:hover img{
    filter:none;
}

/* Effects */

.effects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}

.effects-grid article{
    background:#fbf6eb;
    border:2px solid #d5bf87;
    border-radius:10px;
    padding:3.5rem 2rem 2rem;
    box-shadow:0 12px 28px rgba(0,0,0,.15);
    position:relative;
}

.effects-grid article::before{
    content:"⚜";
    position:absolute;

    top:16px;
    left:50%;
    transform:translateX(-50%);

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f4ecd8;
    color:#b68b2d;

    border:2px solid #d4af37;
    border-radius:50%;

    font-size:1rem;
}

.effects-grid ul{
    margin-top:1rem;
    padding-left:1.25rem;
}

.effects-grid li{
    margin-bottom:.8rem;
}

/* Sources */

.sources-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;
}

.sources-grid article{
    background:#fbf6eb;
    border:2px solid #d5bf87;
    border-radius:10px;
    padding:2rem;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.sources-grid h3{
    margin-bottom:1rem;
    border-bottom:2px solid #d5bf87;
    padding-bottom:.5rem;
}

.sources-grid ul{
    padding-left:1.2rem;
}

.sources-grid li{
    margin-bottom:1rem;
}

/* Quote section (optional) */

.quote-panel{
    max-width:900px;
    margin:4rem auto;
    text-align:center;
    font-style:italic;
    font-size:2rem;
    color:#53381b;
    position:relative;
}

.quote-panel::before{
    content:"“";
    font-size:7rem;
    color:#d5bf87;
    position:absolute;
    left:-20px;
    top:-35px;
    opacity:.4;
}

.quote-panel::after{
    content:"”";
    font-size:7rem;
    color:#d5bf87;
    position:absolute;
    right:-20px;
    bottom:-60px;
    opacity:.4;
}


/* ===== style_part3.css ===== */

/* ==========================================================
   PART 3 - Footer, Responsive Layout, Mobile Navigation,
            Decorative Flourishes & Polish
========================================================== */

/* Decorative section spacing */

section{
    position:relative;
}

section::after{
    content:"";
    display:block;
    width:120px;
    height:2px;
    margin:80px auto 0;
    background:linear-gradient(to right, transparent, #b68b2d, transparent);
}

/* Intro paragraph width */

#introduction p,
#conclusion p{
    max-width:900px;
    margin:0 auto 1.5rem;
    text-align:justify;
}

/* Footer */

footer{
    background:
        linear-gradient(rgba(28,20,14,.96),rgba(28,20,14,.96)),
        url("images/parchment-dark.jpeg");
    color:#f6ecda;
    border-top:4px solid #b68b2d;
    padding:70px 0 40px;
    text-align:center;
}

footer h3{
    color:#f2d28a;
    margin-bottom:1rem;
}

footer p{
    color:#efe5d1;
    margin:.5rem 0;
    font-size:.95rem;
}

footer .divider{
    width:200px;
    height:2px;
    background:#b68b2d;
    margin:1.5rem auto;
}

/* Image captions */

figure{
    margin:0;
}

figcaption{
    font-size:.9rem;
    text-align:center;
    color:#6b5643;
    padding:.75rem;
    font-style:italic;
}

/* Scroll indicator */

.scroll-indicator{
    position:absolute;
    bottom:35px;
    left:50%;
    transform:translateX(-50%);
    color:#f3dfb0;
    font-size:2rem;
    animation:bounce 2s infinite;
}

/* Subtle flourishes */

.fleur{
    display:block;
    text-align:center;
    font-size:2rem;
    color:#b68b2d;
    margin:2rem 0;
    opacity:.85;
}

/* Tables if ever added */

table{
    width:100%;
    border-collapse:collapse;
    background:#fbf6eb;
}

th,td{
    border:1px solid #d5bf87;
    padding:12px;
}

th{
    background:#ead9b2;
}

/* Mobile Navigation */

.menu-toggle{
    display:none;
    font-size:2rem;
    color:#f7f2e9;
    cursor:pointer;
}

/* Responsive */

@media (max-width:1000px){

    .timeline::before{
        left:30px;
    }

    .timeline-event{
        width:100%;
        left:0 !important;
        padding-left:80px;
        padding-right:20px;
        text-align:left !important;
    }

    .timeline-event::before{
        left:20px !important;
        right:auto !important;
    }

}

@media (max-width:768px){

    .navbar{
        padding:1rem 5%;
        flex-wrap:wrap;
        height:auto;
    }

    .menu-toggle{
        display:block;
    }

    .nav-links{
        width:100%;
        display:none;
        flex-direction:column;
        gap:1rem;
        margin-top:1rem;
        padding-bottom:1rem;
    }

    .nav-links.active{
        display:flex;
    }

    h1{
        font-size:3rem;
    }

    h2{
        font-size:2.2rem;
    }

    h2::before,
    h2::after{
        display:none;
    }

    .hero{
        padding:0 1rem;
    }

    .hero-content p{
        font-size:1rem;
    }

    .card-grid,
    .effects-grid,
    .sources-grid{
        grid-template-columns:1fr;
    }

    section{
        padding:80px 0;
    }

}

@media (max-width:500px){

    h1{
        font-size:2.4rem;
    }

    .hero-button{
        width:100%;
        max-width:280px;
    }

    blockquote{
        font-size:1rem;
    }

}

/* Keyframes */

@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform:translate(-50%,0);
    }
    40%{
        transform:translate(-50%,-12px);
    }
    60%{
        transform:translate(-50%,-6px);
    }
}


/* ===== style_part4.css ===== */

/* ==========================================================
   PART 4 - Premium Animations & Interactive Polish
========================================================== */

/* ---------- Scroll Reveal ---------- */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

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

/* ---------- Hero Background Motion ---------- */

.hero{
    background-attachment:fixed;
}

/* ---------- Painting Glow ---------- */

.card,
.timeline-content,
.effects-grid article,
.sources-grid article{

    position:relative;
    overflow:hidden;

}

.card::after,
.timeline-content::after,
.effects-grid article::after,
.sources-grid article::after{

    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.10) 40%,
            rgba(255,255,255,.35) 50%,
            transparent 60%
        );

    transform:translateX(-150%);
    transition:transform .9s ease;
    pointer-events:none;

}

.card:hover::after,
.timeline-content:hover::after,
.effects-grid article:hover::after,
.sources-grid article:hover::after{

    transform:translateX(150%);

}

/* ---------- Gentle Tilt ---------- */

.card,
.timeline-content{

    transform-style:preserve-3d;

}

.card:hover,
.timeline-content:hover{

    transform:
        translateY(-10px)
        rotateX(2deg)
        rotateY(-2deg);

}

/* ---------- Navigation ---------- */

.navbar.scrolled{

    background:rgba(24,17,12,.98);
    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.nav-links a.active{

    color:#f0c85a;

}

.nav-links a.active::after{

    width:100%;

}

/* ---------- Timeline ---------- */

.timeline::before{

    animation:timelineGlow 4s ease-in-out infinite alternate;

}

@keyframes timelineGlow{

    from{

        box-shadow:0 0 4px rgba(182,139,45,.2);

    }

    to{

        box-shadow:0 0 16px rgba(182,139,45,.7);

    }

}

.timeline-event::before{

    transition:.35s;

}

.timeline-event:hover::before{

    transform:scale(1.25);

    background:#b68b2d;

}

/* ---------- Quote ---------- */

blockquote{

    position:relative;

}

blockquote::before{

    content:"“";

    position:absolute;

    top:-35px;

    left:15px;

    font-size:5rem;

    color:rgba(182,139,45,.25);

}

blockquote::after{

    content:"”";

    position:absolute;

    bottom:-60px;

    right:20px;

    font-size:5rem;

    color:rgba(182,139,45,.25);

}

/* ---------- Buttons ---------- */

.hero-button{

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);

}

.hero-button:hover{

    box-shadow:
        0 15px 35px rgba(182,139,45,.45);

}

/* ---------- Decorative Texture Overlay ---------- */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.05), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,.03), transparent 45%);

    pointer-events:none;

    z-index:-1;

}

/* ---------- Footer ---------- */

footer{

    position:relative;

}

footer::before{

    content:"⚜   ⚜   ⚜";

    display:block;

    color:#d8b25b;

    margin-bottom:1rem;

    letter-spacing:1rem;

}

/* ---------- Selection ---------- */

::selection{

    background:#b68b2d;

    color:#24170e;

}

/* ---------- Smooth Image Saturation ---------- */

img{

    transition:
        transform .5s ease,
        filter .5s ease;

}

.card img,
.timeline-content img{

    filter:sepia(.12) contrast(1.02);

}

.card:hover img,
.timeline-content:hover img{

    filter:none;

}

/* ---------- Accessibility ---------- */

a:focus-visible,
button:focus-visible{

    outline:3px solid #d4af37;
    outline-offset:4px;

}

/* ---------- Optional Museum Label ---------- */

.museum-label{

    display:inline-block;

    background:#2f2218;

    color:#f8edd8;

    border:1px solid #b68b2d;

    padding:.45rem .8rem;

    font-size:.8rem;

    letter-spacing:2px;

    text-transform:uppercase;

}