/* =========================================================
   Sanctuarie - Focus & Lenses (style.focus.css)
   Handles Deep Focus Mode, Contextual Visibility, and Top Triggers
   ✨ ASCENDED: High-Vibrancy Hardcoded Filter Colors
   ✨ LITE-MODE REPAVED: Integrated Day/Night binary rhythm logic using root variable mapping
   ✨ HONEYCOMB MENU: Staggered dropdown UI with CSS-handoff float loops
   ✨ GPU ATMOSPHERICS: Translate3D accelerated background patterns
   ========================================================= */


/* =========================================================
   1. THE TRIGGER CLUSTER (Top Navigation)
   ========================================================= */

/* Main Focus Orb */
#focusModeTrigger {
    position: fixed; 
    top: -40px; 
    left: 50%;
    transform: translateX(-50%);
    width: 80px;  
    height: 80px; 
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 830; 
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(255,255,255,0.6);
    font-size: 26px;
}

#focusModeTrigger::before {
    content: '👁'; 
    display: block;
    transform: translateY(14px); 
    transition: all 0.3s ease;
}

#focusModeTrigger:hover {
    background: rgba(255,255,255,0.2);
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
    color: #ffffff;
}

#focusModeTrigger::after {
    content:'';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    animation: pulseIdle 4s infinite;
    pointer-events: none;
}

/* Tucked Macro Tab (Rounded Square) */
#macroFilterTrigger {
    position: fixed; 
    top: -20px; 
    right: calc(50% + 35px); 
    height: 48px;
    padding: 0 42px 0 16px; 
    border-radius: 14px; 
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.15); 
    z-index: 825; 
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); 
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5); 
    font-family: 'Noto Sans JP', sans-serif;
    user-select: none;
}

#macroFilterTrigger:hover { 
    background: rgba(255,255,255,0.1); 
    box-shadow: 0 0 15px rgba(255,255,255,0.2); 
    color: #fff; 
    transform: translateY(4px); 
}

.macro-content-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(12px); 
    pointer-events: none;
}

.macro-icon { font-size: 16px; }
.macro-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }

/* ✨ Macro Filter Flavors - Vibrant Hardcoded Colors */
#macroFilterTrigger[data-state="all"] { 
    background: rgba(255, 255, 255, 0.03); 
    border-color: rgba(255, 255, 255, 0.15); 
    color: rgba(255, 255, 255, 0.5); 
}

#macroFilterTrigger[data-state="creative"] { 
    background: rgba(110, 60, 255, 0.25); 
    border-color: rgba(110, 60, 255, 0.8); 
    box-shadow: 0 0 40px rgba(110, 60, 255, 0.7), inset 0 0 15px rgba(110, 60, 255, 0.5); 
    color: rgb(130, 100, 255); 
    text-shadow: 0 0 10px rgba(110, 60, 255, 0.8);
}

#macroFilterTrigger[data-state="life"] { 
    background: rgba(255, 40, 100, 0.25); 
    border-color: rgba(255, 40, 100, 0.8); 
    box-shadow: 0 0 40px rgba(255, 40, 100, 0.7), inset 0 0 15px rgba(255, 40, 100, 0.5); 
    color: rgb(255, 100, 130); 
    text-shadow: 0 0 10px rgba(255, 40, 100, 0.8);
}

#macroFilterTrigger[data-state="work"] { 
    background: rgba(255, 255, 255, 0.25); 
    border-color: rgba(255, 255, 255, 0.8); 
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.5); 
    color: rgb(255, 255, 255); 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

#macroFilterTrigger[data-state="creative"]:hover, 
#macroFilterTrigger[data-state="life"]:hover, 
#macroFilterTrigger[data-state="work"]:hover {
    transform: translateY(4px) scale(1.02);
    color: #fff;
}


/* =========================================================
   2. MACRO FILTER DROPDOWN (Honeycomb Constellation)
   ========================================================= */

.ef-macro-dropdown {
    position: fixed;
    top: 45px; 
    right: calc(50% + 15px); 
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 90006; 
    pointer-events: none;
    perspective: 1000px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.ef-macro-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ef-macro-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: box-shadow 0.3s, background 0.3s, padding-left 0.3s, transform 0.3s, border-color 0.3s, color 0.3s;
    width: fit-content;
    align-self: flex-end; 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 10;
    will-change: transform, opacity;
    
    color: rgba(255, 255, 255, 0.85); 
    background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 85%, transparent); 
    border: 1px solid rgba(255, 255, 255, 0.25); 
}

