/* =========================================================
   story-extras — quote cards · ambient · reactions · letter ·
   subscribe · cinematic intro. Loaded on story pages.
   ========================================================= */

/* ---- shared toast ---- */
.sx-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(10px);
  z-index: 300; padding: 0.7rem 1.2rem; border-radius: 999px;
  background: rgba(28, 22, 16, 0.96); border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--sans); font-size: 0.85rem; opacity: 0; transition: opacity .25s, transform .25s;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: calc(100vw - 2rem); text-align: center; pointer-events: none;
}
.sx-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 1. Quote cards ---- */
#sx-qfab {
  position: absolute; transform: translate(-50%, 0); z-index: 60;
  display: flex; gap: .35rem;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
#sx-qfab.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, -4px); }
#sx-qfab button {
  font-family: var(--sans); font-size: .8rem; font-weight: 600; color: #1a1206;
  background: var(--accent); border: none; border-radius: 999px; padding: .5rem .9rem;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
#sx-qfab button.sx-qfab--alt { background: rgba(26,20,13,.96); color: var(--ink); border: 1px solid var(--accent); }
#sx-qfab button:hover { filter: brightness(1.06); }

.sx-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(5,4,3,.82); backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s; padding: 1.25rem;
}
.sx-modal.is-open { opacity: 1; }
.sx-modal[hidden] { display: none; }
.sx-qpanel { width: min(440px, 92vw); display: flex; flex-direction: column; gap: 1rem; transform: translateY(10px); transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.sx-modal.is-open .sx-qpanel { transform: none; }
/* Fit any aspect (incl. tall 9:16) inside the viewport — cap height, keep ratio. */
#sx-qcanvas { max-width: 100%; max-height: 62vh; width: auto; height: auto; margin: 0 auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); display: block; }
.sx-qctrls { display: flex; flex-direction: column; gap: .7rem; }
.sx-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.sx-row > span { font-family: var(--sans); font-size: .72rem; color: var(--muted); width: 100%; letter-spacing: .04em; }
.sx-pill { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); background: rgba(255,255,255,.04); border: 1px solid var(--rule); border-radius: 999px; padding: .45rem .9rem; cursor: pointer; transition: all .2s; }
.sx-pill:hover { border-color: var(--accent); color: var(--ink); }
.sx-pill.is-on { background: var(--accent); border-color: var(--accent); color: #1a1206; font-weight: 600; }
.sx-qactions { display: flex; gap: .5rem; margin-top: .3rem; }
.sx-qactions .sx-pill { flex: 1; text-align: center; }
/* Save/download = the primary action, but kept calm: a quiet gold outline rather
   than a loud filled chip (and no icon in the label). */
.sx-pill--gold { background: transparent; color: var(--accent); border-color: var(--accent); font-weight: 600; }
.sx-pill--gold:hover { background: rgba(217,184,120,.12); color: var(--ink); }

/* ---- 2. Ambient floating button ---- */
.sx-amb {
  position: fixed; right: 1.5rem; bottom: 10.5rem; z-index: 70;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft);
  background: rgba(20,16,11,.92); border: 1px solid var(--rule); border-radius: 999px;
  padding: .55rem .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; backdrop-filter: blur(6px);
}
.sx-amb:hover { color: var(--ink); border-color: var(--accent); }
.sx-amb.is-on { color: var(--accent); border-color: var(--accent); }
body.is-reading .sx-amb, body.is-tts-open .sx-amb { display: none; }
@media (max-width: 640px) { .sx-amb { right: 1rem; bottom: 9.5rem; } }

