/* ============================================================
   KumsalPro Demo Base — app.css
   CSS Variables are injected inline per-demo in pages/index.htm
   ============================================================ */

/* === Base Reset & Typography === */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    background-color: var(--brand-bg, #0B0C0E);
    color: var(--brand-text, #E6E8EC);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    cursor: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    line-height: 1.15;
}

/* === Custom Cursor === */
#custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--brand-primary, #C5A880);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    background-color: rgba(255, 255, 255, 0.8);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
    will-change: transform;
}

/* === SVG Noise Overlay === */
.noise-filter {
    position: fixed;
    inset: 0;
    z-index: 9990;
    opacity: 0.022;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* === Glassmorphism Utility === */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* === Custom Scrollbar === */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--brand-bg, #0B0C0E);
}
::-webkit-scrollbar-thumb {
    background: var(--brand-primary, #C5A880);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-accent, #DFBA73);
}

/* === Selection Color === */
::selection {
    background-color: var(--brand-primary, #C5A880);
    color: #000;
}

/* === Swiper Overrides === */
.hero-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === GSAP Animation Base === */
.gsap-fade-up {
    opacity: 0;
    transform: translateY(40px);
}

/* === Swiper Slide Active Text Transition Engine === */
/* Initial states */
.swiper[data-swiper-animation="fade-up"] .swiper-slide h1,
.swiper[data-swiper-animation="fade-up"] .swiper-slide h2,
.swiper[data-swiper-animation="fade-up"] .swiper-slide h3,
.swiper[data-swiper-animation="fade-up"] .swiper-slide h4,
.swiper[data-swiper-animation="fade-up"] .swiper-slide p,
.swiper[data-swiper-animation="fade-up"] .swiper-slide a,
.swiper[data-swiper-animation="fade-up"] .swiper-slide button,
.swiper[data-swiper-animation="fade-up"] .swiper-slide .btn {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.swiper[data-swiper-animation="slide-left"] .swiper-slide h1,
.swiper[data-swiper-animation="slide-left"] .swiper-slide h2,
.swiper[data-swiper-animation="slide-left"] .swiper-slide h3,
.swiper[data-swiper-animation="slide-left"] .swiper-slide h4,
.swiper[data-swiper-animation="slide-left"] .swiper-slide p,
.swiper[data-swiper-animation="slide-left"] .swiper-slide a,
.swiper[data-swiper-animation="slide-left"] .swiper-slide button,
.swiper[data-swiper-animation="slide-left"] .swiper-slide .btn {
    opacity: 0;
    transform: translateX(45px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.swiper[data-swiper-animation="zoom-in"] .swiper-slide h1,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide h2,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide h3,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide h4,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide p,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide a,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide button,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide .btn {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Stagger delays */
.swiper[data-swiper-animation] .swiper-slide p {
    transition-delay: 0.12s;
}
.swiper[data-swiper-animation] .swiper-slide a,
.swiper[data-swiper-animation] .swiper-slide button,
.swiper[data-swiper-animation] .swiper-slide .btn {
    transition-delay: 0.22s;
}

/* Active states */
.swiper[data-swiper-animation="fade-up"] .swiper-slide-active h1,
.swiper[data-swiper-animation="fade-up"] .swiper-slide-active h2,
.swiper[data-swiper-animation="fade-up"] .swiper-slide-active h3,
.swiper[data-swiper-animation="fade-up"] .swiper-slide-active h4,
.swiper[data-swiper-animation="fade-up"] .swiper-slide-active p,
.swiper[data-swiper-animation="fade-up"] .swiper-slide-active a,
.swiper[data-swiper-animation="fade-up"] .swiper-slide-active button,
.swiper[data-swiper-animation="fade-up"] .swiper-slide-active .btn,

.swiper[data-swiper-animation="slide-left"] .swiper-slide-active h1,
.swiper[data-swiper-animation="slide-left"] .swiper-slide-active h2,
.swiper[data-swiper-animation="slide-left"] .swiper-slide-active h3,
.swiper[data-swiper-animation="slide-left"] .swiper-slide-active h4,
.swiper[data-swiper-animation="slide-left"] .swiper-slide-active p,
.swiper[data-swiper-animation="slide-left"] .swiper-slide-active a,
.swiper[data-swiper-animation="slide-left"] .swiper-slide-active button,
.swiper[data-swiper-animation="slide-left"] .swiper-slide-active .btn,

.swiper[data-swiper-animation="zoom-in"] .swiper-slide-active h1,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide-active h2,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide-active h3,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide-active h4,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide-active p,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide-active a,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide-active button,
.swiper[data-swiper-animation="zoom-in"] .swiper-slide-active .btn {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}