/* css styles */

.nav-footer,
.navbar {
    max-width: 1000px;  /* Adjust this value to match your content width */
    margin: 0 auto;
    width: 100%;
}

.navbar-container {
    max-width: none !important;
}

/* Ensure the navbar background spans full width while content is constrained */
.navbar {
    background: none;
    padding-left: 1em;
    padding-right: 1em;
}

#quarto-header {
    background-color: #fff;  /* Or whatever your navbar background color should be */
    width: 100%;
}

/* Handle full-width splash section while keeping content constrained */
#splash-container, #splash-container-webgl {
    max-width: 978px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 48vh !important; /* Default height for larger screens */
    min-height: 240px; /* Minimum height to ensure it doesn't get too small */
    max-height: 480px; /* Maximum height to match original size */
}

/* Responsive adjustments for splash height */
@media screen and (max-width: 768px) {
    #splash-container, #splash-container-webgl {
        height: 40vh !important;
    }
}

@media screen and (max-width: 480px) {
    #splash-container, #splash-container-webgl {
        height: 30vh !important;
    }
}

/* Constrain the listing content width */
.quarto-listing {
    max-width: 1000px;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
}

/* Ensure content container doesn't restrict splash width */
.content-container {
    max-width: none;
    padding: 0;
}

/* But keep regular page content constrained */
.content-container > *:not(#splash-container) {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto
}

/* Grid System */
.splash-grid-container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    contain: layout style paint;
}

.splash-grid-row {
    display: flex;
    justify-content: center;
    line-height: 1;
}

.splash-grid-cell {
    display: inline-block;
    text-align: center;
    font-weight: 800;
    color: #ffffff;
    /* Add GPU acceleration hints */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    /* Inform browser about properties that will animate */
    will-change: transform, opacity;
}

/* Base animation properties */
.animated-element {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Animation base classes */
.splash-cell-plasma {
    animation-timing-function: steps(var(--splash-steps, 6));
    animation-iteration-count: infinite;
    animation-name: plasmaChange;
}

.splash-cell-undulate {
    animation-timing-function: steps(var(--splash-steps, 6));
    animation-iteration-count: infinite;
    animation-name: undulateChange;
}

.splash-cell-conway-burst {
    animation-timing-function: steps(var(--splash-steps, 6));
    animation-iteration-count: infinite;
    animation-name: conwayBurst;
}

.splash-cell-conway-idle {
    animation-timing-function: steps(var(--splash-steps, 6));
    animation-iteration-count: infinite;
    animation-name: conwayIdle;
}

/* Animation pause control */
.animations-paused * {
    animation-play-state: paused !important;
}

/* Optimized animations using transform for better performance */
@keyframes plasmaChange {
    0%, 100% { 
        transform: scale(1) translateZ(0); 
        opacity: 1; 
        color: #ef4444; 
    }
    50% { 
        transform: scale(1.1) translateZ(0); 
        opacity: 1; 
        color: #3b82f6; 
    }
}

@keyframes undulateChange {
    0%, 100% { 
        transform: translate3d(0, 0, 0); 
        opacity: 1; 
        color: #ef4444; 
    }
    50% { 
        transform: translate3d(0, 2px, 0) scale(1.1); 
        opacity: 1; 
        color: #3b82f6; 
    }
}

@keyframes conwayBurst {
    0%, 100% { 
        transform: scale(1) translateZ(0); 
        opacity: 1; 
        color: #ef4444; 
    }
    40% { 
        transform: scale(1.2) translateZ(0); 
        opacity: 0.8; 
        color: #3b82f6; 
    }
}

@keyframes conwayIdle {
    0%, 100% { 
        transform: scale(0.8) translateZ(0); 
        opacity: 0.4; 
        color: #ef4444; 
    }
    50% { 
        transform: scale(1.1) translateZ(0); 
        opacity: 0.6; 
        color: #3b82f6; 
    }
}

/* Splash section base container */
.splash-section {
    width: 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
    background: white;
    cursor: pointer;
}

/* Main container styles */
.splash-main-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: white;
}

/* Logo container styles */
.splash-logo-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.splash-logo {
    max-width: 50%;
    height: auto;
    opacity: 0.8;
}

/* Grid cell dimensions - using CSS custom properties for dynamic values */
.splash-main-container .splash-grid-cell {
    --cell-width: 12px;
    width: var(--cell-width);
}

.splash-main-container .splash-grid-row {
    --cell-height: 12px;
    height: var(--cell-height);
}

/* Hide author information in listings */
.quarto-listing .listing-author {
    display: none !important;
}

.quarto-post {
    padding-bottom: 1.5em;
}

.listing-actions-group {
    margin-bottom: 1.5em;
}