:root {
    --color-midnight-blue: #0A0F1A;
    --color-bruised-purple: #3A2C42;
    --color-dusty-gray: #4A4A52;
    --color-sepia: #7B6858;
    --color-aged-parchment: #E6DCD2;

    --color-amber-accent: #D48C2B;
    --color-spectral-green: #2B7A78;
    --color-eerie-crimson: #8B0000;
    --color-luminescent-white: #F8F8F8;

    --font-heading: 'Cinzel Decorative', serif;
    --font-subheading: 'Playfair Display', serif;
    --font-body: 'Lora', serif;

    --max-content-width: 1200px;
    --spacing-lg: 4rem;
    --spacing-md: 2rem;
    --spacing-sm: 1rem;
    --border-radius-sm: 5px;
    --transition-speed: 0.4s ease-in-out;
}

/* Base Styles & Typography */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-aged-parchment);
    background-color: var(--color-midnight-blue);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* Prevent horizontal scroll from parallax effects */
}

*, *::before, *::after {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-luminescent-white);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

h1 { font-size: 3.8rem; line-height: 1.1; }
h2 { font-size: 2.8rem; line-height: 1.2; text-align: center; margin-bottom: var(--spacing-md); }
h3 { font-size: 1.8rem; line-height: 1.3; }
p { margin-bottom: var(--spacing-sm); }

a {
    color: var(--color-amber-accent);
    text-decoration: none;
    transition: color var(--transition-speed);
}
a:hover {
    color: var(--color-luminescent-white);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.section-title {
    padding-bottom: var(--spacing-sm);
    position: relative;
    margin-bottom: var(--spacing-md);
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-amber-accent), transparent);
    box-shadow: 0 0 10px var(--color-amber-accent);
}

.section-description {
    font-family: var(--font-subheading);
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-lg);
    font-size: 1.2rem;
    color: var(--color-dusty-gray);
    font-style: italic;
}


/* Header & Navigation */
.site-header {
    background: rgba(10, 15, 26, 0.7); /* Semi-transparent midnight blue */
    backdrop-filter: blur(10px);
    padding: var(--spacing-sm) var(--spacing-md);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(var(--color-bruised-purple), 0.5);
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.logo {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--color-luminescent-white);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    transition: transform var(--transition-speed);
}
.logo:hover {
    transform: scale(1.05);
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-md);
}

.main-nav ul li a {
    color: var(--color-aged-parchment);
    font-family: var(--font-subheading);
    font-size: 1.1rem;
    position: relative;
    padding: 0.5rem 0;
    transition: color var(--transition-speed);
}

.main-nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--color-amber-accent);
    box-shadow: 0 0 5px var(--color-amber-accent);
    transition: width var(--transition-speed);
}

.main-nav ul li a:hover::after,
.main-nav ul li a.active::after {
    width: 100%;
}
.main-nav ul li a:hover,
.main-nav ul li a.active {
    color: var(--color-amber-accent);
}

.audio-control button {
    background: none;
    border: none;
    color: var(--color-aged-parchment);
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform var(--transition-speed), color var(--transition-speed);
    outline: none;
}
.audio-control button:hover {
    color: var(--color-luminescent-white);
    transform: scale(1.1);
}
.audio-control button .hidden {
    display: none;
}

/* Sections */
section {
    padding: var(--spacing-lg) 0;
    position: relative;
    overflow: hidden; /* Ensure parallax layers don't overflow */
}

/* The Veil's Edge */
.full-screen-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-luminescent-white);
    position: relative;
    overflow: hidden;
}

.parallax-layer-back,
.parallax-layer-mid,
.atmospheric-effect-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform; /* Optimize for parallax */
}

.parallax-layer-back {
    background: url('images/image_16.jpg') no-repeat center center/cover;
    filter: brightness(0.4) grayscale(0.2);
    z-index: 0;
    transform: translateZ(-10px) scale(2); /* For initial 3D effect before scroll */
}

.parallax-layer-mid {
    background: url('images/image_17.jpg') no-repeat center center/cover;
    filter: brightness(0.6) blur(2px) saturate(0.8);
    opacity: 1;.7;
    z-index: 1;
    transform: translateZ(-5px) scale(1.5);
}

