/* Vishav Book Publisher — Theme custom CSS */
:root {
  --primary: 159 79% 17%;
  --primary-glow: 158 50% 26%;
  --secondary: 160 78% 12%;
  --accent: 43 53% 54%;
  --gradient-warm: linear-gradient(135deg, hsl(159 79% 17%) 0%, hsl(158 50% 26%) 55%, hsl(43 53% 54%) 100%);
  --gradient-hero: linear-gradient(135deg, hsl(45 40% 97%) 0%, hsl(45 50% 92%) 50%, hsl(43 53% 80%) 100%);
  --gradient-dark: linear-gradient(135deg, hsl(160 78% 10%), hsl(159 60% 16%));
  --shadow-glow: 0 14px 40px -18px hsl(159 79% 17% / 0.28);
  --shadow-elegant: 0 25px 50px -12px hsl(160 50% 8% / 0.18);
  --shadow-card: 0 8px 24px -10px hsl(43 53% 54% / 0.22);
}
body { font-family: 'Work Sans', sans-serif; }
h1,h2,h3,h4 { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.01em; }
.font-script { font-family: 'Caveat', cursive; }

.gradient-text {
  background: var(--gradient-warm);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-x 6s ease infinite;
}
@keyframes gradient-x { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.bg-gradient-warm { background: var(--gradient-warm); }
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-dark { background: var(--gradient-dark); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-card { box-shadow: var(--shadow-card); }

.grid-bg {
  background-image:
    linear-gradient(hsl(var(--primary) / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--primary) / 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

.hover-lift { transition: all .3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: var(--shadow-glow); }

.story-link { position: relative; display: inline-block; }
.story-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: hsl(var(--primary)); transform: scaleX(0); transform-origin: bottom right;
  transition: transform .3s ease;
}
.story-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }

/* Animations */
@keyframes fade-in { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform:none;} }
@keyframes fade-in-left { from { opacity:0; transform: translateX(-30px);} to { opacity:1; transform:none;} }
@keyframes fade-in-right { from { opacity:0; transform: translateX(30px);} to { opacity:1; transform:none;} }
@keyframes scale-in { from { opacity:0; transform: scale(.9);} to { opacity:1; transform: scale(1);} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }
@keyframes float-slow { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-20px) rotate(5deg)} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes marquee-reverse { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.5); }
  50% { box-shadow: 0 0 0 20px hsl(var(--primary) / 0); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes bounce-soft { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes wiggle { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }

.animate-fade-in { animation: fade-in .7s ease-out forwards; }
.animate-fade-in-left { animation: fade-in-left .7s ease-out forwards; }
.animate-fade-in-right { animation: fade-in-right .7s ease-out forwards; }
.animate-scale-in { animation: scale-in .5s ease-out forwards; }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse 30s linear infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-out infinite; }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }
.animate-bounce-soft { animation: bounce-soft 2s ease-in-out infinite; }
.animate-wiggle { animation: wiggle 1s ease-in-out infinite; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; transition:all .25s ease; cursor:pointer; }
.card { background:#fff; border:1px solid hsl(30 30% 88%); border-radius:1rem; }