/* ── agentlens ENHANCEMENTS ─────────────────────────────────────────────
   5 universal improvements applied to all guide pages:
   1. Animated gradient section breaks with glowing dots
   2. Smart tooltips on pattern badges
   3. Animated progress bar with glow
   4. Dark/light mode toggle
   5. Smooth scroll reveal animations
   ────────────────────────────────────────────────────────────────────── */

/* ── 1. SECTION BREAK ENHANCEMENTS ─────────────────────────────────────── */
.section-break {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 2rem;
  margin: 4rem 0;
  background: linear-gradient(90deg, rgba(88,166,255,.06) 0%, transparent 30%, transparent 70%, rgba(88,166,255,.06) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sb-dot {
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px currentColor);
  animation: dotGlow 2s ease-in-out infinite;
}

@keyframes dotGlow {
  0%, 100% { filter: drop-shadow(0 0 8px currentColor); }
  50% { filter: drop-shadow(0 0 16px currentColor); }
}

.sb-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.sb-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── 2. PATTERN / CHAPTER BADGE TOOLTIPS ─────────────────────────────── */
/* Applies to .pattern-badge (orchestration) and .chapter-pill (other guides) */
.pattern-badge,
.chapter-pill[data-tooltip] {
  cursor: help;
  transition: all 0.2s ease;
  position: relative;
}

.pattern-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: rgba(88,166,255,.1);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 500;
}

.pattern-badge:hover,
.chapter-pill[data-tooltip]:hover {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(88,166,255,.25);
  transform: translateY(-2px);
}

/* Tooltip — works for both .pattern-badge[title] and .chapter-pill[data-tooltip] */
.pattern-badge[title]::after,
.chapter-pill[data-tooltip]::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  color: var(--text);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
  z-index: 10;
}

.chapter-pill[data-tooltip]::after {
  content: attr(data-tooltip);
}

.pattern-badge:hover::after,
.chapter-pill[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Mobile: tooltip only on long-press / focus */
@media (hover: none) {
  .pattern-badge::after,
  .chapter-pill[data-tooltip]::after {
    display: none;
  }
}

/* ── SVG VIBRANCE BOOST ─────────────────────────────────────────────────── */
/* Subtle glow on scene nodes; smooth hover on visualizations */
.sticky-viz svg,
#viz-wrap svg, #viz-wrap2 svg, #viz-wrap3 svg, #viz-wrap4 svg, #viz-wrap5 svg {
  transition: filter 0.4s ease;
}

.sticky-viz svg:hover,
#viz-wrap svg:hover, #viz-wrap2 svg:hover,
#viz-wrap3 svg:hover, #viz-wrap4 svg:hover, #viz-wrap5 svg:hover {
  filter: brightness(1.08) saturate(1.15);
}

/* Soft glow on every scene's shapes when in the viewport */
[id^="scene"] rect,
[id^="scene"] circle,
[id^="scene"] polygon,
[id^="scene"] path:not([fill="none"]) {
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 0.6s ease;
}

.sticky-viz:hover [id^="scene"] rect,
.sticky-viz:hover [id^="scene"] circle,
.sticky-viz:hover [id^="scene"] polygon,
.sticky-viz:hover [id^="scene"] path:not([fill="none"]) {
  filter: drop-shadow(0 0 6px currentColor);
}

/* Smooth animated stroke on edges */
[id^="scene"] line,
[id^="scene"] path[stroke]:not([fill]) {
  stroke-linecap: round;
  transition: stroke-width 0.3s ease, opacity 0.3s ease;
}

/* Hero background — gentle drift so it feels alive */
@keyframes heroDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8px, -4px) scale(1.02); }
}
#hero-bg {
  animation: heroDrift 22s ease-in-out infinite;
}

/* ── 3. ANIMATED PROGRESS BAR ───────────────────────────────────────────── */
#prog {
  position: fixed;
  top: 52px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--green), var(--orange));
  transform-origin: left;
  z-index: 199;
  box-shadow: 0 0 8px currentColor;
  animation: progGlow 2s ease-in-out infinite;
}

@keyframes progGlow {
  0%, 100% { box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
  50% { box-shadow: 0 0 12px currentColor, 0 0 24px currentColor; }
}

/* ── 4. DARK/LIGHT MODE TOGGLE ──────────────────────────────────────────── */
#themeToggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}

#themeToggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(88,166,255,.2);
}

html.dark-mode {
  --bg: #0d0c0a;
  --bg2: #1a1817;
  --text: #ece6d8;
  --dim: #a39d8e;
  --border: #3a342a;
  --heading: #ffffff;
}

