/* ───────────────────────────────────────────────────────────────────────────
   BookBloom — custom styles layered on top of Tailwind Play CDN.
   Animations, decorative art, and a few component classes that are awkward to
   express purely with utilities. Keep colour tokens in sync with tw-config.js.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --bloom: #8b5cf6;
  --bloom-600: #7c3aed;
  --candy: #ec4899;
  --coral: #fb7185;
  --mango: #fb923c;
  --mint: #34d399;
  --sky: #38bdf8;
  --sun: #facc15;
  --ink: #473a63;
  --ink-soft: #6f6391;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', ui-rounded, system-ui, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 12% -8%, #ffe9f4 0%, transparent 55%),
    radial-gradient(1000px 560px at 92% 4%, #e9e2ff 0%, transparent 50%),
    radial-gradient(900px 700px at 60% 110%, #e6fff4 0%, transparent 55%),
    linear-gradient(160deg, #fff8f1 0%, #fdeef5 45%, #f4effe 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4, .font-display { font-family: 'Fredoka', ui-rounded, system-ui, sans-serif; }

::selection { background: rgba(168, 120, 251, 0.28); }

/* Scrollbar ----------------------------------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--bloom), var(--candy));
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* Gradient text helper ------------------------------------------------------ */
.text-gradient {
  background: linear-gradient(100deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-cool {
  background: linear-gradient(100deg, #6366f1, #38bdf8 60%, #34d399);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Glass / card surfaces ----------------------------------------------------- */
.bb-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.75rem;
  box-shadow: 0 18px 40px -22px rgba(91, 33, 182, 0.32);
}
.bb-card-flat { background: #fff; border-radius: 1.5rem; box-shadow: 0 14px 32px -22px rgba(91,33,182,.3); }

.bb-pop { box-shadow: 0 14px 0 -4px rgba(124, 58, 237, 0.16), 0 24px 48px -28px rgba(124,58,237,.5); }

/* Buttons ------------------------------------------------------------------- */
.bb-btn {
  font-family: 'Fredoka', sans-serif; font-weight: 500;
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px; padding: .7rem 1.4rem;
  transition: transform .18s cubic-bezier(.2,1.3,.5,1), box-shadow .18s, filter .18s;
  cursor: pointer; user-select: none; border: none;
}
.bb-btn:active { transform: translateY(1px) scale(.98); }
.bb-btn-primary {
  color: #fff;
  background: linear-gradient(120deg, #8b5cf6, #ec4899);
  box-shadow: 0 10px 22px -8px rgba(236, 72, 153, 0.6);
}
.bb-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 30px -10px rgba(236,72,153,.7); }
.bb-btn-ghost { background: rgba(255,255,255,.7); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(168,120,251,.35); }
.bb-btn-ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(168,120,251,.6); }

/* Pills / chips ------------------------------------------------------------- */
.bb-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .8rem; padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.75); color: var(--ink-soft);
  box-shadow: inset 0 0 0 1.5px rgba(168,120,251,.22);
  transition: all .18s; cursor: pointer; white-space: nowrap;
}
.bb-chip:hover { transform: translateY(-1px); color: var(--ink); }
.bb-chip[aria-pressed="true"], .bb-chip.is-active {
  color: #fff; background: linear-gradient(120deg, #8b5cf6, #ec4899);
  box-shadow: 0 8px 18px -8px rgba(236,72,153,.55);
}

/* Top navigation ------------------------------------------------------------ */
.nav-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: 'Fredoka', sans-serif; font-weight: 500; color: var(--ink-soft);
  padding: .55rem 1rem; border-radius: 999px; transition: all .2s; position: relative;
}
.nav-link:hover { color: var(--bloom-600); background: rgba(168,120,251,.1); }
.nav-link.is-active { color: #fff; background: linear-gradient(120deg, #8b5cf6, #ec4899); box-shadow: 0 8px 18px -8px rgba(139,92,246,.6); }

/* Animations ---------------------------------------------------------------- */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes floatySlow { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(3deg)} }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-7px) rotate(2deg)} }
@keyframes twinkle { 0%,100%{opacity:.2; transform:scale(.7)} 50%{opacity:1; transform:scale(1.2)} }
@keyframes wiggle { 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} }
@keyframes riseIn { 0%{transform:translateY(24px); opacity:0} 100%{transform:translateY(0); opacity:1} }
@keyframes popIn { 0%{transform:scale(.6); opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1); opacity:1} }
@keyframes petalFall { 0%{transform:translateY(-10vh) rotate(0); opacity:0} 10%{opacity:.9} 100%{transform:translateY(110vh) rotate(360deg); opacity:0} }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes scanSweep { 0%{top:6%} 100%{top:90%} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 25%{transform:scale(1.18)} 50%{transform:scale(.96)} }
@keyframes confettiFall { 0%{transform:translateY(-12px) rotate(0); opacity:1} 100%{transform:translateY(120px) rotate(540deg); opacity:0} }

