/* The book itself: paper, page contents, and the turn. Shared by the editor and by
   exported gift files, so it carries no editor chrome. */

:root{
  --ink-default:#1d1f22;
  --ink-soft:rgba(29,31,34,.62);
  --ink-blue:#2440c8;
  --ink-red:#b0392b;
  --font-sans:Futura,"Avenir Next","Century Gothic",system-ui,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-hand:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --fold-ease:cubic-bezier(.42,.05,.25,1);
  --fold-dur:850ms;
}

/* ---------- frame ---------- */
.sb-wrap{display:grid; justify-items:center; gap:18px; width:100%; position:relative; z-index:1}
.sb-stage{display:flex; align-items:center; justify-content:center; width:100%}
.sb-arrow{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; border:0; background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:color .2s, transform .16s cubic-bezier(.23,1,.32,1);
  -webkit-tap-highlight-color:transparent;
}
.sb-arrow:hover{color:var(--ink-default)}
.sb-arrow:active{transform:scale(.9)}

.sb-book{
  position:relative; flex:1 1 0; min-width:0; max-width:860px;
  aspect-ratio:1280/720; perspective:2600px; touch-action:pan-y;
}
.sb-book::before{
  content:""; position:absolute; inset:9% 19% 3% 21%;
  border-radius:18px; background:rgba(20,22,30,.22); filter:blur(28px);
}
.sb-base,.sb-anim{position:absolute; inset:0; transform-style:preserve-3d}
.sb-anim{pointer-events:none}

/* ---------- opening and shutting the case ---------- */
.sb-book{transition:transform .7s cubic-bezier(.4,.05,.2,1)}
.sb-half.board{
  transition:transform .7s cubic-bezier(.4,.05,.2,1);
  backface-visibility:hidden; z-index:1;
}
.sb-half.left.board{transform-origin:right center}
.sb-half.right.board{transform-origin:left center}
/* the visible board spans 50%-86.9% of the spread, so its centre is 68.45%:
   shifting by 18.45% is what actually lands it in the middle of the stage */
