/* ===== GLOBAL RESET & SCROLL SNAP ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
body {
    width: 100%; min-height: 100%;
    font-family: 'Cormorant Garamond', serif;
    background: #0a0502; color: #f5e6c8;
    overflow-x: hidden;
}
.snap-page {
    position: relative; width: 100vw; height: 100vh;
    scroll-snap-align: start; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

/* ===== PROGRESS BAR ===== */
.progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    background: rgba(10, 5, 2, 0.3); z-index: 10000;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(to right, #ff8c00, #d4af37);
    width: 0%; transition: width 0.3s ease;
}

/* ===== PAGE INDICATOR ===== */
.page-indicator {
    position: fixed; top: 15px; left: 30px;
    font-family: 'Playfair Display', serif; font-size: 0.9rem;
    color: #f5e6c8; z-index: 10000;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.1em;
    background: rgba(10, 5, 2, 0.7);
    padding: 8px 15px; border-radius: 3px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ===== LOADING SCREEN ===== */
.loading-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #0a0502; z-index: 9999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 1; transition: opacity 1s ease;
}
.loading-screen.loaded { opacity: 0; pointer-events: none; }
.loading-title {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(3rem, 6vw, 5rem); color: #f5e6c8;
    text-shadow: 0 0 30px rgba(255, 69, 0, 0.4), 0 2px 4px rgba(0,0,0,0.8);
    margin-bottom: 40px; opacity: 0;
    animation: loadingFadeIn 1s ease 0.5s forwards;
}
.loading-subtitle {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.1rem; color: #e8d4a8; letter-spacing: 0.15em;
    opacity: 0; animation: loadingFadeIn 1s ease 1s forwards;
}
.loading-divider {
    width: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 140, 0, 0.6), transparent);
    margin: 30px 0; animation: loadingDivider 1.5s ease 1.5s forwards;
}
@keyframes loadingFadeIn { to { opacity: 1; } }
@keyframes loadingDivider { to { width: 200px; } }

/* Basic styling for our test content */
.page-content h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 4rem; color: #f5e6c8;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
/* =========================================
   PAGE 1: GEORGESCU QUOTE (SECTION II)
   ========================================= */
.page-s2-1 {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Pushes content to the right */
    background-color: #f4e4d4; /* Fallback color matching the slide's peach tone */
}