/* Honeycomb Offset Pattern */
.ef-macro-dropdown-item:nth-child(1) { right: 0px; }
.ef-macro-dropdown-item:nth-child(2) { right: 45px; }
.ef-macro-dropdown-item:nth-child(3) { right: 15px; }
.ef-macro-dropdown-item:nth-child(4) { right: 65px; }
.ef-macro-dropdown-item:nth-child(5) { right: 5px; }
.ef-macro-dropdown-item:nth-child(6) { right: 50px; }
.ef-macro-dropdown-item:nth-child(7) { right: 25px; }
.ef-macro-dropdown-item:nth-child(8) { right: 75px; }

.ef-macro-dropdown-item.is-floating {
    animation: honeyCombFloat 3s ease-in-out infinite alternate;
}
.ef-macro-dropdown-item.is-floating:nth-child(even) { animation-delay: -1.5s; animation-duration: 3.5s; }
.ef-macro-dropdown-item.is-floating:nth-child(3n) { animation-delay: -0.7s; animation-duration: 4s; }

.ef-macro-dropdown-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

/* Persistent Colors & Hover Glows */
.ef-macro-dropdown-item[data-state="all"] { color: #aaa; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.ef-macro-dropdown-item[data-state="all"]:hover, .ef-macro-dropdown-item[data-state="all"].active-state { color: #fff; border-color: #fff; background: rgba(255,255,255,0.15); box-shadow: 0 0 15px rgba(255,255,255,0.3); padding-left: 24px; }

.ef-macro-dropdown-item[data-state="creative"] { color: rgb(130, 100, 255); border-color: rgba(130, 100, 255, 0.4); background: rgba(110, 60, 255, 0.08); }
.ef-macro-dropdown-item[data-state="creative"]:hover, .ef-macro-dropdown-item[data-state="creative"].active-state { border-color: rgb(130, 100, 255); background: rgba(110, 60, 255, 0.25); box-shadow: 0 0 20px rgba(110, 60, 255, 0.5); padding-left: 24px; }

.ef-macro-dropdown-item[data-state="life"] { color: rgb(255, 100, 130); border-color: rgba(255, 100, 130, 0.4); background: rgba(255, 40, 100, 0.08); }
.ef-macro-dropdown-item[data-state="life"]:hover, .ef-macro-dropdown-item[data-state="life"].active-state { border-color: rgb(255, 100, 130); background: rgba(255, 40, 100, 0.25); box-shadow: 0 0 20px rgba(255, 40, 100, 0.5); padding-left: 24px; }

.ef-macro-dropdown-item[data-state="work"] { color: #fff; border-color: rgba(255,255,255, 0.4); background: rgba(255,255,255, 0.08); }
.ef-macro-dropdown-item[data-state="work"]:hover, .ef-macro-dropdown-item[data-state="work"].active-state { border-color: #fff; background: rgba(255,255,255, 0.25); box-shadow: 0 0 20px rgba(255,255,255, 0.4); padding-left: 24px; }

.ef-macro-dropdown-item[data-state="off-the-clock"] { color: #ffaa55; border-color: rgba(255, 170, 85, 0.4); background: rgba(255, 170, 85, 0.08); }
.ef-macro-dropdown-item[data-state="off-the-clock"]:hover, .ef-macro-dropdown-item[data-state="off-the-clock"].active-state { border-color: #ffaa55; background: rgba(255, 170, 85, 0.25); box-shadow: 0 0 20px rgba(255, 170, 85, 0.5); padding-left: 24px; }

.ef-macro-dropdown-item[data-state="active"] { color: #88ffaa; border-color: rgba(136, 255, 170, 0.4); background: rgba(136, 255, 170, 0.08); }
.ef-macro-dropdown-item[data-state="active"]:hover, .ef-macro-dropdown-item[data-state="active"].active-state { border-color: #88ffaa; background: rgba(136, 255, 170, 0.25); box-shadow: 0 0 20px rgba(136, 255, 170, 0.5); padding-left: 24px; }

.ef-macro-dropdown-item[data-state="one-month"] { color: #55ddff; border-color: rgba(85, 221, 255, 0.4); background: rgba(85, 221, 255, 0.08); }
.ef-macro-dropdown-item[data-state="one-month"]:hover, .ef-macro-dropdown-item[data-state="one-month"].active-state { border-color: #55ddff; background: rgba(85, 221, 255, 0.25); box-shadow: 0 0 20px rgba(85, 221, 255, 0.5); padding-left: 24px; }

.ef-macro-dropdown-item[data-state="overdue"] { color: #ff5555; border-color: rgba(255, 85, 85, 0.4); background: rgba(255, 85, 85, 0.08); }
.ef-macro-dropdown-item[data-state="overdue"]:hover, .ef-macro-dropdown-item[data-state="overdue"].active-state { border-color: #ff5555; background: rgba(255, 85, 85, 0.25); box-shadow: 0 0 20px rgba(255, 85, 85, 0.5); padding-left: 24px; }

/* The Dimensional Ping */
.macro-ping-ring {
    position: fixed;
    border-radius: 50%;
    border: 2px solid #fff;
    pointer-events: none;
    z-index: 999999; 
    transform: translate(-50%, -50%) scale(0.1); 
    will-change: transform, opacity;
}


/* =========================================================
   3. LENS FILTERS & DEEP FOCUS MODE
   ========================================================= */

/* Lens Filters (Short Clicks) */
body[data-lens="projects"] #focusModeTrigger {
    background: rgba(85, 221, 255, 0.15); 
    border-color: rgba(85, 221, 255, 0.5);
    box-shadow: 0 0 20px rgba(85, 221, 255, 0.2);
    transform: translateX(-50%) scale(1.05);
    color: #55ddff;
}
body[data-lens="projects"] #focusModeTrigger::before { content: '◰'; }

body[data-lens="thoughts"] #focusModeTrigger {
    background: rgba(208, 136, 255, 0.15); 
    border-color: rgba(208, 136, 255, 0.5);
    box-shadow: 0 0 20px rgba(208, 136, 255, 0.2);
    transform: translateX(-50%) scale(1.05);
    color: #d088ff;
}
body[data-lens="thoughts"] #focusModeTrigger::before { content: '☁'; }

body[data-lens]:not(.focus-mode-active) .thought-orb.is-docked,
body[data-lens]:not(.focus-mode-active) .thought-orb.is-pinned-top,
body[data-lens]:not(.focus-mode-active) .spatial-card.is-maximized {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
}

body[data-lens="projects"]:not(.focus-mode-active) .thought-orb:not(.is-pinned-top):not(.is-docked) {
    opacity: 0.05 !important;
    pointer-events: none !important;
    filter: blur(4px) grayscale(1);
    transform: scale(0.8);
    transition: all 0.8s ease;
}
body[data-lens="projects"]:not(.focus-mode-active) .thought-orb:not(.is-pinned-top):not(.is-docked) * { pointer-events: none !important; }

body[data-lens="thoughts"]:not(.focus-mode-active) .spatial-card {
    opacity: 0.1 !important;
    pointer-events: none !important;
    filter: blur(8px);
    transition: all 0.8s ease;
}
body[data-lens="thoughts"]:not(.focus-mode-active) .spatial-card * { pointer-events: none !important; }

/* Deep Focus Mode (Long Press) */
body.focus-mode-active { 
    background-color: color-mix(in srgb, var(--bgBot) 80%, #000) !important; 
}

body.focus-mode-active #rhythm-reef,
body.focus-mode-active #timer-canopy {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease;
}

.focus-tunnel {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 820; opacity: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(255,255,255,0.8) 120%), repeating-radial-gradient(circle at center, transparent 0, transparent 40px, rgba(0,0,0,0.03) 41px, transparent 42px);
    transform: scale(1.5); transition: opacity 0.8s ease, transform 10s ease-out; mix-blend-mode: overlay;
}
.focus-ripple { position: fixed; transform: translate(-50%, -50%); border-radius: 50%; border: 50px solid rgba(255,170,85,0.8); z-index: 800; pointer-events: none; box-sizing: border-box; }

body.focus-mode-active .focus-tunnel { opacity: 1; transform: scale(1); transition: opacity 0.8s ease, transform 20s linear; }

body.focus-mode-active #focusModeTrigger {
    transform: translateX(-50%) scale(1.1) !important;
    color: #fff !important; 
}
body.focus-mode-active #focusModeTrigger::before { content: '✦' !important; }
body.focus-mode-active #focusModeTrigger::after { border-width: 2px; animation: pulseActive 1.5s infinite; }

/* Flavored Deep Focus Overrides */
body.focus-mode-active:not([data-focus-flavor="thoughts"]) #focusModeTrigger {
    background: #ffaa55 !important;
    border-color: #ffaa55 !important;
    box-shadow: 0 0 30px #ffaa55, inset 0 0 10px rgba(255,255,255,0.5) !important;
}
body.focus-mode-active:not([data-focus-flavor="thoughts"]) #focusModeTrigger::after { border-color: #ffaa55; }

body.focus-mode-active:not([data-focus-flavor="thoughts"]) .thought-orb {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
}
body.focus-mode-active:not([data-focus-flavor="thoughts"]) .thought-orb * { pointer-events: none !important; }

body.focus-mode-active:not([data-focus-flavor="thoughts"]) #pinnedSection {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}

body.focus-mode-active[data-focus-flavor="thoughts"] #focusModeTrigger {
    background: #d088ff !important;
    border-color: #d088ff !important;
    box-shadow: 0 0 30px #d088ff, inset 0 0 10px rgba(255,255,255,0.5) !important;
}
body.focus-mode-active[data-focus-flavor="thoughts"] #focusModeTrigger::after { border-color: #d088ff; }

body.focus-mode-active[data-focus-flavor="thoughts"] .spatial-card * {
    pointer-events: none !important;
}


/* =========================================================
   4. EXTENDED MACRO ATMOSPHERICS (Background FX)
   ========================================================= */

#macroBackgroundFx {
    position: fixed; 
    top: -10vh; left: -10vw; 
    width: 120vw; height: 120vh; 
    pointer-events: none; 
    opacity: 0;
    transition: opacity 2s ease-in-out; 
    mix-blend-mode: screen; 
    -webkit-mask-image: radial-gradient(circle at center, transparent 10%, black 60%);
    mask-image: radial-gradient(circle at center, transparent 10%, black 60%);
    will-change: transform, opacity;
    contain: strict;
}

#macroBackgroundFx.fx-work {
    opacity: 1;
    /* ✨ Architectural Drafting Motif: Crisp 1px static lines, dual-layered (100px main, 20px sub) */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px), 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: center center;
    animation: none; 
}

/* ✨ Delicate 2px Lines & Ambient Crawl animations */
#macroBackgroundFx.fx-life {
    opacity: 1;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 108px, rgba(255, 40, 100, 0.15) 108px, rgba(255, 40, 100, 0.15) 110px), 
                      repeating-linear-gradient(-45deg, transparent, transparent 108px, rgba(255, 40, 100, 0.15) 108px, rgba(255, 40, 100, 0.15) 110px);
    background-size: 110px 110px; 
    animation: macroTranslateDiagonal 60s linear infinite;
}

