/*
Theme Name: BPEX Theme
Description: Custom WordPress theme for BPEX property exhibition.
Version: 1.0
Author: Senior UI/UX Designer
*/

/* Lenis smooth scrolling rules */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    background-color: #fcfcfc;
    color: #1a1a1a;
}

/* Refined Glassmorphism for Elite Feel */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

.glass-card-dark {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #e56173;
    border-radius: 4px;
}

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

/* Hide scrollbars */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Dropdown Menu Styles */
.dropdown-menu {
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    pointer-events: none;
}

.dropdown-menu.show {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
}

/* Custom Modal Styles */
.modal-overlay {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

.modal-container {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.modal-container.show {
    transform: scale(1);
    opacity: 1;
}

/* Smooth Swiper Transition override */
.swiper-slide {
    transition-property: opacity, transform !important;
}

/* Premium Button Shimmer Effect */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 45%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 55%);
    transform: translate(-100%, -100%);
    transition: transform 0.8s ease;
}

.btn-shimmer:hover::after {
    transform: translate(100%, 100%);
}

/* Custom Swiper Styles */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 1;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    width: 36px;
    border-radius: 6px;
    background: #e56173;
    /* brand-400 */
    border-color: transparent;
}

.swiper-button-prev,
.swiper-button-next {
    color: #111827 !important;
}


/* ===================================================
   PAGE: index
   =================================================== */

/* Linear continuous scroll for marquee */
        .logo-marquee-swiper .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .logo-marquee-swiper .swiper-slide {
            width: 150px;
        }

        @media(min-width: 768px) {
            .logo-marquee-swiper .swiper-slide {
                width: 180px;
            }
        }


/* ===================================================
   PAGE: kenali
   =================================================== */

/* Linear continuous scroll for marquee */
        .logo-marquee-swiper .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .logo-marquee-swiper .swiper-slide {
            width: 150px;
            /* Force width for consistent marquee */
        }

        @media(min-width: 768px) {
            .logo-marquee-swiper .swiper-slide {
                width: 180px;
            }
        }


/* ===================================================
   PAGE: acara
   =================================================== */

/* Linear continuous scroll for marquee */
        .logo-marquee-swiper .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .logo-marquee-swiper .swiper-slide {
            width: 150px;
        }

        @media(min-width: 768px) {
            .logo-marquee-swiper .swiper-slide {
                width: 180px;
            }
        }


/* ===================================================
   PAGE: artikel
   =================================================== */

.logo-marquee-swiper .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .logo-marquee-swiper .swiper-slide {
            width: 150px;
        }

        @media(min-width: 768px) {
            .logo-marquee-swiper .swiper-slide {
                width: 180px;
            }
        }


/* ===================================================
   PAGE: daftar
   =================================================== */

/* Linear continuous scroll for marquee */
        .logo-marquee-swiper .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .logo-marquee-swiper .swiper-slide {
            width: 150px;
        }

        @media(min-width: 768px) {
            .logo-marquee-swiper .swiper-slide {
                width: 180px;
            }
        }


/* ===================================================
   PAGE: hubungi
   =================================================== */

/* Linear continuous scroll for marquee */
        .logo-marquee-swiper .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .logo-marquee-swiper .swiper-slide {
            width: 150px;
        }

        @media(min-width: 768px) {
            .logo-marquee-swiper .swiper-slide {
                width: 180px;
            }
        }


/* ===================================================
   PAGE: nov26
   =================================================== */

/* Page-specific overrides for Nov 2026 identity */
        :root {
            --nov-primary: #B3001B;
            --nov-secondary: #0a192f;
            --nov-bg: #f8f9ff;
        }

        .nov-hero-bg {
            background: radial-gradient(ellipse 120% 80% at 60% 10%, rgba(10, 25, 47, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse 80% 60% at 10% 80%, rgba(179, 0, 27, 0.05) 0%, transparent 60%),
                #f8f9ff;
        }

        .nov-gradient-text {
            background: linear-gradient(135deg, #d7334a 0%, #B3001B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .glass-card-night {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(10, 25, 47, 0.12);
        }

        .nov-divider {
            background: linear-gradient(90deg, transparent, rgba(179, 0, 27, 0.4), transparent);
            height: 1px;
        }

        /* Floating counter animation */
        @keyframes float-gentle {

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

            50% {
                transform: translateY(-8px);
            }
        }

        .float-anim {
            animation: float-gentle 5s ease-in-out infinite;
        }

        .float-anim-slow {
            animation: float-gentle 7s ease-in-out infinite;
            animation-delay: 1s;
        }

        /* Shine sweep on CTA button */
        .btn-night {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #d7334a, #B3001B);
            color: #fff;
            transition: all 0.3s ease;
            box-shadow: 0 10px 35px -10px rgba(179, 0, 27, 0.55);
        }

        .btn-night::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 60%;
            height: 200%;
            background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: skewX(-20deg);
            transition: left 0.6s ease;
        }

        .btn-night:hover::after {
            left: 120%;
        }

        .btn-night:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 40px -10px rgba(179, 0, 27, 0.65);
        }

        /* Benefit card hover */
        .benefit-card {
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            border-left: 3px solid transparent;
        }

        .benefit-card:hover {
            border-left-color: #B3001B;
            transform: translateX(4px);
        }

        /* Dotted connecting line for timeline steps */
        .step-connector {
            position: absolute;
            left: 28px;
            top: 56px;
            bottom: -24px;
            width: 2px;
            background: repeating-linear-gradient(to bottom, #d9e2ec 0px, #d9e2ec 6px, transparent 6px, transparent 12px);
        }

        /* Custom form focus ring */
        .nov-input:focus {
            box-shadow: 0 0 0 3px rgba(179, 0, 27, 0.2);
            border-color: #B3001B;
        }

        .logo-marquee-swiper .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .logo-marquee-swiper .swiper-slide {
            width: 150px;
        }

        @media(min-width: 768px) {
            .logo-marquee-swiper .swiper-slide {
                width: 180px;
            }
        }


/* ===================================================
   PAGE: sept26
   =================================================== */

/* Linear continuous scroll for marquee */
        .logo-marquee-swiper .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .logo-marquee-swiper .swiper-slide {
            width: 150px;
        }

        @media(min-width: 768px) {
            .logo-marquee-swiper .swiper-slide {
                width: 180px;
            }
        }