.page-s2-1-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* IMPORTANT: Save the painting from the slide as 'beatrice-dream.jpg' */
    background-image: url('images/section-2-beatrice-dream.jpg'); 
    background-size: cover;
    background-position: center left; /* Focus on the painting */
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Shadow Bridges (Top/Bottom gradients) */
.shadow-bridge-top, .shadow-bridge-bottom {
    position: absolute; left: 0; width: 100%; height: 180px;
    z-index: 4; pointer-events: none;
}
.shadow-bridge-top {
    top: 0;
    background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
}
.shadow-bridge-bottom {
    bottom: 0;
    background: linear-gradient(to top, #0a0502 0%, transparent 100%);
}

/* The Cream Text Box */
.georgescu-box {
    position: relative;
    z-index: 4;
    width: 45%;
    max-width: 700px;
    margin-right: 5%;
    padding: 50px 60px;
    background-color: transparent; /* Remove white background */
    
    /* Keep the ornate border */
    border: 10px solid #8b0000;
    outline: 4px solid #d4af37;
    outline-offset: -15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Animation when in view */
.page-s2-1.in-view .page-s2-1-bg {
    transform: scale(1);
}
.page-s2-1.in-view .georgescu-box {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.2s ease 1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
}

/* Quote Text - Dark for visibility on light background */
.georgescu-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    line-height: 1.8;
    font-weight: 600 !important;
    color: #1a0f0a; /* Dark brown/black text */
    text-align: justify;
    font-style: italic;
    margin-bottom: 30px;
    text-shadow: none; /* Remove shadow that was making it worse */
}

/* Citation - Dark colors for visibility */
.georgescu-citation {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: #5a0a0a; /* Dark red/brown */
    line-height: 1.6;
    border-top: 1px solid rgba(139, 0, 0, 0.2);
    padding-top: 15px;
}

.georgescu-citation .author {
    font-weight: 700;
    font-size: 1.1rem;
    color: #8b0000; /* Dark red for author name */
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.georgescu-citation em {
    font-style: italic;
    color: #5a0a0a; /* Dark color for italic text */
}

/* Fleur-de-lis Ornament at the bottom */
.box-ornament {
    text-align: center;
    font-size: 2rem;
    color: #8b0000;
    margin-top: 20px;
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .georgescu-box {
        width: 55%;
        padding: 40px;
    }
    .georgescu-quote { font-size: 1.3rem; }
}
/* =========================================
   PAGE 1: GEORGESCU QUOTE - MOBILE FIX
   ========================================= */
@media (max-width: 768px) {
    .page-s2-1 {
        justify-content: center; /* Center the box on mobile */
        align-items: center;
    }

    .georgescu-box {
        width: 90%; /* Fit within screen */
        max-width: 90%;
        margin: 0 auto; /* Center horizontally */
        margin-top: 0; /* Push down from top */
        padding: 30px 25px; /* Reduce padding */
        border-width: 6px; /* Thinner border */
        outline-width: 2px; /* Thinner outline */
        outline-offset: -10px;
    }

    .georgescu-quote {
        font-size: 1.2rem; /* Smaller text */
        line-height: 1.6;
        text-align: justify; /* Left-align for better mobile reading */
    }

    .georgescu-citation {
        font-size: 0.9rem;
    }

    .georgescu-citation .author {
        font-size: 1rem;
    }

    .box-ornament {
        font-size: 1.5rem;
    }

    .page-s2-1-bg {
        background-position: center center; /* Center the background */
        background-size: cover;
    }
}
/* =========================================
   PAGE 2: BIOGRAPHICAL TIMELINE (DESKTOP)
   ========================================= */
.page-s2-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0a0502; /* Dark fallback */
    padding: 0 5%;
}

.page-s2-2-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* You can use a subtle parchment texture here if you have one, 
       or just a dark radial gradient to make the text pop */
    background: radial-gradient(circle at center, #1a0f0a 0%, #0a0502 100%);
    background-image: url('images/section-2-parchment.jpg');
    z-index: 1;
}

/* Central Decorative Line */
.timeline-center-line {
    position: absolute;
    top: 15%; bottom: 15%; left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #d4af37 20%, #d4af37 80%, transparent);
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0.6;
}

.timeline-container {
    display: flex;
    justify-content: space-between;
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 40px;
    position: relative; 
    z-index: 5; 
}

/* Left and Right Columns */
.timeline-column {
    display: flex;
    flex-direction: column;
    width: 48%;
}

/* Individual Timeline Items */
.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    
}
.timeline-column:first-child .timeline-item .timeline-year {
    background: #8b0000;
    border: 2px solid #d4af37;
    color: #f5e6c8;
    padding: 8px 15px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    margin-right: 20px;
    min-width: 80px;
    text-align: center;
    z-index: 2;
}

/* 3. FIX THE RED YEAR BOXES (Right Side) */
/* Changed .year-box to .timeline-year to match your HTML */
.timeline-column:last-child .timeline-item .timeline-year {
    background: #8b0000;
    border: 2px solid #d4af37;
    color: #f5e6c8;
    padding: 8px 15px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    margin-left: 20px;
    min-width: 80px;
    text-align: center;
    z-index: 2;
}

/* Staggered animation for items */
.page-s2-2.in-view .timeline-item:nth-child(1) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.page-s2-2.in-view .timeline-item:nth-child(2) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.page-s2-2.in-view .timeline-item:nth-child(3) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.page-s2-2.in-view .timeline-item:nth-child(4) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); }
.page-s2-2.in-view .timeline-item:nth-child(5) { transition-delay: 1.0s; opacity: 1; transform: translateY(0); }

/* Year Box Styling (Matches PDF aesthetic) */
.timeline-year {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #f5e6c8;
    background-color: #8b0000; /* Deep red */
    border: 2px solid #d4af37; /* Gold border */
    padding: 8px 15px;
    min-width: 70px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    letter-spacing: 0.05em;
}

/* Text Styling */
.timeline-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem !important;
    color: #3a2010 !important; /* CHANGED: Dark brown for better contrast */
    font-weight: 700;
    line-height: 1.6;
    flex: 1;
}

/* Center Line */
.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 60px;
    bottom: 60px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #d4af37, transparent);
    transform: translateX(-50%);
}