#macroBackgroundFx.fx-creative {
    opacity: 1;
    background-image: repeating-radial-gradient(circle at center, transparent, transparent 58px, rgba(130, 80, 255, 0.15) 58px, rgba(130, 80, 255, 0.15) 60px);
    animation: macroPulseCircles 40s ease-in-out infinite alternate;
}

#macroBackgroundFx.fx-off-the-clock {
    opacity: 1;
    background-image: repeating-radial-gradient(circle at center, transparent, transparent 98px, rgba(255, 170, 85, 0.12) 98px, rgba(255, 170, 85, 0.12) 100px);
    animation: macroPulseCircles 60s ease-in-out infinite alternate;
}

#macroBackgroundFx.fx-active {
    opacity: 1;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 38px, rgba(136, 255, 170, 0.1) 38px, rgba(136, 255, 170, 0.1) 40px);
    background-size: 40px 40px;
    animation: macroTranslateDiagonal 40s linear infinite;
}

#macroBackgroundFx.fx-one-month {
    opacity: 1;
    background-image: repeating-radial-gradient(ellipse at center, transparent, transparent 78px, rgba(85, 221, 255, 0.1) 78px, rgba(85, 221, 255, 0.1) 80px);
    animation: macroZoomTunnel 90s linear infinite;
}

