/* Shanyrak · motion tokens + every animation. Only transform and opacity are animated
   (one exception: the gold celebration line uses SVG stroke-dashoffset — see README). */
:root{
  --ease-out:cubic-bezier(.2,.7,.2,1);       /* enter, settle */
  --ease-in-out:cubic-bezier(.65,0,.35,1);   /* page turns, dissolves */
  --ease-press:cubic-bezier(.3,0,.2,1);      /* button press */
  --ease-breathe:cubic-bezier(.45,0,.55,1);  /* recording */
  --d-fast:150ms; --d-ui:200ms; --d-slow:250ms;
  --d-story:550ms; --d-long:700ms;
}
/* ---- 1. Splash: segments fly in chapter by chapter, crown closes, name fades up, all dissolves ---- */
.splash .seg{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.08);transform-box:fill-box;transform-origin:center}
.splash.play .seg{animation:segFly var(--d-story) var(--ease-out) both;animation-delay:calc(var(--k) * 110ms + var(--j) * 14ms)}
.splash .lattice{opacity:0}
.splash.play .lattice{animation:fadeIn 300ms var(--ease-out) 720ms both}
.splash .name{opacity:0;transform:translateY(8px)}
.splash.play .name{animation:fadeUp 350ms var(--ease-out) 800ms both}
.splash.play.dissolve{animation:fadeOut 300ms var(--ease-in-out) 1100ms both}
@keyframes segFly{to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---- 2. Page-to-page: View Transitions (shared cover) with class fallback ---- */
::view-transition-old(root){animation:fadeOut var(--d-slow) var(--ease-in-out) both}
::view-transition-new(root){animation:fadeIn var(--d-slow) var(--ease-in-out) both}
::view-transition-group(cover){animation-duration:var(--d-story);animation-timing-function:var(--ease-out)}
/* app (review r1): the tapped cover grows into the book page's cloth header (person.html .vt-cover). Both images
   fill the moving box (no overflow past it); the cover hands over to the header early, so the swell reads as cloth */
.vt-cover{view-transition-name:cover}
::view-transition-group(cover){animation-duration:420ms}
::view-transition-old(cover),::view-transition-new(cover){height:100%;object-fit:cover;overflow:clip}
::view-transition-old(cover){animation:fadeOut 220ms var(--ease-in-out) both}
::view-transition-new(cover){animation:fadeIn 220ms var(--ease-out) both}
/* a cover with no partner (should not happen any more) never outlives the page fade */
::view-transition-old(cover):only-child{animation:fadeOut var(--d-fast) var(--ease-in-out) both}
.fallback-enter{animation:fadeUp var(--d-slow) var(--ease-out) both}
/* ---- 3. Reader: cover opens, pages turn ---- */
.book3d{perspective:1400px}
.cover-lid{transform-origin:left center;transition:transform var(--d-long) var(--ease-in-out),opacity var(--d-long) var(--ease-in-out)}
.book3d.open .cover-lid{transform:rotateY(-150deg);opacity:0;pointer-events:none}
.page-turn-out{animation:pageOut 450ms var(--ease-in-out) both;transform-origin:left center}
.page-turn-in{animation:pageIn 450ms var(--ease-in-out) both;transform-origin:right center}
.page-turn-out.back{animation-name:pageOutBack;transform-origin:right center}
.page-turn-in.back{animation-name:pageInBack;transform-origin:left center}
@keyframes pageOut{to{opacity:0;transform:rotateY(-10deg) translateX(-4%)}}
@keyframes pageIn{from{opacity:0;transform:rotateY(8deg) translateX(4%)}to{opacity:1;transform:none}}
@keyframes pageOutBack{to{opacity:0;transform:rotateY(10deg) translateX(4%)}}
@keyframes pageInBack{from{opacity:0;transform:rotateY(-8deg) translateX(-4%)}to{opacity:1;transform:none}}
/* ---- 4. Progress ring: staggered fill, newest glows once ---- */
.ring .seg.on{transform-box:fill-box;transform-origin:center}
.ring.play .seg.on{animation:segFill 250ms var(--ease-out) both;animation-delay:calc(var(--i) * 35ms)}
.ring .halo{opacity:0}
.ring.play .halo{animation:glowOnce 700ms var(--ease-in-out) calc(var(--i) * 35ms + 300ms) both}
@keyframes segFill{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes glowOnce{0%{opacity:0}40%{opacity:.7}100%{opacity:0}}
/* ---- 5. Recording: breathing button, live level ring, fly-to-book on save ---- */
.rec-btn{transition:transform var(--d-fast) var(--ease-press)}
.rec-btn:active{transform:scale(.96)}
.recording .rec-btn{animation:breathe 2.4s var(--ease-breathe) infinite}
.level{transform:scale(var(--lvl,1));transition:transform 90ms linear;opacity:.35}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.fly{animation:flyToBook var(--d-story) var(--ease-in-out) both}
@keyframes flyToBook{to{transform:translate(var(--tx),var(--ty)) scale(.18);opacity:0}}
/* ---- 6. Transcribing: calm wait, then ink appears line by line ---- */
.waiting .dot{animation:dotPulse 1.6s var(--ease-breathe) infinite;animation-delay:calc(var(--n) * 200ms)}
@keyframes dotPulse{0%,100%{opacity:.25}50%{opacity:1}}
.ink .line{position:relative}
.ink .line::after{content:"";position:absolute;inset:-2px 0;background:var(--page,#FBF6EA);transform-origin:right center}
.ink.play .line::after{animation:inkWipe 900ms var(--ease-in-out) both;animation-delay:calc(var(--n) * 1000ms)}
@keyframes inkWipe{to{transform:scaleX(0)}}
/* ---- 7. Celebration: ring completes, gold line draws once ---- */
.celebrate .goldline{stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.celebrate.play .goldline{animation:drawLine var(--d-long) var(--ease-in-out) 1.2s both}
.celebrate .cel-text{opacity:0;transform:translateY(6px)}
.celebrate.play .cel-text{animation:fadeUp 400ms var(--ease-out) 1.6s both}
@keyframes drawLine{to{stroke-dashoffset:0}}
/* ---- 8. Micro-interactions ---- */
.cover{transition:transform var(--d-ui) var(--ease-out)}
.cover:hover,.cover:focus-visible{transform:translateY(-6px)}
.btn{transition:transform var(--d-fast) var(--ease-press)}
.btn:active{transform:scale(.97)}
.sheet-backdrop{opacity:0;transition:opacity var(--d-slow) var(--ease-out);pointer-events:none;animation:none}
.sheet{transform:translateY(100%);transition:transform var(--d-slow) var(--ease-out);animation:none}
/* app: the app's backdrop wraps its sheet, so the open class sits on the backdrop itself */
.sheet-open .sheet-backdrop,.sheet-backdrop.sheet-open{opacity:1;pointer-events:auto}
.sheet-open .sheet{transform:none}
/* app: desktop sheets are centred dialogs — rise a little instead of the full height */
@media (min-width:960px){.sheet{transform:translateY(24px);opacity:0;transition:transform var(--d-slow) var(--ease-out),opacity var(--d-slow) var(--ease-out)}.sheet-open .sheet{opacity:1}}
/* app: the app's toast is centred with translateX(-50%) — keep it while it rises */
.toast{opacity:0;transform:translate(-50%,8px);transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out);animation:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.skeleton{position:relative;overflow:hidden;background:#EBE1CF}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,250,240,.7),transparent);transform:translateX(-100%);animation:shimmer 2.2s linear infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
/* ---- Reduced motion: fades or still ---- */
@media (prefers-reduced-motion:reduce){
  .splash .seg,.splash .lattice,.splash .name,.ring .seg.on,.celebrate .cel-text{opacity:1;transform:none;animation:none!important}
  .splash.play.dissolve{animation:fadeOut 200ms linear 600ms both}
  .ring .halo,.skeleton::after{animation:none!important;opacity:0}
  .celebrate .goldline{stroke-dashoffset:0;animation:none!important}
  .recording .rec-btn,.waiting .dot{animation:none!important}
  .level{transition:none;transform:none}
  .page-turn-out,.page-turn-in{animation:fadeOut 200ms linear both}
  .page-turn-in{animation-name:fadeIn}
  .cover-lid{transition:opacity 200ms linear}
  .book3d.open .cover-lid{transform:none}
  .fly{animation:fadeOut 200ms linear both}
  .ink .line::after{display:none}
  .cover,.btn,.sheet,.sheet-backdrop,.toast{transition:opacity 150ms linear}
  .cover:hover,.btn:active{transform:none}
  .sheet{transform:none;opacity:0}.sheet-open .sheet{opacity:1}
  .toast{transform:translate(-50%,0)}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:150ms!important}
}

/* ---- splash 1c (handoff_logo_splash_guide): the new mark builds itself, ≈1.6 s ---- */
.splash-1c{position:fixed;inset:0;z-index:100;background-color:var(--cloth,#2B2823);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;animation:shFadeOut 300ms cubic-bezier(.65,0,.35,1) 1300ms both;cursor:pointer}
.splash-1c::before{content:"";position:absolute;inset:18px;border:1px solid rgba(201,164,92,.45);border-radius:20px;pointer-events:none}
.splash-1c svg{width:220px;height:220px;overflow:visible}
/* 1 · the 40 pages arrive, chapter by chapter */
.splash-1c .seg{opacity:0;transform-box:fill-box;transform-origin:center;animation:shSegIn 260ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 13ms + var(--k) * 40ms)}
/* 2 · the crown's rim closes */
.splash-1c .rim{stroke-dasharray:1;stroke-dashoffset:1;animation:shDraw 420ms cubic-bezier(.65,0,.35,1) 620ms both}
/* 3 · the doubled crossbars are set in, pair by pair */
.splash-1c .bar{opacity:0;transform-box:fill-box;transform-origin:center;animation:shBarIn 300ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(860ms + var(--b) * 45ms)}
.splash-1c .bar.v{--s:scaleY(.1)}.splash-1c .bar.h{--s:scaleX(.1)}
.splash-1c .splash-name{font:500 42px/1 var(--serif,'Literata',serif);color:var(--on-cloth,#F6EBD3);animation:shFadeUp 350ms cubic-bezier(.2,.7,.2,1) 900ms both}
.splash-1c .splash-tag{font:italic 400 19px/1 var(--serif,'Literata',serif);color:#D9BD80;animation:shFadeUp 350ms cubic-bezier(.2,.7,.2,1) 980ms both}
@keyframes shSegIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes shDraw{to{stroke-dashoffset:0}}
@keyframes shBarIn{from{opacity:0;transform:var(--s)}to{opacity:1;transform:none}}
@keyframes shFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shFadeOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .splash-1c .seg,.splash-1c .rim,.splash-1c .bar,.splash-1c .splash-name,.splash-1c .splash-tag{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}
  .splash-1c{animation:shFadeOut 200ms linear 600ms both!important}
}

/* ---- v11 (design_handoff_shanyrak_v11): recording level + waveform, reader ink line, gold rule draw ---- */
@keyframes shLevel{0%{transform:scale(1)}18%{transform:scale(1.2)}33%{transform:scale(1.06)}52%{transform:scale(1.28)}68%{transform:scale(1.1)}84%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes shBar{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
@keyframes shInk{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes shDraw{to{stroke-dashoffset:0}}

/* Shanyrak «?» guide — one small looping scene per step. Scoped to .gs. */
.gs{position:relative;width:300px;height:190px;margin:6px auto 18px;display:flex;align-items:center;justify-content:center}
.gs svg{display:block;overflow:visible}
/* 1 · choose whose book */
.gs-books{display:flex;gap:12px;align-items:flex-end}
.gs-bk{display:flex;flex-direction:column;align-items:center;gap:8px;font:500 15px/1 var(--serif,'Literata',serif);color:#23201C}
.gs-book{position:relative;width:62px;height:84px;border-radius:3px 5px 5px 3px;display:grid;place-items:center;box-shadow:0 10px 14px -10px rgba(30,20,10,.8);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);animation:gsRise 480ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
.gs-book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9%;background:rgba(0,0,0,.26)}
.gs-book::after{content:"";position:absolute;left:14%;right:6%;top:6%;bottom:6%;border:1px solid rgba(201,164,92,.5);border-radius:2px}
.gs-book.pick{animation:gsRise 480ms cubic-bezier(.2,.7,.2,1) both,gsPick 3.2s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i) * 90ms),600ms}
.gs-book.p2{animation-delay:calc(var(--i) * 90ms),2200ms}
@keyframes gsRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes gsPick{0%,55%,100%{transform:translateY(0);box-shadow:0 10px 14px -10px rgba(30,20,10,.8)}12%,42%{transform:translateY(-12px);box-shadow:0 0 0 3px #FFFDF9,0 0 0 5px #8A6424,0 18px 20px -12px rgba(30,20,10,.7)}}
/* 2 · tell it yourself, or sit beside them — the two cases alternate */
.gs-alt{position:relative;width:300px;height:130px}
.gs-alt .gs-sit{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
.gs-a{animation:gsA 6s cubic-bezier(.65,0,.35,1) infinite}.gs-b{opacity:0;animation:gsB 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes gsA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes gsB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.gs-sit{display:flex;align-items:flex-end;gap:0;padding-bottom:14px}
.gs-sit::after{content:"";position:absolute;left:-10px;right:-10px;bottom:0;height:6px;border-radius:3px;background:#D8CBB5}
.gs-who{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font:500 22px/1 var(--serif,'Literata',serif)}
.gs-who.el{background:#2B2823;color:#F6EBD3;box-shadow:0 0 0 4px #FFFDF9,0 0 0 6px #C9A45C}.gs-who.me{background:#ECE6DB;color:#5F574D}
.gs-mid{display:flex;align-items:flex-end;gap:6px;margin:0 8px}
.gs-arcs{display:block;margin-bottom:22px}
.gs-arcs path{opacity:0;animation:gsArc 1.8s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--i) * 220ms)}
@keyframes gsArc{0%{opacity:0}25%{opacity:1}70%,100%{opacity:0}}
.gs-phone{width:62px;height:30px;border-radius:7px;background:#1E1B17;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;box-sizing:border-box;margin-bottom:2px}
.gs-phone i{flex:none;width:12px;height:12px;border-radius:50%;background:#A6322A;animation:gsBreathe 2.4s cubic-bezier(.45,0,.55,1) infinite}
.gs-phone b{width:3px;height:14px;border-radius:2px;background:#C9A45C;transform:scaleY(.3);animation:gsBar var(--d) cubic-bezier(.45,0,.55,1) infinite}
@keyframes gsBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* 3 · press record */
.gs-rec{display:flex;flex-direction:column;align-items:center;gap:16px}
.gs-btn{position:relative;width:78px;height:78px;border-radius:50%;background:#A6322A;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(166,50,42,.18);animation:gsPress 3.2s cubic-bezier(.45,0,.55,1) infinite}
.gs-btn::before{content:"";position:absolute;inset:-18px;border-radius:50%;background:rgba(166,50,42,.12);animation:gsBreathe 2.4s cubic-bezier(.45,0,.55,1) infinite;z-index:-1}
.gs-btn i{width:24px;height:24px;border-radius:6px;background:#FFF8EE}
.gs-bars{display:flex;align-items:center;gap:4px;height:40px}
.gs-bars b{width:5px;height:100%;border-radius:3px;background:#8A6424;transform:scaleY(.2);animation:gsBar var(--d) cubic-bezier(.45,0,.55,1) var(--dl) infinite}
@keyframes gsBar{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
@keyframes gsPress{0%,8%,100%{transform:scale(1)}4%{transform:scale(.9)}}
/* 4 · the page appears */
.gs-page{position:relative;width:262px;height:180px;border-radius:4px;background:#FFFDF9;box-shadow:5px 5px 0 #EDE3D2,0 0 0 1px #EFE9DF,0 16px 24px -18px rgba(60,40,15,.5);padding:14px 18px 10px;box-sizing:border-box;display:flex;flex-direction:column;font-family:var(--serif,'Literata',serif)}
.gs-page .rh{display:flex;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid #E2DBD0;font:italic 400 11px/1.2 inherit;font-family:inherit;color:#6E655A}
.gs-page .wave{position:absolute;left:18px;right:18px;top:40px;display:flex;align-items:center;justify-content:center;gap:4px;height:40px;animation:gsFall 3.8s cubic-bezier(.65,0,.35,1) infinite}
.gs-page .wave b{width:4px;height:100%;border-radius:2px;background:#8A6424;transform:scaleY(var(--h))}
.gs-page .tx{margin-top:10px;display:flex;flex-direction:column}
.gs-page .ln{font:italic 400 15px/1.5 inherit;font-family:inherit;color:#2E2A25;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:gsInk 3.8s cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--i) * 260ms)}
.gs-page .ln em{font-style:normal;font-weight:500;font-size:30px;line-height:.8;color:#5A2E2A;margin-right:1px}
.gs-page .fo{margin-top:auto;padding-top:4px;text-align:center;font:400 11px/1 inherit;font-family:inherit;color:#6E655A}
@keyframes gsFall{0%,16%{opacity:1;transform:none}30%,100%{opacity:0;transform:translateY(30px) scaleY(.2)}}
@keyframes gsInk{0%,24%{clip-path:inset(0 100% 0 0);opacity:1}46%,90%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
/* 5 · the шаңырақ fills */
.gs-done{display:flex;flex-direction:column;align-items:center;gap:10px}
.gs-done span{font:400 15px/1 var(--sans,'PT Sans',sans-serif);color:#5F574D}.gs-done b{font:500 22px/1 var(--serif,'Literata',serif);color:#23201C}
.gs-ring .seg{opacity:0;transform-box:fill-box;transform-origin:center;animation:gsSeg 4.4s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--i) * 28ms)}
.gs-ring .rim{stroke-dasharray:1;stroke-dashoffset:1;animation:gsRim 4.4s cubic-bezier(.65,0,.35,1) infinite}
.gs-ring .bars{opacity:0;animation:gsBars 4.4s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes gsSeg{0%{opacity:0;transform:scale(.5)}5%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gsRim{0%,28%{stroke-dashoffset:1;opacity:1}40%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gsBars{0%,36%{opacity:0}46%,90%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .gs-a{display:none}.gs-b{opacity:1}
  .gs *,.gs *::before{animation:none!important}
  .gs-ring .seg,.gs-ring .bars{opacity:1;transform:none}.gs-ring .rim{stroke-dashoffset:0}
  .gs-page .ln{clip-path:none}.gs-page .wave{opacity:0}.gs-bars b{transform:scaleY(.6)}
}

/* ---- Bengü Iz loading screen (handoff_bengu_iz spec 02, 1a paper): a saying + the symbol whose groove draws in ---- */
.bi-splash{position:fixed;inset:0;z-index:100;background:#F7F3EC;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 32px 140px;cursor:pointer;transition:opacity .6s cubic-bezier(.65,0,.35,1)}
.bi-splash.is-out{opacity:0;pointer-events:none}
.bi-sp-body{max-width:560px;display:flex;flex-direction:column;align-items:center;text-align:center}
.bi-sp-rule{width:40px;height:1px;background:#B8923A;margin-bottom:22px}
.bi-sp-say{margin:0;font-family:var(--serif,'Literata',serif);font-weight:400;line-height:1.2;color:#241B12;text-wrap:balance}
.bi-sp-line{display:block;opacity:0;animation:biSayIn .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--l) * 160ms)}
.bi-sp-line+.bi-sp-line{margin-top:.25em}
.bi-sp-by{margin-top:22px;font:700 16px/1.2 var(--sans,'PT Sans',sans-serif);text-transform:uppercase;letter-spacing:.14em;color:#7A5A1E;opacity:0;animation:biSayIn .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--l) * 160ms + 120ms)}
.bi-sp-foot{position:absolute;left:0;right:0;bottom:64px;display:flex;align-items:center;justify-content:center;gap:12px}
.bi-sp-foot img{height:34px;width:auto}
.bi-sp-groove{stroke-dasharray:1;stroke-dashoffset:1;animation:shDraw 1.7s cubic-bezier(.65,0,.35,1) .1s both}
@keyframes biSayIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:700px){.bi-sp-body{max-width:780px}.bi-sp-say{font-size:clamp(34px,3.6vw,44px)!important}}
@media (prefers-reduced-motion:reduce){
  .bi-sp-line,.bi-sp-by{animation:none;opacity:1;transform:none}
  .bi-sp-groove{animation:none;stroke-dashoffset:0}
}