.left-column .timeline-item .timeline-year {
    background: #8b0000;
    border: 2px solid #d4af37;
    color: #f5e6c8;
    padding: 8px 15px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    /* No margin on the right side for left column */
    margin-right: 20px;
    min-width: 70px;
    text-align: center;
    z-index: 2;
}

/* Year Boxes - Right Column (ADD spacing here) */
.right-column .timeline-item .timeline-year {
    background: #8b0000;
    border: 2px solid #d4af37;
    color: #f5e6c8;
    padding: 8px 15px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    /* Add margin-left ONLY to right column year boxes */
    margin-left: 20px;
    min-width: 70px;
    text-align: center;
    z-index: 2;
}

/* Text Styling */
.timeline-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: #e8d4a8;
    line-height: 1.6;
    flex: 1;
}
/* =========================================
   PAGE 2: TIMELINE - MOBILE FIX
   ========================================= */
/* =========================================
   TIMELINE: MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {
    
    /* Make the container scrollable */
    .timeline-container {
        flex-direction: column;
        height: 80vh;
        overflow-y: auto;
        padding: 20px 15px;
    }

   .timeline-center-line, .timeline-container::before {
        display: none;
    } 
    
    /* Custom scrollbar */
    .timeline-container::-webkit-scrollbar { width: 4px; }
    .timeline-container::-webkit-scrollbar-thumb { background: #8b0000; border-radius: 2px; }

    /* Full width columns */
    .timeline-column {
        width: 100%;
    }

    /* Year above text */
    .timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 20px;
        gap: 8px;
    }

    /* Reset year box margins */
    .timeline-year {
        margin: 0 !important;
        font-size: 0.85rem;
        padding: 4px 10px;
    }

    /* Smaller text */
    .timeline-text {
        font-size: 1.2rem !important;
        line-height: 1.4;
        text-align: justify;
    }

    /* Hide center line */
    .timeline-center-line {
        display: none;
    }
    /* Force year boxes in the right column to appear BEFORE the text on mobile */
    /* Target the right column items specifically */
    .right-column .timeline-item {
        flex-direction: column !important;
    }
    
    /* Force year to appear FIRST using order property */
    .right-column .timeline-year {
        order: -1 !important;
        margin-bottom: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Text comes second */
    .right-column .timeline-text {
        order: 0 !important;
    }
}
/* =========================================
   PAGE 3: VILLANI - COMMEDIA DESCRIPTION
   ========================================= */
.page-s2-3 {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Pushes content to the left */
    background-color: #1a0f0a;
}

