/* ============================================
   The Platform CEO — V2 enhancement layer
   Award-grade polish: motion, depth, micro-interaction.
   Ported from chiraghathiramani.com V16 and adapted
   for long-form book reading.
   Fully additive: the site remains fully functional
   without JS, and all motion respects
   prefers-reduced-motion.
   ============================================ */

/* ---- Foundations ---- */
html { scroll-padding-top: 88px; }
h1, h2, h3, blockquote { text-wrap: balance; }
::selection { background: rgba(176, 141, 87, 0.28); color: var(--black); }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; border-radius: 1px; }

/* Cross-document page transitions (progressive enhancement, Chromium 126+).
   Makes chapter-to-chapter navigation feel like turning a page. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation-duration: 0.18s; }
  ::view-transition-new(root) { animation-duration: 0.28s; }
}

/* ---- Reading progress thread ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--warm), #d8b57e);
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 300; pointer-events: none;
}

/* ---- Nav: glass treatment + scroll state ---- */
.nav {
  background: rgba(17, 17, 17, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.nav.scrolled {
  background: rgba(15, 15, 15, 0.94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 38px rgba(0, 0, 0, 0.28);
}
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--warm);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after {
  transform: scaleX(1); transform-origin: left;
}

/* ---- Heroes: ambient gold field ---- */
.book-hero, .article-hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(176, 141, 87, 0.085), transparent 62%),
    radial-gradient(700px 420px at -8% 110%, rgba(176, 141, 87, 0.05), transparent 60%);
}

/* ---- Entrance choreography ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes v2-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes v2-jacket {
    from { opacity: 0; transform: translateY(34px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  .js .book-hero .jacket-col { animation: v2-jacket 1.05s var(--ease) 0.1s backwards; }
  .js .book-hero .text-col h4         { animation: v2-rise 0.85s var(--ease) 0.22s backwards; }
  .js .book-hero .text-col h1         { animation: v2-rise 0.95s var(--ease) 0.34s backwards; }
  .js .book-hero .text-col .sub-lg    { animation: v2-rise 0.95s var(--ease) 0.46s backwards; }
  .js .book-hero .text-col .hero-lead { animation: v2-rise 0.95s var(--ease) 0.58s backwards; }
  .js .book-hero .text-col .hero-cta,
  .js .book-hero .text-col .text-link { animation: v2-rise 0.95s var(--ease) 0.70s backwards; }
  .js .book-hero .text-col .hero-proceeds { animation: v2-rise 0.95s var(--ease) 0.82s backwards; }
  .js .article-hero h4           { animation: v2-rise 0.85s var(--ease) 0.05s backwards; }
  .js .article-hero h1           { animation: v2-rise 0.95s var(--ease) 0.18s backwards; }
  .js .article-hero .chapter-key-idea { animation: v2-rise 0.95s var(--ease) 0.30s backwards; }
  .js .article-hero .article-meta { animation: v2-rise 0.95s var(--ease) 0.42s backwards; }
}

/* Key Idea typography (hero + contents list) lives in styles.css;
   only its entrance animation belongs to this layer. */

/* ---- Book jacket: dimensional cover ---- */
.jacket-col { perspective: 1300px; }
.jacket {
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.jacket.tilting { transition: transform 0.12s linear, box-shadow 0.7s var(--ease); }
.jacket:hover {
  box-shadow: 0 44px 92px rgba(0, 0, 0, 0.26), 0 10px 24px rgba(0, 0, 0, 0.12);
}
/* Moving sheen that follows the pointer (vars set by enhance.js) */
.jacket::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(480px 480px at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, 0.12), transparent 62%);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.jacket:hover::after { opacity: 1; }

