/* ────────────────────────────────────────────────
   Our Little Library — storybook love menu
   Cute · Romantic · Glassmorphism · Pixar-soft
   ──────────────────────────────────────────────── */
:root{
  --pink:#ff77a9; --pink-deep:#ff5e9c;
  --purple:#a07bff; --purple-deep:#7c5cff;
  --white:#fff; --ink:#6b3a5b; --ink-soft:#8a5678;
  --glass:rgba(255,255,255,.4);
  --glass-strong:rgba(255,255,255,.6);
  --glass-border:rgba(255,255,255,.65);
  --shadow:0 18px 50px rgba(180,80,140,.28);
  --radius:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Quicksand',system-ui,sans-serif;
  color:var(--ink); min-height:100vh; padding:44px 20px 80px;
  background:linear-gradient(135deg,#ffe0ef 0%,#ffd6f0 35%,#e9d5ff 70%,#dcc8ff 100%);
  background-attachment:fixed; position:relative; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:''; position:fixed; inset:-30%; z-index:0; filter:blur(24px);
  background:
    radial-gradient(40% 40% at 20% 25%,rgba(255,150,200,.5),transparent 60%),
    radial-gradient(45% 45% at 80% 20%,rgba(170,130,255,.45),transparent 60%),
    radial-gradient(50% 50% at 60% 90%,rgba(255,190,230,.5),transparent 60%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate(-3%,3%) scale(1.08)}}

#hearts{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fh{position:absolute;bottom:-40px;opacity:0;animation:floatUp linear forwards;will-change:transform,opacity}
@keyframes floatUp{
  0%{opacity:0;transform:translateY(0) rotate(0) scale(.7)}
  10%{opacity:.85}90%{opacity:.85}
  100%{opacity:0;transform:translateY(-115vh) rotate(360deg) scale(1.1)}
}

.page-head{position:relative;z-index:10;text-align:center;margin-bottom:26px}
.page-head h1{font-family:'Pacifico',cursive;font-weight:400;
  font-size:clamp(2rem,6vw,3.2rem);color:var(--purple-deep);
  text-shadow:0 4px 18px rgba(124,92,255,.25)}
.page-head p{margin-top:8px;font-size:1.02rem;color:var(--ink-soft);font-weight:500}

/* admin corner link */
.admin-link{position:fixed;top:16px;right:16px;z-index:40;text-decoration:none;
  font-size:.8rem;font-weight:700;color:var(--purple-deep);
  background:var(--glass-strong);border:1px solid var(--glass-border);
  padding:9px 15px;border-radius:999px;backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(180,80,140,.2);transition:transform .3s}
.admin-link:hover{transform:translateY(-2px) scale(1.04)}

/* ── shelf ────────────────────────────────────────────────────────── */
.shelf{position:relative;z-index:10;max-width:1120px;margin:6px auto 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:52px 46px;padding:10px 6px 40px}

.book{position:relative;width:190px;height:264px;text-decoration:none;color:inherit;
  perspective:1500px;
  animation:bookFloat var(--dur,6s) ease-in-out infinite;animation-delay:var(--dly,0s)}
@keyframes bookFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.book::after{content:'';position:absolute;left:14%;right:6%;bottom:-24px;height:26px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(150,70,120,.4),transparent 78%);
  filter:blur(3px);transform:scaleX(1);transition:transform .55s ease,opacity .55s;opacity:.75;z-index:-1}
.book:hover::after{transform:scaleX(1.14) translateY(6px);opacity:.5}

