/* aFig drawing engine (figures-anim.js): plan, pen sketch, colour, sharpen. */
.afig { position: relative; display: block; width: 100%; overflow: hidden; background: #fff; line-height: 0; }
.afig img, .afig canvas { display: block; width: 100%; height: 100%; max-width: none; user-select: none; pointer-events: none; }
.afig .afig-cv { position: absolute; inset: 0; }
.afig .afig-full { position: absolute; inset: 0; object-fit: contain; opacity: 0; }
.afig.afig-done .afig-full { opacity: 1; }
.afig .afig-txt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; z-index: 1; }
.afig .afig-txt.is-mult { mix-blend-mode: multiply; }
.afig.afig-done .afig-txt { opacity: 1; }
.afig.afig-plain .afig-full { animation: afPlain 1.4s cubic-bezier(.6, 0, .25, 1) both; }
.afig.afig-done .afig-cv { opacity: 0; transition: opacity .3s; }

/* Pen: the tip sits exactly on the drawing point. */
.afig .afig-pen { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(18px, 3.4%, 34px); opacity: 0; transform-origin: 0 0; pointer-events: none; will-change: transform; transition: opacity .25s; }
.afig .afig-pen svg { display: block; width: 100%; height: auto; transform: translate(-13%, -87%); filter: drop-shadow(0 4px 5px rgba(11, 35, 80, .35)); }
.afig .afig-pen::after { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 118, 26, .95), rgba(245, 118, 26, .35) 45%, transparent 70%); animation: afTip .5s ease-in-out infinite alternate; }
.afig .afig-pen.is-lift::after { opacity: 0; }

/* Status chip: tells the visitor the engine is drawing. */
.afig .afig-status { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px -6px rgba(11, 35, 80, .35), inset 0 0 0 1px rgba(10, 91, 211, .14); font: 600 12px/1 Roboto, system-ui, sans-serif; color: #0b2350; letter-spacing: .01em; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.afig .afig-status.is-on { opacity: 1; transform: none; }
.afig .afig-status i { width: 8px; height: 8px; border-radius: 50%; background: #0a5bd3; box-shadow: 0 0 0 0 rgba(10, 91, 211, .5); animation: afPulse 1.1s infinite; }
.afig .afig-status.is-done i { background: #1aa36f; animation: none; box-shadow: 0 0 0 3px rgba(26, 163, 111, .18); }
.afig .afig-status.is-small { left: 8px; bottom: 8px; padding: 5px 9px 5px 7px; font-size: 10.5px; gap: 6px; }

/* Final sharpening sweep. */
.afig::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .5) 50%, transparent 56%); background-size: 300% 100%; background-position: 120% 0; }
.afig.afig-shine::after { animation: afShine 1.1s cubic-bezier(.5, 0, .3, 1) both; }

@keyframes afPlain { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes afShine { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -20% 0; } }
@keyframes afPulse { to { box-shadow: 0 0 0 7px rgba(10, 91, 211, 0); } }
@keyframes afTip { from { transform: scale(.8); } to { transform: scale(1.15); } }
@keyframes afFade { to { opacity: 1; } }

