/* Doodle Note — kabdalis2 design system. Handwritten margin note (.hand
   handwriting class from the theme) with a faint marker highlight and a
   hand-drawn accent arrow. Pure CSS; hover gives a tiny one-shot wiggle. */

.b-doodle{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.b-doodle--align-left{ justify-content: flex-start; }
.b-doodle--align-center{ justify-content: center; }
.b-doodle--align-right{ justify-content: flex-end; }

.b-doodle__text{
    --doodle-tilt: 0deg;
    display: inline-block;
    max-width: 34ch;
    padding: 0 0.2em;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.35;
    color: var(--ink, #25211b);
    /* Faint marker highlight behind the lower part of the text.
       Plain rgba fallback first for browsers without color-mix. */
    background: linear-gradient(transparent 62%, rgba(176, 106, 63, 0.22) 62%);
    background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 22%, transparent) 62%);
    /* Tilt lives on the inner text (not the root) so alignment/flow are
       unaffected; the wiggle keyframes rotate around the same custom
       property so tilt + wiggle compose. */
    transform: rotate(var(--doodle-tilt));
}
.b-doodle--tilt-left .b-doodle__text{ --doodle-tilt: -2deg; }
.b-doodle--tilt-right .b-doodle__text{ --doodle-tilt: 2deg; }

.b-doodle__arrow{
    flex: none;
    width: 76px;
    height: 38px;
    color: var(--accent, #b06a3f);
}
/* Left arrow sits before the text and mirrors the squiggle */
.b-doodle__arrow--left{
    order: -1;
    transform: scaleX(-1);
}

/* Tiny one-shot wiggle on hover */
@keyframes kab-doodle-wiggle{
    0%, 100%{ transform: rotate(var(--doodle-tilt)); }
    30%{ transform: rotate(calc(var(--doodle-tilt) - 2.4deg)); }
    65%{ transform: rotate(calc(var(--doodle-tilt) + 1.8deg)); }
}
.b-doodle:hover .b-doodle__text{
    animation: kab-doodle-wiggle 400ms ease-in-out 1;
}

@media (prefers-reduced-motion: reduce){
    .b-doodle:hover .b-doodle__text{ animation: none; }
}