/* ============================================================
   CodebyCarter — chapters.css
   The site is a 4-chapter book. Sticky chapter rail at top.
   Only the active chapter's sections render. Smooth cinematic
   transitions between chapters. URL hash routes to chapters.
   ============================================================ */

/* ============================================================
   CHAPTER RAIL — sticky top navigation
   ============================================================ */
.chrail{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:140;
  display:flex;align-items:center;gap:2px;
  padding:5px;
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(32px) saturate(1.4);
  -webkit-backdrop-filter:blur(32px) saturate(1.4);
  border:1px solid rgba(200,169,81,.18);
  border-radius:99px;
  box-shadow:
    0 24px 60px -18px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 20px rgba(212,164,55,.05) inset;
  opacity:0;transform:translateX(-50%) translateY(-12px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.chrail.is-ready{opacity:1;transform:translateX(-50%) translateY(0)}

.chrail-btn{
  position:relative;
  padding:10px 18px 10px 14px;
  border-radius:99px;
  background:transparent;
  color:rgba(245,239,224,.55);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.05em;font-weight:500;
  cursor:none;border:none;
  display:flex;align-items:baseline;gap:8px;
  transition:color .35s ease, background .35s ease;
  white-space:nowrap;outline:none;
}
.chrail-btn-num{
  font-size:9px;color:rgba(200,169,81,.55);font-weight:600;
  letter-spacing:.12em;
}
.chrail-btn-name{font-size:12px;letter-spacing:.01em;text-transform:none;font-weight:500;color:inherit}
.chrail-btn:hover{color:#F5EFE0}
.chrail-btn:hover .chrail-btn-num{color:rgba(200,169,81,.85)}
.chrail-btn.is-active{
  color:#0A0A08;
  background:linear-gradient(135deg, #FFE8A0 0%, #D4A437 100%);
  box-shadow:
    0 6px 18px -4px rgba(212,164,55,.45),
    0 0 0 1px rgba(255,232,160,.20);
}
.chrail-btn.is-active .chrail-btn-num{color:rgba(10,10,8,.55)}

/* Divider between chapter buttons and CTA */
.chrail-div{
  width:1px;height:18px;background:rgba(200,169,81,.18);margin:0 6px;
}
.chrail-cta{
  padding:10px 16px;border-radius:99px;
  background:#F5EFE0;color:#0A0A08;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:600;letter-spacing:.04em;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 6px 18px -4px rgba(245,239,224,.18);
  text-decoration:none;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.chrail-cta:hover{
  background:linear-gradient(135deg,#FFE8A0,#D4A437);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -6px rgba(212,164,55,.45);
}

/* ============================================================
   CHAPTERS — only active one is shown
   ============================================================ */
.chapter{display:none}
.chapter.is-active{
  display:block;
  animation:chapterIn .7s cubic-bezier(.4,0,.2,1) both;
}
@keyframes chapterIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   CHAPTER INTRO — cinematic title card at top of each chapter
   ============================================================ */
.ch-intro{
  position:relative;
  min-height:80vh;
  display:grid;place-items:center;
  padding:140px 24px 80px;
  overflow:hidden;
  color:#F5F5F7;
  background:radial-gradient(circle at 50% 60%, #1A1822 0%, #0A0A12 100%);
}
.ch-intro-grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.7;
}
.ch-intro-wrap{
  position:relative;z-index:2;text-align:center;max-width:920px;
}
.ch-intro-num{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.30em;text-transform:uppercase;
  color:rgba(200,169,81,.65);font-weight:600;
  margin-bottom:28px;display:inline-flex;align-items:center;gap:14px;
}
.ch-intro-num::before,
.ch-intro-num::after{
  content:"";width:38px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,169,81,.55), transparent);
}
.ch-intro-h{
  font-size:clamp(54px,10vw,128px);
  line-height:.96;letter-spacing:-.038em;font-weight:500;
  margin-bottom:28px;color:#F5EFE0;
}
.ch-intro-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:1.05em;letter-spacing:-.045em;
}
.ch-intro-sub{
  font-size:clamp(16px,1.6vw,20px);
  color:rgba(245,239,224,.62);
  line-height:1.6;max-width:50ch;margin:0 auto 40px;
  font-weight:400;
}
.ch-intro-sub em{
  font-style:italic;font-family:'Instrument Serif',serif;
  color:rgba(255,232,160,.85);font-size:1.07em;
  font-weight:400;
}

/* Edge details on intro card */
.ch-intro-edge{
  position:absolute;left:50%;transform:translateX(-50%);
  width:60vw;max-width:600px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,169,81,.30) 30%, rgba(200,169,81,.30) 70%, transparent);
}
.ch-intro-edge--top{top:90px}
.ch-intro-edge--bottom{bottom:90px}
.ch-intro-scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(245,245,247,.40);font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:chBob 2.2s ease-in-out infinite;
}
.ch-intro-scroll::after{
  content:"";width:1px;height:32px;
  background:linear-gradient(180deg,rgba(245,245,247,.50), transparent);
}
@keyframes chBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(6px)}
}

