/* credo-modal.css — Book-open animation + scrollytelling modal for My Credo
   Sits alongside my-credo.css; uses the same design tokens. */

/* ===== BOOK-OPEN ANIMATION ===== */
.book-trigger{cursor:pointer;perspective:1200px}
.book-trigger .credo-cover{transition:transform .7s cubic-bezier(.22,.61,.36,1),box-shadow .7s ease;transform-origin:left center;transform-style:preserve-3d}
.book-trigger.opening .credo-cover{transform:rotateY(-160deg);box-shadow:none;pointer-events:none}

/* ===== MODAL OVERLAY ===== */
.credo-modal-overlay{
  position:fixed;inset:0;z-index:11000;
  background:#1d2130;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility 0s .4s;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.credo-modal-overlay.open{opacity:1;visibility:visible;transition:opacity .4s ease}

/* ===== MODAL CONTAINER ===== */
.credo-modal{
  max-width:720px;margin:0 auto;
  padding:clamp(32px,6vw,72px) clamp(20px,4vw,40px) 96px;
  color:var(--credo-ink);
}

/* ===== CLOSE BUTTON ===== */
.credo-modal-close{
  position:fixed;top:20px;right:20px;z-index:11100;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--credo-paper);
  border:1px solid var(--credo-line);
  border-radius:50%;
  box-shadow:3px 3px 6px var(--site-shadow,#d3cdbf),-3px -3px 6px #fff;
  font-size:22px;color:var(--credo-ink);
  cursor:pointer;transition:box-shadow .15s ease;
}
.credo-modal-close:active{box-shadow:inset 2px 2px 5px var(--site-shadow,#d3cdbf),inset -3px -3px 7px #fff}
.credo-modal-close:focus-visible{outline:3px solid #76531b;outline-offset:4px}

/* ===== PROGRESS BAR (inside modal) ===== */
.credo-progress{
  position:fixed;top:0;left:0;z-index:11050;
  width:0%;height:3px;
  background:var(--credo-gold);
  transition:width .1s linear;
  pointer-events:none;
}
.credo-modal-overlay:not(.open) .credo-progress{display:none}

/* ===== NAV DOTS ===== */
.credo-nav-dots{
  position:fixed;right:14px;top:50%;z-index:11050;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;
}
.credo-nav-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.25);
  border:none;padding:0;cursor:pointer;
  transition:all .3s ease;
}
.credo-nav-dot.active{background:var(--credo-gold);transform:scale(1.3)}
.credo-nav-dot:focus-visible{outline:2px solid var(--credo-gold);outline-offset:3px}
@media(max-width:768px){.credo-nav-dots{display:none}}

/* ===== SCROLLYTELLING CHAPTER REVEALS ===== */
.credo-chapter{
  opacity:0;
  transform:translateY(44px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
}
.credo-chapter.revealed{opacity:1;transform:none}

/* ===== TYPOGRAPHY IN MODAL ===== */
.credo-modal h1{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:clamp(2.2rem,6vw,3.4rem);
  font-weight:400;line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 24px;color:#f4f1e8;
}
.credo-modal .hero-subtitle{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:clamp(1.1rem,2.4vw,1.3rem);
  color:var(--credo-gold-light);
  font-style:italic;line-height:1.5;
  margin-bottom:32px;
}
.credo-modal p{
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:clamp(16px,1.7vw,18px);
  line-height:1.72;margin:0 0 20px;
  color:#e8e4dd;
}
.credo-modal .chapter-num{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:.82rem;font-weight:400;
  color:var(--credo-gold);
  letter-spacing:.15em;text-transform:uppercase;
  display:block;margin-bottom:8px;
}
.credo-modal h2{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:clamp(1.5rem,4vw,2.1rem);
  font-weight:400;line-height:1.15;
  letter-spacing:-.02em;
  color:var(--credo-gold-light);
  margin:0 0 24px;
}
.credo-modal h3{
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:1.1rem;font-weight:700;
  margin:40px 0 12px;color:#e8e4dd;
}
.credo-modal em{font-style:italic}
.credo-modal strong{font-weight:700;color:#f4f1e8}

/* ===== DIVIDERS ===== */
.credo-modal .divider{
  border:none;border-top:1px solid rgba(255,255,255,.12);
  margin:64px 0;
}

/* ===== BLOCKQUOTES ===== */
.credo-modal blockquote{
  margin:32px 0;padding:24px 28px;
  background:rgba(255,255,255,.06);
  border-left:3px solid var(--credo-gold);
  border-radius:0 8px 8px 0;
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:clamp(1.05rem,2vw,1.2rem);
  line-height:1.55;font-style:italic;color:#f4f1e8;
}
.credo-modal blockquote cite{
  display:block;font-style:normal;
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:.82rem;color:var(--credo-gold-light);margin-top:12px;
}

/* ===== SCENE BOX (thought experiment) ===== */
.credo-modal .scene{
  background:rgba(255,255,255,.05);
  border-radius:12px;padding:36px 32px;
  margin:40px 0;position:relative;
}
.credo-modal .scene::before{
  content:'';display:block;width:40px;height:3px;
  background:var(--credo-gold);margin-bottom:20px;border-radius:2px;
}
.credo-modal .scene p{color:#ddd8cf}

/* ===== FREEZE FRAME ===== */
.credo-modal .freeze{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:clamp(1.3rem,3.5vw,1.9rem);
  font-weight:400;color:var(--credo-gold);
  text-align:center;padding:32px 0;line-height:1.3;
}

/* ===== CALLOUT BOXES ===== */
.credo-modal .callout{
  background:rgba(255,255,255,.06);
  border-radius:10px;padding:28px;margin:36px 0;
}
.credo-modal .callout-label{
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:.76rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--credo-gold);margin-bottom:10px;
}

/* ===== PROPERTY CARDS ===== */
.credo-modal .property{
  margin:28px 0;padding:20px 24px;
  background:rgba(255,255,255,.05);
  border-radius:10px;
  border-left:3px solid var(--credo-gold);
}
.credo-modal .property-num{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-weight:400;font-size:1.4rem;
  color:var(--credo-gold);margin-right:8px;
}
.credo-modal .property-title{font-weight:700;font-size:1rem;color:#f4f1e8}
.credo-modal .property p{margin:8px 0 0;font-size:.92rem;color:#b0aba2}

/* ===== COMPARISON TABLE ===== */
.credo-modal .compare-table{
  width:100%;border-collapse:collapse;margin:28px 0;font-size:.92rem;
}
.credo-modal .compare-table th{
  text-align:left;font-weight:700;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--credo-gold-light);
  padding:0 16px 12px 0;
  border-bottom:2px solid rgba(255,255,255,.15);
}
.credo-modal .compare-table td{
  padding:14px 16px 14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;color:#ddd8cf;
}
.credo-modal .compare-table td:first-child{
  color:#8a8580;text-decoration:line-through;
  text-decoration-color:var(--credo-gold);
}
.credo-modal .compare-table td:last-child{font-weight:600;color:#f4f1e8}

/* ===== REFLECTION TEXTAREAS ===== */
.credo-modal .reflection-prompt{
  display:flex;flex-direction:column;gap:6px;margin:16px 0;
}
.credo-modal .reflection-prompt label{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:1rem;font-style:italic;color:var(--credo-gold-light);
}
.credo-modal .reflection-prompt textarea{
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:.92rem;line-height:1.6;
  background:rgba(255,255,255,.06);color:#f4f1e8;
  border:1px solid rgba(255,255,255,.12);border-radius:8px;
  padding:12px 16px;resize:vertical;min-height:60px;
  transition:border-color .2s;
}
.credo-modal .reflection-prompt textarea:focus{
  outline:none;border-color:var(--credo-gold);
}
.credo-modal .reflection-prompt textarea::placeholder{color:rgba(255,255,255,.3)}

/* ===== SENTENCE BUILDER ===== */
.credo-modal .builder{
  background:rgba(255,255,255,.06);
  border-radius:12px;padding:32px 28px;margin:40px 0;
}
.credo-modal .builder-starters{
  display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px;
}
.credo-modal .builder-starters button{
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:.85rem;font-weight:600;
  background:rgba(255,255,255,.08);color:#e8e4dd;
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;padding:6px 16px;
  cursor:pointer;transition:all .2s;
}
.credo-modal .builder-starters button:hover,
.credo-modal .builder-starters button:focus{
  background:var(--credo-gold);color:#1c1b19;
  border-color:var(--credo-gold);outline:none;
}
.credo-modal .builder textarea{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:clamp(1.1rem,2.5vw,1.3rem);
  line-height:1.5;width:100%;
  background:rgba(255,255,255,.04);color:#f4f1e8;
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:20px;resize:vertical;min-height:100px;
  transition:border-color .2s;
}
.credo-modal .builder textarea:focus{outline:none;border-color:var(--credo-gold)}
.credo-modal .builder textarea::placeholder{color:rgba(255,255,255,.25);font-style:italic}

/* ===== TEST CHECKLIST ===== */
.credo-modal .test-list{list-style:none;padding:0;margin:24px 0}
.credo-modal .test-list li{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.92rem;color:#ddd8cf;cursor:pointer;user-select:none;
}
.credo-modal .test-list li:last-child{border-bottom:none}
.credo-modal .test-check{
  flex-shrink:0;width:22px;height:22px;
  border:2px solid rgba(255,255,255,.2);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;transition:all .2s;font-size:14px;color:transparent;
}
.credo-modal .test-list li.checked .test-check{
  background:var(--credo-gold);border-color:var(--credo-gold);color:#1c1b19;
}

/* ===== FINALE ===== */
.credo-modal .finale{text-align:center;padding:48px 0}
.credo-modal .finale h2{color:#f4f1e8;margin-bottom:16px}
.credo-modal .finale p{
  font-family:'Libre Caslon Display',Georgia,serif;
  font-size:1.1rem;color:var(--credo-gold-light);font-style:italic;
}

/* ===== FOOTER INSIDE MODAL ===== */
.credo-modal .modal-footer{
  text-align:center;padding:40px 0;
  font-size:.8rem;color:rgba(255,255,255,.35);
  border-top:1px solid rgba(255,255,255,.08);margin-top:64px;
}
.credo-modal .modal-footer a{color:var(--credo-gold-light);text-decoration:none}

/* ===== SMALL HELPERS ===== */
.credo-modal .small{font-size:.82rem;color:rgba(255,255,255,.45)}
.credo-modal .emphasis{color:var(--credo-gold);font-weight:700}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  .credo-modal{padding:24px 18px 80px}
  .credo-modal .scene{padding:24px 20px}
  .credo-modal .property{padding:16px 18px}
  .credo-modal .builder{padding:24px 20px}
  .credo-modal blockquote{padding:20px 22px;font-size:1.05rem}
  .credo-modal .compare-table{font-size:.85rem}
  .credo-modal-close{top:12px;right:12px;width:42px;height:42px;font-size:18px}
}

@media(prefers-reduced-motion:reduce){
  .credo-chapter{opacity:1!important;transform:none!important;transition:none!important}
  .book-trigger .credo-cover{transition:none!important}
  .credo-modal-overlay{transition:none!important}
  .credo-progress{display:none}
}

/* Lock body scroll and hide page content behind modal */
body.credo-modal-open{overflow:hidden}
body.credo-modal-open>.site-header,
body.credo-modal-open>.site-breadcrumbs,
body.credo-modal-open>main,
body.credo-modal-open>.site-footer{visibility:hidden}