.veil-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius-sm);
    max-width: 80%;
    margin: 0 auto;
    transform: translateZ(0); /* Ensure it's in its own composting layer */
}

.veil-content h1 {
    font-size: 5rem;
    text-shadow: 0 0 20px rgba(var(--color-luminescent-white), 0.7), 0 0 10px var(--color-amber-accent);
    letter-spacing: 2px;
    margin-bottom: var(--spacing-sm);
}
.veil-content p {
    font-family: var(--font-subheading);
    font-size: 1.8rem;
    font-style: italic;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    color: var(--color-aged-parchment);
}

.atmospheric-effect-overlay {
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(10,15,26,0.5) 70%, rgba(10,15,26,0.9) 100%),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(#noise)"/></svg>') no-repeat center center/cover;
    z-index: 3;
    opacity: 1;.5;
}

/* Whispers from the Crypt */
.scroll-narrative-section {
    background-color: var(--color-bruised-purple);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    position: relative;
    border-top: 1px solid rgba(var(--color-sepia), 0.3);
    border-bottom: 1px solid rgba(var(--color-sepia), 0.3);
}

.narrative-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.narrative-page {
    background-color: var(--color-sepia);
    color: var(--color-midnight-blue);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    transform: translateY(50px) scale(0.95);
    opacity: 1;
    transition: transform 1s ease-out, opacity 1s ease-out;
    border: 1px solid rgba(var(--color-dusty-gray), 0.3);
}

.narrative-page.is-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.narrative-page::before { /* Aged paper texture */
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid var(--color-dusty-gray);
    pointer-events: none;
    z-index: -1;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.3"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(#noise)"/></svg>') repeat;
    opacity: 1;.1;
}

.narrative-page .page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.narrative-page h3 {
    color: var(--color-midnight-blue);
    font-family: var(--font-subheading);
    font-size: 2.2rem;
    text-shadow: none;
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px dashed var(--color-dusty-gray);
    padding-bottom: 0.5rem;
}
.narrative-page p {
    color: var(--color-dusty-gray);
    font-size: 1.1rem;
    max-width: 600px;
}
.narrative-page .page-illustration {
    border: 3px solid var(--color-dusty-gray);
    padding: 5px;
    margin-bottom: var(--spacing-md);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    filter: sepia(0.3) contrast(1.1);
    max-width: 100%;
    height: auto;
}

/* The Alchemist's Trove */
.trove-section {
    background-color: var(--color-midnight-blue);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

.category-drawers {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.drawer {
    background: linear-gradient(145deg, var(--color-bruised-purple), var(--color-dusty-gray));
    border: 1px solid rgba(var(--color-amber-accent), 0.3);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex: 1 1 280px; /* Allow drawers to grow/shrink, max 3 per row */
    max-width: 380px;
    transition: all var(--transition-speed);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.drawer:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(var(--color-amber-accent), 0.5);
    border-color: var(--color-amber-accent);
}

.drawer h3 {
    color: var(--color-luminescent-white);
    font-family: var(--font-subheading);
    text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.drawer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-out, opacity 0.7s ease-out;
    opacity: 1;
    padding-top: 0;
    color: var(--color-aged-parchment);
}

.drawer.active .drawer-content {
    max-height: 200px; /* Adjust based on content */
    opacity: 1;
    padding-top: var(--spacing-sm);
}
.drawer.active h3 {
    color: var(--color-amber-accent);
}

.trove-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    position: relative;
}

.trove-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.1) 0%, rgba(10,15,26,0.6) 80%);
    z-index: 0;
    pointer-events: none;
}

.trove-item {
    background-color: var(--color-bruised-purple);
    border: 1px solid rgba(var(--color-spectral-green), 0.3);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    perspective: 1000px;
    transition: transform var(--transition-speed);
    z-index: 1; /* Ensure items are above the grid overlay */
    max-width: 100%; /* Ensure proper scaling on smaller screens */
}
.trove-item:hover {
    transform: translateY(-8px) rotateY(5deg) scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(var(--color-spectral-green), 0.7);
    border-color: var(--color-spectral-green);
}

