/* Header button text style with chromatic aberration effect */
.header-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.header-buttons .page-btn {
    background: none;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 4px 0;
    position: relative;
    cursor: pointer;
    transition: color 0.15s ease, text-shadow 0.15s ease, transform 0.15s ease;
    text-shadow: none;
    overflow: visible;
}

/* Individual button rotations on hover */
.header-buttons .page-btn:nth-child(1):hover:not(.active) {
    transform: scale(1.15) rotate(-2deg);
}

.header-buttons .page-btn:nth-child(2):hover:not(.active) {
    transform: scale(1.15) rotate(1.5deg);
}

.header-buttons .page-btn:nth-child(3):hover:not(.active) {
    transform: scale(1.15) rotate(-1deg);
}

.header-buttons .page-btn:nth-child(4):hover:not(.active) {
    transform: scale(1.15) rotate(2.5deg);
}

.header-buttons .page-btn:nth-child(5):hover:not(.active) {
    transform: scale(1.15) rotate(-1.5deg);
}

/* Chromatic aberration with rotated color layers */
.header-buttons .page-btn:nth-child(1):hover:not(.active) {
    text-shadow:
        -5px -2px 0 cyan,
        3px 4px 0 magenta,
        1px 5px 0 yellow;
}

.header-buttons .page-btn:nth-child(2):hover:not(.active) {
    text-shadow:
        -3px -4px 0 cyan,
        5px 2px 0 magenta,
        -1px 5px 0 yellow;
}

.header-buttons .page-btn:nth-child(3):hover:not(.active) {
    text-shadow:
        -4px -3px 0 cyan,
        4px 3px 0 magenta,
        0px 5px 0 yellow;
}

.header-buttons .page-btn:nth-child(4):hover:not(.active) {
    text-shadow:
        -2px -5px 0 cyan,
        4px 1px 0 magenta,
        2px 5px 0 yellow;
}

.header-buttons .page-btn:nth-child(5):hover:not(.active) {
    text-shadow:
        -4px -1px 0 cyan,
        2px 4px 0 magenta,
        -2px 5px 0 yellow;
}

/* Active state - single random color (set via JS) */
.header-buttons .page-btn.active {
    text-shadow: none;
    /* Color will be set by JavaScript */
}

/* Active + hover = particle effect */
.header-buttons .page-btn.active:hover {
    animation: particleGlow 0.6s ease-in-out infinite;
}

@keyframes particleGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 2px currentColor);
    }

    50% {
        filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 12px currentColor);
    }
}

/* Particle elements (created via JS) */
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat 0.8s ease-out forwards;
}

@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

/* Larger branding text */
.brand-name {
    font-size: 26px !important;
}

.brand-sub {
    font-size: 14px !important;
}

/* Site header z-index override */
.site-header {
    z-index: 70 !important;
}

/* Hamburger button */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    z-index: 210;
}

.hamburger-box {
    width: 24px;
    height: 20px;
    position: relative;
    display: inline-block;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: #fff;
    width: 100%;
    height: 3px;
    position: absolute;
    left: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-inner {
    top: 50%;
    margin-top: -1.5px;
}

.hamburger-inner::before {
    content: '';
    top: -8px;
}

.hamburger-inner::after {
    content: '';
    top: 8px;
}

.hamburger.is-active .hamburger-inner {
    transform: rotate(45deg);
}

.hamburger.is-active .hamburger-inner::before {
    opacity: 0;
}

.hamburger.is-active .hamburger-inner::after {
    top: 0;
    transform: rotate(-90deg);
}

/* Mobile menu overlay with gradient fade */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: linear-gradient(to bottom,
            rgb(4, 3, 19) 0%,
            rgba(4, 3, 19, 1) 20%,
            rgba(4, 3, 19, 0.9) 50%,
            rgba(4, 3, 19, 0.8) 70%,
            rgba(4, 3, 19, 0.5) 100%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding-bottom: 20vh;
}

.mobile-menu.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu.closing {
    opacity: 0;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.mobile-nav .page-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: color 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Cascade animation delays */
.mobile-menu.active .mobile-nav .page-btn:nth-child(1) {
    animation: fadeInUp 0.4s ease 0.1s forwards;
}

.mobile-menu.active .mobile-nav .page-btn:nth-child(2) {
    animation: fadeInUp 0.4s ease 0.2s forwards;
}

.mobile-menu.active .mobile-nav .page-btn:nth-child(3) {
    animation: fadeInUp 0.4s ease 0.3s forwards;
}

.mobile-menu.active .mobile-nav .page-btn:nth-child(4) {
    animation: fadeInUp 0.4s ease 0.4s forwards;
}

.mobile-menu.active .mobile-nav .page-btn:nth-child(5) {
    animation: fadeInUp 0.4s ease 0.5s forwards;
}

/* Fade out animation */
.mobile-menu.closing .mobile-nav .page-btn {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

.mobile-nav .page-btn:hover,
.mobile-nav .page-btn.active {
    color: var(--accent);
}

/* Responsive behavior */
@media (max-width: 1024px) {
    .header-buttons {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .header-controls .form-select {
        display: none;
    }
}