#macroBackgroundFx.fx-overdue {
    opacity: 1;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(255, 85, 85, 0.08) 18px, rgba(255, 85, 85, 0.08) 20px);
    background-size: 20px 20px;
    animation: macroTranslateX 30s linear infinite;
}


/* =========================================================
   5. KEYFRAMES
   ========================================================= */

@keyframes pulseIdle {
    0% { transform: scale(0.9); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes pulseActive {
    0% { transform: scale(1); opacity: 0.8; border-width: 2px; }
    100% { transform: scale(2.5); opacity: 0; border-width: 0px; }
}

@keyframes honeyCombFloat {
    0% { transform: translate3d(0, 0, 0) rotate(0.5deg); }
    100% { transform: translate3d(0, -6px, 0) rotate(-0.5deg); }
}

@keyframes macroTranslateDiagonal { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-110px, -110px, 0); } 
}

@keyframes macroTranslateX { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-40px, 0, 0); } 
}

@keyframes macroPulseCircles { 
    0% { transform: scale(1) translateZ(0); } 
    100% { transform: scale(1.05) translateZ(0); } 
}

@keyframes macroZoomTunnel { 
    0% { transform: scale(1) translateZ(0); opacity: 0; } 
    20% { opacity: 1; } 
    80% { opacity: 1; } 
    100% { transform: scale(1.3) translateZ(0); opacity: 0; } 
}