/* ============================================================
   UNIFIED ONYX + CHAMPAGNE PALETTE for all chapter intros.
   Pure black backdrop, subtle warm radial glow, italic-serif
   gradient on the ital span. Luxury cinema title-card energy.
   ============================================================ */
.ch-intro--hello,
.ch-intro--watch,
.ch-intro--play,
.ch-intro--talk{
  background:
    radial-gradient(900px 600px at 50% 80%, rgba(200,169,81,.12), transparent 60%),
    radial-gradient(600px 500px at 50% 25%, rgba(168,85,247,.06), transparent 65%),
    #050505;
}
.ch-intro--hello .ch-intro-h .ital,
.ch-intro--watch .ch-intro-h .ital,
.ch-intro--play  .ch-intro-h .ital,
.ch-intro--talk  .ch-intro-h .ital{
  background:linear-gradient(135deg, #FFE8A0 0%, #D4A437 50%, #8B6914 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 20px rgba(212,164,55,.20));
  animation:none;
}

/* ============================================================
   CHAPTER OUTRO — "next chapter" continuation
   ============================================================ */
.ch-outro{
  padding:100px 24px 140px;
  background:
    radial-gradient(700px 400px at 50% 50%, rgba(200,169,81,.06), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.03) 100%);
  text-align:center;
  position:relative;
}
.ch-outro-line{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-bottom:28px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.20em;
  text-transform:uppercase;color:rgba(20,20,30,.40);font-weight:600;
}
.ch-outro-line::before,
.ch-outro-line::after{
  content:"";flex:0 0 60px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(20,20,30,.30), transparent);
}

.ch-outro-cta{
  display:inline-flex;align-items:center;gap:18px;
  padding:20px 32px 20px 26px;
  background:#0A0A08;color:#F5EFE0;
  border-radius:99px;
  border:1px solid rgba(200,169,81,.20);
  font-family:'Space Grotesk',sans-serif;font-weight:500;
  text-decoration:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
  box-shadow:0 20px 50px -18px rgba(10,10,8,.50);
}
.ch-outro-cta:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg, #FFE8A0 0%, #D4A437 50%, #8B6914 100%);
  color:#0A0A08;
  border-color:transparent;
  box-shadow:0 24px 60px -16px rgba(212,164,55,.45);
}
.ch-outro-cta-num{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  color:rgba(200,169,81,.65);font-weight:600;text-transform:uppercase;
  transition:color .35s ease;
}
.ch-outro-cta:hover .ch-outro-cta-num{color:rgba(10,10,8,.55)}
.ch-outro-cta-text{font-size:17px;letter-spacing:-.01em}
.ch-outro-cta-text .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:1.12em;
}
.ch-outro-cta-arrow{
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;
  transition:transform .35s ease;
}
.ch-outro-cta:hover .ch-outro-cta-arrow{transform:translateX(4px)}

.ch-outro-meta{
  margin-top:24px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(20,20,30,.35);font-weight:500;
}

/* ============================================================
   FAB to "explore all" — opens chapter overview panel
   ============================================================ */
