/* ============================================================================
   CogSOUL — cog layer styles (shared by light & dark themes)
   Load this once, after the theme file. The .cog-wrap.cog-<hue> color rules
   live in each theme file so the cogs re-tint per mode.
   ========================================================================== */

.cogfield {
  position: fixed;
  inset: 0;
  z-index: -1;            /* sits BELOW all content so it never traps modals */
  pointer-events: none;
  overflow: hidden;
}
.cogfield .cog-wrap {
  position: absolute;
  transform-origin: center;
  will-change: transform;
}
.cogfield .cog-svg {
  display: block;
  transform-origin: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  will-change: transform;
}

@keyframes cogsoul-cw  { to { transform: rotate(360deg); } }
@keyframes cogsoul-ccw { to { transform: rotate(-360deg); } }

/* ----------------------------------------------------------------------------
   Header gearworks band — a loose, repeating row of gears tiled across the
   whole top navbar. z-index:-1 keeps it above the navbar plate but behind the
   in-flow brand/links. Clipped to the bar so gears emerge from the edges.
   -------------------------------------------------------------------------- */
.cogsoul-header-cluster {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cogsoul-header-cluster .cog-wrap {
  position: absolute;
  transform-origin: center;
  will-change: transform;
}
.cogsoul-header-cluster .cog-svg {
  display: block;
  transform-origin: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@media (prefers-reduced-motion: reduce) {
  .cogfield .cog-svg,
  .cogsoul-header-cluster .cog-svg { animation: none !important; }
}

/* ----------------------------------------------------------------------------
   Layout transparency: the Limitless scroll panels must be transparent so the
   cog layer behind them shows through. Cards stay opaque, so cogs only ghost
   through the gutters — exactly the intended effect.

   IMPORTANT: the cog layer is at z-index:-1 and the page background lives on
   <html> (see the theme files), so in-flow content paints ABOVE the cogs
   WITHOUT needing its own z-index. We deliberately do NOT give these panels a
   stacking context — doing so traps Bootstrap modals/dropdowns beneath the
   sticky header. Transparency only.
   -------------------------------------------------------------------------- */
.page-content,
.content-wrapper,
.content {
  background-color: transparent !important;
}

/* Sidebar bleed-through: when enabled, the sidebar goes translucent so the
   same cog field ghosts behind the nav. A faint blur keeps text crisp over
   the moving shapes. Dark/light surface tints are set in the theme files.
   NOTE: we deliberately do NOT set position/z-index here — Limitless toggles
   `.sidebar-expand-*` between position:static (pinned) and the off-canvas
   `left:-20.625rem` default, and overriding position re-triggers the
   off-canvas state. We only restyle the surface; with the cog layer at
   z-index:-1, the nav already sits above it with no stacking context needed. */
body.cogsoul-cogs-sidebar .sidebar-main {
  background-color: transparent !important;
  background-image: var(--cs-sidebar-veil) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}