.page-s2-3-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* IMPORTANT: Save the image as 'section-2-dante-red-robe.jpg' */
    background-image: url('images/section-2-dante-red-robe.jpg');
    background-size: cover;
    background-position: center right; /* Focus on Dante on the right */
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Shadow Bridges */
.page-s2-3::before,
.page-s2-3::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 180px;
    z-index: 4; pointer-events: none;
}
.page-s2-3::before {
    top: 0;
    background: linear-gradient(to bottom, #0a0502 0%, transparent 100%);
}
.page-s2-3::after {
    bottom: 0;
    background: linear-gradient(to top, #0a0502 0%, transparent 100%);
}

/* The Ornate Text Box */
.villani-box {
    position: relative;
    z-index: 4;
    width: 45%;
    max-width: 700px;
    margin-left: 5%;
    padding: 50px 60px;
    background-color: #f5e6c8; /* Cream background */
    
    /* Ornate Border Style (Red + Gold) */
    border: 10px solid #8b0000;
    outline: 4px solid #d4af37;
    outline-offset: -15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    
    opacity: 0;
    transform: translateX(-50px); /* Start slightly off-screen to the left */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Animation when in view */
.page-s2-3.in-view .page-s2-3-bg {
    transform: scale(1);
}
.page-s2-3.in-view .villani-box {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.2s ease 1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
}

/* Quote Text */
.villani-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 600 !important;
    line-height: 1.7;
    color: #1a0f0a; /* Dark brown/black text */
    text-align: justify;
    margin-bottom: 25px;
}

.villani-quote em {
    font-style: italic;
    color: #8b0000; /* Red emphasis for "Commedia" */
}

/* Citation */
.villani-citation {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    color: #5a0a0a; /* Dark red/brown */
    line-height: 1.5;
    border-top: 1px solid rgba(139, 0, 0, 0.2);
    padding-top: 15px;
}

.villani-citation .author {
    font-weight: 700;
    font-size: 1rem;
    color: #8b0000; /* Brighter red for the name */
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Fleur-de-lis Ornament */
.box-ornament {
    text-align: center;
    font-size: 2rem;
    color: #8b0000;
    margin-top: 20px;
    opacity: 0.8;
}

/* =========================================
   PAGE 3: VILLANI - MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {
    .page-s2-3 {
        justify-content: center; /* Center the box on mobile */
        align-items: center;
    }
    .page-s2-3-bg {
        background-position: 75% center !important;
    }

    .villani-box {
        width: 90%; /* Fit within screen */
        max-width: 90%;
        margin-left: 0; /* Remove desktop left margin */
        margin-top: 0; /* Push down from top */
        padding: 30px 25px; /* Reduce padding */
        border-width: 6px; /* Thinner border */
        outline-width: 2px; /* Thinner outline */
        outline-offset: -10px;
    }

    .villani-quote {
        font-size: 1.1rem; /* Smaller text */
        line-height: 1.5;
        text-align: justify;
    }

    .villani-citation {
        font-size: 0.85rem;
    }

    .villani-citation .author {
        font-size: 0.95rem;
    }

    .box-ornament {
        font-size: 1.5rem;
    }

    .page-s2-3-bg {
        background-position: center center; /* Center the background image */
    }
}
/* =========================================
   PAGE 4: FLORENCE TEXT (SIMPLE BOX)
   ========================================= */
.page-s2-4 {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Pushes content to the left */
    background-color: #1a0f0a;
}

.page-s2-4-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* IMPORTANT: Save the image as 'section-2-florence-temples.jpg' */
    background-image: url('images/section-2-florence-temples.jpg');
    background-size: cover;
    background-position: center right; /* Focuses on the temples on the right side */
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Simple Text Box - No ornate borders */
.simple-text-box {
    position: relative;
    z-index: 4;
    width: 37%;
    max-width: 550px;
    margin-left: 5%;
    padding: 40px;
    
    /* Subtle dark gradient to make text readable against the busy image */
    background: linear-gradient(to right, rgba(10, 5, 2, 0.85) 0%, rgba(10, 5, 2, 0.3) 100%);
    border-radius: 4px;
    
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Entrance Animation */
.page-s2-4.in-view .page-s2-4-bg {
    transform: scale(1);
}
.page-s2-4.in-view .simple-text-box {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.2s ease 0.5s, transform 1.2s ease 0.5s;
}

/* Text Styling */
.simple-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #f5e6c8; /* Light cream text */
    text-align: justify; /* Left-aligned as requested */
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Mobile Responsiveness for Page 4 */
@media (max-width: 768px) {
    .page-s2-4 {
        justify-content: center;
    }
    .simple-text-box {
        width: 90%;
        margin-left: 0;
        background: rgba(10, 5, 2, 0.85); /* Solid dark background on mobile for readability */
        padding: 30px 25px;
    }
    .simple-quote {
        font-size: 1.1rem;
    }
    .page-s2-4-bg {
        background-position: center center;
    }
}
/* =========================================
   PAGE 5: FLORENCIA WOODCUT
   ========================================= */
.page-s2-5 {
    background-color: #1a0f0a;
}

.page-s2-5-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Save the map image as 'section-2-florencia.jpg' */
    background-image: url('images/section-2-florencia.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-s2-5.in-view .page-s2-5-bg {
    transform: scale(1);
}
/* Visible Label Box (Bottom Left) */
.florencia-label {
    position: absolute;
    bottom: 50px;
    left: 50px;
    z-index: 5;
    max-width: 350px;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    padding: 15px 20px; /* Space inside the box */
    border-radius: 4px; /* Optional: slightly rounded corners */
}

.label-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #f5e6c8;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    margin-bottom: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}

.label-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #d4af37;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.7s, transform 1s ease 0.7s;
}

/* Animation when in view */
.page-s2-5.in-view .label-title,
.page-s2-5.in-view .label-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .florencia-label {
        bottom: 30px;
        left: 30px;
        max-width: 250px;
    }
    .label-title {
        font-size: 1.15rem;
    }
    .label-subtitle {
        font-size: 0.95rem;
    }
}

/* =========================================
   ARCHIVIST TAB COMPONENT
   ========================================= */

