@import url('https://fonts.googleapis.com/css2?family=Anton&family=Yellowtail&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Base */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24
}

body {
    font-family: "Roboto Condensed", sans-serif;
    background-color: #000000;
}

/* Animations */
.neon-flicker-lime {
    animation: flicker 4s infinite;
}

.neon-flicker-white {
    animation: flicker 5s infinite reverse;
}

.moving-gradient-bg {
    background: linear-gradient(-45deg, #000000, #0a1a0a, #000000, #050a05);
    background-size: 400% 400%;
    animation: gradient-move 15s ease infinite;
    position: relative;
}

.moving-gradient-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #ccff00 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* Effects */
.aura-glow {
    box-shadow: 0 0 60px 10px rgba(255, 0, 255, 0.15);
}

.noise-overlay {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuAlS0WpDMyxOplEdy-aYpFVd85Qn7Fj1SiNOaPQia1xv3N1v9CyGJ7XHYIDMWr72z3_NsCowdN8GtDi1Ah-NwTkXG1rtJH6wPdipCZ2VxjatgJ44JEy6mNIdLyLudCq1kg87zQxGw-kxeVF01Wirr968BgKba9j_P5KXE2--SOZBDB-m-KnudiIKq1bMfetyS_xaLfDyb6PONkywhKs5OdQ2GGs8Pr-FX_dTu-JOrnLsxK09MfJkLyM2fgNXzkECvhtyomrRGjvqmk);
    opacity: 0.05
}

/* Neon Components */
/* Neon Components */
.neon-oval-logo {
    border: 8px solid white;
    border-radius: 50%;
    /* Oval shape will come from width/height ratio */
    background: transparent;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-5deg);
}

.neon-line-flow {
    position: absolute;
    background: linear-gradient(90deg, transparent, #ccff00, transparent);
    height: 2px;
    width: 100%;
    animation: flow 3s linear infinite;
}

.ticket-border-glow {
    position: relative;
}

.ticket-border-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #ccff00, #ffff00, #ccff00);
    background-size: 200%;
    z-index: -1;
    animation: gradient-move 3s linear infinite;
    filter: blur(8px);
    opacity: 0.8;
}

/* Logos & Inputs */
.text-halo {
    -webkit-text-stroke: 1px black;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

.neon-input:focus {
    box-shadow: 0 0 15px rgba(204, 255, 0, 0.3);
    border-color: #ccff00 !important;
}

/* Component Classes - Reusable Patterns */


/* Header */
.header-logo {
    height: 2.5rem;
    width: auto;
    filter: drop-shadow(0 0 20px rgba(204, 255, 0, 0.4));
    transition: filter 0.3s ease;
}

@media (min-width: 768px) {
    .header-logo {
        height: 3.5rem;
    }
}

.header-logo:hover {
    filter: drop-shadow(0 0 30px rgba(204, 255, 0, 0.6));
}

/* Footer */
.footer-container {
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
    z-index: 10;
    background-color: black;
    border-top: 2px solid rgba(204, 255, 0, 0.3);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.footer-logo-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

@media (min-width: 768px) {
    .footer-logo-group {
        gap: 5rem;
    }
}

.footer-logo-item {
    cursor: pointer;
    transform: scale(1); /* default */
    transition: all 0.3s;
}

.footer-logo-item:hover {
    transform: scale(1.1);
}

.footer-logo-img {
    height: 5rem;
    width: auto;
    opacity: 0.95;
    filter: drop-shadow(0 0 15px rgba(204, 255, 0, 0.3));
    transition: opacity 0.3s;
}

@media (min-width: 768px) {
    .footer-logo-img {
        height: 7rem;
    }
}

.footer-logo-item:hover .footer-logo-img {
    opacity: 1;
}

.footer-logo-img:hover {
    filter: drop-shadow(0 0 25px rgba(204, 255, 0, 0.5));
}

.footer-copyright {
    text-align: center;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    letter-spacing: 0.5em;
    font-weight: 700; /* bold */
    text-transform: uppercase;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: #ccff00; /* neon-lime */
    color: black;
    font-weight: 900; /* black */
    text-transform: uppercase;
    font-size: 1.25rem; /* xl */
    letter-spacing: 0.1em; /* widest */
    transition: all 0.3s;
    transform: skewX(-10deg);
    box-shadow: 0 0 30px rgba(204, 255, 0, 0.4);
    cursor: pointer;
}

.btn-primary:hover {
    background-color: white;
    transform: skewX(-10deg) scale(1.05); /* maintain skew */
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.6);
}

.btn-primary span {
    display: inline-block;
    transform: skewX(10deg);
}

/* Form Inputs */
.form-input {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* widest */
    transition: all 0.3s;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.form-input:focus {
    outline: none;
    box-shadow: 0 0 15px rgba(204, 255, 0, 0.3);
    border-color: #ccff00 !important;
}

.form-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #ccff00;
    margin-left: 0.25rem;
}

/* Section Headers */
.section-title {
    font-family: 'Anton', sans-serif; /* display */
    font-size: 2.25rem; /* 4xl */
    font-weight: 900;
    color: white;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 1rem;
    position: relative;
    z-index: 10;
    -webkit-text-stroke: 1px black;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

@media (min-width: 640px) {
    .section-title {
        font-size: 3rem; /* 5xl */
    }
}

.section-subtitle {
    color: #94a3b8; /* slate-400 */
    font-weight: 300; /* light */
    font-size: 1.125rem; /* lg */
}