/* Book adaptation of MotionSites Liquid Glass Features + CTA.
   The original mask border is in motionsites-glass.css; theme, pointer light,
   press feedback and motion accessibility below are local integrations. */
:root {
  --glass-surface:rgba(255,255,255,.46);
  --glass-edge:rgba(255,255,255,.88);
  --glass-shadow:0 5px 18px #2744750b;
}
:root[data-theme="dark"] {
  --glass-surface:rgba(31,40,55,.64);
  --glass-edge:rgba(185,208,245,.21);
  --glass-shadow:0 8px 24px #0002;
}
.tone-blue { --glass-color:72 125 205; }
.tone-orange { --glass-color:205 158 99; }
.tone-green { --glass-color:63 143 111; }
.tone-purple { --glass-color:136 106 185; }
.book-grid,.library-grid {
  isolation:isolate;
  background:radial-gradient(ellipse at 12% 8%,rgb(142 179 239/.14),transparent 40%),radial-gradient(ellipse at 90% 60%,rgb(173 151 214/.10),transparent 45%);
}
.book-card {
  position:relative;
  background:radial-gradient(circle at var(--glass-x,25%) var(--glass-y,10%),rgb(var(--glass-color,72 125 205)/.10),transparent 60%),linear-gradient(145deg,var(--glass-surface),color-mix(in srgb,var(--card) 62%,transparent));
  background-blend-mode:normal;
  border:1px solid var(--glass-edge);
  outline:1px solid color-mix(in srgb,var(--outline) 40%,transparent);
  outline-offset:-1px;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-edge);
  transition:transform 260ms cubic-bezier(.2,.7,.2,1),box-shadow 260ms,border-color 220ms;
  transform:perspective(900px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg));
}
/* Preserve MotionSites' six-stop gradient and mask-composite border. */
.book-card.liquid-glass::before { z-index:3; }
.book-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(240px circle at var(--glass-x,50%) var(--glass-y,25%),#ffffff40,transparent 70%);
  opacity:0; transition:opacity 220ms;
}
.book-card:hover::after,.book-card:focus-within::after { opacity:.65; }
.book-card .book-stage {
  background:radial-gradient(ellipse at 20% 15%,rgb(var(--glass-color,72 125 205)/.28),transparent 65%),radial-gradient(ellipse at 90% 95%,rgb(var(--glass-color,72 125 205)/.16),transparent 50%),linear-gradient(130deg,color-mix(in srgb,var(--stage) 50%,transparent),color-mix(in srgb,var(--card) 35%,transparent));
  border-bottom:1px solid color-mix(in srgb,var(--glass-edge) 70%,transparent);
}
.book-card .book-stage::before { content:""; position:absolute; width:105px; height:105px; border-radius:50%; background:rgb(var(--glass-color,72 125 205)/.13); right:-22px; bottom:-24px; border:1px solid rgb(var(--glass-color,72 125 205)/.12); transform:translate(var(--glass-orbit-x,0px),var(--glass-orbit-y,0px)); transition:transform 300ms ease-out; }
.book-card:hover,.book-card:focus-within {
  border-color:color-mix(in srgb,var(--primary) 40%,var(--glass-edge));
  box-shadow:0 16px 34px rgb(var(--glass-color,72 125 205)/.16),inset 0 1px 0 var(--glass-edge);
}
.book-card .book-body { background:color-mix(in srgb,var(--card) 72%,transparent); }
.book-card .book-meta,.book-card .book-location { color:var(--muted); }
.mini-book {
  border:1px solid color-mix(in srgb,var(--cover-ink) 22%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--cover) 92%,white),var(--cover));
  box-shadow:3px 3px 0 #e6e2d8,5px 4px 0 #c8c7be,6px 10px 15px #1b2e4324,inset 1px 1px 0 #ffffff35;
}
.mini-book::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,#ffffff22,transparent 36%,#ffffff0a 70%,#ffffff18); pointer-events:none; border-radius:inherit; }
.glass-card-hint { position:absolute; bottom:9px; right:9px; z-index:2; display:flex; align-items:center; gap:4px; border-radius:20px; padding:6px 9px; background:color-mix(in srgb,var(--card) 88%,transparent); border:1px solid var(--glass-edge); color:var(--primary); font-size:10px; backdrop-filter:blur(10px); opacity:0; transform:translateY(5px); transition:opacity 180ms,transform 180ms; }
.glass-card-hint svg { width:14px; height:14px; }
.glass-card-hint.liquid-glass-strong { background-blend-mode:normal; box-shadow:0 3px 10px #20355c0d,inset 0 1px 1px #ffffff40; }
.book-card:hover .glass-card-hint,.book-card:focus-within .glass-card-hint { opacity:1; transform:translateY(0); }
.order-card { background:linear-gradient(130deg,var(--glass-surface),color-mix(in srgb,var(--card) 88%,transparent)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--glass-shadow); }
.order-content button.book-stage { padding:0; border:1px solid var(--glass-edge); }
.order-content button.book-stage:hover .mini-book { transform:rotate(0) translateY(-3px); }
.book-dialog { background:color-mix(in srgb,var(--card) 94%,transparent); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.book-card:has(.book-card-link:active) { transform:perspective(900px) scale(.985); }
@media (hover:none),(pointer:coarse) {
  .book-card { transform:none !important; }
  .glass-card-hint { opacity:1; transform:none; }
  .book-card:active { box-shadow:inset 0 0 0 2px var(--primary-container); }
  .book-card:has(.book-card-link:active) .mini-book { transform:translateY(-2px) scale(.98); }
}
@media (max-width:699px) {
  .glass-card-hint { opacity:1; transform:none; font-size:9px; padding:4px 7px; }
  .glass-card-hint svg { width:12px; height:12px; }
  .book-card { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
}
html[data-motion="quiet"] .book-card { transform:none; }
html[data-motion="quiet"] .book-card .book-stage::before { transform:none; }
html[data-motion="quiet"] .book-card::after { display:none; }
html[data-motion="quiet"] .book-card:has(.book-card-link:active),html[data-motion="quiet"] .book-card:has(.book-card-link:active) .mini-book { transform:none; }
@media (prefers-reduced-motion:reduce) { .book-card,.book-card .book-stage::before,.book-card:has(.book-card-link:active) .mini-book { transform:none !important; } .book-card::after { display:none; } }
@supports not (backdrop-filter:blur(1px)) { .book-card,.order-card,.book-dialog { background:var(--card); } }
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)) { .liquid-glass::before,.liquid-glass-strong::before { display:none; } }