/* ============================================
   FAMILY BILLIARD & COFFEE - COMPLETE CSS
   ============================================ */

/* ========== RESET ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: #0B0F19;
    color: #fff;
    overflow-x: hidden;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4B5563; }

/* ========== UTILS ========== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[x-cloak] { display: none !important; }

/* ========== CARDS ========== */
.admin-card {
    background: #111827;
    border: 1px solid #1F2937;
    border-radius: 16px;
    transition: all 0.3s ease;
}
.admin-card:hover {
    border-color: #374151;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.glass-panel {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========== HEADER ========== */
.navbar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(11, 15, 25, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ========== SPLIT LAYOUT (HOME) ========== */
.split-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #05070c;
}

.side-panel {
    position: absolute;
    top: 0;
    height: 100%;
    cursor: pointer;
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#billiard-panel {
    left: 0;
    width: 100%;
    clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
    z-index: 10;
}

#coffee-panel {
    right: 0;
    width: 100%;
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
    z-index: 5;
}

/* ========== ANIMATIONS ========== */

/* Hero */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Hero elements */
.animate-hero h1 { animation: fadeInDown 0.8s ease-out; }
.animate-hero p { animation: fadeInUp 0.8s ease-out 0.15s both; }
.animate-hero .badge { animation: scaleIn 0.6s ease-out 0.3s both; }

/* Home panels */
.animate-billiard { animation: slideInLeft 1s ease-out; }
.animate-coffee { animation: slideInRight 1s ease-out 0.1s both; }
.animate-mobile-billiard { animation: slideInLeft 0.8s ease-out; }
.animate-mobile-coffee { animation: slideInRight 0.8s ease-out 0.1s both; }

/* Cards scroll */
.card-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-out;
}
.card-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade { animation: fadeIn 0.6s ease-out; }

/* ========== RESPONSIVE ========== */

/* Mobile */
@media (max-width: 768px) {
    #billiard-panel, #coffee-panel {
        position: relative !important;
        clip-path: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 45vh;
    }
    .split-wrapper { display: none !important; }
    .mobile-stack { display: flex !important; flex-direction: column; }
}

/* Mobile Landscape */
@media (max-width: 1023px) and (orientation: landscape) {
    .split-wrapper { display: none !important; }
    .mobile-stack { flex-direction: row !important; }
    .mobile-stack > * { width: 50% !important; min-height: 100vh !important; }
    .mobile-stack h3 { font-size: 1rem !important; }
    .mobile-stack span { font-size: 0.6rem !important; }
    .mobile-stack .btn { padding: 6px 12px !important; font-size: 0.6rem !important; }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    #billiard-panel h1, #coffee-panel h1 { font-size: 3rem !important; }
}

/* Desktop */
@media (min-width: 1025px) {
    .split-wrapper { display: block !important; }
    .mobile-stack { display: none !important; }
        aside.fixed.top-16.left-0 {
        display: block !important;
        transform: translateX(0) !important;
    }
}