/* ============================================================
   Wonderfolio UI — children's book design system (v1)
   Hand-drawn stripe background, print-matching typography
   (Fredoka + Nunito, same faces as the physical book covers),
   and core components. Flat, warm, playful.
   ============================================================ */

/* ---------- Fonts (self-hosted, same files as book covers) ---------- */
@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fonts/Fredoka-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fonts/Fredoka-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fonts/Fredoka-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('/assets/fonts/NotoSansArabic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('/assets/fonts/NotoSansArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- Design tokens ---------- */
:root {
  /* paper + stripes */
  --wf-paper: #FFFDF8;
  --wf-cream-1: #F7EEDC;
  --wf-cream-2: #FAF3E4;
  --wf-cream-border: #EFE3C8;

  /* brand accents */
  --wf-purple: #9333EA;
  --wf-purple-deep: #7223BC;
  --wf-amber: #F59E0B;
  --wf-amber-soft: #FEF3C7;
  --wf-ink: #292524;
  --wf-ink-soft: #57534E;

  /* type */
  --wf-font-display: 'Fredoka', 'Noto Sans Arabic', system-ui, sans-serif;
  --wf-font-body: 'Nunito', 'Noto Sans Arabic', system-ui, sans-serif;

  /* shape */
  --wf-radius: 1.25rem;
  --wf-radius-pill: 999px;
}

/* ---------- Typography roles ---------- */
.wf-body {
  font-family: var(--wf-font-body);
  color: var(--wf-ink);
}
.wf-display {
  font-family: var(--wf-font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* ---------- Signature: hand-drawn stripe paper ---------- */
.wf-bg-stripes {
  background-color: var(--wf-paper);
  background-image: url('/assets/ui/wf-stripes.svg');
  background-size: 168px 192px;
}

/* Soft fade so dense content areas stay readable over the stripes */
.wf-paper-veil {
  background-color: color-mix(in srgb, var(--wf-paper) 72%, transparent);
}

/* ---------- Squiggle underline (crayon stroke under headings) ---------- */
.wf-squiggle {
  padding-bottom: 0.45em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0,5 Q7,1 14,5 T28,5' stroke='%23F59E0B' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 28px 8px;
}

/* ---------- Buttons: chunky, flat, storybook-press ---------- */
.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--wf-font-display);
  font-weight: 600;
  border-radius: var(--wf-radius-pill);
  padding: 0.875rem 2rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.wf-btn:focus-visible {
  outline: 3px solid var(--wf-amber);
  outline-offset: 2px;
}
.wf-btn-primary {
  color: #fff;
  background-color: var(--wf-purple);
  box-shadow: 0 4px 0 var(--wf-purple-deep);
}
.wf-btn-primary:hover {
  background-color: #A855F7;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--wf-purple-deep);
}
.wf-btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--wf-purple-deep);
}
.wf-btn-secondary {
  color: var(--wf-ink);
  background-color: #fff;
  border: 2px solid var(--wf-cream-border);
  box-shadow: 0 4px 0 var(--wf-cream-border);
}
.wf-btn-secondary:hover {
  background-color: var(--wf-cream-2);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--wf-cream-border);
}
.wf-btn-secondary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--wf-cream-border);
}

/* ---------- Card ---------- */
.wf-card {
  background-color: #fff;
  border: 2px solid var(--wf-cream-border);
  border-radius: var(--wf-radius);
}

/* ---------- Icon chip (round crayon-stroke icon holder) ---------- */
.wf-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--wf-radius-pill);
  background-color: var(--wf-amber-soft);
  border: 2px solid var(--wf-amber);
  color: var(--wf-purple-deep);
}
.wf-icon-chip svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ---------- Sticker badge (tilted pill, like a sticker on a cover) ---------- */
.wf-sticker {
  display: inline-block;
  font-family: var(--wf-font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--wf-purple-deep);
  background-color: var(--wf-amber-soft);
  border: 2px solid var(--wf-amber);
  border-radius: var(--wf-radius-pill);
  padding: 0.4rem 1rem;
  transform: rotate(-2deg);
}
[dir="rtl"] .wf-sticker {
  transform: rotate(2deg);
}

/* ---------- Photo → illustration comparison slider ---------- */
.wf-compare {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.wf-compare-under,
.wf-compare-over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.wf-compare-over {
  clip-path: inset(0 calc(100% - var(--wf-compare-pos, 50%)) 0 0);
}
.wf-compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--wf-compare-pos, 50%);
  width: 3px;
  transform: translateX(-50%);
  background-color: #fff;
  pointer-events: none;
}
.wf-compare-handle {
  position: absolute;
  top: 50%;
  left: var(--wf-compare-pos, 50%);
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--wf-radius-pill);
  background-color: #fff;
  border: 2px solid var(--wf-cream-border);
  color: var(--wf-ink);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-compare-handle:focus-visible {
  outline: 3px solid var(--wf-amber);
  outline-offset: 2px;
}
.wf-compare-handle svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.wf-compare-label {
  position: absolute;
  top: 0.75rem;
  font-family: var(--wf-font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #fff;
  background-color: rgba(41, 37, 36, 0.62);
  border-radius: var(--wf-radius-pill);
  padding: 0.3rem 0.8rem;
  pointer-events: none;
}
.wf-compare-label-left { left: 0.75rem; }
.wf-compare-label-right { right: 0.75rem; }

/* ---------- Progressive image loading (LQIP blur-up) ----------
   Layer a tiny blurred variant behind the real image; the real <img>
   is transparent until decoded, so the placeholder shows through. */
.wf-lqip {
  filter: blur(14px);
  transform: scale(1.05);
}

/* ---------- Sparkle burst (live-preview update feedback) ---------- */
.wf-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--wf-amber);
  animation: wf-sparkle-pop 650ms ease-out forwards;
}
.wf-sparkle svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
@keyframes wf-sparkle-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
  30%  { opacity: 1; transform: scale(1.15) rotate(20deg); }
  100% { opacity: 0; transform: scale(0.45) rotate(45deg); }
}

/* ---------- Floating mobile CTA bar ---------- */
.wf-cta-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--wf-cream-border);
  transform: translateY(110%);
  transition: transform 300ms ease-out;
}
.wf-cta-bar.is-visible {
  transform: translateY(0);
}
@media (min-width: 640px) {
  .wf-cta-bar { display: none; }
}
/* Lift the WhatsApp bubble above the bar while it is shown */
@media (max-width: 639px) {
  body.wf-cta-bar-active .wf-wa-bubble {
    bottom: 5.5rem;
    transition: bottom 300ms ease-out;
  }
  body.wf-cta-bar-active main {
    padding-bottom: 4.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-sparkle {
    display: none;
  }
  .wf-cta-bar {
    transition: none;
  }
  .wf-btn,
  .wf-btn:hover,
  .wf-btn:active {
    transition: none;
    transform: none;
  }
}