.trove-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    filter: brightness(0.7) sepia(0.2);
    transition: filter var(--transition-speed);
}
.trove-item:hover img {
    filter: brightness(1) sepia(0);
}

.item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(10, 15, 26, 0.9));
    color: var(--color-aged-parchment);
    padding: var(--spacing-sm);
    transform: translateY(100%);
    opacity: 1;
    transition: transform var(--transition-speed), opacity var(--transition-speed);
}
.trove-item:hover .item-overlay {
    transform: translateY(0);
    opacity: 1;
}

.item-overlay h3 {
    font-family: var(--font-subheading);
    font-size: 1.4rem;
    color: var(--color-luminescent-white);
    margin-bottom: 0.5rem;
    text-shadow: none;
}
.item-overlay p {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}
.ar-trigger {
    display: inline-block;
    background-color: var(--color-amber-accent);
    color: var(--color-midnight-blue);
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: bold;
    cursor: default; /* Not interactive as per restrictions */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color var(--transition-speed);
}
.ar-trigger:hover {
    background-color: var(--color-luminescent-white);
}

/* Chronicles of the Spectral Realm */
.chronicles-section {
    background-color: var(--color-dusty-gray);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-top: 1px solid rgba(var(--color-bruised-purple), 0.5);
    border-bottom: 1px solid rgba(var(--color-bruised-purple), 0.5);
}

.chronicles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    grid-auto-rows: minmax(auto, auto); /* For masonry-like behavior */
}

.chronicle-entry {
    background-color: var(--color-aged-parchment);
    color: var(--color-midnight-blue);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    cursor: pointer;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    overflow: hidden;
    height: auto; /* Ensure cards adjust to content */
    display: flex;
    flex-direction: column;
}
.chronicle-entry:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(var(--color-eerie-crimson), 0.5);
}

.entry-header {
    margin-bottom: var(--spacing-sm);
    position: relative;
}
.entry-header img {
    border: 2px solid var(--color-sepia);
    filter: grayscale(0.3) sepia(0.1);
    margin-bottom: var(--spacing-sm);
    height: 180px; /* Fixed height for consistent image size in grid */
    object-fit: cover;
}
.entry-header h3 {
    font-family: var(--font-subheading);
    font-size: 1.5rem;
    color: var(--color-bruised-purple);
    text-shadow: none;
    margin-bottom: 0.5rem;
}
.entry-excerpt {
    font-size: 0.95rem;
    color: var(--color-dusty-gray);
    flex-grow: 1;
}

.ink-blot {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 50% 50%, rgba(var(--color-eerie-crimson), 0.7) 0%, rgba(var(--color-eerie-crimson), 0) 70%);
    border-radius: 50%;
    filter: blur(2px);
    opacity: 1;.6;
    transform: rotate(var(--random-rotation, 0deg)); /* Placeholder for random rotation */
    animation: pulse-blot 2s infinite alternate;
}
@keyframes pulse-blot {
    0% { transform: scale(1); opacity: 1;.6; }
    100% { transform: scale(1.1); opacity: 1;.8; }
}

