/*!
 * 拾光司书 — 称号 + 气泡皮肤  v1.1
 * 所有类名以 sg- 开头，等级效果由 .sg-skin 上的 sg-ge2 … sg-ge6 类叠加（由 shiguang-skin.js 根据 data-sg-level 计算）。
 * 依赖素材：../assets/sg-grain.svg（皮革纹理），人物图片在 HTML 中以 <img> 引用。
 */
@property --sg-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.sg-skin, .sg-cer {
  --sg-lea-hi: #94492A; --sg-lea: #6E321B; --sg-lea-lo: #4C2012;
  --sg-gold: #E0B26A; --sg-gold-hi: #F8E3AE; --sg-gold-lo: #A87634;
  --sg-ora: #EE7B3A; --sg-ora-hi: #F7A56C; --sg-ora-lo: #CF5A20;
  --sg-ivory: #FBF5EA; --sg-ink: #3A2016; --sg-page: #EFE4CF;
  --sg-fs: 15px;
  --sg-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "STSong", "SimSun", serif;
  --sg-didot: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", serif;
  --sg-grain: url("../assets/sg-grain.svg");
  --sg-gold-foil: linear-gradient(180deg, #FFF3D0 8%, #EBC57E 46%, #A97A38 54%, #F6DFA8 92%);
}

/* ═════════ 称号牌 badge ═════════ */
.sg-badge { position: relative; display: inline-flex; align-items: stretch; height: 22px; vertical-align: middle; white-space: nowrap;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.32)); }
.sg-badge__main { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 13px; overflow: hidden;
  color: var(--sg-ink); background: linear-gradient(180deg, #FFFDF8, #EFE4D2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%); }
.sg-badge__main::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; bottom: 2px; pointer-events: none;
  border-top: 1px solid transparent; border-bottom: 1px solid transparent; transition: border-color .7s; }
.sg-ge2 .sg-badge__main::before { border-color: rgba(176,130,60,.75); }
.sg-badge__main::after { content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 32%; opacity: 0; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent); }
.sg-ge4 .sg-badge__main::after { opacity: 1; animation: sg-glint 5.5s ease-in-out infinite; }
.sg-badge__icon { width: 15px; height: 15px; flex: none; overflow: visible; }
.sg-badge__icon .sg-spin { transform-box: fill-box; transform-origin: center; }
.sg-ge6 .sg-badge__icon .sg-spin { animation: sg-rot 10s linear infinite; }
.sg-badge__name { font-family: var(--sg-serif); font-size: 13px; font-weight: 700; letter-spacing: .22em; margin-right: -.08em; line-height: 22px; }
.sg-badge__lv { position: relative; display: inline-flex; align-items: center; gap: 1px; padding: 0 14px 0 7px; margin-left: -1px; overflow: hidden; color: #FFF8EF;
  background: linear-gradient(180deg, #8E6E5E, #654A3E); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); transition: background .6s; }
.sg-ge3 .sg-badge__lv { background: linear-gradient(180deg, #F7A061 0%, #E8722F 55%, #C9561D 100%); }
.sg-badge__lv i { font-family: var(--sg-didot); font-style: italic; font-size: 10px; opacity: .85; margin-top: 1px; }
.sg-badge__lv b { font-family: var(--sg-didot); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
.sg-badge__lv::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; opacity: 0; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); }
.sg-ge4 .sg-badge__lv::after { opacity: 1; animation: sg-glint 5.5s ease-in-out .6s infinite; }

/* ═════════ 称号后的人物 sticker ═════════ */
.sg-sticker { position: relative; display: inline-block; height: 40px; aspect-ratio: 172 / 180; vertical-align: middle; margin: -11px 0 -7px; }
.sg-sticker img { position: relative; display: block; width: 100%; height: 100%; transition: filter .8s;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.sg-sticker::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; opacity: 0; transition: opacity .9s; pointer-events: none;
  background: radial-gradient(closest-side, rgba(247,165,108,.55), rgba(238,123,58,.15) 55%, transparent); }
.sg-ge4 .sg-sticker img { filter: drop-shadow(0 0 2.5px rgba(247,165,108,.7)); }
.sg-ge6 .sg-sticker::before { opacity: .8; animation: sg-breathe 4.6s ease-in-out infinite; }
.sg-ge6 .sg-sticker img { animation: sg-float 4.6s ease-in-out infinite; }
.sg-glint { position: absolute; width: 11px; height: 11px; translate: -50% -50%; opacity: 0; scale: .2; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 0 2px rgba(255,230,190,.95)) drop-shadow(0 0 5px rgba(247,165,108,.8)); }
.sg-glint svg { display: block; width: 100%; height: 100%; }
.sg-ge6 .sg-glint { animation: sg-glint4 3.6s ease-in-out infinite; }
.sg-glint--hair { left: 65.1%; top: 13.9%; }
.sg-glint--book { left: 18.6%; top: 71.1%; animation-delay: 1.8s !important; }

/* ═════════ 气泡：一本合上的书 ═════════ */
.sg-bwrap { position: relative; display: inline-block; width: max-content; max-width: min(420px, calc(100% - 56px)); isolation: isolate; margin: 2px 56px 26px 0; vertical-align: top; }
.sg-fx { position: absolute; left: -44px; top: -44px; width: calc(100% + 104px); height: calc(100% + 108px); z-index: -4; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 46px); mask-image: linear-gradient(180deg, transparent 0, #000 46px); } /* fades out before reaching the name row */
.sg-halo { position: absolute; inset: -12px; border-radius: 28px; z-index: -3; pointer-events: none; opacity: 0; transition: opacity .8s; filter: blur(16px);
  background: radial-gradient(70% 90% at 15% 15%, rgba(247,165,108,.6), transparent 70%), radial-gradient(70% 90% at 90% 95%, rgba(224,178,106,.45), transparent 70%); }
.sg-ge6 .sg-halo { opacity: .45; animation: sg-breathe 4.6s ease-in-out infinite; }
/* back cover + page block peeking out on the right and bottom: this is what separates the book from a dark green page */
.sg-back { position: absolute; left: 8px; top: 8px; right: -7px; bottom: -7px; border-radius: 6px 14px 14px 10px; z-index: -2;
  background: linear-gradient(165deg, #5C2716, #33140A); box-shadow: 0 14px 26px -12px rgba(0,0,0,.75); }
.sg-pages { position: absolute; left: 5px; top: 5px; right: -4px; bottom: -4px; border-radius: 4px 11px 11px 8px; z-index: -1;
  background:
    repeating-linear-gradient(90deg, #FBF5EA 0 1px, #DCCBAE 1px 2px) right / 4px 100% no-repeat,
    repeating-linear-gradient(0deg, #FBF5EA 0 1px, #DCCBAE 1px 2px) bottom / 100% 4px no-repeat,
    var(--sg-page);
  box-shadow: 0 0 0 .5px rgba(60,30,15,.45); }
.sg-ribbon { position: absolute; bottom: -30px; width: 11px; height: 46px; z-index: -1; transform-origin: 50% 0; opacity: 0; translate: 0 -18px;
  transition: opacity .5s, translate .8s cubic-bezier(.2,.9,.3,1.3); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.sg-ribbon--o { right: 30px; background: linear-gradient(90deg, #B44716, #EE843F 38%, #FFB683 52%, #E06C2C 72%, #B44716); }
.sg-ribbon--k { right: 44px; width: 7px; height: 38px; bottom: -22px; transition-delay: .12s;
  background: linear-gradient(90deg, #0E0A0A, #3A302E 45%, #5A4E4B 52%, #231B1A 70%, #0E0A0A); }
.sg-ge3 .sg-ribbon { opacity: 1; translate: 0 0; }
.sg-ge5 .sg-ribbon--o { animation: sg-sway 3.8s ease-in-out infinite; }
.sg-ge5 .sg-ribbon--k { animation: sg-sway 3.8s ease-in-out -1.3s infinite; }

.sg-bubble { --r: 14px; position: relative; display: block; box-sizing: border-box; width: 100%; min-width: 0; padding: 15px 24px 13px; border-radius: 6px var(--r) var(--r) var(--r);
  color: var(--sg-ivory); outline: none;
  background:
    radial-gradient(120% 80% at 16% -20%, rgba(255,214,170,.18), transparent 55%),
    linear-gradient(165deg, var(--sg-lea-hi) 0%, var(--sg-lea) 52%, var(--sg-lea-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,225,190,.2), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(30,12,5,.55);
  transform: perspective(800px) rotateX(var(--sg-rx, 0deg)) rotateY(var(--sg-ry, 0deg)); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .6s; }
.sg-ge2 .sg-bubble { box-shadow: inset 0 1px 0 rgba(255,225,190,.2), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(242,208,142,.75); }
.sg-bubble:focus-visible { outline: 2px solid var(--sg-ora-hi); outline-offset: 6px; }
.sg-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.sg-clip::before { content: ""; position: absolute; inset: 0; background: var(--sg-grain); opacity: .1; mix-blend-mode: overlay; }
.sg-gloss { position: absolute; top: -30%; bottom: -30%; left: -60%; width: 30%; opacity: 0; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255,232,205,.1) 40%, rgba(255,242,224,.26) 50%, rgba(255,232,205,.1) 60%, transparent); }
.sg-ge4 .sg-gloss { opacity: 1; animation: sg-gloss 7s ease-in-out infinite; }
.sg-glare { position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background: radial-gradient(200px circle at var(--sg-mx, 50%) var(--sg-my, 50%), rgba(255,228,195,.24), transparent 62%); }
.sg-ge6 .sg-bubble:hover .sg-glare { opacity: 1; }
.sg-flash { position: absolute; top: -30%; bottom: -30%; left: -70%; width: 55%; opacity: 0; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(247,165,108,.35), rgba(255,245,225,.6), rgba(224,178,106,.35), transparent); }
.sg-bubble.sg-flashing .sg-flash { animation: sg-sweep .95s cubic-bezier(.4,0,.2,1); }

.sg-frame { position: absolute; overflow: visible; pointer-events: none; z-index: 2; }
.sg-frame--o { left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.sg-frame--i { left: 8.5px; top: 8.5px; width: calc(100% - 17px); height: calc(100% - 17px); }
.sg-fr { fill: none; stroke: url(#sg-goldBright); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.6,.1,.2,1); }
.sg-frame--i .sg-fr { stroke-width: .6; opacity: .7; }
.sg-ge2 .sg-fr { stroke-dashoffset: 0; }
.sg-ge6 .sg-fr { stroke: url(#sg-goldLive); }
.sg-dia { position: absolute; width: 5px; height: 5px; rotate: 45deg; background: var(--sg-gold-foil); opacity: 0; scale: 0; z-index: 2;
  transition: opacity .4s .9s, scale .5s .9s cubic-bezier(.2,.9,.3,1.6); }
.sg-dia--tl { left: 5.6px; top: 5.6px; } .sg-dia--tr { right: 5.6px; top: 5.6px; } .sg-dia--bl { left: 5.6px; bottom: 5.6px; } .sg-dia--br { right: 5.6px; bottom: 5.6px; }
.sg-ge2 .sg-dia { opacity: 1; scale: 1; }

/* ── 右上角：回复动画图标（日轮）
   状态挂在 .sg-bwrap 上：sg-thinking（蓄光）→ sg-replying（写字中）→ sg-done（写完绽开） ── */
.sg-reply { position: absolute; top: -20px; right: 8px; width: 42px; height: 42px; z-index: 3; opacity: 0; scale: .4; pointer-events: none;
  transition: opacity .5s, scale .7s cubic-bezier(.2,.9,.3,1.5); filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.sg-reply svg, .sg-reply img { display: block; width: 100%; height: 100%; overflow: visible; }
.sg-ge2 .sg-reply { opacity: 1; scale: 1; }
.sg-ge6 .sg-reply { filter: drop-shadow(0 0 4px rgba(247,165,108,.9)) drop-shadow(0 0 9px rgba(238,123,58,.5)); }
.sg-reply--img, .sg-ge6 .sg-reply--img { right: 0; filter: none; }
.sg-spin, .sg-popg, .sg-core, .sg-reply__glow, .sg-reply__ring { transform-box: fill-box; transform-origin: center; }
.sg-ray { fill: url(#sg-sunFill); fill-opacity: 0; stroke: rgba(251,245,234,.55); stroke-width: .6; transform-box: fill-box; transform-origin: 50% 100%;
  transition: fill-opacity .9s, scale .5s cubic-bezier(.5,0,.3,1); }
.sg-ge2 .sg-ray { stroke: url(#sg-gold); }
.sg-ge3 .sg-ray { fill-opacity: 1; stroke: rgba(120,45,15,.55); stroke-width: .4; }
.sg-ge6 .sg-ray { animation: sg-ray-idle var(--rd2) ease-in-out var(--rdl) infinite alternate; }
.sg-reply__glow { opacity: 0; transition: opacity .4s; }
.sg-ge6 .sg-reply__glow { opacity: .35; }
.sg-reply__ring { opacity: 0; }
.sg-core { transition: scale .45s cubic-bezier(.5,0,.3,1); }
/* thinking: rays draw in and the core dims, gathering light */
.sg-thinking .sg-ray { animation: none; scale: 1 .42; }
.sg-thinking .sg-core { scale: .72; }
.sg-thinking .sg-reply__glow { opacity: .55; animation: sg-glow .55s ease-in-out infinite alternate; }
/* replying: every ray breathes on its own clock, the star turns, the core beats with the typing */
.sg-replying .sg-ray { animation: sg-ray var(--rd) cubic-bezier(.45,0,.55,1) var(--rdl) infinite alternate; }
.sg-replying .sg-spin { animation: sg-rot 7s linear infinite; }
.sg-replying .sg-popg { animation: sg-breathe2 .9s ease-in-out infinite alternate; }
.sg-replying .sg-core { animation: sg-core .42s ease-in-out infinite alternate; }
.sg-replying .sg-reply__glow { opacity: .9; animation: sg-glow .8s ease-in-out infinite alternate; }
/* done: rays bloom out one after another, a ring of light spreads */
.sg-done .sg-ray { animation: sg-bloom .8s cubic-bezier(.2,1.5,.35,1) both; animation-delay: calc(var(--i) * 14ms); }
.sg-done .sg-popg { animation: sg-pop .7s cubic-bezier(.2,.9,.3,1.6); }
.sg-done .sg-reply__ring { animation: sg-ringout .85s ease-out; }
.sg-done .sg-reply__glow { opacity: .6; transition: opacity .9s; }
/* optional image slot (assets.reply / assets.replyStill) */
.sg-reply--img.has-still .sg-reply__anim, .sg-reply--img .sg-reply__still { position: absolute; inset: 0; }
.sg-reply--img.has-still .sg-reply__anim { opacity: 0; }
.sg-thinking .sg-reply--img.has-still .sg-reply__anim, .sg-replying .sg-reply--img.has-still .sg-reply__anim { opacity: 1; }
.sg-thinking .sg-reply--img .sg-reply__still, .sg-replying .sg-reply--img .sg-reply__still { opacity: 0; }

/* ── 右侧伴读：经典像素小螃蟹 ── */
.sg-bird { position: absolute; right: -53px; bottom: 0; width: 45px; height: 26px; z-index: 1; pointer-events: none; opacity: 0; scale: .5; transform-origin: 50% 100%; transition: opacity .5s, scale .6s cubic-bezier(.2,.9,.3,1.4); }
.sg-ge4 .sg-bird { opacity: 1; scale: 1; }
.sg-bird svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sg-bird__all { transform-box: view-box; transform-origin: center bottom; }
.sg-bird__eye { transform-box: fill-box; transform-origin: center; }
.sg-ge4 .sg-bird__all { animation: sg-crab-greet 6s ease-in-out infinite; }
.sg-bird__arm { animation: sg-crab-wave 6s steps(1, end) infinite; }
.sg-ge4 .sg-bird__eye { animation: sg-blink 4.6s infinite; }
.sg-replying .sg-bird__all { animation: sg-lean .42s ease-in-out infinite; }
.sg-done .sg-bird__all { animation: sg-hop .62s cubic-bezier(.3,.7,.4,1); }

.sg-text { position: relative; z-index: 1; margin: 0; font-family: var(--sg-serif); font-size: var(--sg-fs); line-height: 1.75; letter-spacing: .06em; white-space: pre-line; overflow-wrap: anywhere; }
.sg-text__sizer { visibility: hidden; }
.sg-text__type { position: absolute; left: 0; top: 0; right: 0; text-shadow: 0 1px 1px rgba(40,15,5,.6); }
.sg-ge6 .sg-text__type { color: transparent; text-shadow: none; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #FBF5EA 0 36%, #F8E3AE 42%, #fff 47%, #FFC896 52%, #F8E3AE 57%, #FBF5EA 64% 100%);
  background-size: 280% 100%; background-position: 100% 0; animation: sg-sheen 6s ease-in-out 2s infinite; }
.sg-caret { display: inline-block; width: 2px; height: 1.05em; margin: 0 -5px 0 3px; vertical-align: -.17em; border-radius: 1px;
  background: #FFB27A; box-shadow: 0 0 6px rgba(255,178,122,.95); animation: sg-blink .9s steps(1) infinite; transition: opacity .45s; }
.sg-caret.is-done { opacity: 0; }

.sg-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin-top: 6px; font-family: var(--sg-serif); font-size: 11.5px; letter-spacing: .2em; color: rgba(251,245,234,.5); }
.sg-foot i { flex: 1; min-width: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(251,245,234,.3)); }
.sg-foot i:last-child { transform: scaleX(-1); }
.sg-foot b { font-family: var(--sg-didot); font-weight: 400; font-size: 13.5px; letter-spacing: .03em; font-variant-numeric: lining-nums; }
.sg-ge2 .sg-foot { color: rgba(248,227,174,.85); }
.sg-ge2 .sg-foot i { background: linear-gradient(90deg, transparent, rgba(242,208,142,.7)); }
.sg-ge2 .sg-foot b { color: var(--sg-gold-hi); }

/* ═════════ 入场（给新消息加 .sg-enter） ═════════ */
.sg-enter .sg-badge { animation: sg-tagIn .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--sg-d, 0s) + .05s); }
.sg-enter .sg-sticker { animation: sg-stickerIn .8s cubic-bezier(.2,.9,.3,1.35) both; animation-delay: calc(var(--sg-d, 0s) + .3s); }
.sg-enter .sg-bwrap { animation: sg-bubbleIn .75s cubic-bezier(.2,.9,.25,1.12) both; animation-delay: calc(var(--sg-d, 0s) + .1s); transform-origin: 0 0; }
.sg-ge2.sg-enter .sg-fr { animation: sg-draw 1.4s cubic-bezier(.6,.1,.2,1) both; animation-delay: calc(var(--sg-d, 0s) + .35s); }
.sg-ge2.sg-enter .sg-reply { animation: sg-sunIn .9s cubic-bezier(.2,.9,.3,1.4) both; animation-delay: calc(var(--sg-d, 0s) + .45s); }
.sg-ge4.sg-enter .sg-bird { animation: sg-birdIn .9s cubic-bezier(.2,.9,.3,1.15) both; animation-delay: calc(var(--sg-d, 0s) + .55s); }
.sg-enter .sg-foot { animation: sg-fade .7s ease both; animation-delay: calc(var(--sg-d, 0s) + var(--sg-fd, .6s)); }

/* ═════════ 满级仪式：书翻到第 5200 页 ═════════ */
.sg-cer { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .5s; overflow: hidden; }
.sg-cer--fixed { position: fixed; }
.sg-cer.is-on { opacity: 1; pointer-events: auto; }
.sg-cer__bg { position: absolute; inset: 0; background: radial-gradient(circle at 42% 52%, rgba(66,32,20,.9), rgba(12,8,6,.97)); }
.sg-cer__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.sg-cer__fig { position: relative; z-index: 1; height: min(86%, 440px); aspect-ratio: 286 / 512; opacity: 0; translate: -30px 0;
  transition: opacity .9s, translate 1.3s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 22px rgba(238,123,58,.35)); }
.sg-cer.is-on .sg-cer__fig { opacity: 1; translate: 0 0; }
.sg-cer__fig::before { content: ""; position: absolute; inset: -6% -45% 20%; z-index: -1; background: radial-gradient(closest-side, rgba(247,165,108,.42), rgba(238,123,58,.12) 60%, transparent); }
.sg-cer__fig img { display: block; width: 100%; height: 100%; }
.sg-cer.is-max .sg-cer__fig .sg-glint { animation: sg-glint4 2.4s ease-in-out infinite; }
.sg-cer__fig .sg-glint { width: 15px; height: 15px; }
.sg-gf-hair { left: 59.4%; top: 4.9%; } .sg-gf-brooch { left: 51.4%; top: 17.8%; animation-delay: .5s !important; } .sg-gf-book { left: 31.5%; top: 25%; animation-delay: 1.1s !important; }
.sg-cer__right { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.sg-bookwrap { perspective: 1700px; padding-left: 172px; }
.sg-book { position: relative; width: 172px; height: 232px; transform-style: preserve-3d; opacity: 0; scale: .86; translate: 0 12px;
  transition: opacity .6s, scale 1s cubic-bezier(.2,.8,.2,1), translate 1s cubic-bezier(.2,.8,.2,1); }
.sg-cer.is-on .sg-book { opacity: 1; scale: 1; translate: 0 0; }
.sg-book__back { position: absolute; left: -3px; right: -7px; top: -6px; bottom: -6px; border-radius: 3px 10px 10px 3px; transform: translateZ(-3px);
  background: linear-gradient(165deg, var(--sg-lea-hi), var(--sg-lea-lo)); box-shadow: 0 34px 50px -24px rgba(0,0,0,.95); transition: left .75s cubic-bezier(.45,.05,.25,1); }
.sg-cer.is-open .sg-book__back { left: -178px; border-radius: 10px; }
.sg-book__page, .sg-leaf > i, .sg-cover > div { position: absolute; inset: 0; border-radius: 2px 7px 7px 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sg-book__page { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--sg-ink);
  background: linear-gradient(90deg, #E6D6BC, #FBF5EA 9%, #FBF5EA 96%, #EFE4D1); box-shadow: 2px 0 0 #EADFCB, 3px 1px 0 #D9C9AD, 4px 2px 0 #CBB894; }
.sg-pg-head { position: absolute; top: 18px; left: 0; right: 0; text-align: center; font-family: var(--sg-serif); font-size: 11px; letter-spacing: .3em; color: rgba(58,32,22,.5); }
.sg-pg-lv { display: flex; align-items: baseline; gap: 6px; font-family: var(--sg-didot); }
.sg-pg-lv i { font-size: 18px; color: #9A6A3A; }
.sg-pg-lv b { font-weight: 400; font-size: 54px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
.sg-pg-rule { width: 0; height: 1.5px; margin: 10px 0 9px; background: linear-gradient(90deg, transparent, #E8722F, transparent); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.sg-cer.is-max .sg-pg-rule { width: 110px; }
.sg-pg-title { font-family: var(--sg-serif); font-size: 13px; font-weight: 700; letter-spacing: .24em; color: #C9561D; opacity: 0; translate: 0 4px; transition: opacity .7s .3s, translate .7s .3s; }
.sg-cer.is-max .sg-pg-title { opacity: 1; translate: 0 0; }
.sg-wax { position: absolute; right: -18px; bottom: 16px; width: 62px; height: 62px; opacity: 0; scale: 2.3; rotate: -12deg; z-index: 3; filter: drop-shadow(0 4px 4px rgba(60,10,0,.45)); }
.sg-cer.is-max .sg-wax { animation: sg-stamp .55s cubic-bezier(.3,1.5,.5,1) .45s forwards; }
.sg-leaf, .sg-cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.45,.05,.25,1); }
.sg-leaf > .sg-f { background: repeating-linear-gradient(180deg, transparent 0 15px, rgba(150,105,65,.2) 15px 16px) 20px 34px / calc(100% - 40px) calc(100% - 70px) no-repeat, linear-gradient(90deg, #E6D6BC, #FBF5EA 9%); }
.sg-leaf > .sg-b { transform: rotateY(180deg); background: repeating-linear-gradient(180deg, transparent 0 15px, rgba(150,105,65,.2) 15px 16px) 20px 34px / calc(100% - 40px) calc(100% - 70px) no-repeat, linear-gradient(270deg, #E6D6BC, #FBF5EA 9%); }
.sg-leaf--3 > .sg-b { background: linear-gradient(270deg, #E6D6BC, #FBF5EA 9%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 18px; }
.sg-leaf--3 > .sg-b img { width: 30px; height: 30px; }
.sg-leaf--3 > .sg-b p { margin: 0; font-family: var(--sg-serif); font-size: 13px; line-height: 1.9; letter-spacing: .14em; color: #4A2A1C; text-align: center; }
.sg-cover > .sg-f { display: grid; place-items: center; border-radius: 2px 8px 8px 2px; background: linear-gradient(165deg, var(--sg-lea-hi), var(--sg-lea-lo)); }
.sg-cover > .sg-f::before, .sg-cover > .sg-f::after { content: ""; position: absolute; border: 1px solid rgba(242,208,142,.85); border-radius: 6px; }
.sg-cover > .sg-f::before { inset: 10px; } .sg-cover > .sg-f::after { inset: 14px; border-width: .6px; opacity: .7; }
.sg-cover > .sg-f img { width: 64px; height: 64px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.sg-cover > .sg-b { transform: rotateY(180deg); border-radius: 8px 2px 2px 8px;
  background: radial-gradient(circle at 30% 40%, rgba(238,123,58,.25), transparent 40%), radial-gradient(circle at 70% 70%, rgba(224,178,106,.3), transparent 45%), #EBDCC3; }
.sg-cer.is-open .sg-cover { transform: rotateY(-178deg); }
.sg-cer.is-f1 .sg-leaf--1 { transform: rotateY(-176.5deg); }
.sg-cer.is-f2 .sg-leaf--2 { transform: rotateY(-175deg); }
.sg-cer.is-f3 .sg-leaf--3 { transform: rotateY(-173.5deg); }
.sg-cer__sub { margin: 26px 0 0; font-family: var(--sg-serif); font-size: 17px; color: var(--sg-ivory); letter-spacing: .6em; margin-right: -.6em; opacity: 0;
  transition: opacity .9s .4s, letter-spacing 1.4s .4s cubic-bezier(.2,.8,.2,1), margin 1.4s .4s cubic-bezier(.2,.8,.2,1); }
.sg-cer.is-max .sg-cer__sub { opacity: 1; letter-spacing: .28em; margin-right: -.28em; }
.sg-cer__flash { position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; background: radial-gradient(circle at 62% 46%, rgba(255,246,228,.95), rgba(247,165,108,.4) 26%, transparent 60%); }
.sg-cer.is-max .sg-cer__flash { animation: sg-flash 1s ease-out .45s; }
@media (max-width: 720px) {
  .sg-cer__fig { position: absolute; left: -40px; bottom: 2%; height: 84%; }
  .sg-cer.is-on .sg-cer__fig { opacity: .38; }
  .sg-bookwrap { padding-left: 160px; scale: .86; }
  .sg-cer__sub { font-size: 15px; }
}

/* ═════════ keyframes ═════════ */
@keyframes sg-rot { to { rotate: 360deg; } }
@keyframes sg-breathe { 50% { opacity: 1; } }
@keyframes sg-float { 50% { translate: 0 -1.2px; } }
@keyframes sg-glint { 0%, 62% { left: -50%; } 100% { left: 130%; } }
@keyframes sg-gloss { 0%, 52% { left: -60%; } 100% { left: 140%; } }
@keyframes sg-sweep { 0% { left: -70%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
@keyframes sg-glint4 { 0%, 60%, 100% { opacity: 0; scale: .2; rotate: 0deg; } 70% { opacity: 1; scale: 1; rotate: 45deg; } 84% { opacity: 0; scale: .35; rotate: 90deg; } }
@keyframes sg-sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 5deg; } }
@keyframes sg-sheen { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@keyframes sg-blink { 50% { opacity: 0; } }
@keyframes sg-ray { from { scale: 1 var(--rlo); } to { scale: 1 var(--rhi); } }
@keyframes sg-ray-idle { from { scale: 1 1; } to { scale: 1 .84; } }
@keyframes sg-bloom { 0% { scale: 1 .45; } 45% { scale: 1 1.38; } 100% { scale: 1 1; } }
@keyframes sg-breathe2 { from { scale: .95; } to { scale: 1.06; } }
@keyframes sg-core { from { scale: .82; } to { scale: 1.16; } }
@keyframes sg-glow { from { scale: .85; opacity: .55; } to { scale: 1.25; opacity: 1; } }
@keyframes sg-ringout { from { opacity: .95; scale: 1; } to { opacity: 0; scale: 2.5; } }
@keyframes sg-crab-greet { 0%, 17%, 75%, 100% { translate: 0 0; } 25%, 43%, 61% { translate: 0 -4px; } 34%, 52%, 70% { translate: 0 0; } }
@keyframes sg-crab-wave { 0%, 17%, 75%, 100% { translate: 0 0; } 22%, 34%, 46%, 58%, 70% { translate: 0 -2px; } 28%, 40%, 52%, 64% { translate: 0 -1px; } }
@keyframes sg-bob { 50% { translate: 0 -.8px; } }
@keyframes sg-blink { 0%, 91%, 97%, 100% { scale: 1 1; } 94% { scale: 1 .1; } }
@keyframes sg-tilt { 0%, 68%, 100% { rotate: 0deg; } 74%, 86% { rotate: -10deg; } }
@keyframes sg-flutter { 0%, 84%, 100% { rotate: 0deg; } 87% { rotate: -38deg; } 90% { rotate: -6deg; } 93% { rotate: -32deg; } 96% { rotate: 0deg; } }
@keyframes sg-peck { 0%, 100% { rotate: 0deg; } 40% { rotate: -27deg; } 55% { rotate: -21deg; } }
@keyframes sg-lean { 0%, 100% { rotate: 0deg; } 40% { rotate: -3deg; } }
@keyframes sg-hop { 0% { translate: 0 0; scale: 1 1; } 18% { translate: 0 .6px; scale: 1.06 .9; } 48% { translate: 0 -7px; scale: .95 1.05; } 78% { translate: 0 0; scale: 1.05 .93; } 100% { translate: 0 0; scale: 1 1; } }
@keyframes sg-flap { 0%, 100% { rotate: 0deg; } 25% { rotate: -42deg; } 45% { rotate: -4deg; } 65% { rotate: -36deg; } }
@keyframes sg-birdIn { from { opacity: 0; translate: 20px -18px; rotate: 16deg; scale: .8; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes sg-pop { 0% { scale: 1; } 35% { scale: 1.28; } 100% { scale: 1; } }
@keyframes sg-fade { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes sg-tagIn { from { opacity: 0; translate: -10px 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); } }
@keyframes sg-stickerIn { from { opacity: 0; scale: .5; rotate: -12deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes sg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sg-sunIn { from { opacity: 0; scale: 0; rotate: -120deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes sg-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sg-stamp { 0% { opacity: 0; scale: 2.3; } 60% { opacity: 1; scale: .9; } 100% { opacity: 1; scale: 1; } }
@keyframes sg-bubbleIn { from { opacity: 0; scale: .86; translate: -6px 8px; filter: blur(5px); } to { opacity: 1; scale: 1; translate: 0 0; filter: blur(0); } }