/* =======================================================================
   Crayon layer — the "a child could have drawn this" pass.

   Everything here is decoration and carries aria-hidden. It is drawn with
   a wobble filter so the strokes look waxy rather than vector-perfect, and
   it stays behind the content at low opacity. Doodles never sit on top of
   text and never carry meaning.
   ======================================================================= */

/* --- crayon texture: a slight displacement + grain on any .crayon svg --- */
.crayon path, .crayon circle, .crayon ellipse, .crayon line, .crayon polyline{
  filter:url(#waxy);
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dsvg{position:absolute;pointer-events:none;overflow:visible}

/* --- scribbled underline under a heading ---------------------------- */
.scribble{position:relative;display:inline-block}
.scribble svg{
  position:absolute;left:-2%;bottom:-.34em;width:104%;height:.42em;overflow:visible;
  color:var(--sun);
}
.scribble svg path{
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  animation:draw 1.1s cubic-bezier(.4,.9,.3,1) .25s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.band-fern .scribble svg,.wall .scribble svg{color:var(--sun)}
.band-sun .scribble svg{color:#8a6413}

/* --- floating doodle marks ------------------------------------------ */
.doodle{
  position:absolute;pointer-events:none;opacity:.62;color:var(--clay);
  animation:bob 7s ease-in-out infinite;
}
.doodle.slow{animation-duration:11s}
.doodle.rev{animation-direction:reverse}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-9px) rotate(2.5deg)}
}
@media(prefers-reduced-motion:reduce){
  .doodle{animation:none}
  .scribble svg path{animation:none;stroke-dashoffset:0}
}

/* --- crayon-scribbled backdrop for the green block ------------------- */
.wall{position:relative;overflow:hidden}
.wall::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:
    repeating-linear-gradient(58deg, rgba(242,185,59,.5) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-46deg, rgba(251,246,233,.4) 0 1.5px, transparent 1.5px 34px);
  mask-image:radial-gradient(120% 90% at 78% 18%, #000 20%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 78% 18%, #000 20%, transparent 72%);
}
.wall .wrap{position:relative;z-index:2}
.wall .doodle{color:var(--sun);opacity:.55}

/* --- crayon paper tint on the warm bands ---------------------------- */
.band-clay,.band-cream{position:relative;overflow:hidden}
.band-clay .wrap,.band-cream .wrap{position:relative;z-index:2}

/* --- a doodle border for the placeholder cards ----------------------- */
.nextcard{position:relative;overflow:hidden}
.nextcard .doodle{opacity:.4}

/* --- the coloring-book placeholder picture --------------------------- */
.colorblock{
  position:relative;border-radius:14px;background:#fff;border:1px solid var(--line);
  aspect-ratio:16/10;display:block;overflow:hidden;margin-bottom:var(--s3);
}
.colorblock svg{position:absolute;inset:0;width:100%;height:100%}
.colorblock .qm{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 1;
  font-size:74px;color:var(--clay);line-height:1;
}

/* --- section reveal: gentle, once, and only where it earns it -------- */
.rise{opacity:0;transform:translateY(16px)}
.rise.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1)}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}}