/* Chronicle Reader Overlay */
.chronicle-reader-overlay, .event-details-overlay, .seance-detail-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 26, 0.95);
    backdrop-filter: blur(15px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.chronicle-reader-overlay.visible, .event-details-overlay.visible, .seance-detail-panel.visible {
    visibility: visible;
    opacity: 1;
}

.reader-content, .event-details-content, .panel-inner {
    background-color: var(--color-bruised-purple);
    border: 1px solid var(--color-amber-accent);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px var(--color-amber-accent);
    transform: scale(0.9);
    opacity: 1;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.chronicle-reader-overlay.visible .reader-content,
.event-details-overlay.visible .event-details-content,
.seance-detail-panel.visible .panel-inner {
    transform: scale(1);
    opacity: 1;
}

.reader-content h3, .event-details-content h3, .panel-inner h3 {
    font-family: var(--font-heading);
    color: var(--color-amber-accent);
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 0 10px rgba(var(--color-amber-accent), 0.5);
    border-bottom: 1px dashed rgba(var(--color-aged-parchment), 0.3);
    padding-bottom: 0.5rem;
}
.reader-content img {
    margin: var(--spacing-sm) auto var(--spacing-md);
    border: 2px solid var(--color-sepia);
    filter: grayscale(0.1) sepia(0.05);
}
.reader-content p, .event-details-content p, .panel-inner p {
    color: var(--color-aged-parchment);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
}

.close-reader, .close-event-details, .close-seance-panel {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-aged-parchment);
    cursor: pointer;
    transition: color var(--transition-speed), transform var(--transition-speed);
    outline: none;
}
.close-reader:hover, .close-event-details:hover, .close-seance-panel:hover {
    color: var(--color-eerie-crimson);
    transform: rotate(90deg) scale(1.1);
}

/* Rituals & Revelries */
.revelries-section {
    background: radial-gradient(circle at 50% 10%, var(--color-bruised-purple), var(--color-midnight-blue) 70%);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

.star-chart-container {
    width: 100%;
    aspect-ratio: 1 / 0.8; /* Make it wider than tall */
    max-width: 1000px;
    margin: var(--spacing-lg) auto;
    position: relative;
}

.star-chart {
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="1" fill="%23FFFFFF" opacity="0.4" /><circle cx="20" cy="80" r="0.5" fill="%23FFFFFF" opacity="0.3" /><circle cx="90" cy="30" r="0.8" fill="%23FFFFFF" opacity="0.5" /></svg>') repeat;
    background-size: 200px 200px;
    border: 1px solid rgba(var(--color-spectral-green), 0.3);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(var(--color-spectral-green), 0.2);
    filter: saturate(0.8) brightness(0.9);
}

.star {
    fill: var(--color-luminescent-white);
    opacity: 1;.6;
}
.star-pulse { animation: starPulse 2s infinite alternate ease-in-out; }
.star-twinkle { animation: starTwinkle 3s infinite steps(1) alternate; }

@keyframes starPulse {
    0% { transform: scale(1); opacity: 1;.6; }
    100% { transform: scale(1.2); opacity: 1;.9; }
}
@keyframes starTwinkle {
    0% { opacity: 1;.6; }
    50% { opacity: 1;.2; }
    100% { opacity: 1;.6; }
}

.celestial-event {
    cursor: pointer;
    transition: transform var(--transition-speed);
}
.celestial-event:hover {
    transform: scale(1.1);
}

.event-glow {
    fill: var(--color-spectral-green);
    opacity: 1;.3;
    filter: blur(8px);
    transition: opacity var(--transition-speed);
}
.celestial-event:hover .event-glow {
    opacity: 1;.6;
}

.event-body {
    fill: var(--color-luminescent-white);
    transition: fill var(--transition-speed);
}
.celestial-event:hover .event-body {
    fill: var(--color-amber-accent);
}

.event-label {
    fill: var(--color-aged-parchment);
    font-family: var(--font-subheading);
    font-size: 1rem;
    user-select: none;
    transition: fill var(--transition-speed);
}
.celestial-event:hover .event-label {
    fill: var(--color-luminescent-white);
    text-shadow: 0 0 5px var(--color-luminescent-white);
}

.event-full-moon .event-body { fill: var(--color-luminescent-white); }
.event-eclipse .event-body { fill: var(--color-dusty-gray); }
.event-eclipse .event-eclipse-path { fill: var(--color-midnight-blue); }
.event-comet .event-body { fill: var(--color-amber-accent); }
.event-comet .event-tail {
    fill: url(#comet-gradient); /* Define a gradient in SVG defs */
    opacity: 1;.7;
    filter: blur(2px);
    transition: transform var(--transition-speed);
}
.celestial-event:hover .event-comet .event-tail {
    transform: translateX(10px);
}
.event-new-moon .event-body { fill: var(--color-dusty-gray); }
.event-new-moon .event-new-moon-body {
    mask: url(#new-moon-mask); /* Define a mask in SVG defs */
}

/* Add SVG defs for custom gradients/masks */
.star-chart {
    /* ... existing styles ... */
    /* Add this for SVG definitions */
    /*
    <defs>
        <linearGradient id="comet-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity: 1;"/>
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
        </linearGradient>
        <mask id="new-moon-mask">
            <circle cx="25" cy="0" r="25" fill="white" />
            <circle cx="10" cy="0" r="20" fill="black" />
        </mask>
    </defs>
    */
}


/* The Seance Circle */
.seance-section {
    background-color: var(--color-midnight-blue);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

.seance-elements {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

.seance-element {
    width: 300px;
    height: 300px;
    background: linear-gradient(145deg, var(--color-bruised-purple), var(--color-dusty-gray));
    border: 1px solid rgba(var(--color-eerie-crimson), 0.4);
    border-radius: var(--border-radius-sm);
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-speed);
    outline: none; /* Remove default focus outline */
}
.seance-element:hover, .seance-element:focus {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(var(--color-eerie-crimson), 0.7);
    border-color: var(--color-eerie-crimson);
}

.seance-element .element-inner {
    padding: var(--spacing-sm);
    position: relative;
    z-index: 2;
    color: var(--color-aged-parchment);
}

.seance-element p {
    font-family: var(--font-subheading);
    font-size: 1.5rem;
    color: var(--color-luminescent-white);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.seance-element span {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-sepia);
}

/* Specific Seance Elements */
.crystal-ball .crystal-sphere {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at 70% 30%, rgba(var(--color-luminescent-white), 0.8) 0%, rgba(var(--color-spectral-green), 0.5) 40%, rgba(var(--color-midnight-blue), 0.8) 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 30px rgba(var(--color-spectral-green), 0.5);
    margin-bottom: var(--spacing-sm);
    animation: glow-crystal 3s infinite alternate ease-in-out;
}
@keyframes glow-crystal {
    0% { box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 30px rgba(var(--color-spectral-green), 0.5); }
    100% { box-shadow: inset 0 0 25px rgba(0,0,0,0.7), 0 0 40px rgba(var(--color-spectral-green), 0.8); }
}

.ouija-board .planchette {
    width: 80px;
    height: 60px;
    background-color: var(--color-amber-accent);
    clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%);
    margin-bottom: var(--spacing-sm);
    animation: float-planchette 4s infinite ease-in-out;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}
@keyframes float-planchette {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.spirit-board .indicator {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 50% 50%, var(--color-eerie-crimson) 0%, rgba(var(--color-eerie-crimson), 0.7) 40%, transparent 100%);
    border-radius: 50%;
    margin-bottom: var(--spacing-sm);
    filter: blur(10px);
    animation: pulse-spirit 2.5s infinite alternate ease-in-out;
}
@keyframes pulse-spirit {
    0% { transform: scale(0.9); opacity: 1;.6; }
    100% { transform: scale(1.1); opacity: 1;.9; }
}

/* Footer */
.site-footer {
    background-color: var(--color-midnight-blue);
    color: var(--color-dusty-gray);
    text-align: center;
    padding: var(--spacing-md);
    font-size: 0.9rem;
    border-top: 1px solid rgba(var(--color-bruised-purple), 0.5);
}
.site-footer p {
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.2rem; }
    h3 { font-size: 1.5rem; }
    .main-nav { flex-direction: column; }
    .main-nav ul { flex-direction: column; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
    .main-nav ul li a { font-size: 1rem; }
    .logo { font-size: 1.8rem; }

    .veil-content h1 { font-size: 3.5rem; }
    .veil-content p { font-size: 1.2rem; }

    .narrative-page { padding: var(--spacing-md); }
    .narrative-page .page-content { flex-direction: column; }
    .narrative-page .page-illustration { margin-bottom: var(--spacing-sm); }

    .category-drawers { flex-direction: column; align-items: stretch; }
    .drawer { max-width: 100%; }

    .trove-grid, .chronicles-grid {
        grid-template-columns: 1fr; /* Stack cards on mobile */
    }

    .chronicle-entry img { height: 150px; } /* Adjust image height for smaller cards */

    .seance-elements { flex-direction: column; }
    .seance-element { width: 90%; height: 250px; }

    .reader-content, .event-details-content, .panel-inner {
        padding: var(--spacing-md);
        width: 95%;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }

    .veil-content h1 { font-size: 2.5rem; }
    .veil-content p { font-size: 1rem; }

    .main-nav { padding-top: calc(var(--spacing-sm) + 20px); /* Adjust for potential logo space */ } /* Added top padding */
    .main-nav .logo { margin-bottom: var(--spacing-sm); }
    .main-nav ul { margin-top: 0; }
    .audio-control { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); }
}


javascript
/* JS */

    // Smooth scrolling for navigation
            e.preventDefault();
                behavior: 'smooth'
            });
        });
    });

    // --- Ambient Soundscapes ---
    };

    // Pre-populate audio sources (replace with actual paths if available)
    // For demonstration, these remain placeholders.
    // In a real scenario, you'd set:
    // audioElements['veil-edge'].src = 'audio/eerie_wind.mp3';
    // audioElements['whispers-crypt'].src = 'audio/distant_whispers.mp3';
    // ... and call .load() on each.
    // For now, we'll just manage their muted state.


    // Function to update audio state and icon
        isMuted = muteAll;
            if (audio) audio.muted = isMuted;
        });
    };

        updateAudioState(!isMuted);
    });

    // Intersection Observer for playing section-specific audio
            if (entry.isIntersecting) {
                if (audioElements[sectionId] && !isMuted) {
                        if (audio && audio !== audioElements[sectionId] && !audio.muted) {
                            audio.pause(); // Pause others
                        }
                    });
                }
            } else {
                if (audioElements[sectionId]) {
                    audioElements[sectionId].pause();
                }
            }
        });
    }, { threshold: 0.5 }); // Trigger when 50% of the section is visible


    // --- Parallax Effect for The Veil's Edge ---


        if (scrollPos < veilEdge.offsetHeight) { // Only apply within the hero section height
            parallaxBack.style.transform = `translateY(${scrollPos * speedBack}px) translateZ(-10px) scale(2)`;
            parallaxMid.style.transform = `translateY(${scrollPos * speedMid}px) translateZ(-5px) scale(1.5)`;
            veilContent.style.transform = `translateY(${scrollPos * speedContent}px) translateZ(0)`;
            veilContent.style.opacity = 1 - (scrollPos / (veilEdge.offsetHeight / 2)); // Fade out content
        }
    });

    // --- Whispers from the Crypt: Scroll Narrative ---
            if (entry.isIntersecting) {
            } else {
            }
        });
    }, { threshold: 0.4, rootMargin: '0px 0px -100px 0px' }); // Adjust threshold and rootMargin for better reveal


    // --- The Alchemist's Trove: Category Drawers ---
        });
    });

    // --- Chronicles of the Spectral Realm: Journal Overlay ---

        "tale-of-shadowfen": {
            title: "The Whispering Woods of Shadowfen",
            image: "https://picsum.photos/800/500?random=100",
            text: "Deep within the forgotten valleys lies Shadowfen Grove, an ancient woodland where the very air thrums with forgotten magic. Legends speak of spirits guarding age-old secrets, visible only to those who truly believe. Visitors often report subtle whispers on the breeze, phantom footsteps, and glimpses of fleeting, ethereal figures. It is said that at twilight, the veil between worlds thins most, allowing echoes of past revelries and sorrows to manifest. Umbral Veil draws inspiration from such places, where nature and the supernatural intertwine, offering a sanctuary for the curious soul."
        },
        "symbols-of-power": {
            title: "Deciphering Ancient Symbols of Power",
            image: "https://picsum.photos/800/500?random=101",
            text: "Across various cultures and forgotten eras, symbols have served as conduits for power and meaning. From alchemical sigils to druidic runes, each mark carries a specific resonance. This chronicle delves into the origins and interpretations of some of the most potent symbols, such as the Ouroboros representing eternal cycles, the Triquetra signifying ancient trinities, and the Pentagram, often misunderstood yet a powerful emblem of protection and balance. Understanding these symbols is key to unlocking deeper spiritual connections and appreciating the intricate artistry of Umbral Veil's creations."
        },
        "community-spotlight": {
            title: "Community Spotlight: Echoes from Our Gatherings",
            image: "https://picsum.photos/800/500?random=102",
            text: "The spirit of Umbral Veil thrives not just in our artifacts, but in the shared experiences of our community. From intimate coven meetings under the new moon to grand autumnal masquerades, our gatherings are moments of true connection and enchantment. This spotlight features cherished memories: the vibrant costumes, the enthralling storytelling, the shared laughter, and the palpable sense of wonder as like-minded souls converge. We extend our gratitude to all who have joined us in these spectral celebrations, weaving new threads into the rich tapestry of Umbral Veil lore."
        },
        "the-lunar-cycle": {
            title: "The Mystical Significance of the Lunar Cycle",
            image: "https://picsum.photos/800/500?random=103",
            text: "The moon, a celestial sentinel, has long guided the rhythms of the earth and the unseen world. Each phase of the lunar cycle holds unique mystical significance. The New Moon heralds beginnings and intention setting, while the Waxing Moon is for growth and manifestation. The Full Moon amplifies power, intuition, and release, and the Waning Moon is a time for introspection and banishment. Understanding and aligning with these cosmic currents can deepen one's practice and connection to the ethereal, much like the meticulously planned experiences offered by Umbral Veil."
        },
        "victorian-hauntings": {
            title: "Victorian Hauntings: Tales from Gaslight Streets",
            image: "https://picsum.photos/800/500?random=104",
            text: "The Victorian era, with its gaslit streets and burgeoning spiritualism, was a time rife with ghost stories and spectral encounters. From the chilling tales of phantom carriages to the mournful apparitions in grand manor houses, the fascination with the afterlife was profound. Seances were commonplace, and intricate rituals were performed to communicate with the departed. Umbral Veil draws inspiration from this rich period of gothic romance and eerie charm, crafting an aesthetic that echoes the elegant shadows and captivating mysteries of Victorian hauntings. Explore the narratives that shaped a generation's understanding of the spectral."
        },
        "art-of-illusion": {
            title: "The Art of Illusion: Crafting Spectral Realities",
            image: "https://picsum.photos/800/500?random=105",
            text: "Beyond mere trickery, illusion is a sophisticated art form that blurs the lines between perception and reality. Throughout history, masters of illusion have captivated audiences by creating spectral realities through cunning techniques, light manipulation, and psychological misdirection. From Pepper's Ghost on Victorian stages to the subtle atmospheric shifts in a haunted experience, the goal is to immerse and transport. Umbral Veil embraces this artistry, weaving subtle illusions and evocative ambiance into its offerings to craft truly unforgettable, mesmerizing experiences that engage all senses and challenge the conventional view of what is real."
        }
    };

            if (content) {
                readerTitle.textContent = content.title;
                readerImage.src = content.image;
                readerImage.alt = content.title;
                readerFullText.textContent = content.text;
                chronicleReader.setAttribute('aria-hidden', 'false');
            }
        });
    });

        chronicleReader.setAttribute('aria-hidden', 'true');
    });


    // --- Rituals & Revelries: Event Details Overlay ---

        "full-moon-gathering": {
            title: "Full Moon Gathering: Lumina's Embrace",
            date: "October 27th - Dusk",
            description: "Join us for a transcendent gathering under the brilliance of the full moon. Experience guided meditations, a shared feast of mystic delicacies, and ritualistic dances that honor the celestial energies. A night of collective enchantment and illuminated connection awaits."
        },
        "eclipse-workshop": {
            title: "Shadow Weaving Workshop: Embrace the Penumbra",
            date: "November 14th - Mid-afternoon",
            description: "Explore the profound symbolism of shadows and light in our exclusive workshop. Learn ancient techniques of shadow puppetry, delve into the lore of eclipses, and craft your own talismans of protection and transformation. Embrace the duality within."
        },
        "comet-observatory": {
            title: "Comet's Passage: A Cosmic Alignment",
            date: "December 3rd - Deepest night",
            description: "Witness a rare celestial phenomenon as a wandering comet graces our skies. Our special observatory event includes guided stargazing, tales of cosmic omens, and hot spiced elixirs to ward off the chill. A truly stellar experience."
        },
        "new-moon-ritual": {
            title: "New Moon Ritual: Seeds of Intention",
            date: "September 29th - Midnight",
            description: "Participate in an intimate new moon ritual focused on setting powerful intentions and planting the seeds for new beginnings. This quiet yet potent ceremony is designed for introspection and forging personal pathways. Limited attendance."
        }
    };

            if (data) {
                eventTitle.textContent = data.title;
                eventDate.textContent = data.date;
                eventDescription.textContent = data.description;
                eventDetailsOverlay.setAttribute('aria-hidden', 'false');
            }
        });
    });

        eventDetailsOverlay.setAttribute('aria-hidden', 'true');
    });

    // --- The Seance Circle: Detail Panel ---

        "contact": {
            title: "Whisper Your Inquiries",
            content: "<p>The mysteries of Umbral Veil are vast, and sometimes a guiding presence is needed. While direct communication follows ancient paths, your inquiries resonate within our sphere. Reflect upon your question, for the answers often appear when the mind is clearest. Our ethereal presence is always attuned to true seekers.</p><p>For deeper insights and guidance, continue to explore the Chronicles and Rituals sections, as wisdom is woven into every detail of Umbral Veil.</p>"
        },
        "social": {
            title: "Uncover Our Presence",
            content: "<p>Umbral Veil maintains a presence across the spectral web, where echoes of our essence can be perceived by those who know where to look. While we do not participate in ephemeral trends, our spirit permeates the subtle currents of shared thought and inspiration.</p><p>Seek out the paths of aesthetic reverence and gothic artistry, and you may find subtle connections to the realm of Umbral Veil. Our influence is a quiet undercurrent, guiding kindred spirits through shared passion for the arcane and beautiful.</p>"
        },
        "faqs": {
            title: "Seek Ancient Answers",
            content: "<p>Many questions have been whispered through the ages. Here are some answers to common inquiries within the Umbral Veil:</p><ul><li><strong>What is Umbral Veil's mission?</strong> To manifest the enchanting spirit of the otherworldly and curate experiences that resonate with timeless mystery.</li><li><strong>Are your artifacts truly enchanted?</strong> Each item is imbued with intent and crafted to evoke a sense of ancient magic and profound connection.</li><li><strong>How can I participate in rituals?</strong> Upcoming rituals and gatherings are announced in the Rituals & Revelries section.</li><li><strong>Do you offer custom creations?</strong> Bespoke requests are considered for those who seek truly unique manifestations of the arcane.</li></ul>"
        }
    };

            if (data) {
                panelTitle.textContent = data.title;
                panelContent.innerHTML = data.content;
                seanceDetailPanel.setAttribute('aria-hidden', 'false');
            }
        });
    });

        seanceDetailPanel.setAttribute('aria-hidden', 'true');
    });

    // --- Easter Egg: Subtle Lore Reveal on hover ---
    // Example: A hidden lore text on hover over the Umbral Veil logo in the header
            tooltip.className = 'lore-tooltip';
            tooltip.textContent = loreText;
            // Position tooltip dynamically
            tooltip.style.left = `${rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2)}px`;
            tooltip.style.opacity = 1;
        }, 1000); // Reveal after 1 second hover
    });

        clearTimeout(loreTimeout);
        if (tooltip) {
            tooltip.style.opacity = 0;
        }
    });

    // Append dynamic styles for lore-tooltip
    style.textContent = `
        .lore-tooltip {
            position: absolute;
            background: rgba(var(--color-midnight-blue), 0.9);
            color: var(--color-aged-parchment);
            padding: 8px 12px;
            border-radius: var(--border-radius-sm);
            font-size: 0.9rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
            z-index: 2000;
            white-space: nowrap;
            border: 1px solid rgba(var(--color-amber-accent), 0.5);
        }
    `;

    // Initial check for audio state (to ensure icons are correct on load)
    updateAudioState(true); // Ensure initially muted as per requirement

});

/* Safe visibility overrides (auto-added) */
:root, html, body, main, header, footer, section, .container, .content {
  opacity: 1 !important;
  visibility: visible !important;
}