/* zedlabs-editorial visual identity. */


.theme-zedlabs-editorial .bg-light-dark,
.theme-zedlabs-editorial .bg-white-black {
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(circle at 50% 8%, rgba(148, 163, 184, .12), transparent 22rem);
    background-size: 88px 88px, 88px 88px, auto;
}


.theme-zedlabs-editorial .font-esthetic,
.theme-zedlabs-editorial .text-theme-auto {
    color: #e2e8f0 !important;
}


.editorial-rule {
    position: absolute;
    top: 9vh;
    bottom: 9vh;
    width: 1px;
    background: linear-gradient(transparent, rgba(226, 232, 240, .28), transparent);
}


.editorial-rule.left { left: max(18px, calc(50vw - 320px)); }

.editorial-rule.right { right: max(18px, calc(50vw - 320px)); }


/* 13. Editorial Slate (ZEDLABS) */
.theme-zedlabs-editorial { font-family: "Outfit", sans-serif; }

.theme-zedlabs-editorial h1, .theme-zedlabs-editorial h2, .theme-zedlabs-editorial h3, .theme-zedlabs-editorial h4, .theme-zedlabs-editorial h5, .theme-zedlabs-editorial h6 { font-family: "Cormorant Garamond", serif; }

.theme-zedlabs-editorial .font-esthetic { font-family: "Sacramento", cursive; }


.theme-zedlabs-editorial {
    --bs-light: #020617; /* Slate 950 - Main BG */
    --bs-white: #0f172a; /* Slate 900 - Surface */
    --bs-dark: #fafaf9;  /* Stone 50 - Text */
    --bs-gray-100: #1e293b; /* Slate 800 - Borders */
    color: var(--bs-dark);
}


.theme-zedlabs-editorial .grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .18) 0 1px, transparent 1px),
        radial-gradient(circle at 76% 12%, rgba(255, 255, 255, .12) 0 1px, transparent 1px),
        radial-gradient(circle at 42% 72%, rgba(255, 255, 255, .1) 0 1px, transparent 1px),
        radial-gradient(circle at 90% 64%, rgba(255, 255, 255, .14) 0 1px, transparent 1px);
    background-size: 34px 34px, 46px 46px, 58px 58px, 71px 71px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 9999;
}


.theme-zedlabs-editorial .bg-overlay-auto,
.theme-zedlabs-editorial .panel,
.theme-zedlabs-editorial .modal-content {
    background: rgba(15, 23, 42, 0.7) !important; /* Slate 900 */
    backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    color: var(--bs-dark) !important;
}


.theme-zedlabs-editorial .btn-outline-auto,
.theme-zedlabs-editorial .btn-primary {
    border-radius: 2px !important;
    letter-spacing: 0.1em;
}


.theme-zedlabs-editorial .petals-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1000;
    overflow: hidden;
}


.theme-zedlabs-editorial .petal {
    position: absolute;
    width: 15px; height: 15px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0.3));
    border-radius: 50% 0 50% 50%;
    animation: floatPetal 15s linear infinite;
    top: -20px;
}

.theme-zedlabs-editorial .petal.petal-1 { left: 10%; animation-duration: 12s; animation-delay: 0s; }

.theme-zedlabs-editorial .petal.petal-2 { left: 30%; animation-duration: 15s; animation-delay: 2s; }

.theme-zedlabs-editorial .petal.petal-3 { left: 50%; animation-duration: 18s; animation-delay: 4s; }

.theme-zedlabs-editorial .petal.petal-4 { left: 70%; animation-duration: 14s; animation-delay: 1s; }

.theme-zedlabs-editorial .petal.petal-5 { left: 90%; animation-duration: 16s; animation-delay: 3s; }

.theme-zedlabs-editorial .petal.petal-6 { left: 20%; animation-duration: 13s; animation-delay: 5s; }

.theme-zedlabs-editorial .petal.petal-7 { left: 40%; animation-duration: 17s; animation-delay: 2s; }

.theme-zedlabs-editorial .petal.petal-8 { left: 60%; animation-duration: 11s; animation-delay: 4s; }


body.theme-zedlabs-editorial #theme-ornaments::before {
    opacity: .3;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, .1) 49%, transparent 50%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 26px);
    background-size: 180px 180px, 100% 52px;
    animation: editorialLinesMove 26s linear infinite;
}


body.theme-zedlabs-editorial #theme-ornaments::after {
    opacity: .2;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(226, 232, 240, .14) 48%, transparent 54% 100%);
    background-size: 380px 100%;
    animation: editorialSpotlightSweep 13s ease-in-out infinite;
}