/* Extracted from index.html inline <style> - preserve order and custom rules */
html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background-color: #FDFBF7;
    color: #121212;
    overflow-x: hidden;
}

/* ===== HAMBURGER SAFE ZONE ===== */
#menu-btn {
    max-width: 100%;
    overflow: hidden;
}

/* Line animation tinh tế */
#menu-btn span {
    transition: width 0.4s ease, transform 0.4s ease;
}

/* Tap feedback nhẹ */
#menu-btn:active span:nth-child(1) {
    transform: translateX(-2px);
}

#menu-btn:active span:nth-child(3) {
    transform: translateX(2px);
}


/* Hide scrollbar for cleaner UI */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #FDFBF7;
}

::-webkit-scrollbar-thumb {
    background: #D1D1D1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #121212;
}

/* Custom Keyframes */
@keyframes spin-slow {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 10s linear infinite;
}

@keyframes drop {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Smooth hero background parallax - prefer transform on the image for GPU acceleration */
#hero-bg,
#hero-bg img {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.animate-drop {
    animation: drop 2s infinite;
}

/* Hover Title Effect */
.hover-title {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
    display: inline-block;
}

.hover-title:hover {
    color: #9B9B9B;
    transform: translateX(10px);
}

.hover-title:hover span.text-lux-accent {
    color: #121212;
}

/* Logo color control */
#navbar .logo-filter {
    filter: brightness(0) invert(1);
    transition: filter 0.5s ease-in-out;
}

#navbar.bg-lux-white\/90 .logo-filter,
#navbar.text-lux-black .logo-filter {
    filter: none;
}

.name-wrap {
    overflow: hidden;
    display: inline-block;
}

.name-left,
.name-right {
    display: inline-block;
    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s ease;
}

.name-left {
    transform: translateX(-120px);
    opacity: 0;
    transition-delay: 0.12s;
}

.name-right {
    transform: translateX(120px);
    opacity: 0;
    transition-delay: 0.12s;
}

.name-wrap.is-joined .name-left,
.name-wrap.is-joined .name-right {
    transform: translateX(0);
    opacity: 1;
}

/* Mobile: always show names (no split) */
@media (max-width: 1023px) {
    .name-left,
    .name-right {
        transform: translateX(0) !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

.hero-scroll {
    position: relative;
}

.scroll-line {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.35);
}

.mouse-icon {
    width: 20px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    position: relative;
}

.mouse-wheel {
    width: 2px;
    height: 6px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 1px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    animation: mouse-scroll 1.6s ease-in-out infinite;
}

@keyframes mouse-scroll {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

    30% {
        opacity: 1;
    }

    60% {
        opacity: 1;
        transform: translate(-50%, 8px);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}

/* End of extracted styles */