/* =====================================================
   HMS — 3D books, gallery stage, shelf, ratings
   ===================================================== */

/* ---------- The physical book ---------- */
.b3{--w:var(--bw,200px);--h:calc(var(--w)*1.587);--d:calc(var(--w)*.15);--sg:1;
  position:relative;display:block;width:var(--w);height:var(--h);transform-style:preserve-3d}
.b3.rtl{--sg:-1}
.b3-in{position:absolute;inset:0;display:block;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,24deg)*var(--sg)));
  transition:transform .9s var(--ease)}
.b3-in.live{transition:transform .12s linear}
.b3 .f{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}

.b3 .front{inset:0;transform:translateZ(calc(var(--d)/2));overflow:hidden;background:var(--sp);border-radius:2px 7px 7px 2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.b3.rtl .front{border-radius:7px 2px 2px 7px}
.b3 .front img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.b3 .front:before{content:"";position:absolute;top:0;bottom:0;left:0;width:8%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.16) 38%,rgba(0,0,0,.18) 70%,transparent)}
.b3.rtl .front:before{left:auto;right:0;transform:scaleX(-1)}
.b3 .gloss{position:absolute;inset:0;z-index:3;pointer-events:none;font-style:normal;
  background:linear-gradient(112deg,rgba(255,255,255,.26) 0,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 64%,rgba(255,255,255,.10) 100%)}

.b3 .back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d)/2));border-radius:7px 2px 2px 7px;overflow:hidden;
  background:radial-gradient(120% 80% at 30% 0,#16305f 0,var(--sp) 62%,#05080f 100%);
  padding:calc(var(--w)*.1) calc(var(--w)*.09);display:flex;flex-direction:column;gap:calc(var(--w)*.05);
  color:#efe6cf;box-shadow:inset 0 0 0 1px rgba(216,178,74,.35)}
.b3.rtl .back{border-radius:2px 7px 7px 2px}
.b3 .bk-t{font:700 calc(var(--w)*.085)/1.35 var(--hf);color:var(--gold2)}
.b3 .bk-d{font:400 calc(var(--w)*.052)/1.7 'Cairo',sans-serif;color:#d9d2bf;flex:1;overflow:hidden}
.b3 .bk-f{display:flex;flex-direction:column;gap:3px;border-top:1px solid rgba(216,178,74,.5);padding-top:calc(var(--w)*.04);font-size:calc(var(--w)*.05)}
.b3 .bk-f b{font-weight:700;color:var(--gold2)}.b3 .bk-f em{font-style:normal;opacity:.75;font-size:.9em}

.b3 .spine{width:var(--d);height:100%;top:0;left:calc((var(--w) - var(--d))/2);
  transform:rotateY(-90deg) translateZ(calc(var(--w)/2));overflow:hidden;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.14) 22%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.5)),var(--sp);
  display:flex;align-items:center;justify-content:center;
  border-inline:1px solid rgba(216,178,74,.25)}