/* =========================================================
   6. LITE MODE OVERRIDES
   ========================================================= */

/* Triggers */
body.lite-mode #focusModeTrigger {
    box-shadow: none !important;
    background: var(--lite-input-bg) !important;
    border: 1.5px solid var(--lite-line) !important;
    color: var(--lite-text) !important;
}

body.lite-mode #focusModeTrigger:hover,
body.lite-mode.focus-mode-active #focusModeTrigger {
    box-shadow: none !important;
    background: var(--lite-text) !important;
    color: var(--lite-shell-bg) !important;
}

body.lite-mode #macroFilterTrigger {
    background: var(--lite-fill) !important;
    border: 1.5px solid var(--lite-line) !important;
    box-shadow: none !important;
    color: var(--lite-text) !important;
}

body.lite-mode #macroFilterTrigger[data-state="creative"],
body.lite-mode #macroFilterTrigger[data-state="life"],
body.lite-mode #macroFilterTrigger[data-state="work"] { 
    border-color: var(--lite-line) !important; 
    box-shadow: none !important;
    background: var(--lite-input-bg) !important;
    color: var(--lite-text) !important; 
    text-shadow: none !important;
}

body.lite-mode #macroFilterTrigger[data-state="all"] { 
    border-color: var(--lite-line) !important; 
    color: var(--lite-text) !important; 
}

/* Visibility Blocks */
body.heart-mode-active #focusModeTrigger,
body.heart-mode-active #macroFilterTrigger {
   opacity: 0 !important; 
   pointer-events: none !important; 
   transition: opacity 0.4s ease;
}

/* Dropdown Constellation */
body.lite-mode .ef-macro-dropdown-item { 
    background: var(--lite-shell-bg, #050508) !important; 
    border: 1.5px solid var(--lite-line, #fff) !important;
    box-shadow: none !important;
    color: var(--lite-text, #fff) !important;
}

body.lite-mode .ef-macro-dropdown-item:hover,
body.lite-mode .ef-macro-dropdown-item.active-state {
    background: var(--lite-text, #fff) !important;
    color: var(--lite-shell-bg, #050508) !important;
}

/* =========================================================
   ✨ LITE MODE: BULLETPROOF ULTRA-SUBTLE FX LAYER
   ========================================================= */

/* Dropped core wrapper opacity scaled to 0.5 to restore legibility */
body.lite-mode #macroBackgroundFx {
    display: block !important;
    opacity: 0.5 !important; 
    mix-blend-mode: normal !important; 
    mask-image: none !important;
    -webkit-mask-image: none !important;
    z-index: -6 !important;
}

/* Compressed vector percentages inside backgrounds to keep tracks minimal and legibly thin */
body.lite-mode #macroBackgroundFx.fx-work {
    background-image: 
        linear-gradient(color-mix(in srgb, var(--lite-line) 7%, transparent) 1px, transparent 1px), 
        linear-gradient(90deg, color-mix(in srgb, var(--lite-line) 7%, transparent) 1px, transparent 1px), 
        linear-gradient(color-mix(in srgb, var(--lite-line) 2%, transparent) 1px, transparent 1px), 
        linear-gradient(90deg, color-mix(in srgb, var(--lite-line) 2%, transparent) 1px, transparent 1px) !important;
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px !important;
    animation: none !important;
}

body.lite-mode #macroBackgroundFx.fx-life {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 108px, color-mix(in srgb, var(--lite-line) 5%, transparent) 108px, color-mix(in srgb, var(--lite-line) 5%, transparent) 110px), 
                      repeating-linear-gradient(-45deg, transparent, transparent 108px, color-mix(in srgb, var(--lite-line) 5%, transparent) 108px, color-mix(in srgb, var(--lite-line) 5%, transparent) 110px) !important;
    animation: macroTranslateDiagonal 60s linear infinite !important;
}

body.lite-mode #macroBackgroundFx.fx-creative {
    background-image: repeating-radial-gradient(circle at center, transparent, transparent 58px, color-mix(in srgb, var(--lite-line) 5%, transparent) 58px, color-mix(in srgb, var(--lite-line) 5%, transparent) 60px) !important;
    animation: macroPulseCircles 40s ease-in-out infinite alternate !important;
}

body.lite-mode #macroBackgroundFx.fx-off-the-clock {
    background-image: repeating-radial-gradient(circle at center, transparent, transparent 98px, color-mix(in srgb, var(--lite-line) 4%, transparent) 98px, color-mix(in srgb, var(--lite-line) 4%, transparent) 100px) !important;
    animation: macroPulseCircles 60s ease-in-out infinite alternate !important;
}

