/* Mcava · the "TODAY" mark. Geometry comes from marks.js; this file only holds colour and motion. */
.mk { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; --mk-red: #FF4258; --mk-butter: #FFED8F; --mk-egg: #FCEBD9; --mk-ink: #191919; }
.mk-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.mk-svg { position: absolute; z-index: 1; display: block; max-width: none; max-height: none; overflow: visible; pointer-events: none; opacity: 0; }
.mk-svg.is-under { z-index: -1; }
.mk.is-on .mk-svg { opacity: 1; }

/* Lines draw on. */
.mk-svg .draw { fill: none; stroke: var(--mk-red); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
.mk-svg .draw.ink { stroke: var(--mk-ink); }
.mk.is-on .mk-svg .draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--mk-dur, 900ms) cubic-bezier(.6, .04, .3, 1) calc(var(--mk-delay, 0ms) + var(--i, 0) * var(--mk-dur, 900ms) * .85); }

/* 3 · Butter swipe: wipes in left to right, behind the letters. */
.mk[data-mark="swipe"] .fill { fill: var(--mk-butter); }
.mk[data-mark="swipe"] .mk-svg { mix-blend-mode: multiply; clip-path: inset(-10% 100% -10% 0); }
.mk[data-mark="swipe"].is-on .mk-svg { clip-path: inset(-10% -2% -10% 0); transition: clip-path var(--mk-dur) cubic-bezier(.5, 0, .2, 1) var(--mk-delay, 0ms); }

/* 5 · Pill: set down like a stamp; the letters turn Eggshell as it lands (large, bold type only). */
.mk[data-mark="pill"] .fill { fill: var(--mk-red); }
.mk[data-mark="pill"] .mk-svg { transform: scale(1.16); }
.mk[data-mark="pill"].is-on .mk-svg { transform: none; transition: transform var(--mk-dur) cubic-bezier(.34, 1.4, .64, 1) var(--mk-delay, 0ms), opacity .14s linear var(--mk-delay, 0ms); }
.mk[data-mark="pill"] { transition: color .2s linear; }
.mk[data-mark="pill"].is-on { color: var(--mk-egg); transition-delay: calc(var(--mk-delay, 0ms) + 60ms); }

/* 6 · Red word with a note. */
.mk[data-mark="note"] { color: var(--mk-red); }
.mk-note { position: absolute; z-index: 2; white-space: nowrap; font-family: "Caveat", "Comic Sans MS", cursive; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; color: var(--mk-ink); transform: rotate(-4deg); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.mk.is-on .mk-note { opacity: 1; transition: opacity .5s ease calc(var(--mk-delay, 0ms) + var(--mk-dur, 700ms) * 1.2); }

/* Redraws (resize, late fonts) and reduced motion: no animation. */
.mk.no-anim, .mk.no-anim *, .mk.no-anim .mk-svg { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .mk, .mk * { transition: none !important; } }

/* ?debug=1 shows the measured ink box and baseline. */
.mk-debug { fill: none; stroke: #3E3EAB; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 2; }