.ch-overview{
  position:fixed;inset:0;z-index:220;
  background:rgba(8,8,12,.92);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  display:none;
  opacity:0;
  transition:opacity .4s ease;
}
.ch-overview.is-open{display:grid;opacity:1;place-items:center;padding:24px}
.ch-overview-inner{
  width:100%;max-width:1100px;
}
.ch-overview-head{
  text-align:center;margin-bottom:48px;
}
.ch-overview-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(245,245,247,.50);font-weight:700;
  margin-bottom:10px;
}
.ch-overview-h{
  font-size:clamp(36px,5vw,64px);font-weight:600;letter-spacing:-.03em;
  line-height:1;color:#F5F5F7;
}
.ch-overview-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#FFE8A0,#D4A437,#8B6914);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ch-overview-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.ch-overview-card{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;
  border-radius:18px;
  padding:28px 24px;
  display:flex;flex-direction:column;justify-content:space-between;
  text-decoration:none;color:#F5F5F7;cursor:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  isolation:isolate;
}
.ch-overview-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--card-bg);
}
.ch-overview-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.45) 100%);
}
.ch-overview-card:hover{transform:translateY(-8px) scale(1.02)}
.ch-overview-card[data-chnav="hello"]{--card-bg:linear-gradient(155deg,#0A0A0A 0%,#1A1A12 50%,#050505 100%)}
.ch-overview-card[data-chnav="watch"]{--card-bg:linear-gradient(155deg,#0A0A0A 0%,#1F1A0C 50%,#050505 100%)}
.ch-overview-card[data-chnav="play"]{--card-bg:linear-gradient(155deg,#0A0A0A 0%,#241B10 50%,#050505 100%)}
.ch-overview-card[data-chnav="talk"]{--card-bg:linear-gradient(155deg,#0A0A0A 0%,#2A1F0A 50%,#050505 100%)}
.ch-overview-card[data-chnav="hello"] .ch-overview-card-num,
.ch-overview-card[data-chnav="watch"] .ch-overview-card-num,
.ch-overview-card[data-chnav="play"] .ch-overview-card-num,
.ch-overview-card[data-chnav="talk"] .ch-overview-card-num{
  color:rgba(200,169,81,.70);
}
.ch-overview-card .ch-overview-card-h .ital{
  background:linear-gradient(135deg,#FFE8A0,#D4A437);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.ch-overview-card-num{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.20em;
  text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;
}
.ch-overview-card-h{
  font-size:42px;line-height:.95;letter-spacing:-.03em;
  font-weight:600;margin-bottom:8px;
}
.ch-overview-card-h .ital{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.ch-overview-card-sub{
  font-size:13px;color:rgba(255,255,255,.75);line-height:1.4;
}

.ch-overview-close{
  position:absolute;top:24px;right:24px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#F5F5F7;cursor:none;display:grid;place-items:center;
  transition:background .25s ease, transform .25s ease;
}
.ch-overview-close:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}

/* "Explore" trigger in chrail */
.chrail-explore{
  width:34px;height:34px;border-radius:50%;
  background:rgba(200,169,81,.06);
  border:1px solid rgba(200,169,81,.20);
  color:rgba(200,169,81,.80);
  display:grid;place-items:center;cursor:none;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.chrail-explore:hover{
  background:rgba(200,169,81,.18);color:#FFE8A0;transform:scale(1.05);
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width:900px){
  .chrail{
    top:auto;bottom:18px;
    flex-wrap:nowrap;overflow-x:auto;max-width:calc(100vw - 24px);
    padding:5px;
  }
  .chrail::-webkit-scrollbar{display:none}
  .chrail-btn{padding:7px 12px;font-size:10px}
  .chrail-btn-name{font-size:11px}
  .chrail-cta{padding:7px 12px;font-size:10px}
  .chrail-explore{width:32px;height:32px}
  .ch-overview-grid{grid-template-columns:1fr 1fr;gap:12px}
  .ch-overview-card-h{font-size:32px}
  .ch-intro{min-height:70vh;padding:120px 20px 60px}
}
@media (max-width:560px){
  .ch-overview-grid{grid-template-columns:1fr}
  .ch-outro-cta{flex-wrap:wrap;justify-content:center;padding:18px 24px}
}

/* Hide jumptop button when in overview (would be redundant) */
.ch-overview.is-open ~ .jumptop{opacity:0 !important;pointer-events:none !important}

/* Theme overrides for the chapter rail */
body[data-theme="brutalist"] .chrail{
  background:#FFF !important;border:3px solid #000 !important;
  border-radius:0 !important;box-shadow:5px 5px 0 #000 !important;
}
body[data-theme="brutalist"] .chrail-btn{color:#000 !important;border-radius:0 !important}
body[data-theme="brutalist"] .chrail-btn.is-active{background:#000 !important;color:#FFF !important}
body[data-theme="brutalist"] .chrail-cta{background:#000 !important;border-radius:0 !important;animation:none !important}

body[data-theme="neon"] .chrail{background:rgba(8,8,26,.85) !important;border-color:#00FF9F !important}
body[data-theme="neon"] .chrail-btn{color:#00FF9F !important}
body[data-theme="neon"] .chrail-btn.is-active{background:#00FF9F !important;color:#08081A !important;box-shadow:0 0 18px rgba(0,255,159,.45) !important}
body[data-theme="neon"] .chrail-cta{background:#FF006E !important;animation:none !important;box-shadow:0 0 18px rgba(255,0,110,.45) !important}

body[data-theme="editorial"] .chrail{background:rgba(255,248,238,.92) !important;border-color:rgba(192,65,39,.25) !important}
body[data-theme="editorial"] .chrail-btn{color:#3A3530 !important}
body[data-theme="editorial"] .chrail-btn.is-active{background:#1A1816 !important;color:#FFF8EE !important}
body[data-theme="editorial"] .chrail-cta{background:#C04127 !important;animation:none !important}

body[data-theme="luxe"] .chrail{background:rgba(10,10,10,.88) !important;border-color:rgba(200,169,81,.30) !important}
body[data-theme="luxe"] .chrail-btn{color:#E8DCB0 !important}
body[data-theme="luxe"] .chrail-btn.is-active{background:linear-gradient(135deg,#C8A951,#E8DCB0) !important;color:#0A0A0A !important}
body[data-theme="luxe"] .chrail-cta{background:linear-gradient(135deg,#C8A951,#E8DCB0) !important;color:#0A0A0A !important;animation:none !important}