/* The Life Manual — reading.css (v2 reading-experience layer)
 * Works with reading.js. Motion: 500–900ms, cubic-bezier(.2,.7,.2,1), transforms and opacity only
 * (the individual `translate` / `scale` properties, so the book designer's own `transform`s compose).
 * Browsers with scroll-driven animations get the settle without JS; the others get an
 * IntersectionObserver `.in-view` class (reading.js). prefers-reduced-motion: everything at rest.
 */

:root {
  --rd-ease: cubic-bezier(.2, .7, .2, 1);
  --rd-gold: var(--gold, #C4A05A);
  --rd-gold-pale: var(--gold-pale, var(--gold3, #F1E6CB));
  --rd-navy: var(--navy, #14263F);
  --rd-line: var(--rule, var(--line, #D8D4C8));
}

@keyframes rd-settle { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } }
@keyframes rd-rule   { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes rd-num    { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@keyframes rd-breathe {
  0%, 100% { opacity: .45; scale: .78; }
  50%      { opacity: 1;   scale: 1.12; }
}

/* the gold rule under every opener draws from the left */
.opener .rule { transform-origin: left center; }

/* ------------------------------------------------------------------ 1–3. settle, rule, numerals */

@media (prefers-reduced-motion: no-preference) {

  /* A. IntersectionObserver fallback (reading.js adds .rd-on, then .in-view once per element) */
  @supports not (animation-timeline: view()) {
    .rd-on :is(.opener, .callout, .soft, .pull, .card, .dodont, .definition, .practice, figure.fig:not(.fx)):not(.in-view) {
      opacity: 0; translate: 0 10px;
    }
    .rd-on :is(.opener, .callout, .soft, .pull, .card, .dodont, .definition, .practice, figure.fig:not(.fx)).in-view:not(.rd-settled) {
      animation: rd-settle .6s var(--rd-ease) both;
      animation-delay: calc(var(--i, 0) * 80ms);
    }
    .rd-on .opener:not(.in-view) .rule { scale: 0 1; }
    .rd-on .opener.in-view:not(.rd-settled) .rule { animation: rd-rule .7s var(--rd-ease) .25s both; }
    .rd-on .opener:not(.in-view) .movement-num { opacity: 0; translate: 0 8px; }
    .rd-on .opener.in-view:not(.rd-settled) .movement-num { animation: rd-num .8s var(--rd-ease) .1s both; }
  }

  /* B. Scroll-driven: the same settle, tied to each element's entry into view; no JS needed */
  @supports (animation-timeline: view()) {
    :root:not([data-motion="off"]) :is(.opener, .callout, .soft, .pull, .card, .dodont, .definition, figure.fig:not(.fx)) {
      animation: rd-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    :root:not([data-motion="off"]) .opener .rule {
      animation: rd-rule linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 32%;
    }
    :root:not([data-motion="off"]) .opener .movement-num {
      animation: rd-num linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 25%;
    }
    /* the practice band is large and belongs to the night: a plain fade on arrival */
    .rd-on .practice:not(.in-view) { opacity: 0; }
    .rd-on .practice.in-view:not(.rd-settled) { animation: rd-settle .8s var(--rd-ease) both; }
  }
}

/* ------------------------------------------------------------------ 4. rail sun marker */

.rail .toc { position: relative; }
.toc-path, .toc-sun { display: none; }

@media (min-width: 1024px) {
  .toc-path {
    display: block;
    position: absolute;
    left: var(--toc-sun-x, 6px);
    top: 0; height: 0;
    width: 1px;
    translate: -50% 0;
    background: linear-gradient(to bottom, transparent, var(--rd-line) 12%, var(--rd-line) 88%, transparent);
    pointer-events: none;
  }
  .toc-sun {
    display: block;
    position: absolute;
    left: var(--toc-sun-x, 6px);
    top: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #F3E3B6 0 18%, var(--rd-gold) 62%, #B98F45 100%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-gold) 18%, transparent),
                0 0 14px 4px color-mix(in srgb, var(--rd-gold) 30%, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
  }
  .toc-sun.is-on { opacity: 1; }
  .toc-sun.is-ready { transition: transform .5s var(--rd-ease), opacity .5s var(--rd-ease); }
}

/* ------------------------------------------------------------------ 5. scroll cue */

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .scrollcue i { animation: rd-breathe 3.6s ease-in-out infinite; }
}
.scrollcue.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s var(--rd-ease), visibility 0s linear .6s;
}
.scrollcue.is-gone i { animation-play-state: paused; }

/* ------------------------------------------------------------------ 6. drop cap */

p.dropcap::first-letter {
  float: left;
  font-family: var(--display, "Fraunces"), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-weight: 400;
  font-style: normal;
  font-size: 3.55em;
  line-height: .82;
  margin: .07em .12em 0 0;
  color: var(--dropcap, var(--heading, var(--rd-navy)));
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  p.dropcap::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0 .12em 0 0;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}
:root[data-theme="night"] p.dropcap::first-letter { color: var(--dropcap-night, var(--heading, #EEEBE2)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) p.dropcap::first-letter { color: var(--dropcap-night, var(--heading, #EEEBE2)); }
}

/* ------------------------------------------------------------------ 7. marginalia */

.daylayout > .margin { position: relative; }

.margin-note {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  box-sizing: border-box;
  max-width: 17rem;
  padding: .85rem 2rem .9rem 1rem;
  border-left: 1.5px solid var(--rd-gold);
  background: var(--panel-note, color-mix(in srgb, var(--rd-gold-pale) 38%, transparent));
  border-radius: 0 6px 6px 0;
  color: var(--fg, #26313F);
  font: 400 .8125rem/1.5 var(--ui, var(--sans, "DM Sans", system-ui, sans-serif));
  font-variation-settings: "opsz" 14;
  transition: top .5s var(--rd-ease);
}
.margin-note:focus { outline: none; }
.margin-note:focus-visible { outline: 2px solid var(--rd-gold); outline-offset: 3px; }
.margin-note p { margin: 0; }
.margin-note-label { font-size: .6875rem; letter-spacing: .06em; color: var(--fg2, #5E6875); }
.margin-note-term {
  margin-top: .15rem !important;
  font: 400 1.125rem/1.2 var(--display, "Fraunces"), Georgia, serif;
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0;
  color: var(--heading, var(--rd-navy));
}
.margin-note-short { margin-top: .4rem !important; font-style: italic; color: var(--fg, #26313F); }
.margin-note-def { margin-top: .4rem !important; color: var(--fg2, #5E6875); }
.margin-note-link {
  display: inline-block; margin-top: .55rem;
  color: var(--heading, var(--rd-navy)); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--rd-gold) 60%, transparent);
  transition: border-color .16s ease;
}
.margin-note-link:hover { border-bottom-color: var(--rd-gold); }
.margin-note-close {
  position: absolute; top: .35rem; right: .35rem;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--fg2, #5E6875); font: 400 1.1rem/1 var(--ui, var(--sans, system-ui, sans-serif));
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.margin-note-close:hover { color: var(--heading, var(--rd-navy)); background: color-mix(in srgb, var(--rd-gold) 14%, transparent); }
.margin-note-close:focus-visible { outline: 2px solid var(--rd-gold); outline-offset: 1px; }
a.term.term-noted { text-decoration-color: var(--rd-gold); text-decoration-style: solid; }

@media (prefers-reduced-motion: no-preference) {
  .margin-note:not(.is-leaving) { animation: rd-note .5s var(--rd-ease) both; }
}
@keyframes rd-note { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: none; } }

@media (max-width: 1279.98px) { .margin-note { display: none; } }

/* ------------------------------------------------------------------ reduced motion, print */

@media (prefers-reduced-motion: reduce) {
  .toc-sun.is-ready, .margin-note, .scrollcue.is-gone { transition: none; }
  .scrollcue i { animation: none; }
}
@media print {
  .toc-sun, .toc-path, .margin-note { display: none !important; }
  .rd-on :is(.opener, .callout, .soft, .pull, .card, .dodont, .definition, .practice, figure.fig) { opacity: 1 !important; translate: none !important; animation: none !important; }
  .opener .rule, .opener .movement-num { scale: none !important; opacity: 1 !important; animation: none !important; }
}