/* ===================================================================
 * FOOTER STYLES (Sepulcher)
 * =================================================================== */

/* 1. THE SLAB ITSELF */
.sepulcher {
    background: var(--bg-pure-void);
    color: var(--accent-eyes-pulse);
    padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
    overflow: hidden;
    box-shadow: 0 -2px 30px rgba(196, 196, 196, 0.08);
    border-top: 1px solid var(--border-silver-thread);
}

.sepulcher-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. THE AXIS LAYOUT */
.axis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 5rem);
    flex-wrap: wrap;
}

/* 3. THE EYE */

.eye {
    flex-basis: clamp(180px, 18vw, 260px);
    flex-grow: 0;
    flex-shrink: 0;
    padding: 1rem;
}

.eye-link {
    border-bottom: none;
}

.eye-link:hover {
    border-bottom: none;
}

.eye img {
    width: 100%;
    max-width: clamp(180px, 30vw, 260px);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    opacity: 0.85; /* The animation name is changed to match the header's */
    animation: pulse-glow-oculus 6s infinite ease-in-out;
    will-change: box-shadow, opacity;
    transition: opacity 0.3s ease;
}

.eye img:hover {
    opacity: 1;
}

/* 4. THE INDEX */
.index {
    display: flex;
    flex: 1;
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 3.75rem);
    flex-wrap: wrap;
}

.monolith {
    position: relative;
    text-align: left;
    flex-grow: 1;
    flex-basis: 150px;
}

.title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    letter-spacing: 0.15em;
    color: var(--text-whispered-sigil);
    cursor: pointer;
    display: block;
    transition: color 0.3s ease, letter-spacing 0.3s ease;
    padding-bottom: 0.5rem;
}

.monolith:hover .title {
    color: var(--text-radiant-glyph);
    letter-spacing: 0.2em;
}

.links {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: block;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
    transition:
        max-height 1.2s ease-in-out,
        opacity 0.8s ease-in-out,
        transform 0.8s ease-in-out;
}

.links li {
    margin: 8px 0;
}

.links a {
    text-decoration: none;
    color: var(--text-whispered-sigil);
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    opacity: 0.8;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.links a:hover {
    opacity: 1;
    color: var(--text-radiant-glyph);
}

/* 5. THE INSCRIPTION LINE */
.inscription {
    text-align: center;
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    font-family: 'Libre Franklin', sans-serif;
    border-top: 1px solid var(--border-silver-thread);
    padding-top: 2.5rem;
}

.monolith-inscription {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    font-style: italic;
    font-weight: 500;
    margin-bottom: 2.5rem;
    color: var(--accent-eyes-pulse);
}

.monolith-seal {
    font-size: clamp(0.75rem, 1vw, 0.8rem);
    letter-spacing: 0.05em;
    color: var(--text-seeker-monologue);
    opacity: 0.7;
    text-transform: uppercase;
    margin: 0;
}


/* 6. RESPONSIVE LAW */
@media (max-width: 1024px) {
    .axis {
        flex-direction: column;
        align-items: center;
        gap: 3.75rem;
    }

    .eye {
        flex-basis: clamp(180px, 30vw, 260px);
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .index {
        flex-direction: column;
        gap: 2rem;
        width: 100%;
        text-align: center;
    }

    .monolith {
        width: 100%;
        text-align: center;
    }

    .monolith .title.active+.links {
        max-height: 500px;
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1025px) {
    .monolith:hover .links {
        max-height: 500px;
        opacity: 1;
        transform: translateY(0);
    }
}