/* 1. The Small Tab Button */
@keyframes subtlePulse {
    0% { transform: translateY(-50%) scale(1); box-shadow: 2px 2px 8px rgba(0,0,0,0.4); }
    50% { transform: translateY(-50%) scale(1.05); box-shadow: 2px 2px 15px rgba(139, 0, 0, 0.6); }
    100% { transform: translateY(-50%) scale(1); box-shadow: 2px 2px 8px rgba(0,0,0,0.4); }
}

.archivist-tab-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #8b0000;
    color: #f5e6c8;
    border: none;
    padding: 16px 10px; /* INCREASED: Made the button larger */
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    z-index: 100;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: subtlePulse 3s infinite ease-in-out; /* ADD THIS: The pulsing effect */
}

.archivist-tab-btn:hover {
    background-color: #a00000;
    animation: none; /* Stops pulsing when hovered */
    transform: translateY(-50%) scale(1.05);
}

.tab-icon {
    font-size: 1.3rem; /* INCREASED: Made the icon slightly larger to match */
    display: block;
}

/* 2. The Sliding Side Panel */
.archivist-panel {
    position: absolute;
    top: 0;
    left: -400px; /* Hidden off-screen to the left */
    width: 320px;
    height: 100%;
    background-color: #4a0404; /* Deep maroon/red */
    color: #f5e6c8;
    z-index: 101;
    padding: 50px 30px 30px 30px;
    box-shadow: 5px 0 20px rgba(0,0,0,0.6);
    transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    overflow-y: auto;
}

/* Class added by JS to slide it in */
.archivist-panel.open {
    left: 0;
}

/* 3. Close Button (X) */
.close-panel-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #f5e6c8;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}

.close-panel-btn:hover {
    color: #d4af37; /* Gold on hover */
}

/* Add this missing class */
.panel-content {
    padding-top: 60px; /* This pushes the text down away from the Page Indicator */
}

/* 4. Panel Content Styling */
.panel-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: #f5e6c8;
    margin-bottom: 8px;
    line-height: 1.3;
}

.panel-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: #d4af37;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 12px;
}

.panel-details p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 12px;
    color: #e8d4a8;
}

.panel-details em {
    color: #d4af37;
    font-style: italic;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .archivist-tab {
        bottom: 30px;
        right: 20px;
        left: 20px;
        max-width: none;
        padding: 15px 20px;
    }
    .tab-title { font-size: 1.05rem; }
    .tab-subtitle { font-size: 0.9rem; }
    .tab-text { font-size: 0.85rem; }
}
/* =========================================
   PAGE 6: QUATTROCENTO TEXT (CENTERED)
   ========================================= */
.page-s2-6 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a0f0a;
}

.page-s2-6-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* IMPORTANT: Save the image as 'section-2-medusa-head.jpg' */
    background-image: url('images/section-2-medusa-head.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-s2-6.in-view .page-s2-6-bg {
    transform: scale(1);
}

/* Centered Text Box - No red borders */
.centered-text-box {
    position: relative;
    z-index: 4;
    max-width: 900px;
    width: 80%;
    padding: 40px 50px;
    
    /* Dark semi-transparent background for readability */
    background: rgba(10, 5, 2, 0.85); 
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}

.page-s2-6.in-view .centered-text-box {
    opacity: 1;
    transform: translateY(0);
}

/* Text Styling */
.centered-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #f5e6c8;
    text-align: justify;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .centered-text-box {
        width: 90%;
        padding: 25px 20px;
    }
    .centered-quote {
        font-size: 1.05rem;
        text-align: justify; /* Easier to read on mobile */
    }
}
/* =========================================
   PAGE 7: OCTAVIAN PALER QUOTE
   ========================================= */
.page-s2-7 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #f4e4d4;
}

.page-s2-7-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Save the plaque photo as 'section-2-dante-plaque.jpg' */
    background-image: url('images/section-2-dante-plaque.jpg');
    background-size: cover;
    background-position: center left;
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-s2-7.in-view .page-s2-7-bg {
    transform: scale(1);
}

/* Ornate Text Box */
.paler-box {
    position: relative;
    z-index: 4;
    width: 45%;
    max-width: 700px;
    margin-right: 9%;
    margin-top: 2%;
    padding: 50px 60px;
    outline-offset: -15px;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-s2-7.in-view .paler-box {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.2s ease 1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
}

/* Quote Text */
.paler-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.7;
    color: #1a0f0a;
    text-align: justify;
    font-style: italic;
    margin-bottom: 25px;
}