.b3.rtl .spine{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.b3 .sp-t{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:78%;
  font:700 calc(var(--d)*.46)/1 var(--hf);color:var(--gold2);letter-spacing:.03em;text-shadow:0 1px 2px #000}
.b3.rtl .sp-t{transform:none}
.b3 .sp-m{position:absolute;bottom:5%;left:0;right:0;text-align:center;font:700 calc(var(--d)*.26)/1 'Playfair Display',serif;font-style:normal;color:var(--gold);opacity:.9}
.b3 .spine:before,.b3 .spine:after{content:"";position:absolute;left:12%;right:12%;height:1px;background:var(--goldg);opacity:.8}
.b3 .spine:before{top:6%}.b3 .spine:after{top:calc(6% + 4px)}

.b3 .pages{width:var(--d);top:2px;height:calc(100% - 4px);left:calc((var(--w) - var(--d))/2);
  transform:rotateY(90deg) translateZ(calc(var(--w)/2 - 2px));
  background:repeating-linear-gradient(90deg,#f2ead6 0 1px,#d6ccb2 1px 2px),#e6dcc3;box-shadow:inset 0 0 14px rgba(0,0,0,.35)}
.b3.rtl .pages{transform:rotateY(-90deg) translateZ(calc(var(--w)/2 - 2px))}
.b3 .top,.b3 .bot{width:calc(100% - 4px);left:2px;height:var(--d);top:calc((var(--h) - var(--d))/2);
  background:repeating-linear-gradient(0deg,#f2ead6 0 1px,#d6ccb2 1px 2px),#e6dcc3}
.b3 .top{transform:rotateX(90deg) translateZ(calc(var(--h)/2 - 2px))}
.b3 .bot{transform:rotateX(-90deg) translateZ(calc(var(--h)/2 - 2px));filter:brightness(.55)}
.b3 .ph{position:absolute;inset:0;padding:12%;text-align:center}

/* ---------- Shared bits ---------- */
.vi-cat{display:inline-block;align-self:flex-start;padding:3px 12px;border-radius:999px;border:1px solid rgba(216,178,74,.5);color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.05em}
.vi-sub{color:var(--gold2);font-size:clamp(14px,2.4vw,17px);margin:0 0 12px}
.vc{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;min-width:46px;padding:0 16px;border-radius:999px;border:1.5px solid var(--gold);background:rgba(5,10,22,.72);backdrop-filter:blur(8px);color:var(--gold2);font:700 14px/1 'Cairo',sans-serif;cursor:pointer;transition:box-shadow .3s,background .3s,transform .3s var(--ease)}
.vc:active,.vc:focus-visible{background:rgba(216,178,74,.22);box-shadow:0 0 22px rgba(216,178,74,.7)}
@media(hover:hover){.vc:hover{background:rgba(216,178,74,.18);box-shadow:0 0 22px rgba(216,178,74,.6);transform:translateY(-2px)}}
.vc-prev,.vc-next{font-size:26px;padding:0 14px;font-weight:400}

/* ---------- Ratings ---------- */
.rw{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:0 0 14px}
.rw-show:empty{display:none}
.rw-show{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:15px}
.rw-show .stars{font-size:24px;letter-spacing:3px;line-height:1}
.rw-show b{font-size:20px;color:var(--gold2)}
.rw-show small{color:var(--muted);font-size:13px}
.rw-lg .rw-show .stars{font-size:30px}.rw-lg .rw-show b{font-size:24px}
.rw-sm .rw-show .stars{font-size:19px;letter-spacing:2px}.rw-sm .rw-show b{font-size:16px}
.rw-vote{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.rw-lbl{font-size:13px;color:var(--muted)}
.rw-in{display:inline-flex;flex-direction:row-reverse;direction:ltr;gap:0}
.rw-in button{background:none;border:0;padding:4px 3px;margin:0;font-size:25px;line-height:1;color:rgba(255,255,255,.28);cursor:pointer;transition:color .2s,transform .25s var(--ease);min-width:34px;min-height:40px}
.rw-in button:hover,.rw-in button:hover~button,.rw-in button:focus-visible,.rw-in button:focus-visible~button{color:var(--gold);transform:scale(1.12)}
.rw.done .rw-in button{pointer-events:none;color:rgba(255,255,255,.14)}
.rw.done .rw-vote .rw-lbl{display:none}
.rw-msg{font-size:13px;color:var(--gold2);min-height:1em}
.rw-sm .rw-in button{font-size:21px;min-width:30px}
.rw-src{opacity:.8}

/* ---------- The vault (coverflow stage) ---------- */
.vault{position:relative;padding:10px 0 70px;--bw:clamp(150px,36vw,250px);overflow:hidden;overflow:clip}
.vault-light{position:absolute;inset:-10% 0 0;pointer-events:none;z-index:0;
  background:radial-gradient(46% 42% at 50% 36%,rgba(216,178,74,.20),transparent 70%),
  conic-gradient(from 200deg at 50% -6%,transparent 0 8%,rgba(244,222,142,.10) 11%,transparent 15% 29%,rgba(244,222,142,.07) 33%,transparent 38% 100%);
  animation:hmsLight 9s ease-in-out infinite alternate}
@keyframes hmsLight{from{opacity:.65}to{opacity:1}}
.vault-stage{position:relative;z-index:1;height:calc(var(--bw)*1.587 + 90px);perspective:1500px;perspective-origin:50% 42%;
  direction:ltr;touch-action:pan-y;cursor:grab;outline:none;user-select:none;-webkit-user-select:none;margin-top:6px}
.vault-stage.grabbing{cursor:grabbing}
.vault-stage:focus-visible{box-shadow:inset 0 0 0 2px rgba(216,178,74,.5);border-radius:18px}
.vb{position:absolute;left:50%;top:44px;width:var(--bw);height:calc(var(--bw)*1.587);margin-left:calc(var(--bw)/-2);
  transform-style:preserve-3d;transition:transform 1s var(--ease),opacity .8s;will-change:transform;cursor:pointer}
.vb:not(.on){filter:brightness(.55) saturate(.85);transition:transform 1s var(--ease),opacity .8s,filter .8s}
.vb.on{cursor:default}
.vb .b3{--bw:inherit}
.vb.on .b3{animation:hmsFloat 6.5s ease-in-out infinite}
@keyframes hmsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.vb:after{content:"";position:absolute;left:6%;right:6%;bottom:-30px;height:34px;background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);filter:blur(7px);transform:translateZ(-1px);pointer-events:none}
.vb.on:after{background:radial-gradient(ellipse at center,rgba(216,178,74,.30),rgba(0,0,0,.7) 35%,transparent 72%)}
.vault-floor{position:absolute;left:4%;right:4%;bottom:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7;pointer-events:none;transform:translateZ(-300px)}
.vault-ctrl{direction:ltr;position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:14px;margin-top:6px}
.vault-hint{position:relative;z-index:2;text-align:center;font-size:12.5px;color:var(--muted);margin:14px 20px 0}
.vault-dots{position:relative;z-index:2;display:flex;justify-content:center;gap:12px;margin:18px 0 6px;flex-wrap:wrap}
.vd{width:42px;aspect-ratio:.63;padding:0;border:1px solid rgba(216,178,74,.25);border-radius:4px;overflow:hidden;background:#0b1b3d;cursor:pointer;opacity:.5;transition:opacity .4s,transform .4s var(--ease),border-color .4s,box-shadow .4s;color:var(--gold2)}
.vd img{width:100%;height:100%;object-fit:cover}
.vd[aria-selected=true]{opacity:1;border-color:var(--gold);transform:translateY(-5px);box-shadow:0 8px 22px rgba(216,178,74,.45)}
@media(hover:hover){.vd:hover{opacity:1;transform:translateY(-4px)}}

.vault-info{position:relative;z-index:2;display:grid;margin-top:12px;text-align:center}
.vi{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:760px;margin-inline:auto;padding:26px 24px 28px;border-radius:22px;border:1px solid rgba(216,178,74,.28);
  background:linear-gradient(160deg,rgba(14,30,66,.72),rgba(5,10,22,.88));backdrop-filter:blur(10px);box-shadow:0 30px 70px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s .6s;pointer-events:none;width:100%}
.vi.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s,visibility 0s;pointer-events:auto}
.vi .vi-cat{align-self:center}
.vi h2{font-size:clamp(26px,5.4vw,42px);margin:6px 0 2px;color:var(--white)}
.vi .rw{align-items:center}.vi .rw-show{justify-content:center}.vi .rw-vote{justify-content:center}
.vi .bk-btns{justify-content:center;margin-top:6px}
html:not(.js) .vault-stage{height:auto;display:flex;gap:20px;overflow-x:auto;padding:20px}html:not(.js) .vb{position:static;margin:0;flex:none}
html:not(.js) .vi{grid-area:auto;opacity:1;visibility:visible;transform:none}html:not(.js) .vault-info{display:block}

/* ---------- Shelf cards ---------- */
.shelf--3d{gap:56px 26px}
.bk{--bw:min(44vw,190px);align-items:center;text-align:center;position:relative}
.bk h3{font-size:21px}.bk .rw{align-items:center}.bk .rw-show,.bk .rw-vote{justify-content:center}
.bk .vi-cat{align-self:center}
.bk-sub{font-size:13.5px;color:#cfc9b9;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bk .bk-btns{justify-content:center}
.book3d{display:block;position:relative;width:var(--bw);height:calc(var(--bw)*1.587);margin:12px auto 0;perspective:1100px;-webkit-tap-highlight-color:transparent;transform-style:preserve-3d}
.book3d .b3{transition:filter .5s}
.book3d .book-more{position:absolute;inset-inline:0;bottom:12px;margin-inline:auto;width:max-content;padding:7px 16px;border-radius:999px;background:rgba(5,10,22,.88);border:1px solid var(--gold);color:var(--gold2);font-size:13px;font-weight:700;opacity:0;transform:translateY(10px) translateZ(60px);transition:.5s var(--ease);pointer-events:none;z-index:5}
.book3d.touch .book-more,.book3d:focus-visible .book-more{opacity:1;transform:translateZ(60px)}
.book3d:after{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:24px;background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);filter:blur(6px);pointer-events:none}
@media(hover:hover){.book3d:hover .b3{filter:drop-shadow(0 0 22px rgba(216,178,74,.45))}.book3d:hover .book-more{opacity:1;transform:translateZ(60px)}}
/* the wooden-gold plank under each book */
.plank{display:block;width:min(100%,260px);height:10px;margin:22px auto 8px;border-radius:3px;background:linear-gradient(180deg,#f4de8e,#a87a25 55%,#4a3210);box-shadow:0 12px 24px rgba(0,0,0,.55),0 0 24px rgba(216,178,74,.18)}
.bk.is-hidden{display:none}
.book3d.big{--bw:min(66vw,310px);margin:20px auto 0}
.bs-cover{display:flex;flex-direction:column;align-items:center;padding-bottom:12px}
.solo-ctrl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.chips .chip{background:none;color:var(--white);font-family:inherit;cursor:pointer}
.chips .chip.on{color:#1a1204}

/* Home page "latest books" strip */
.sec-dark .bk .plank{width:70%;margin-top:14px}
@media(max-width:699px){
  .sec-dark .bk{--bw:min(30vw,140px)}
  .sec-dark .bk-sub,.sec-dark .bk .bk-btns,.sec-dark .bk .rw-vote,.sec-dark .bk .muted,.sec-dark .bk .vi-cat{display:none}
  .sec-dark .bk .rw-show small{display:none}
  .shelf--3d .bk{--bw:min(54vw,200px)}
}
@media(max-width:560px){.vc-spin span{display:none}.vc-spin{padding:0 14px}.vault{padding-bottom:50px}.vi{padding:20px 16px 22px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){.vb.on .b3,.vault-light{animation:none}.b3-in,.vb,.vi{transition-duration:.01ms!important}}

/* =====================================================
   v2.1 — Premium finish: lighting, reflections, rating plate
   ===================================================== */
/* cover stays true to the artwork: light, moving specular only */
.b3 .gloss{background:linear-gradient(105deg,transparent calc(var(--gx,40%) - 22%),rgba(255,255,255,.10) var(--gx,40%),transparent calc(var(--gx,40%) + 22%));transition:background-position .2s}
.b3 .front{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 3px 0 6px rgba(0,0,0,.28)}
.b3.rtl .front{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset -3px 0 6px rgba(0,0,0,.28)}
.b3 .front:after{content:"";position:absolute;top:0;bottom:0;left:3.2%;width:1.4%;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.12),transparent)}
.b3.rtl .front:after{left:auto;right:3.2%;transform:scaleX(-1)}
/* real drop shadow under every book */
/* glass-floor reflection under the stage books */
.vault-stage{background:radial-gradient(60% 14% at 50% 91%,rgba(216,178,74,.14),transparent 70%)}

/* rating states */
.rw-show .stars.is-empty{background:none;color:transparent;-webkit-text-stroke:1.2px var(--gold);}
.rw-show .rw-none{color:var(--muted)}
.rw-show:not(:empty){padding:6px 14px;border-radius:999px;background:rgba(216,178,74,.09);border:1px solid rgba(216,178,74,.28)}
.rw-sm .rw-show:not(:empty){padding:3px 11px}
.rw-in button{color:rgba(216,178,74,.38)}
.vi-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.vi-lang{border-color:rgba(255,255,255,.25);color:var(--white)}

/* shelf: each book sits on a lit glass pedestal */
.bk{padding:22px 14px 24px;border-radius:22px;border:1px solid rgba(216,178,74,.16);
  background:radial-gradient(80% 46% at 50% 0,rgba(216,178,74,.10),transparent 70%),linear-gradient(180deg,rgba(14,30,66,.5),rgba(5,10,22,.7));
  transition:transform .6s var(--ease),border-color .4s,box-shadow .6s}
@media(hover:hover){.bk:hover{transform:translateY(-6px);border-color:rgba(216,178,74,.5);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 40px rgba(216,178,74,.12)}}
.plank{display:none}
@media(prefers-reduced-motion:reduce){.bk{transition:none}}

/* v2.3 — home strip: bigger 3D books, no empty space in cards */
.sec-dark .bk{align-self:flex-start;padding:18px 12px 20px;--bw:min(42vw,170px)}
.sec-dark .shelf{align-items:flex-start}
@media(max-width:699px){
  .sec-dark .bk{--bw:min(46vw,180px)}
  .sec-dark .bk .bk-btns{display:flex}
  .sec-dark .bk .bk-btns .btn:not(.btn-gold){display:none}
}
/* phones have no hover: let the books sway gently so they read as 3D */
@media(hover:none) and (prefers-reduced-motion:no-preference){
  .book3d:not(.touch) .b3-in{animation:hmsSway 7s ease-in-out infinite}
}
@keyframes hmsSway{0%,100%{transform:rotateX(2deg) rotateY(calc(10deg*var(--sg)))}50%{transform:rotateX(-2deg) rotateY(calc(34deg*var(--sg)))}}