/* Hero and generator cards */
.hero-stage .fig-cell.afig { border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0, 25, 70, .55); }
.afig-frame { display: flex; align-items: center; aspect-ratio: 16 / 10; border-radius: 20px; background: #fff; overflow: hidden; }
.afig-frame .afig { margin: 0 auto; }
.gcard-fig .afig-frame .fig { box-shadow: none; border-radius: 0; }

/* How it works: drawn, then one label proofread and fixed. The label box is set in the admin (--bx, --by, --bw, --bh in %). */
.st-wrap { position: relative; aspect-ratio: 560 / 420; }
.st-wrap > .layer-svg, .st-wrap > .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-card { --bx: 69.2; --by: 25.2; --bw: 8.4; --bh: 10; position: absolute; left: 2%; right: 2%; top: 50%; transform: translateY(-50%); container-type: inline-size; aspect-ratio: 2000 / 782; }
.st-card .afig { border-radius: 14px; height: 100%; }
.st-box { position: absolute; left: calc(var(--bx) * 1%); top: calc(var(--by) * 1%); width: calc(var(--bw) * 1%); height: calc(var(--bh) * 1%); display: flex; align-items: center; justify-content: center; font: 500 2.6cqw/1 "Nunito", Roboto, system-ui, sans-serif; color: #7fbfb9; z-index: 5; }
.st-wrong { background: #fff; opacity: 0; transition: opacity .4s; }
.fig-story.at-2 .afig-done ~ .st-wrong, .fig-story.at-3 .st-wrong { opacity: 1; }
.st-ov { z-index: 6; }
.st-ov > * { opacity: 0; }
.st-sq { top: calc((var(--by) + var(--bh) * .8) * 1%); height: 2.4%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 3 q3 -4 6 0 t6 0' fill='none' stroke='%23e5484d' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / auto 100%; }
.st-sel { position: absolute; left: calc((var(--bx) - .8) * 1%); top: calc((var(--by) - 1.2) * 1%); width: calc((var(--bw) + 1.6) * 1%); height: calc((var(--bh) + 2.4) * 1%); border: 2px dashed #f5761a; border-radius: 6px; background: rgba(245, 118, 26, .12); }
.st-wipe { background: #fff; transform-origin: 0 50%; }
.st-fixed { background: #fff; clip-path: inset(0 100% 0 0); }
.st-ok { position: absolute; left: calc((var(--bx) + var(--bw) + 1) * 1%); top: calc((var(--by) - 7.2) * 1%); width: 4.6%; aspect-ratio: 1; border-radius: 50%; background: #0a5bd3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.st-card .afig .afig-status { display: none; }
.fig-story.at-3 .st-sq { animation: afFade .3s .2s both, stOut .2s 1.6s forwards; }
.fig-story.at-3 .st-sel { animation: afFade .3s .8s both, stOut .3s 3.1s forwards; }
.fig-story.at-3 .st-wipe { animation: stWipe .5s cubic-bezier(.6, 0, .3, 1) 1.3s both; }
.fig-story.at-3 .st-fixed { animation: afFade .01s 1.9s both, stType .8s steps(4) 1.9s both; }
.fig-story.at-3 .st-ok { animation: stPop .6s cubic-bezier(.34, 1.56, .64, 1) 3s both; }
@keyframes stOut { to { opacity: 0; } }
@keyframes stWipe { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes stType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* Reduced motion: the finished figure at once. */
.reduce .afig .afig-full, .reduce .afig .afig-txt { opacity: 1 !important; animation: none !important; }
.reduce .afig .afig-pen, .reduce .afig .afig-status, .reduce .afig .afig-cv { display: none; }
@media (prefers-reduced-motion: reduce) {
	.afig .afig-full, .afig .afig-txt { opacity: 1 !important; animation: none !important; }
	.afig .afig-pen, .afig .afig-status, .afig .afig-cv { display: none; }
}

/* The sketching pen is retired: figures now assemble tile by tile and labels are typed in. */
.afig .afig-pen { display: none !important; }
.afig.afig-shine::after { animation-duration: 1.3s; }

/* The words of step 4 take the look of the label they replace (read from the figure by figures-anim.js). */
.st-card.st-fit .st-box { justify-content: var(--st-al, center); text-align: left; font: 400 var(--st-fs, 2.6cqw)/var(--st-lh, 1.15) Roboto, system-ui, sans-serif; color: var(--st-col, #1d2a55); white-space: pre-line; }
.st-card.st-fit .st-wrong, .st-card.st-fit .st-wipe, .st-ov.st-fit .st-wipe { background: var(--st-bg, #fff); }
.st-card.st-fit .st-fixed { background: var(--st-bg, #fff); }