/* 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)}
  .splash-1b .arc,.splash-1b .lattice,.splash-1b .splash-name,.splash-1b .splash-tag{animation:none!important;opacity:1;transform:none}
  .splash-1b{animation:fadeOut 200ms linear 500ms both!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:150ms!important}
}

/* ---- app: 1B splash (chosen): the five chapter arcs close in with a turn, then the lattice and the name ---- */
/* review r1: every entrance lands by ~890 ms, the name + tagline hold still, then the dissolve starts at 1000 ms */
.splash-1b{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:fadeOut 250ms var(--ease-in-out) 1000ms both;cursor:pointer}
.splash-1b::before{content:"";position:absolute;inset:18px;border:1px solid rgba(201,164,92,.45);border-radius:20px;pointer-events:none}
.splash-1b svg{width:240px;height:240px;overflow:visible}
.splash-1b .arc{transform-box:view-box;transform-origin:100px 100px;animation:arcTurn 520ms var(--ease-in-out) both;animation-delay:calc(var(--k) * 50ms)}
.splash-1b .lattice{animation:fadeIn 300ms var(--ease-out) 440ms both}
.splash-1b .splash-name{font:500 42px/1 var(--serif,'Literata',serif);color:var(--on-cloth,#F6EBD3);animation:fadeUp 350ms var(--ease-out) 460ms both}
.splash-1b .splash-tag{font:italic 400 19px/1 var(--serif,'Literata',serif);color:#D9BD80;animation:fadeUp 350ms var(--ease-out) 540ms both}
@keyframes arcTurn{from{opacity:0;transform:rotate(-14deg)}to{opacity:1;transform:none}}

/* ---- 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}}