/* Decorative Drop Cap */
.drop-cap {
    font-family: 'Great Vibes', cursive;
    font-size: 3rem;
    color: #8b0000;
    float: left;
    line-height: 0.8;
    margin-right: 8px;
    margin-top: 5px;
}

/* Citation */
.paler-citation {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: #5a0a0a;
    line-height: 1.5;
    border-top: 1px solid rgba(139, 0, 0, 0.2);
    padding-top: 15px;
}

.paler-citation .author {
    font-weight: 700;
    font-size: 1.1rem;
    color: #8b0000;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.paler-citation em {
    font-style: italic;
    color: #5a0a0a;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .page-s2-7 {
        justify-content: center;
        align-items: center;
    }
    .page-s2-7-bg {
        background-position: center right -55px !important;
        transform: scale(1.3) !important; /* ZOOM IN the background */
    }
    .paler-box {
        width: 90%;
        max-width: 90%;
        margin-right: 0;
        margin-top: 0;
        padding: 30px 25px;
        border-width: 6px;
        outline-width: 2px;
        outline-offset: -10px;
    }
    
    .paler-quote {
        font-size: 1.1rem;
        line-height: 1.3;
    }
    
    .drop-cap {
        font-size: 2.5rem;
    }
    
    .paler-citation {
        font-size: 0.9rem;
    }
    
    .paler-citation .author {
        font-size: 1rem;
    }
    
    .page-s2-7-bg {
        background-position: center center;
    }
}
/* =========================================
   PAGE 8: LITERARY IMAGES TEXT (LEFT BOX)
   ========================================= */
.page-s2-8 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #1a0f0a;
}

.page-s2-8-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* IMPORTANT: Save the image as 'section-2-star-temple.jpg' */
    background-image: url('images/section-2-star-temple.jpg');
    background-size: cover;
    background-position: center right;
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-s2-8.in-view .page-s2-8-bg {
    transform: scale(1);
}

/* Reusing simple-text-box style for consistency */
.page-s2-8 .simple-text-box {
    position: relative;
    z-index: 4;
    width: 40%;
    max-width: 600px;
    margin-left: 5%;
    padding: 40px;
    background: rgba(10, 5, 2, 0.85);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}

.page-s2-8.in-view .simple-text-box {
    opacity: 1;
    transform: translateX(0);
}

.page-s2-8 .simple-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #f5e6c8;
    text-align: justify;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .page-s2-8 {
        justify-content: center;
    }
    .page-s2-8 .simple-text-box {
        width: 90%;
        margin-left: 0;
        padding: 30px 25px;
    }
    .page-s2-8 .simple-quote {
        font-size: 1.1rem;
    }
    .page-s2-8-bg {
        background-position: center center;
    }
}
/* =========================================
   PAGE 9: THE WHIRLWIND (DORÉ)
   ========================================= */
.page-s2-9 {
    background-color: #1a0f0a;
}

.page-s2-9-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Save the image as 'section-2-whirlwind.jpg' */
    background-image: url('images/section-2-whirlwind.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-s2-9.in-view .page-s2-9-bg {
    transform: scale(1);
}
/* =========================================
   PAGE 10: NOSTALGIA TEXT (RIGHT BOX)
   ========================================= */
.page-s2-10 {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Pushes content to the right */
    background-color: #1a0f0a;
}

.page-s2-10-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* IMPORTANT: Save the image as 'section-2-altissimo-poeta.jpg' */
    background-image: url('images/section-2-altissimo-poeta.jpg');
    background-size: cover;
    background-position: center left; /* Focus on the statue on the left */
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-s2-10.in-view .page-s2-10-bg {
    transform: scale(1);
}

/* Text Box aligned to the right */
.page-s2-10 .simple-text-box {
    position: relative;
    z-index: 4;
    width: 40%;
    max-width: 600px;
    margin-right: 5%;
    margin-left: 0; /* Remove any default left margin */
    padding: 40px;
    
    /* Dark semi-transparent background for readability */
    background: rgba(10, 5, 2, 0.85); 
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    
    opacity: 0;
    transform: translateX(30px); /* Slide in from the right */
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}

.page-s2-10.in-view .simple-text-box {
    opacity: 1;
    transform: translateX(0);
}

