/* share.css — Path of Breathing (Start Here / share hub). A quiet
   invitation, not a menu — warmer and more personal than the rest of
   the site, since this page is only ever handed to someone the author
   knows. Requires shared.css and module.css first. */

/* ── Hero — centred invitation ────────────────────────────────── */
.share-page .book-hero {
  text-align: center;
  align-items: center;
  border-bottom: none;
  padding-bottom: 0;
}

/* A short light rule between the personal note and the first step. */
.share-rule {
  display: block;
  width: 72px;
  height: 1px;
  background: var(--accent);
  opacity: 0.35;
  margin: 32px auto 0;
}

/* Same rule between intro and note. Above it, 52px with .book-intro's
   18px bottom margin, matching the lower rule's gap to the first step
   (44px + the step's 8px padding). */
.share-rule--intro {
  margin: 34px auto 32px;
}

/* Nav-to-title spacing and the label→title gap follow path.html:
   the 60px top comes from the base .module-label. */
.share-page .module-label {
  margin-bottom: 20px;
}

/* Title mirrors path.html: full display scale, and the emphasized word
   in the roman+italic text colour — the gold moves to the line below. */
.share-page .book-title {
  margin-bottom: 26px;
}

/* "Come — see for yourself." mirrors path.html's standfirst; the
   emphasized phrase takes the accent-bright gold from .book-intro em. */
.share-page .book-intro {
  font-family: var(--read);
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 18px;
  text-align: center;
  text-wrap: balance;
}

/* The quieter line beneath — the personal note, muted. */
.share-note {
  font-family: var(--read);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  /* In em, not px: the font grows with the window (15→17px), so a
     fixed px cap would squeeze each paragraph from two lines to three
     on wide screens. 31.5em keeps the line shape at every size. */
  max-width: 31.5em;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}

.share-note + .share-note {
  margin-top: 1em;
}

/* ── The three stops — number over name over line ─────────────── */
.share-steps {
  --step-gap: 38px;
  max-width: 460px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--step-gap);
}

/* The spine — path.html's gold thread, joining the steps into one
   path: a short bar in each gap, fading in and out like the stem
   into the mirror below. */
.share-step + .share-step::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: var(--step-gap);
  transform: translateX(-0.5px);
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--accent) 20%, transparent) 50%,
    transparent);
}

.share-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 8px 16px;
}

.share-step-num {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 9px;
  transition: opacity 0.3s ease;
}

.share-step-name {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 31px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.15;
  transition: color 0.3s ease;
}

.share-step-line {
  font-family: var(--read);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 8px;
  max-width: 340px;
}

/* Who is sitting, live (js/home.js): shown only while someone is sitting. */
.share-step-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.share-step-live[hidden] { display: none; }
/* Breathes on the shared 9s cycle, like the Sit page's breath. */
.share-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: share-live-breath 9s ease-in-out infinite;
}
@keyframes share-live-breath {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* Mouse: hover. Touch: .is-touched (js/home.js) lights the step under
   the finger and lets go when it lifts — iOS would leave :hover stuck
   on the last step touched. */
@media (hover: hover) {
  .share-step:hover .share-step-num  { opacity: 1; }
  .share-step:hover .share-step-name { color: var(--accent-bright); }
}
.share-step.is-touched .share-step-num  { opacity: 1; }
.share-step.is-touched .share-step-name { color: var(--accent-bright); }
.share-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

@media (max-width: 520px) {
  .share-steps { --step-gap: 34px; }
  .share-step-name { font-size: clamp(26px, 8vw, 30px); }
}

/* Vertical stem feeding into the mirror below — the same fading gold
   thread path.html's spine narrows to at its end-mark, not the
   horizontal .share-rule above. */
.share-end-stem {
  display: block;
  width: 1px;
  height: 56px;
  margin: 12px auto 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%,  transparent),
    color-mix(in srgb, var(--accent) 30%, transparent) 50%,
    color-mix(in srgb, var(--accent) 4%,  transparent));
}

/* ── The end of the page — the mirror, unlabeled. Same closing mark
   as path.html's .path-end. Page-scoped name since share.css and
   path.css are never loaded together. ──────────────────────────── */
.share-end {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 12px;
  color: var(--accent);
}
.share-end-mark {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}