/* CSS Variables */
:root {
    --main-yellow: rgb(217, 223, 168);
    --main-yellow-transparent: rgba(217, 223, 168, 0.7);
    --main-yellow-border: rgba(217, 223, 168, 0.15);
    --bg-black: black;

    --anim-ease: cubic-bezier(.22,1,.36,1);
    --anim-fast: 250ms;
    --anim-med: 500ms;
    --anim-slow: 1000ms;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;

    --max-content-width: 1100px;
    --footer-border: 1px solid var(--main-yellow-border);
}

@font-face {
    font-family: 'Xanmono';
    src: url('fonts/Xanmono-Regular.ttf') format('truetype');
}

body {
    margin: 0;
    font-family: sans-serif;
    background-color: var(--bg-black);
    color: var(--main-yellow);
}

/* Viewport Section */
#viewport-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.site-title {
    font-family: 'Xanmono', sans-serif;
    font-size: clamp(2.5rem, 10vw, 5rem);
    margin-bottom: 0.5em;
    color: var(--main-yellow);
    text-align: center;
    width: 100%;
    z-index: 20;
    transition: opacity var(--anim-fast) ease;
}

.socials {
    transition: opacity var(--anim-fast) ease;
    text-align: center;
}

.socials a {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    color: var(--main-yellow);
    margin: 0 var(--spacing-xs);
    text-decoration: none;
}

.scroll-down-arrow {
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--main-yellow);
    transition: opacity var(--anim-fast) ease;
}

/* Events Section */
#events-section {
    overflow: visible;
    opacity: 0;
    transform: translateY(80px) scale(0.9);
    filter: blur(10px);
    pointer-events: none;
    transition:
        transform var(--anim-med) ease,
        opacity var(--anim-fast) ease,
        filter var(--anim-fast) ease;
}

body.events-open #events-section {
    transform: translateY(-35vh) scale(1);
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
}

body.events-open .site-title {
    opacity: 0.95;
}

body.events-open .socials,
body.events-open .scroll-down-arrow {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--anim-fast) ease-in-out;
}

/* Bandsintown Widget */
.bandsintown-widget-outer {
    overflow: hidden;
    width: 100%;
}

.bandsintown-widget-container {
    margin-top: 2em;
    width: 95%;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* Override widget animations to prevent conflicts with our transitions */
.bandsintown-widget-outer,
.bandsintown-widget-outer *,
.bandsintown-widget-container,
.bandsintown-widget-container * {
    transform: translateX(0) translateY(0) scale(1) !important;
    animation: none !important;
    transition: none !important;
}

/* Footer */
.site-footer {
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
    margin-top: var(--spacing-lg);
    border-top: var(--footer-border);
}

.footer-content {
    font-family: 'Xanmono', sans-serif;
    font-size: 0.9rem;
    color: var(--main-yellow-transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.footer-content a {
    color: var(--main-yellow);
    text-decoration: none;
    transition: opacity var(--anim-fast) var(--anim-ease);
}

.footer-content a:hover {
    opacity: 0.7;
}

@media (max-width: 600px) {
    .footer-content {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .copyright-year,
    .copyright-name {
        display: block;
    }
}

/* Third-Party Overrides */
.bit-nav-bar {
    white-space: nowrap;
}
.bit-venue {
    width: auto !important;
}