/* ---- Scroll reveals (class applied by enhance.js) ---- */
.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--rd, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .book-hero .jacket-col, .js .book-hero .text-col h4, .js .book-hero .text-col h1,
  .js .book-hero .text-col .sub-lg, .js .book-hero .text-col .hero-lead,
  .js .book-hero .text-col .hero-cta, .js .book-hero .text-col .text-link,
  .js .book-hero .text-col .hero-proceeds,
  .js .article-hero h1, .js .article-hero h4, .js .article-hero .article-meta,
  .js .article-hero .chapter-key-idea { animation: none; }
}

/* ---- Section label kicker ---- */
.section .container > h4:first-child::before,
.section .narrow > h4:first-child::before {
  content: ''; display: inline-block; width: 26px; height: 1px;
  background: var(--warm); margin-right: 12px; vertical-align: middle;
}

/* ---- Links: confident micro-interaction ---- */
.hero-cta {
  position: relative;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), letter-spacing 0.3s var(--ease);
}
.hero-cta:hover { letter-spacing: 0.11em; }
.text-link::after { display: inline-block; transition: transform 0.3s var(--ease); }
.text-link:hover::after { transform: translateX(5px); }

/* ---- Contents list: editorial hover ---- */
.insight-item { position: relative; }
.insight-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--warm); transform: scaleY(0); transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.insight-item:hover::before { transform: scaleY(1); }
.insight-item:hover { padding-left: 20px; }
/* #contents hover indent (clears the gold bar) lives in styles.css
   alongside the Key Idea typography. */
.insight-item h3 { transition: color 0.25s var(--ease); }
.insight-item:hover h3 { color: var(--warm-hover); }

/* ---- Drop cap on chapter openings ---- */
.chapter-page .article-body .narrow > p:first-of-type::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 3.3em;
  line-height: 0.82;
  padding: 0.08em 0.14em 0 0;
  font-weight: 500;
  color: var(--warm);
}

/* ---- Callouts: quiet presence ---- */
.callout { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.callout:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05); }
.callout-principle:hover { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22); }

/* ---- Stats (if present): lift + gold ---- */
.stat { position: relative; transition: transform 0.35s var(--ease); }
.stat:hover { transform: translateY(-3px); }
.stat-num { transition: color 0.3s var(--ease); }
.stat:hover .stat-num { color: var(--warm); }

/* ---- Pillars: quiet lift ---- */
.pillar { transition: transform 0.35s var(--ease); }
.pillar:hover { transform: translateX(6px); }

/* ---- FAQ: smoother affordance ---- */
.faq-item summary:hover h3 { color: var(--warm-hover); }
.faq-item summary::after { transition: transform 0.25s var(--ease), color 0.2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(180deg); }

/* ---- Forms: focused gold accent ---- */
.form-group input, .form-group textarea { transition: border-color 0.3s var(--ease); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--warm); }

/* ---- Chapter pagination: turn-the-page affordance ---- */
.chapter-pagination .text-link {
  display: inline-block;
  transition: color 0.25s var(--ease), transform 0.3s var(--ease);
}
.chapter-pagination .pag-cell:last-child .text-link:hover { transform: translateX(4px); }
.chapter-pagination .pag-cell:first-child .text-link:hover { transform: translateX(-4px); }

/* ---- Footer: gold hairline + link motion ---- */
.footer { position: relative; }
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 4%, var(--warm) 50%, transparent 96%);
  opacity: 0.75;
}
.footer a { transition: color 0.25s var(--ease), transform 0.25s var(--ease); }
.footer a:hover { transform: translateX(3px); }

/* ---- Dark sections: faint texture depth ---- */
.section-dark, .callout-principle {
  background-image: radial-gradient(900px 420px at 80% 0%, rgba(176, 141, 87, 0.07), transparent 60%);
  background-color: var(--dark);
}

/* ---- Mobile refinements ---- */
@media (max-width: 600px) {
  .hero-lead { font-size: 1.02rem; }
  .section { padding: 56px 0; }
  .book-hero { padding: 104px 0 64px; }
  .chapter-page .article-body .narrow > p:first-of-type::first-letter { font-size: 3em; }
}