/* ---- 3. End-of-story block: reactions + letter + subscribe ---- */
.sx-end {
  max-width: var(--measure, 38rem); margin: 1rem auto 5rem; padding: 2.5rem clamp(1.5rem,5vw,2rem) 0;
  border-top: 1px solid var(--rule); font-family: var(--sans);
}
.sx-end__h { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.2rem; }
.sx-react { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.sx-reactbtn { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); background: rgba(255,255,255,.03); border: 1px solid var(--rule); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: all .2s; }
.sx-reactbtn:hover { border-color: var(--accent); color: var(--ink); }
.sx-reactbtn.is-mine { border-color: var(--accent); background: rgba(217,184,120,.12); color: var(--ink); }
.sx-reactbtn .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .82rem; }
.sx-reactbtn.is-pop { animation: sxPop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes sxPop { 0%{transform:scale(1)} 40%{transform:scale(1.16)} 100%{transform:scale(1)} }
.sx-letterlink { font-family: var(--sans); font-size: .9rem; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; border-bottom: 1px solid transparent; }
.sx-letterlink:hover { border-bottom-color: var(--accent); }

.sx-sub { margin-top: 2.5rem; }
.sx-sub__row { display: flex; gap: .5rem; max-width: 30rem; }
.sx-input { font-family: var(--sans); font-size: .95rem; color: var(--ink); background: rgba(255,255,255,.03); border: 1px solid var(--rule); border-radius: 10px; padding: .75rem .9rem; width: 100%; }
.sx-input:focus { border-color: var(--accent); }
.sx-btn-gold { font-family: var(--sans); font-weight: 600; font-size: .9rem; white-space: nowrap; background: var(--accent); color: #1a1206; border: none; border-radius: 10px; padding: .75rem 1.3rem; cursor: pointer; }
.sx-btn-gold:hover { filter: brightness(1.08); }
.sx-btn-gold:disabled { opacity: .5; cursor: default; }
.sx-sub__tg { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin: .8rem 0 0; }
.sx-sub__tg a { color: var(--accent); border-bottom: 1px solid transparent; }
.sx-sub__tg a:hover { border-bottom-color: var(--accent); }
.sx-sub__hint { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); margin: 0 0 .7rem; }
.sx-ok { font-family: var(--sans); color: var(--accent); }

/* letter modal */
.sx-mpanel { width: min(440px, 92vw); background: #14100b; border: 1px solid var(--rule); border-radius: 14px; padding: 1.5rem; transform: translateY(10px); transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.sx-modal.is-open .sx-mpanel { transform: none; }
.sx-mt { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; margin: 0 0 .4rem; color: var(--ink); }
.sx-md { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin: 0 0 1.2rem; line-height: 1.5; }
.sx-form { display: flex; flex-direction: column; gap: .7rem; }
.sx-textarea { font-family: var(--serif); font-size: 1rem; line-height: 1.6; min-height: 120px; resize: vertical; }

/* ---- 4. Cinematic intro ---- */
#sx-intro { position: fixed; inset: 0; z-index: 250; background: #070504; display: grid; place-items: center; cursor: pointer; opacity: 1; }
#sx-intro[hidden] { display: none; }
#sx-intro.is-done { opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 1.2s ease; }
.sx-intro__inner { text-align: center; padding: 2rem; }
.sx-intro__kicker { font-family: var(--sans); font-size: .8rem; letter-spacing: .4em; text-transform: uppercase; color: var(--accent); opacity: 0; margin: 0 0 1.6rem; }
.sx-intro__title { font-family: var(--sans); font-weight: 700; font-size: clamp(3rem,12vw,7rem); line-height: .95; margin: 0; opacity: 0; color: var(--ink); }
.sx-intro__epi { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); margin: 1.8rem auto 0; max-width: 26rem; opacity: 0; line-height: 1.6; }
.sx-intro__skip { position: fixed; bottom: 2rem; right: 2rem; font-family: var(--sans); font-size: .78rem; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .45rem 1rem; cursor: pointer; }
.sx-intro__skip:hover { color: var(--ink); border-color: var(--ink-soft); }
#sx-intro.is-playing .sx-intro__kicker { animation: sxFade 1.2s ease forwards .2s; }
#sx-intro.is-playing .sx-intro__title { animation: sxTitleIn 2s cubic-bezier(.2,.7,.2,1) forwards .9s; }
#sx-intro.is-playing .sx-intro__epi { animation: sxFade 1.6s ease forwards 3s; }
@keyframes sxFade { from{opacity:0} to{opacity:1} }
@keyframes sxTitleIn { from{opacity:0; letter-spacing:.5em; transform:translateY(12px)} to{opacity:1; letter-spacing:-.02em; transform:none} }
@media (prefers-reduced-motion: reduce) {
  #sx-intro .sx-intro__kicker, #sx-intro .sx-intro__title, #sx-intro .sx-intro__epi { opacity: 1 !important; animation: none !important; }
}

.sx-qhint { position:fixed; left:50%; bottom:6.4rem; transform:translateX(-50%) translateY(8px); z-index:96; max-width:calc(100vw - 2rem); font-family:var(--sans); font-size:.82rem; line-height:1.4; color:var(--ink); background:rgba(28,22,16,.97); border:1px solid var(--rule); border-radius:999px; padding:.55rem 1.05rem; box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transition:opacity .35s, transform .35s; pointer-events:none; text-align:center; }
.sx-qhint.is-on { opacity:1; transform:translateX(-50%) translateY(0); }
.sx-qhint b { color:var(--accent); font-weight:600; }
body.is-reading .sx-qhint, body.is-tts-open .sx-qhint { display:none; }

/* ---- 1b. Reels from a selection (reader-made, her voice) ---- */
.sx-reelmodal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; background: rgba(5,4,3,.85); backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s; padding: 1.25rem; }
.sx-reelmodal.is-open { opacity: 1; }
.sx-reelmodal[hidden] { display: none; }
.sx-reelwrap { display: flex; flex-direction: column; align-items: center; gap: .9rem; transform: translateY(10px); transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.sx-reelmodal.is-open .sx-reelwrap { transform: none; }
.sx-reel { position: relative; width: min(300px, 78vw); aspect-ratio: 9/16; border-radius: 18px; overflow: hidden; background: #0a0806; border: 1px solid var(--rule); box-shadow: 0 24px 64px rgba(0,0,0,.55); }
.sx-reel__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sx-reel.is-rec::after { content: 'запись…'; position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; color: #1a1206; background: var(--accent); padding: .2rem .6rem; border-radius: 999px; z-index: 3; }
.sx-reel__bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 25%, #1c160e, #0a0806 70%); }
.sx-reel__grain { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,6,4,.4), transparent 22%, transparent 68%, rgba(8,6,4,.66)); }
.sx-reel__q { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 13% 9% 22%; font-family: var(--serif); font-size: 1.4rem; line-height: 1.34; color: var(--ink); }
.sx-reel__q.sm { font-size: 1.08rem; line-height: 1.4; }
.sx-reel__lines { width: 100%; }
.sx-reel__w { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.sx-reel__w.on { opacity: 1; transform: none; }
.sx-reel__brand { position: absolute; left: 9%; right: 9%; bottom: 7%; font-family: var(--sans); opacity: 0; transition: opacity .8s ease; }
.sx-reel__brand.on { opacity: 1; }
.sx-reel__brand .nm { font-size: .8rem; color: var(--ink); }
.sx-reel__brand .hd { font-size: .72rem; color: var(--accent); margin-top: .15rem; }
.sx-reel__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6,5,3,.32); border: none; cursor: pointer; transition: opacity .3s; }
.sx-reel__play svg { width: 54px; height: 54px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.sx-reel.playing .sx-reel__play { opacity: 0; pointer-events: none; }
.sx-reelacts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.sx-reelhint { font-family: var(--sans); font-size: .8rem; color: var(--muted); max-width: 300px; text-align: center; line-height: 1.5; }
.sx-reelbeds { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; max-width: 320px; }
.sx-reelbeds .sx-pill { font-size: .76rem; padding: .35rem .7rem; }

@media print { .sx-amb, .sx-end, .sx-modal, .sx-reelmodal, #sx-intro, #sx-qfab, .sx-toast, .sx-qmark { display: none !important; } }

/* One-tap quote → card/Reel marker on quote blocks */
blockquote.wisdom { position: relative; }
.sx-qmark {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: 0;
  color: var(--accent); background: rgba(20, 16, 11, .55);
  border: 1px solid rgba(217, 184, 120, .35); border-radius: 50%;
  cursor: pointer; opacity: .5; -webkit-tap-highlight-color: transparent;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
.sx-qmark:hover, .sx-qmark:focus { opacity: 1; background: rgba(217, 184, 120, .16); border-color: var(--accent); outline: none; }
body.is-reading .sx-qmark { display: none; }

/* Loading spinner on the Reels Save button while the server renders the video */
.sx-pill.is-loading { opacity: .85; }
.sx-pill.is-loading::before {
  content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .45em;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  vertical-align: -2px; animation: sx-spin .7s linear infinite;
}
@keyframes sx-spin { to { transform: rotate(360deg); } }

/* Gentle fade-up reveal for generic /s/:slug stories (driven by reveals.js).
   Only takes effect when JS adds .rv; reduced-motion users never get the hidden
   state. «Еремито» uses its own .fade-up via story.js, not this. */
@media (prefers-reduced-motion: no-preference) {
  #article .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
  #article .rv.rv-in { opacity: 1; transform: none; }
}

/* One-time hint «можно сделать рилс / картинку-цитату» under the story title.
   Aligned to the prose column (--measure); fades as the reader scrolls. */
.reel-hint { max-width: var(--measure, 42rem); margin: 0 auto 1.6rem; padding: 0 clamp(1.5rem, 5vw, 2rem); opacity: 0; transform: translateY(-4px); overflow: hidden; transition: opacity 1.2s ease, transform 1s ease, max-height 1.2s ease, margin-bottom 1.2s ease; }
.reel-hint.is-in { opacity: .9; transform: none; }
.reel-hint.is-faded { opacity: 0; }
.reel-hint__line { font-family: var(--sans); font-size: .9rem; line-height: 1.5; color: var(--accent); border-left: 2px solid rgba(217, 184, 120, .4); padding: .12rem 0 .12rem .75rem; margin: 0; }
.reel-hint__line span { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .reel-hint { transition: none; opacity: .9; transform: none; } }