/* ── 5. SMOOTH SCROLL REVEAL ANIMATIONS ────────────────────────────────── */
.step {
  animation: fadeInUp 0.6s ease-out both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered reveal for steps */
.step:nth-child(1) { animation-delay: 0.1s; }
.step:nth-child(2) { animation-delay: 0.2s; }
.step:nth-child(3) { animation-delay: 0.3s; }
.step:nth-child(n+4) { animation-delay: 0.4s; }

/* ── MOBILE RESPONSIVENESS ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-break {
    flex-direction: column;
    gap: 0.5rem;
    padding: 2rem 1rem;
  }

  .sb-line {
    width: 100%;
    height: 1px;
  }

  .pattern-badge,
  .chapter-pill[data-tooltip] {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  .pattern-badge::after,
  .chapter-pill[data-tooltip]::after {
    white-space: normal;
    max-width: 180px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
  }

  .sticky-viz svg:hover {
    filter: brightness(1.05) saturate(1.1);
  }

  #hdr {
    padding: 0 1rem;
    font-size: 12px;
  }

  #prog {
    height: 2px;
  }

  #themeToggle {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .pattern-badge::after {
    font-size: 0.7rem;
    padding: 0.4rem 0.6rem;
  }

  .section-break {
    padding: 1.5rem 0.75rem;
    margin: 2rem 0;
  }

  #hdr {
    padding: 0 0.75rem;
  }
}

/* ── SVG TEXT READABILITY FIX ──────────────────────────────────────────── */
/* Universal solution: All SVG text gets better contrast via filters and styling */

/* Base text styling — applies to ALL svg text elements */
svg text {
  font-weight: 500;
  letter-spacing: 0.3px;
  /* Multi-layer drop shadow for maximum contrast */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8))
          drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
          drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.15));
  paint-order: stroke fill;
  stroke-width: 0.3px;
  stroke-opacity: 0.5;
  /* Ensure text renders on top */
  position: relative;
  z-index: 10;
}

/* Text inside shape groups gets even stronger styling */
svg g text {
  font-weight: 600;
  font-size: 1.02em;
  letter-spacing: 0.4px;
}

/* Main SVG elements get proper stacking context */
#main-svg, #main-svg2, #main-svg3, #main-svg35,
#main-svg4, #main-svg5, #main-svg6,
svg[id^="viz"],
.sticky-viz svg {
  position: relative;
  z-index: 1;
}

/* Text groups get visual separation from shapes */
svg g:has(> text) {
  mix-blend-mode: normal;
  opacity: 1;
}

/* Floating labels (created by lbl() function) get backgrounds */
svg text[font-family*="Georgia"],
svg text[font-family*="serif"] {
  font-weight: 500;
  letter-spacing: 0.5px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8))
          drop-shadow(0 -1px 2px rgba(255, 255, 255, 0.2));
}

/* Ensure text in dark shapes stays light */
svg text[fill="#c9d1d9"],
svg text[fill="#ffffff"],
svg text[fill*="rgb(255"],
svg text[fill*="hsl("] {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

/* Ensure text in light shapes stays dark */
svg text[fill="#0d1117"],
svg text[fill="#000000"],
svg text[fill*="rgb(0"] {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Make text slightly larger on all visualizations for readability */
#main-svg text, #main-svg2 text, #main-svg3 text, #main-svg35 text,
#main-svg4 text, #main-svg5 text, #main-svg6 text,
svg[id^="viz"] text {
  font-size: 1.08em;
}

/* Mobile: ensure text stays readable at smaller sizes */
@media (max-width: 768px) {
  svg text {
    font-size: 1.12em !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9))
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))
            drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.2));
  }
}

/* ── SVG ANIMATIONS ────────────────────────────────────────────────────────── */
/* Fade-in animation for all SVG groups */
@keyframes fadeInGroup {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Pulse animation for shapes */
@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(88,166,255,0)); }
  50% { filter: drop-shadow(0 0 8px rgba(88,166,255,0.6)); }
}

/* Glow on hover */
@keyframes glowHover {
  from { filter: brightness(1) drop-shadow(0 0 4px rgba(88,166,255,0.3)); }
  to { filter: brightness(1.1) drop-shadow(0 0 12px rgba(88,166,255,0.6)); }
}

/* Apply animations to all SVG groups */
svg g {
  animation: fadeInGroup 0.6s ease-out both;
}

/* Stagger animations for nested groups */
svg g:nth-child(1) { animation-delay: 0.1s; }
svg g:nth-child(2) { animation-delay: 0.2s; }
svg g:nth-child(3) { animation-delay: 0.3s; }
svg g:nth-child(n+4) { animation-delay: 0.4s; }

svg circle:hover,
svg rect:hover,
svg path:hover,
svg polygon:hover {
  filter: brightness(1.15) drop-shadow(0 0 8px currentColor);
  transition: filter 0.3s ease;
  cursor: pointer;
}

/* Tooltip on hover (use title attribute if present) */
svg [title] {
  position: relative;
}

svg [title]:hover::after {
  content: attr(title);
  position: absolute;
  background: var(--bg2);
  color: var(--text);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

/* Continuous pulse on key elements */
svg circle[r="28"],
svg circle[r="40"],
svg circle[r="52"] {
  animation: pulse 3s ease-in-out infinite;
}

/* Subtle animation for edges/lines */
svg line,
svg path[stroke] {
  animation: fadeInGroup 0.8s ease-out both;
  stroke-linecap: round;
}

svg line:nth-of-type(1) { animation-delay: 0.5s; }
svg line:nth-of-type(2) { animation-delay: 0.6s; }
svg line:nth-of-type(n+3) { animation-delay: 0.7s; }