.page-s2-10 .simple-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #f5e6c8;
    text-align: justify;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .page-s2-10 {
        justify-content: center;
    }
    .page-s2-10 .simple-text-box {
        width: 90%;
        margin-right: 0;
        padding: 30px 25px;
    }
    .page-s2-10 .simple-quote {
        font-size: 1.1rem;
    }
    .page-s2-10-bg {
        background-position: center center;
    }
}
/* =========================================
   PAGE 11: FRANCESCA DA RIMINI
   ========================================= */
.page-s2-11 {
    background-color: #1a0f0a;
}

.page-s2-11-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Save the image as 'section-2-francesca.jpg' */
    background-image: url('images/section-2-francesca.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-s2-11.in-view .page-s2-11-bg {
    transform: scale(1);
}

/* Visible Label Styling (Moved to Upper Right) */
.francesca-label {
    position: absolute;
    top: 80px;       /* Move to top */
    right: 50px;     /* Move to right */
    left: auto;      /* Reset left */
    bottom: auto;    /* Reset bottom */
    z-index: 5;
    max-width: 450px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px 20px;
    border-radius: 4px;
    text-align: right; /* Align text to the right for better aesthetics */
    
    opacity: 0;
    transform: translateY(-20px); /* Start slightly above */
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}

.page-s2-11.in-view .francesca-label {
    opacity: 1;
    transform: translateY(0);
}

.francesca-label p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: #f5e6c8;
    font-style: italic;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    margin: 0;
    line-height: 1.4;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .francesca-label {
        top: 70px;
        right: 20px;
        left: 20px;
        max-width: none;
        text-align: center; /* Center on mobile */
    }
    .francesca-label p {
        font-size: 1.05rem;
    }
}

/* =========================================
   CONTINUE EXHIBITION BUTTON (Page 11)
   ========================================= */
.continue-btn {
    position: absolute;
    bottom: 80px;
    right: 80px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    
    /* FIX 1: Dark background to match Section 1 */
    background: rgba(10, 5, 2, 0.8); 
    border: 2px solid #d4af37;
    color: #f5e6c8;
    
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    
    opacity: 0;
    transform: translateY(20px);
}

.page-s2-11.in-view .continue-btn {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 3s;
}

/* FIX 2: Gold background and move right on hover */
.continue-btn:hover {
    background: rgba(212, 175, 55, 0.9); /* Gold background */
    color: #0a0502; /* Dark text for contrast */
    transform: translateY(-3px) translateX(10px); /* Float up and right */
}

.btn-arrow {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.continue-btn:hover .btn-arrow {
    transform: translateX(5px);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .continue-btn {
        bottom: 40px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 25px;
        font-size: 0.9rem;
        min-width: 280px;
        max-width: 90%;
        justify-content: center;
        white-space: nowrap;
    }
    
    .page-s2-11.in-view .continue-btn {
        transform: translateX(-50%);
    }
    
    .continue-btn:hover {
        transform: translateX(calc(-50% + 10px));
    }
    
    .btn-arrow {
        width: 20px;
        height: 20px;
    }
}
/* =========================================
   BACK TO MAIN BUTTON (Page 11)
   ========================================= */
.back-to-main-btn {
    position: absolute;
    bottom: 80px;
    left: 80px; /* Balanced on the left side */
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    background: rgba(10, 5, 2, 0.8);
    border: 2px solid #d4af37;
    color: #f5e6c8;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    
    opacity: 0;
    transform: translateY(20px);
}

.page-s2-11.in-view .back-to-main-btn {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 3s; /* Matches the continue button delay */
}

/* Floats UP and LEFT on hover */
.back-to-main-btn:hover {
    background: rgba(212, 175, 55, 0.9);
    color: #0a0502;
    transform: translateY(-3px) translateX(-10px); 
}

.back-to-main-btn .btn-arrow {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

/* Arrow moves further left on hover */
.back-to-main-btn:hover .btn-arrow {
    transform: translateX(-5px); 
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .back-to-main-btn {
        bottom: 130px; /* Moved up so it doesn't overlap the Continue button */
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 25px;
        font-size: 0.9rem;
        min-width: 280px;
        max-width: 90%;
        justify-content: center;
        white-space: nowrap;
    }
    .page-s2-11.in-view .back-to-main-btn {
        transform: translateX(-50%);
    }
    .back-to-main-btn:hover {
        transform: translateX(calc(-50% - 10px));
    }
    .back-to-main-btn .btn-arrow {
        width: 20px;
        height: 20px;
    }
}