/* ═══════════════════════════════════════════════════════════════════════════
   Focus Mode Overrides
   Applied when body.focus replaces body.atmosphere
   Transition: 0.6s ease on all mode-switching properties
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. Body + Background ────────────────────────────────────────────────── */

body.focus {
  background-color: var(--focus-bg); /* #1a1816 */
  color: var(--focus-text);          /* #b8b0a0 */
  transition:
    background-color 0.6s ease,
    color 0.6s ease;
}


/* ─── 2. Particle Canvas ──────────────────────────────────────────────────── */

body.focus #particles {
  display: none;
}


/* ─── 3. Content Width ────────────────────────────────────────────────────── */

body.focus {
  --content-width: 680px;
}


/* ─── 4. Line Height ──────────────────────────────────────────────────────── */

body.focus p,
body.focus li,
body.focus .reading-content,
body.focus .showcase-content {
  line-height: 1.85;
  transition: line-height 0.6s ease;
}


/* ─── 5. Ribbon Divider ───────────────────────────────────────────────────── */

body.focus .ribbon-divider {
  opacity: 0.3;
  animation-play-state: paused;
  transition: opacity 0.6s ease;
}


/* ─── 6. Shimmer Text ─────────────────────────────────────────────────────── */

body.focus .shimmer-text {
  animation: none;
  background: none;
  -webkit-text-fill-color: #c8b48c;
  color: #c8b48c;
  transition: color 0.6s ease;
}


/* ─── 7. Insight Box ──────────────────────────────────────────────────────── */

body.focus .insight-box {
  animation: none;
  box-shadow: none;
  border-left-color: rgba(200, 180, 140, 0.3);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}


/* ─── 8. Scroll Reveal ────────────────────────────────────────────────────── */

/* In focus mode, all .reveal elements are immediately visible — no animation */
body.focus .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Stagger delays are irrelevant in focus mode — neutralise them all */
body.focus .reveal:nth-child(1),
body.focus .reveal:nth-child(2),
body.focus .reveal:nth-child(3),
body.focus .reveal:nth-child(4),
body.focus .reveal:nth-child(5),
body.focus .reveal:nth-child(6),
body.focus .reveal:nth-child(7),
body.focus .reveal:nth-child(8),
body.focus .reveal:nth-child(9),
body.focus .reveal:nth-child(10) {
  transition-delay: 0ms;
}


/* ─── 9. Signature Visual Block Overrides ─────────────────────────────────── */

body.focus .metric-strip {
  border-color: rgba(200, 180, 140, 0.04);
}

body.focus .board-document {
  box-shadow: none;
}

body.focus .executive-callout {
  font-size: 1.2em;
}


/* ─── 10. Mode Transition on body ─────────────────────────────────────────── */

/*
 * Applied to body when switching modes (toggled by JS).
 * All descendant elements that respond to the mode switch should
 * use transition: <property> 0.6s ease so they animate in sync.
 */
body.focus-transition,
body.atmosphere-transition {
  transition:
    background-color 0.6s ease,
    color 0.6s ease;
}