.sb-book.closed-front{transform:translateX(-18.45%)}
.sb-book.closed-front .sb-half.left.board{transform:rotateY(180deg)}
.sb-book.closed-back{transform:translateX(18.45%)}
.sb-book.closed-back .sb-half.right.board{transform:rotateY(-180deg)}
.sb-book.closed{cursor:pointer}
/* the page block, seen at the fore-edge of a shut book */
.sb-book.closed .sb-half.board::after{
  content:""; position:absolute; top:15%; bottom:14%; width:1.5%;
  background:repeating-linear-gradient(to bottom,
    var(--stack,#ded6c3) 0 1.5px, rgba(255,255,255,.5) 1.5px 3px);
  box-shadow:0 .5px 2px rgba(20,22,30,.25);
}
.sb-book.closed-front .sb-half.right.board::after{right:24.6%; border-radius:0 2px 2px 0}
.sb-book.closed-back .sb-half.left.board::after{left:24.6%; border-radius:2px 0 0 2px}
.sb-book.closed-front .sb-half.left.board::after,
.sb-book.closed-back .sb-half.right.board::after{display:none}
.sb-book.closed::before{inset:9% 19% 3% 48%}
.sb-book.closed-back::before{inset:9% 48% 3% 19%}

/* ---------- a spread ---------- */
.spread{
  position:absolute; top:0; left:0; width:100%; aspect-ratio:1280/720;
  container-type:inline-size;
}
/* 1em == 1% of the book's width, for everything drawn on a page.
   This has to sit on a CHILD of the container: container units used ON the container
   resolve against its own ancestor container (the viewport here), not itself. */
.spread > *{font-size:1cqw}
.paper-stack{
  position:absolute; inset:0; clip-path:url(#bk-paper);
  background:var(--stack,#ded6c3);
}
.paper-stack.s1{transform:translateY(.55%); opacity:.45}
.paper-stack.s2{transform:translateY(.3%); opacity:.5}

.paper{
  position:absolute; inset:0; clip-path:url(#bk-paper);
  background-color:var(--tone,#f4efe2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ---------- the cover ---------- */
.spread.cover .paper{
  background-color:var(--board,#2e463a);
  background-blend-mode:overlay;
}
/* the covers sit inside the paper's real bounds, not the spread's box:
   the sheet spans 13.1%-86.9% across and roughly 14%-88% down */
.cover-back,.cover-front{position:absolute; top:14.5%; bottom:12.5%}
.cover-back{left:13.4%; right:50.3%}
.cover-front{left:50.3%; right:13.4%}
/* the back cover is the mirror: the words close on the left, bare board on the right */
.spread.back-cover .cover-front{left:13.4%; right:50.3%}
.spread.back-cover .cover-back{left:50.3%; right:13.4%}
.cover-mark{
  position:absolute; left:50%; bottom:8%; width:4.4em; height:4.4em; margin-left:-2.2em;
  border:1px solid var(--cover-ink-soft,rgba(244,239,226,.5)); opacity:.45; border-radius:50%;
}
.cover-mark::after{
  content:""; position:absolute; inset:1.2em; border:1px solid var(--cover-ink-soft,rgba(244,239,226,.4)); opacity:.5;
  border-radius:50%;
}
.cover-frame{
  position:absolute; inset:6% 8%;
  border:1px solid var(--cover-ink-soft,rgba(244,239,226,.55));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.2em; padding:2.6em 1.8em; text-align:center;
}
.cover-frame::before{
  content:""; position:absolute; inset:.9em; border:1px solid var(--cover-ink-soft,rgba(244,239,226,.4)); opacity:.45;
}
.cover-title{
  line-height:1.16; color:var(--cover-ink,#f4efe2); letter-spacing:.02em;
  max-width:100%; overflow-wrap:break-word;
}
.cover-from{
  font-family:var(--font-sans); font-size:1.7em; letter-spacing:.28em;
  text-transform:uppercase; color:var(--cover-ink-soft,rgba(244,239,226,.62));
}
.cover-from::before{content:"from "}
.cover-note{
  font-size:3em; line-height:1.4; color:var(--cover-ink,#f4efe2); letter-spacing:.02em;
  max-width:100%; overflow-wrap:break-word; white-space:pre-wrap;
}
.spread.back-cover .cover-from{font-size:1.5em}
.spread.cover .empty-hint{color:var(--cover-ink-soft,rgba(244,239,226,.4))}

/* a page can carry a different colour on each side */
.paper-side{position:absolute; top:0; bottom:0; width:50%}
.paper-side.left{left:0; background:var(--tone-left)}
.paper-side.right{left:50%; background:var(--tone-right)}

/* "turn your phone" — shown over the booklet, never instead of it */
.rotate-hint{
  position:absolute; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(10,12,16,.55); backdrop-filter:blur(2px); cursor:pointer;
  animation:rh-in .4s ease both; border-radius:inherit;
}
body > .rotate-hint{position:fixed}
.rotate-hint[hidden]{display:none !important}
@keyframes rh-in{from{opacity:0}}
.rotate-card{
  display:grid; justify-items:center; gap:14px; max-width:252px; padding:26px 24px;
  text-align:center; color:#fbf9f4;
  background:rgba(18,20,26,.92); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; box-shadow:0 16px 44px rgba(0,0,0,.4);
}
.rotate-card svg{opacity:.95; animation:rh-tilt 2.6s ease-in-out infinite}
@keyframes rh-tilt{0%,55%,100%{transform:rotate(0)} 75%{transform:rotate(-82deg)}}
.rotate-card p{
  margin:0; font-size:13px; line-height:1.6; letter-spacing:.02em;
  font-family:Futura,"Avenir Next","Century Gothic",system-ui,sans-serif;
}

/* the music button — the player itself is a 1px stage behind it */
.music{position:fixed; right:20px; bottom:20px; z-index:120}
.music[hidden]{display:none !important}
.music-stage{position:absolute; right:0; bottom:0; width:1px; height:1px; overflow:hidden; opacity:.01; pointer-events:none}
.music-btn{
  position:relative; width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--music-line,rgba(255,255,255,.34));
  background:var(--music-bg,rgba(20,22,30,.42)); color:var(--music-ink,#fff);
  display:grid; place-items:center; padding:0;
  backdrop-filter:blur(8px); transition:transform .18s, background .2s, opacity .2s;
  opacity:.72;
}
.music-btn:hover{opacity:1; transform:scale(1.06)}
.music-btn:active{transform:scale(.94)}
.music.playing .music-btn{opacity:1}
.music.loading .music-btn{opacity:.5}
.eq{display:flex; align-items:flex-end; gap:2px; height:13px}
.eq i{width:2.5px; background:currentColor; border-radius:1px; animation:eq .9s ease-in-out infinite}
.eq i:nth-child(1){height:60%; animation-delay:-.2s}
.eq i:nth-child(2){height:100%; animation-delay:-.5s}
.eq i:nth-child(3){height:45%}
@keyframes eq{0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)}}

/* page curvature + gutter, painted over the contents */
.fold{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.05) 46%,rgba(0,0,0,.20) 49.7%,
                    rgba(0,0,0,.20) 50.3%,rgba(0,0,0,.05) 54%,rgba(0,0,0,0) 70%),
    linear-gradient(90deg,rgba(0,0,0,.10) 13%,rgba(0,0,0,0) 27%,
                    rgba(0,0,0,0) 73%,rgba(0,0,0,.10) 87%);
}

/* ---------- items on a page ---------- */
.items{position:absolute; inset:0}
.item{position:absolute; transform-origin:50% 50%}
.item.photo .ph{
  position:relative; overflow:hidden; background:#ded9cd;
  box-shadow:0 .2em .8em rgba(24,22,18,.22);
}
.item.photo img{width:100%; height:auto; display:block}
.item.photo .ph.crop img{height:100%; object-fit:cover}
.item .cap{
  font-family:var(--font-hand); font-size:2.6em; line-height:1.25;
  text-align:center; color:var(--ink-soft); padding:.6em .4em 0; min-height:1em;
}

.item.f-white .ph{padding:.9em; background:#fffdf8}
.item.f-white img{box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.item.f-polaroid{background:#fffdf8; padding:1.1em 1.1em .5em; box-shadow:0 .35em 1.1em rgba(24,22,18,.26)}
.item.f-polaroid .ph{box-shadow:none; background:#cfcabd}
.item.f-polaroid .cap{color:#3a3630; padding-top:.7em}
.item.f-round .ph{border-radius:1.4em}
.item.f-tape::before,.item.f-tape::after{
  content:""; position:absolute; top:-1.1em; width:7em; height:2.2em;
  background:linear-gradient(180deg,rgba(255,250,230,.72),rgba(226,214,180,.66));
  box-shadow:0 .1em .3em rgba(0,0,0,.12);
}
.item.f-tape::before{left:-1.4em; transform:rotate(-24deg)}
.item.f-tape::after{right:-1.4em; transform:rotate(19deg)}

.item.text{pointer-events:none}          /* only the words catch the pointer, not the slot */
.item.text .tx{
  line-height:1.45; letter-spacing:.01em; outline:none; white-space:pre-wrap;
  word-break:break-word; min-height:1.2em; width:fit-content; max-width:100%;
  pointer-events:auto;
}
.item.text .tx[contenteditable="true"]{
  box-shadow:0 0 0 1px rgba(36,64,200,.35); border-radius:2px;
}
.item.text .tx:empty::before{content:"Write something…"; opacity:.35}

.empty-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-sans); font-size:2.2em; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft,rgba(29,31,34,.4)); opacity:.6; pointer-events:none;
}

/* ---------- the turn ---------- */
.sb-half{position:absolute; top:0; bottom:0; width:50%; overflow:clip; z-index:2}
.sb-half.left{left:0}
.sb-half.right{left:50%}
.sb-half>.spread,.sb-face>.spread{width:200%}
.sb-half.right>.spread,.sb-face[data-side="right"]>.spread{margin-left:-100%}

.sb-half.sb-out{animation:sb-fade-out .22s ease-out calc(var(--fold-dur) * .7) forwards}
.sb-half.sb-in{opacity:0; animation:sb-fade-in calc(var(--fold-dur) * .47) ease forwards}
@keyframes sb-fade-out{to{opacity:0}}
@keyframes sb-fade-in{from{opacity:0} to{opacity:1}}

.sb-flap{
  position:absolute; top:0; bottom:0; width:50%;
  transform-style:preserve-3d; will-change:transform; z-index:5;
  animation-duration:var(--fold-dur); animation-timing-function:var(--fold-ease);
  animation-fill-mode:forwards;
}
.sb-flap.next{left:50%; transform-origin:left center; animation-name:sb-fold-next}
.sb-flap.prev{left:0;   transform-origin:right center; animation-name:sb-fold-prev}
@keyframes sb-fold-next{to{transform:rotateY(-180deg)}}
@keyframes sb-fold-prev{to{transform:rotateY(180deg)}}
.sb-face{position:absolute; inset:0; overflow:clip; backface-visibility:hidden}
.sb-face.back{transform:rotateY(180deg)}

.sb-zone{position:absolute; top:0; bottom:0; border:0; background:transparent; cursor:pointer; z-index:60; -webkit-tap-highlight-color:transparent}
.sb-prev{left:0; width:50%}
.sb-next{right:0; width:50%}
.app[data-mode="edit"] .sb-zone{display:none}     /* clicking the page selects, not turns */
.app[data-mode="edit"] .sb-book.closed .sb-zone{display:block}   /* ...but a shut book still opens */

/* riffle: fast turns with horizontal-only motion blur */
.sb-wrap.intro .sb-book{pointer-events:none}
.sb-wrap.intro.b1 .items{filter:url(#bk-mblur-1)}
.sb-wrap.intro.b2 .items{filter:url(#bk-mblur-2)}

.sb-captions{display:grid; justify-items:center}
.sb-captions>*{grid-area:1/1}
.sb-caption{
  font-family:var(--font-sans); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft); animation:sb-cap-in .5s ease both;
}
.sb-caption.cap-out{animation:sb-cap-out .35s ease both}
@keyframes sb-cap-in{from{opacity:0}}
@keyframes sb-cap-out{to{opacity:0}}

@media (prefers-reduced-motion:reduce){ .sb-flap{display:none} }


/* Narrow layout: arrows ride over the book so the page can go edge to edge.
   Stated twice — once for the real window, once for a simulated device box. */
@media (max-width:640px){
  .sb-stage{position:relative}
  .sb-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:70; padding:12px 10px}
  .sb-arrow:active{transform:translateY(-50%) scale(.9)}
  .sb-arrow.left{left:0} .sb-arrow.right{right:0}
  .sb-book{max-width:none !important}
}
@container stagebox (max-width:640px){
  .sb-stage{position:relative}
  .sb-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:70; padding:12px 10px}
  .sb-arrow:active{transform:translateY(-50%) scale(.9)}
  .sb-arrow.left{left:0} .sb-arrow.right{right:0}
  .sb-book{max-width:none !important}
}