/* ============================================================
   ZLS Laboratory V3 — Base Reset & Globals
   ============================================================ */

/* ═══ ORGANIC GLASSMORPHISM (Lava Lamp Blobs) ═══ */
.zls-organic-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -2;
    overflow: hidden;
    background: rgb(51, 0, 0); /* Base is now Burnt Red */
}

.zls-organic-blob {
    position: absolute;
    filter: blur(40px); /* Reduced blur slightly to keep color definition */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    opacity: 0.9;
}

.blob-1 {
    width: 60vmax; height: 60vmax;
    background-color: rgba(0, 0, 0, 0.9);
    top: -10%; left: -10%;
    animation: blobWalk1 30s ease-in-out infinite alternate;
}

.blob-2 {
    width: 55vmax; height: 55vmax;
    background-color: rgba(0, 0, 0, 0.95);
    bottom: -10%; right: -10%;
    animation: blobWalk2 38s ease-in-out infinite alternate-reverse;
}

.blob-3 {
    width: 45vmax; height: 45vmax;
    background-color: rgba(0, 0, 0, 0.85);
    top: 40%; left: 30%;
    animation: blobWalk3 34s ease-in-out infinite alternate;
}

@keyframes blobWalk1 {
    0%   { 
        transform: translate(0, 0) scale(1) rotate(0deg); 
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; 
        background-color: rgba(0, 0, 0, 0.9);
    }
    33%  {
        background-color: rgba(10, 0, 0, 0.8);
    }
    50%  { 
        transform: translate(30vw, 20vh) scale(1.2) rotate(90deg); 
        border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; 
        background-color: rgba(0, 0, 0, 0.95);
    }
    80%  {
        background-color: rgba(5, 0, 0, 0.75);
    }
    100% { 
        transform: translate(-10vw, 30vh) scale(0.9) rotate(180deg); 
        border-radius: 30% 70% 50% 50% / 60% 40% 70% 30%; 
        background-color: rgba(0, 0, 0, 0.9);
    }
}

@keyframes blobWalk2 {
    0%   { 
        transform: translate(0, 0) scale(1) rotate(0deg); 
        border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%; 
        background-color: rgba(10, 0, 0, 0.8);
    }
    30%  {
        background-color: rgba(0, 0, 0, 0.95);
    }
    50%  { 
        transform: translate(-40vw, -20vh) scale(1.1) rotate(120deg); 
        border-radius: 30% 70% 50% 50% / 40% 60% 70% 30%; 
        background-color: rgba(0, 0, 0, 0.9);
    }
    70%  {
        background-color: rgba(5, 0, 0, 0.75);
    }
    100% { 
        transform: translate(-20vw, 40vh) scale(1.3) rotate(240deg); 
        border-radius: 70% 30% 60% 40% / 50% 50% 40% 60%; 
        background-color: rgba(0, 0, 0, 0.95);
    }
}

@keyframes blobWalk3 {
    0%   { 
        transform: translate(0, 0) scale(1) rotate(0deg); 
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
        background-color: rgba(0, 0, 0, 0.85);
    }
    25%  {
        background-color: rgba(15, 0, 0, 0.75);
    }
    50%  { 
        transform: translate(25vw, -35vh) scale(0.8) rotate(180deg); 
        border-radius: 50% 50% 30% 70% / 70% 50% 50% 30%; 
        background-color: rgba(0, 0, 0, 0.9);
    }
    85%  {
        background-color: rgba(0, 0, 0, 0.95);
    }
    100% { 
        transform: translate(-30vw, -10vh) scale(1.1) rotate(360deg); 
        border-radius: 60% 40% 40% 60% / 40% 60% 60% 40%; 
        background-color: rgba(5, 0, 0, 0.75);
    }
}

/* Biosecurity Glassmorphism Layer */
.zls-glass-containment {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    pointer-events: none;
    background: rgba(10, 5, 5, 0.1); 
    /* Extreme blur to practically liquefy the blobs behind it */
    backdrop-filter: blur(80px) saturate(200%) contrast(1.1);
    -webkit-backdrop-filter: blur(80px) saturate(200%) contrast(1.1);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100vh;                   /* fallback: ancient */
    height: -webkit-fill-available;  /* fallback: older iOS */
    height: 100svh;                  /* ← BEST: smallest viewport (bars visible) */
    overflow: hidden;                /* ← ZERO page scroll */
    overflow-x: hidden;              /* ← prevent horizontal scroll on mobile */
    max-width: 100vw;                /* ← hard clamp */
    font-family: var(--ff-cli);
    font-size: 16px;
    color: var(--clr-white);
    background-color: var(--bg-void);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;  /* ← prevent iOS text zoom */
    text-rendering: optimizeLegibility;
}

/* ── App-mode: no text selection, drag = scroll ── */
body {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

/* Allow selection in form fields */
input, textarea, [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

/* Grab cursor on scrollable areas */
.zls-panel__body,
.zls-gallery {
    cursor: grab;
}

.zls-panel__body.is-grabbing,
.zls-gallery.is-grabbing {
    cursor: grabbing;
}

/* Prevent image/link dragging */
img, a, svg, canvas {
    -webkit-user-drag: none;
    user-drag: none;
}

::selection {
    background-color: var(--clr-red);
    color: white;
}

img, svg, canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

ul, ol {
    list-style: none;
}

/* ── Scrollbar styling (for inner scrollable areas) ── */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--clr-gray-400);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--clr-gray-300);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}