body.lite-mode #macroBackgroundFx.fx-active {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 38px, color-mix(in srgb, var(--lite-line) 5%, transparent) 38px, color-mix(in srgb, var(--lite-line) 5%, transparent) 40px) !important;
    animation: macroTranslateDiagonal 40s linear infinite !important;
}

body.lite-mode #macroBackgroundFx.fx-one-month {
    background-image: repeating-radial-gradient(ellipse at center, transparent, transparent 78px, color-mix(in srgb, var(--lite-line) 4%, transparent) 78px, color-mix(in srgb, var(--lite-line) 4%, transparent) 80px) !important;
    animation: macroZoomTunnel 90s linear infinite !important;
}

body.lite-mode #macroBackgroundFx.fx-overdue {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 18px, color-mix(in srgb, var(--lite-line) 5%, transparent) 18px, color-mix(in srgb, var(--lite-line) 5%, transparent) 20px) !important;
    animation: macroTranslateX 30s linear infinite !important;
}

body.lite-mode #macroGlowSplash {
    display: block !important;
    opacity: 0.08 !important; 
    mix-blend-mode: normal !important; 
    z-index: -8 !important;
}

/* ✨ MACRO FILTER CULLING: Instantly rips filtered elements from the GPU/Render tree */
.spatial-card.macro-filtered-out {
    display: none !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    pointer-events: none !important;
    will-change: auto !important;
}

/* =========================================================
   7. TETHER VISIBILITY PROTOCOL
   ========================================================= */

/* Force the tether/link layer to remain visible, overriding any idle fades */
#tether-canvas, 
#link-canvas, 
.tether-layer, 
.link-layer, 
svg.tethers, 
path.tether {
    opacity: 0.65 !important; /* Adjusted to a pleasant persistent baseline */
    visibility: visible !important;
    transition: opacity 0.5s ease !important;
}

/* Rule 1: Hide when Lens Mode hides thoughts */
body[data-lens="projects"]:not(.focus-mode-active) #tether-canvas,
body[data-lens="projects"]:not(.focus-mode-active) #link-canvas,
body[data-lens="projects"]:not(.focus-mode-active) .tether-layer,
body[data-lens="projects"]:not(.focus-mode-active) .link-layer,
body[data-lens="projects"]:not(.focus-mode-active) svg.tethers {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Rule 2: Hide when Deep Focus Mode hides thoughts */
body.focus-mode-active:not([data-focus-flavor="thoughts"]) #tether-canvas,
body.focus-mode-active:not([data-focus-flavor="thoughts"]) #link-canvas,
body.focus-mode-active:not([data-focus-flavor="thoughts"]) .tether-layer,
body.focus-mode-active:not([data-focus-flavor="thoughts"]) .link-layer,
body.focus-mode-active:not([data-focus-flavor="thoughts"]) svg.tethers {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Rule 3: Hide when a project is Maximized */
body.is-maximized-mode #tether-canvas,
body.is-maximized-mode #link-canvas,
body.is-maximized-mode .tether-layer,
body.is-maximized-mode .link-layer,
body.is-maximized-mode svg.tethers {
    opacity: 0 !important;
    pointer-events: none !important;
}



/* =========================================================
   7. TETHER & CANVAS VISIBILITY PROTOCOL
   Forces the physics canvas to remain fully visible against global idle fades.
   ========================================================= */

#desktopCanvas, 
canvas.physics-layer {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.5s ease !important;
}

/* Gracefully hide the entire canvas only when a project is maximized */
body.is-maximized-mode #desktopCanvas,
body.is-maximized-mode canvas.physics-layer {
    opacity: 0 !important;
    pointer-events: none !important;
}