/* ==========================================================================
   Ensō Navigation - Approach C: Pure CSS Gradient
   VERSION: 1.0.0 (Issue #697)
   UPDATED: 2026-01-21

   PURE CSS APPROACH
   =================
   Uses conic-gradient and mask to create an Ensō effect with zero JavaScript.
   Simplicity is the ultimate sophistication—like a single ink drop.

   Philosophy: Simplicity is the ultimate sophistication—like a single ink drop.

   Pros:
   - Zero dependencies—pure CSS
   - Tiny file size (~0.5KB)
   - Easiest to maintain and modify
   - Works everywhere CSS works

   Cons:
   - Less authentic brush texture
   - Gradient limitations on older browsers
   - Can feel "too clean" for Zen aesthetic

   Browser Support:
   - Chrome 69+, Firefox 83+, Safari 12.1+ (conic-gradient)
   - Falls back to a simple circle in older browsers

   Usage:
   1. Add this CSS
   2. Use `.enso-pure` class on a span/div
   3. Set `data-active-section` on parent to position

   ========================================================================== */

/* --------------------------------------------------------------------------
   Ensō Pure - The CSS Circle
   --------------------------------------------------------------------------
   Creates a brush-stroke effect using conic-gradient and radial-gradient mask.
   The gradient creates thick-to-thin variation, the mask creates the stroke.
   -------------------------------------------------------------------------- */

.enso-pure {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(calc(0px - var(--enso-center-offset, 0.25rem)));
  width: var(--enso-size, 2.5rem);
  height: var(--enso-size, 2.5rem);
  pointer-events: none;
  z-index: 1;

  /* Animation for smooth movement between sections */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The actual Ensō circle */
.enso-pure::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;

  /*
   * Conic gradient creates thick-to-thin brush effect
   * Starting at 225deg (bottom-left), sweeping to 135deg (top-left)
   * This leaves a gap at the top (12 o'clock) like a true Ensō
   */
  background: conic-gradient(
    from 225deg,
    transparent 0deg,
    var(--color-text-muted, #5D6D7E) 30deg,
    var(--color-text-muted, #5D6D7E) 280deg,
    transparent 315deg,
    transparent 360deg
  );

  /*
   * Radial gradient mask creates the stroke (not fill)
   * The inner part is transparent, outer part is visible
   */
  -webkit-mask: radial-gradient(
    circle at center,
    transparent 55%,
    black 55%,
    black 70%,
    transparent 70%
  );
  mask: radial-gradient(
    circle at center,
    transparent 55%,
    black 55%,
    black 70%,
    transparent 70%
  );

  opacity: 0.85;
}

/* Optional: Add slight blur for brush softness */
.enso-pure.soft::before {
  filter: blur(0.5px);
}

/* --------------------------------------------------------------------------
   Section Positioning
   --------------------------------------------------------------------------
   Move the Ensō to encircle the active section number.
   Uses CSS custom property for configurable gap.
   -------------------------------------------------------------------------- */

:root {
  --enso-gap: 3rem; /* 48px - gap between nav items */
  --enso-size: 2.5rem; /* Ensō circle diameter */
  --enso-number-size: 2rem; /* Nav number container size */
  /* Center offset: (enso - number) / 2 to vertically align Ensō center with number center */
  --enso-center-offset: calc((var(--enso-size) - var(--enso-number-size)) / 2);
  /* Item spacing: actual center-to-center distance between nav items (item height + gap) */
  --enso-item-spacing: calc(var(--enso-number-size) + var(--enso-gap));
}

/* Home/Header position (index 0) */
[data-active-section="0"] .enso-pure,
[data-active-section="home"] .enso-pure {
  transform: translateX(-50%) translateY(calc(0px - var(--enso-center-offset)));
}

/* Section positions (1-indexed for user-facing sections) */
/* Uses --enso-item-spacing (item height + gap) for correct center-to-center distance */
[data-active-section="1"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 1 - var(--enso-center-offset)));
}

[data-active-section="2"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 2 - var(--enso-center-offset)));
}

[data-active-section="3"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 3 - var(--enso-center-offset)));
}

