/* ==========================================================
   PIXTREND PAGE — SELF-CONTAINED STYLESHEET
   Module: /pixtrend/
   Delete this folder to remove all PixTrend page resources.
   ========================================================== */

/* ── 1. BASE ── */
body { background-color: #050505; color: #ffffff; overflow-x: clip; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ── 2. GLASS NAV & CARDS ── */
.glass-nav {
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-card {
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease-out;
}
.glass-card:hover {
    background: rgba(26, 26, 26, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* ── 3. NAV LINK UNDERLINE ── */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 1px;
    bottom: 0; left: 50%; background-color: #fff;
    transition: all 0.3s ease; transform: translateX(-50%);
}
.nav-link:hover::after { width: 100%; }

/* ── 4. SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* ── 5. PAGE TRANSITION ── */
#page-transition {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #050505; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    pointer-events: none; opacity: 1; transition: opacity 0.5s ease-in-out;
}
#page-transition.fade-out { opacity: 0; }
#page-transition.fade-in  { opacity: 1; pointer-events: all; }
#page-transition .brand-text {
    font-size: 2.5rem; font-weight: 700; letter-spacing: 0.1em;
    color: #ffffff; opacity: 0; transform: translateY(10px); transition: all 0.5s ease-out;
}
#page-transition .brand-text.show { opacity: 1; transform: translateY(0); }

/* ── 6. ANIMATIONS ── */
@keyframes blob {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(30px, -50px) scale(1.1); }
    66%  { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes fadeIn {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── 7. BEFORE/AFTER MAIN SLIDER ── */
.ba-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 520px;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
    background: #0a0a0a;
    cursor: ew-resize;
}
.ba-base-img, .ba-clip-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 28%;
    pointer-events: none; user-select: none;
}
.ba-clip-layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    clip-path: inset(0 0 0 50%); z-index: 3;
}
.ba-divider {
    position: absolute; top: 0; left: 50%; width: 2px; height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
    transform: translateX(-50%); z-index: 5; pointer-events: none;
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}
.ba-slider-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; z-index: 10; cursor: ew-resize; margin: 0;
}
.ba-handle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 8; pointer-events: none;
}
.handle-pill {
    width: 52px; height: 52px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.5);
}
.ba-label {
    position: absolute; bottom: 18px; z-index: 6;
    padding: 5px 16px; border-radius: 60px; font-weight: 600; font-size: 0.7rem;
    letter-spacing: 0.1em; background: rgba(0,0,0,0.6); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1); pointer-events: none; text-transform: uppercase;
}
.ba-label-left  { left: 20px; color: #999; }
.ba-label-right { right: 20px; color: #fff; }

/* ── 8. MINI BEFORE/AFTER SLIDERS (feature cards) ── */
.mini-ba {
    position: relative; width: 100%; height: 240px;
    border-radius: 0.75rem; overflow: hidden; background: #0a0a0a;
    margin-bottom: 1.25rem; border: 1px solid rgba(255,255,255,0.08);
    cursor: ew-resize;
}
.mini-ba-base, .mini-ba-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    pointer-events: none; user-select: none;
}
.mini-ba-clip {
    position: absolute; inset: 0; width: 100%; height: 100%;
    clip-path: inset(0 0 0 50%); z-index: 2;
}
.mini-ba-div {
    position: absolute; top: 0; left: 50%; width: 2px; height: 100%;
    background: #fff; transform: translateX(-50%); z-index: 4;
    pointer-events: none; box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.mini-ba-slider {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: ew-resize; z-index: 8; margin: 0;
}
.mini-ba-handle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
}
.mini-handle-pill {
    width: 36px; height: 36px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.5);
}
.mini-lbl {
    position: absolute; bottom: 10px; z-index: 5; pointer-events: none;
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px); padding: 3px 10px;
    border-radius: 60px; border: 1px solid rgba(255,255,255,0.08);
}
.mini-lbl-b { left: 10px; color: #999; }
.mini-lbl-a { right: 10px; color: #fff; }

/* ── 9. RESPONSIVE ── */
@media (max-width: 640px) {
    .ba-wrapper { height: 340px; border-radius: 1.5rem; }
    .handle-pill { width: 44px; height: 44px; }
    .ba-label { font-size: 0.6rem; padding: 4px 12px; }
    .mini-ba { height: 200px; }
}
@media (hover: none) and (pointer: coarse) {
    .ba-slider-input, .mini-ba-slider { opacity: 0.01; }
}