/* ============================================
   JENNY FIGMENT — Kid-facing uplift layer
   Pastel color blocks, crayon accents, playful motion.
   Loaded after components.css on every page.
   ============================================ */

:root {
  /* Pastel band palette — soft enough for body copy to sit on */
  --pastel-pink: #ffeaf3;
  --pastel-blue: #e6f2ff;
  --pastel-green: #eaf7e7;
  --pastel-yellow: #fff6dc;
  --pastel-lilac: #f3ecff;

  /* Saturated crayon versions for rules, dots and doodles */
  --crayon-pink: #f2609b;
  --crayon-blue: #5b93e0;
  --crayon-green: #6fb469;
  --crayon-yellow: #f0b429;
}

/* ---------- Pastel section bands ---------- */
.band-pink,
.band-blue,
.band-green,
.band-yellow,
.band-lilac { background-image: none; }

.band-pink   { background-color: var(--pastel-pink); }
.band-blue   { background-color: var(--pastel-blue); }
.band-green  { background-color: var(--pastel-green); }
.band-yellow { background-color: var(--pastel-yellow); }
.band-lilac  { background-color: var(--pastel-lilac); }

/* ---------- Scrapbook paper section transitions (site-wide) ---------- */
.paper-band {
  position: relative;
  overflow: hidden;
}

.paper-band > .container {
  position: relative;
  z-index: 1;
}

.paper-rules {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 2.1rem, rgba(91, 147, 224, 0.16) 2.1rem 2.2rem),
    linear-gradient(90deg, transparent 0 3.5rem, rgba(242, 96, 155, 0.3) 3.5rem 3.62rem, transparent 3.62rem);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 70%, transparent 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 70%, transparent 90%, transparent);
}

.paper-torn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2rem;
  z-index: 2;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.paper-torn--cream        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,2 55,22 80,12 C110,2 130,20 160,10 C195,0 215,18 245,8 C275,0 300,16 335,6 C365,0 385,18 420,8 C450,0 470,20 505,10 C535,0 560,22 595,12 C625,2 645,20 680,10 C710,0 735,18 770,8 C800,0 820,16 855,6 C885,0 910,20 945,10 C975,0 995,18 1030,8 C1060,0 1085,22 1120,12 C1150,2 1175,16 1200,8 L1200,28 L0,28 Z' fill='%23f5e8df'/%3E%3C/svg%3E"); }
.paper-torn--cream-light  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,2 55,22 80,12 C110,2 130,20 160,10 C195,0 215,18 245,8 C275,0 300,16 335,6 C365,0 385,18 420,8 C450,0 470,20 505,10 C535,0 560,22 595,12 C625,2 645,20 680,10 C710,0 735,18 770,8 C800,0 820,16 855,6 C885,0 910,20 945,10 C975,0 995,18 1030,8 C1060,0 1085,22 1120,12 C1150,2 1175,16 1200,8 L1200,28 L0,28 Z' fill='%23fffaf7'/%3E%3C/svg%3E"); }
.paper-torn--cream-paper  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,2 55,22 80,12 C110,2 130,20 160,10 C195,0 215,18 245,8 C275,0 300,16 335,6 C365,0 385,18 420,8 C450,0 470,20 505,10 C535,0 560,22 595,12 C625,2 645,20 680,10 C710,0 735,18 770,8 C800,0 820,16 855,6 C885,0 910,20 945,10 C975,0 995,18 1030,8 C1060,0 1085,22 1120,12 C1150,2 1175,16 1200,8 L1200,28 L0,28 Z' fill='%23fdf8f3'/%3E%3C/svg%3E"); }

/* ---------- Crayon rule under section titles ---------- */
.crayon-underline {
  position: relative;
  padding-bottom: var(--space-4);
}

.crayon-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 7.5rem;
  height: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%23f2609b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.crayon-underline--blue::after   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%235b93e0' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.crayon-underline--green::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%236fb469' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.crayon-underline--yellow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%23f0b429' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }

.crayon-underline.text-center::after,
.text-center .crayon-underline::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Stroke pinned under a single word inside a heading */
.crayon-word {
  position: relative;
  display: inline-block;
}

.crayon-word::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.18em;
  height: 0.15em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%23f2609b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ---------- Confetti dots as a corner accent ---------- */
.dot-confetti {
  position: relative;
  overflow: hidden;
}

.dot-confetti::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  width: 11rem;
  height: 11rem;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--crayon-pink) 46%, transparent 47%),
    radial-gradient(circle, var(--crayon-blue) 46%, transparent 47%),
    radial-gradient(circle, var(--crayon-yellow) 46%, transparent 47%);
  background-size: 14px 14px, 10px 10px, 12px 12px;
  background-position: 20px 30px, 70px 12px, 46px 78px;
  background-repeat: no-repeat;
  opacity: 0.55;
}

/* ---------- Playful motion ---------- */
@keyframes kid-wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-1.6deg); }
  75%  { transform: rotate(1.6deg); }
  100% { transform: rotate(0deg); }
}

@keyframes kid-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.wiggle-hover {
  transition: transform var(--duration-normal) var(--ease-bounce),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.wiggle-hover:hover,
.wiggle-hover:focus-visible {
  animation: kid-wiggle 480ms var(--ease-smooth);
}

.pop-press:active {
  animation: kid-pop 220ms var(--ease-bounce);
}

/* Existing components get the same playfulness without markup changes */
.mini-book-card:hover,
.book-card:hover {
  transform: translateY(-6px) rotate(-1deg);
}

.path-card {
  transition: transform var(--duration-normal) var(--ease-bounce),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.path-card:hover {
  transform: translateY(-4px) rotate(0.6deg);
  box-shadow: var(--shadow-md);
}

/* Media kit thumbnail cards: the image inside already carries its own shadow,
   so the card frame just doubles up. Keep the lift, drop the box. */
.path-card--flat,
.path-card--flat:hover,
.path-card--flat:focus-visible {
  background: none;
  border: 0;
  box-shadow: none;
}

.btn:active,
.btn-kids-zone:active,
.purchase-btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .wiggle-hover:hover,
  .wiggle-hover:focus-visible,
  .pop-press:active { animation: none; }
  .mini-book-card:hover,
  .book-card:hover,
  .path-card:hover { transform: none; }
}