.anim-floaty { animation: floaty 5s ease-in-out infinite; }
.anim-floaty-slow { animation: floatySlow 8s ease-in-out infinite; }
.anim-bob { animation: bob 4s ease-in-out infinite; }
.anim-twinkle { animation: twinkle 2.6s ease-in-out infinite; }
.anim-wiggle { animation: wiggle 1.8s ease-in-out infinite; transform-origin: 50% 80%; }
.anim-spin-slow { animation: floatySlow 9s linear infinite; }
.delay-1 { animation-delay: .15s; } .delay-2 { animation-delay: .3s; } .delay-3 { animation-delay: .45s; }
.delay-4 { animation-delay: .6s; } .delay-5 { animation-delay: .75s; } .delay-6 { animation-delay: .9s; }

/* Reveal on scroll ---------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { animation: riseIn .7s cubic-bezier(.2,.8,.2,1) forwards; }

/* Background decorations (floating petals & sparkles) ----------------------- */
.bb-decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bb-decor .petal { position: absolute; top: -10vh; animation: petalFall linear infinite; }
.bb-content { position: relative; z-index: 1; }

/* Book covers --------------------------------------------------------------- */
.book {
  position: relative; border-radius: .5rem .9rem .9rem .5rem;
  box-shadow: 0 14px 24px -14px rgba(40,10,80,.55), inset 6px 0 10px -6px rgba(0,0,0,.25);
  transition: transform .3s cubic-bezier(.2,1,.3,1), box-shadow .3s;
  overflow: hidden;
}
.book::before { /* spine highlight */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: linear-gradient(to right, rgba(255,255,255,.35), rgba(255,255,255,0));
}
.book::after { /* page edge */
  content: ''; position: absolute; right: 0; top: 3%; bottom: 3%; width: 4px;
  background: repeating-linear-gradient(to bottom, #fff 0 2px, #e8e0f5 2px 3px);
  border-radius: 2px;
}
.book:hover { transform: translateY(-10px) rotate(-1.5deg) scale(1.03); box-shadow: 0 26px 40px -16px rgba(40,10,80,.6); }
.shelf-plank {
  height: 18px; border-radius: 4px;
  background: linear-gradient(#d7a86e, #b5793f);
  box-shadow: 0 14px 22px -12px rgba(120,72,30,.7), inset 0 2px 0 rgba(255,255,255,.35);
}

/* Star rating --------------------------------------------------------------- */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 1.05em; height: 1.05em; }
.star-on { color: #fbbf24; filter: drop-shadow(0 1px 2px rgba(245,158,11,.5)); }
.star-off { color: #e7ddf3; }
.star-pick { cursor: pointer; transition: transform .12s; }
.star-pick:hover { transform: scale(1.25) rotate(-8deg); }

/* Progress ring + bars ------------------------------------------------------ */
.ring-track { stroke: #ece3fb; }
.ring-value { stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.bar-grow { transform-origin: bottom; transition: transform 1.1s cubic-bezier(.2,.9,.2,1); }
.bar-grow-x { transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.9,.2,1); }

/* Sticky-note (notes field) ------------------------------------------------- */
.sticky-note {
  background: linear-gradient(#fff8c9, #fdf0a6); border-radius: .35rem;
  box-shadow: 0 10px 22px -12px rgba(180,140,0,.5); transform: rotate(-1.2deg);
}

/* Toast --------------------------------------------------------------------- */
#bb-toasts { position: fixed; z-index: 80; right: 1.2rem; bottom: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.bb-toast {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-radius: 1rem;
  background: #fff; color: var(--ink); box-shadow: 0 18px 40px -16px rgba(91,33,182,.5);
  font-weight: 700; animation: popIn .4s both; border-left: 6px solid var(--mint);
}

/* Confetti ------------------------------------------------------------------ */
.confetti-piece { position: fixed; z-index: 90; width: 10px; height: 14px; border-radius: 2px; animation: confettiFall 1.1s ease-in forwards; }

/* Shimmer skeleton ---------------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, #efe8fb 25%, #f7f1ff 37%, #efe8fb 63%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: .75rem; }

/* Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Range slider (goal etc.) -------------------------------------------------- */
input[type="range"].bb-range { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 999px; background: #ece3fb; outline: none; }
input[type="range"].bb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(120deg,#8b5cf6,#ec4899); cursor: pointer; box-shadow: 0 4px 10px -2px rgba(236,72,153,.6); border: 3px solid #fff; }

/* Utility ------------------------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.dotted-path { stroke-dasharray: 2 8; stroke-linecap: round; }