[data-active-section="4"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 4 - var(--enso-center-offset)));
}

[data-active-section="5"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 5 - var(--enso-center-offset)));
}

[data-active-section="6"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 6 - var(--enso-center-offset)));
}

[data-active-section="7"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 7 - var(--enso-center-offset)));
}

[data-active-section="8"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 8 - var(--enso-center-offset)));
}

[data-active-section="9"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 9 - var(--enso-center-offset)));
}

/* References/PS position (special - maps to section 10 equivalent) */
[data-active-section="references"] .enso-pure,
[data-active-section="ps"] .enso-pure {
  transform: translateX(-50%) translateY(calc(var(--enso-item-spacing) * 10 - var(--enso-center-offset)));
}

/* --------------------------------------------------------------------------
   Navigation Container
   -------------------------------------------------------------------------- */

.enso-nav-pure {
  /* NOTE: position is NOT set here - apps define their own nav positioning
   * (e.g., L0CI uses position: fixed; L0xi may use different positioning).
   * The .enso-pure element's absolute positioning works within any positioned ancestor. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 1rem);
}

.enso-nav-pure .section-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--enso-gap);
  z-index: 2;
  /* Position relative so .enso-pure can be positioned relative to the ul, not the nav */
  position: relative;
}

.enso-nav-pure .section-numbers li {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Use CSS custom property for responsive sizing (Issue #701) */
  width: var(--enso-number-size, 2rem);
  height: var(--enso-number-size, 2rem);
}

.enso-nav-pure .section-numbers a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #5D6D7E);
  text-decoration: none;
  border-radius: 50%;
  transition: color var(--transition-base, 300ms ease);
}

.enso-nav-pure .section-numbers a:hover,
.enso-nav-pure .section-numbers a:focus {
  color: var(--color-text, #2D3436);
  outline: none;
}

.enso-nav-pure .section-numbers a.active {
  color: var(--color-text, #2D3436);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Fade-in Animation
   -------------------------------------------------------------------------- */

.enso-pure {
  opacity: 0;
  animation: enso-pure-fade-in 800ms ease-out 500ms forwards;
}

@keyframes enso-pure-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Note: Transform removed from keyframes to prevent animation-fill-mode: forwards
   from overriding section-specific transforms. Position is controlled by
   [data-active-section="X"] rules, not the fade-in animation. */

/* --------------------------------------------------------------------------
   Reduced Motion Support
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .enso-pure {
    transition: none;
    animation: none;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Fallback for browsers without conic-gradient
   -------------------------------------------------------------------------- */

@supports not (background: conic-gradient(red, blue)) {
  .enso-pure::before {
    /* Fallback to simple border circle */
    background: none;
    border: 3px solid var(--color-text-muted, #5D6D7E);
    -webkit-mask: none;
    mask: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --enso-gap: 2.25rem;
    --enso-size: 2rem; /* Smaller on mobile */
    --enso-number-size: 1.5rem; /* Smaller numbers on mobile */
    /* Recalculate offset for mobile sizes */
    --enso-center-offset: calc((var(--enso-size) - var(--enso-number-size)) / 2);
  }

  .enso-pure {
    width: var(--enso-size);
    height: var(--enso-size);
  }
}

/* --------------------------------------------------------------------------
   Integration Example
   --------------------------------------------------------------------------

   HTML Structure:
   ```html
   <nav class="enso-nav-pure" data-active-section="1">
     <span class="enso-pure"></span>
     <ul class="section-numbers">
       <li><a href="#main-content">○</a></li>
       <li><a href="#chapter-1">1</a></li>
       <li><a href="#chapter-2">2</a></li>
       <li><a href="#chapter-3">3</a></li>
       <li><a href="#references">PS</a></li>
     </ul>
   </nav>
   ```

   JavaScript (update on scroll):
   ```javascript
   function updateEnsoPosition(sectionIndex) {
     const nav = document.querySelector('.enso-nav-pure');
     nav.dataset.activeSection = sectionIndex;
   }
   ```
   -------------------------------------------------------------------------- */