.pages{position:absolute;inset:0;border-radius:5px 13px 13px 5px;
  background:linear-gradient(90deg,#f0e2ee 0 6px,#fff 6px);
  box-shadow:var(--shadow),
    2px 2px 0 rgba(255,255,255,.9), 4px 4px 0 #f4e9f2,
    6px 5px 0 rgba(255,255,255,.9), 8px 7px 0 #f0e2ee,
    10px 9px 0 rgba(255,255,255,.9)}
.pages::after{content:'';position:absolute;top:6px;bottom:6px;right:3px;width:6px;
  border-radius:2px;background:repeating-linear-gradient(#e7d6e6,#e7d6e6 1px,#fff 2px,#fff 3px)}

.peek{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;padding:22px 20px;text-align:center;
  border-radius:5px 13px 13px 5px;color:var(--purple-deep);overflow:hidden}
.peek::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(90,40,80,.28),transparent 55%);
  opacity:1;transition:opacity .6s ease}
.peek .pico{font-size:1.9rem;filter:drop-shadow(0 4px 7px rgba(180,80,140,.3))}
.peek .t{font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;line-height:1.1}
.peek .d{font-size:.75rem;color:var(--ink-soft);line-height:1.32;font-weight:500}
.peek .go{margin-top:5px;font-size:.72rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  padding:5px 12px;border-radius:999px;box-shadow:0 5px 13px rgba(255,120,180,.45)}
.peek .pico,.peek .t,.peek .d,.peek .go{
  opacity:0;transform:translateX(12px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.25,1)}
.book:hover .peek .pico{transition-delay:.18s}
.book:hover .peek .t{transition-delay:.26s}
.book:hover .peek .d{transition-delay:.32s}
.book:hover .peek .go{transition-delay:.4s}
.book:hover .peek .pico,.book:hover .peek .t,
.book:hover .peek .d,.book:hover .peek .go{opacity:1;transform:translateX(0)}
.book:hover .peek::before{opacity:0}

.ribbon{position:absolute;top:-6px;right:30px;width:16px;height:78px;z-index:6;
  background:linear-gradient(var(--pink-deep),var(--pink));
  box-shadow:0 3px 8px rgba(180,40,110,.4);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  transform-origin:top center;animation:sway 4.5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}

.cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.34,1.2,.4,1);z-index:4}
.book:hover .cover{transform:rotateY(-158deg)}
.face{position:absolute;inset:0;border-radius:5px 13px 13px 5px;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px}
.front{background:
    radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.28),transparent 55%),
    linear-gradient(150deg,var(--pink) 0%,var(--pink-deep) 45%,var(--purple-deep) 100%);
  color:#fff;box-shadow:var(--shadow),inset 0 0 0 4px rgba(255,255,255,.18),
    inset -14px 0 22px rgba(0,0,0,.16),inset 9px 0 12px rgba(255,255,255,.22)}
.front::before{content:'';position:absolute;inset:12px;border-radius:8px;
  border:1.5px dashed rgba(255,255,255,.55)}
.front::after{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:5px;
  border-radius:3px;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.15))}
.front .ico{font-size:2.9rem;filter:drop-shadow(0 5px 9px rgba(80,20,60,.45))}
.front .ct{font-family:'Playfair Display',serif;font-weight:700;font-size:1.02rem;
  line-height:1.15;text-align:center;padding:0 8px;text-shadow:0 2px 6px rgba(90,20,60,.35)}
.front .sub{font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;opacity:.85;font-weight:600}
.front .deco{position:absolute;bottom:14px;font-size:.8rem;opacity:.9;letter-spacing:6px}
.inside{transform:rotateY(180deg);
  background:linear-gradient(135deg,#fff8fc,#ffe9f5);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),inset 12px 0 22px rgba(180,80,140,.14);
  color:var(--pink-deep)}
.inside .note{font-family:'Playfair Display',serif;font-style:italic;font-size:.9rem;
  color:var(--ink-soft);line-height:1.4;text-align:center;padding:0 14px}
.inside .heart{font-size:1.5rem;margin-bottom:6px}

.empty{position:relative;z-index:10;text-align:center;color:var(--ink-soft);
  font-weight:600;margin-top:40px}

@media (prefers-reduced-motion:reduce){
  .book,.ribbon,body::before{animation:none}
  .cover{transition-duration:.35s}
}