/* Page figures: one self-drawing schematic per page header
   (js/page-figures.js), in the robot's drafting language. The figures
   reuse the robot's drafting classes from components.css (.robot-line,
   .robot-draw, .robot-dim, .robot-chalk, .robot-fill-chalk, .robot-ping);
   everything here is prefixed pgf-. Tokens only. */

.pgf { display: block; width: 100%; height: auto; overflow: visible; }
.pgf .robot-dim { fill: none; }
.pgf-fig { fill: var(--draft-dim); font-family: var(--font-mono); font-size: 9px; }
.pgf-note { fill: var(--draft-dim); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; }
.pgf-label { fill: var(--draft); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.04em; }
.pgf-label-dim { fill: var(--draft-dim); font-weight: 400; }
.pgf-label-chalk { fill: var(--chalk); }
.pgf-label-lg { font-size: 11px; }
.pgf-leader { fill: none; stroke: var(--draft-dim); stroke-width: 1; }
.pgf-leader-dot { fill: var(--draft-dim); }
.pgf-dot { fill: var(--draft); }

/* Secondary linework: thinner and dimmer, still self-drawing */
.pgf .pgf-soft { stroke: var(--draft-dim); stroke-width: 1.25; }
.pgf .pgf-soft.robot-chalk { stroke: var(--chalk); }
.pgf-thin line, .pgf-thin path, path.pgf-thin, .pgf-hatch { fill: none; stroke: var(--draft-dim); stroke-width: 1; }
.pgf-thin .pgf-major { stroke: var(--draft); stroke-width: 1.5; }
.pgf-hatch { stroke: var(--draft-faint); }
.pgf-dash { stroke-dasharray: 3 4; }
.pgf-route { fill: none; stroke: var(--draft); stroke-width: 1.5; stroke-dasharray: 6 6; stroke-linecap: round; }
.pgf-centre { stroke: var(--draft-faint); stroke-width: 1; stroke-dasharray: 14 4 2 4; }
.pgf-bench { stroke: var(--chalk); stroke-width: 1.5; stroke-dasharray: 5 4; }

/* Entry: notes and fills fade in once the linework is down */
.pgf-notes { opacity: 0; animation: pgfFade 0.6s ease forwards 1.7s; }
.pgf-pop, .pgf-fadein { opacity: 0; animation: pgfFade 0.5s ease forwards; animation-delay: var(--d, 0s); }
.pgf-pop.robot-ping { animation: robotPing 2.6s infinite; animation-delay: var(--d, 0s); }
@keyframes pgfFade { to { opacity: 1; } }

/* The one gentle loop per figure */
.pgf-slide { animation: pgfSlide 6s ease-in-out infinite alternate 2.2s; }
@keyframes pgfSlide { to { transform: translateX(12px); } }

.pgf-sway { animation: pgfSway 5.5s ease-in-out infinite alternate 2s; }
@keyframes pgfSway { from { transform: rotate(-12deg); } to { transform: rotate(9deg); } }

.pgf-scanx { animation: pgfScanX 8s ease-in-out infinite alternate 2.2s; }
@keyframes pgfScanX { to { transform: translateX(-96px); } }

.pgf-nudge { animation: pgfNudge 2.4s ease-in-out infinite 2.4s; }
@keyframes pgfNudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -2.8px); } }

.pgf-plug { animation: pgfPlug 4s ease-in-out infinite 2.2s; }
@keyframes pgfPlug { 0%, 100% { transform: translateX(0); } 45%, 60% { transform: translateX(14px); } }
.pgf-spark { opacity: 0; animation: pgfSpark 4s ease-in-out infinite 2.2s; transform-box: fill-box; transform-origin: center; }
@keyframes pgfSpark { 0%, 40%, 70%, 100% { opacity: 0; transform: scale(0.6); } 50%, 58% { opacity: 1; transform: scale(1); } }

.pgf-lift { animation: pgfLift 5s ease-in-out infinite alternate 2.2s; }
@keyframes pgfLift { to { transform: translateY(-10px); } }

.pgf-tilt { animation: pgfTilt 5s ease-in-out infinite alternate 2s; }
@keyframes pgfTilt { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.pgf-pan-l { animation: pgfPanL 5s ease-in-out infinite alternate 2s; }
@keyframes pgfPanL { from { transform: translateY(2.4px); } to { transform: translateY(-2.4px); } }
.pgf-pan-r { animation: pgfPanR 5s ease-in-out infinite alternate 2s; }
@keyframes pgfPanR { from { transform: translateY(-2.4px); } to { transform: translateY(2.4px); } }

.pgf-spin { transform-box: fill-box; transform-origin: center; animation: pgfSpin var(--spin, 40s) linear infinite; }
@keyframes pgfSpin { to { transform: rotate(360deg); } }

.pgf-hand { animation: pgfSpin 18s linear infinite 1.6s; }

.pgf-wave { animation: pgfWave 2.6s ease-in-out infinite alternate 2s; }
@keyframes pgfWave { from { transform: skewY(0) scaleX(1); } to { transform: skewY(-5deg) scaleX(0.92); } }

.pgf-write { animation: pgfWrite 2.8s ease-in-out infinite alternate 2.2s; }
@keyframes pgfWrite { to { transform: translate(-8px, 2px); } }

.pgf-sign { fill: none; stroke: var(--chalk); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); animation: pgfSign 6s ease-in-out infinite 1.6s; }
@keyframes pgfSign {
    0% { stroke-dashoffset: var(--len, 200); opacity: 1; }
    30%, 82% { stroke-dashoffset: 0; opacity: 1; }
    94% { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: var(--len, 200); opacity: 0; }
}

.pgf-ribbon { animation: pgfRibbon 4.5s ease-in-out infinite alternate 2.2s; }
@keyframes pgfRibbon { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }

.pgf-pulse { fill: none; stroke: var(--draft); stroke-width: 1.5; stroke-linecap: round; opacity: 0;
    animation: pgfPulse 2.4s ease-in-out infinite; animation-delay: var(--d, 2s); }
@keyframes pgfPulse { 0% { opacity: 0; } 30% { opacity: 1; } 70%, 100% { opacity: 0; } }

.pgf-rock { animation: pgfRock 5.5s ease-in-out infinite alternate 2s; }
@keyframes pgfRock { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }

.pgf-ferry { opacity: 0; animation: pgfFerry 16s linear infinite 2s; }
.pgf-ferry .robot-line { stroke-width: 1.5; }
@keyframes pgfFerry {
    0% { opacity: 0; transform: translateX(0); }
    8%, 88% { opacity: 1; }
    100% { opacity: 0; transform: translateX(118px); }
}

/* Privacy: the padlock's shackle drops shut and stays shut a while */
.pgf-latch { animation: pgfLatch 6s ease-in-out infinite 2.2s; }
@keyframes pgfLatch { 0%, 12% { transform: translateY(-9px); } 24%, 100% { transform: translateY(0); } }

/* Terms: the stamp rests lifted, presses, lifts; the imprint shows after */
.pgf-stamp { transform: translateY(-70px); animation: pgfStamp 5s ease-in-out infinite 2.2s; }
@keyframes pgfStamp { 0%, 38% { transform: translateY(-70px); } 48%, 56% { transform: translateY(0); } 70%, 100% { transform: translateY(-70px); } }
.pgf-ink { opacity: 0; animation: pgfInk 5s linear infinite 2.2s; }
@keyframes pgfInk { 0%, 50% { opacity: 0; } 54%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Legal notice: the hanging sign swings a little on its hooks */
.pgf-swing { animation: pgfSwing 5s ease-in-out infinite alternate 2s; }
@keyframes pgfSwing { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

@media (prefers-reduced-motion: reduce) {
    .pgf-slide, .pgf-sway, .pgf-scanx, .pgf-nudge, .pgf-plug, .pgf-lift, .pgf-tilt, .pgf-pan-l, .pgf-pan-r,
    .pgf-spin, .pgf-hand, .pgf-wave, .pgf-write, .pgf-ribbon, .pgf-rock, .pgf-latch, .pgf-swing, .pgf-stamp { animation: none; }
    .pgf-ink { animation: none; opacity: 1; }
    .pgf-spark { display: none; }
    .pgf-notes, .pgf-pop, .pgf-fadein, .pgf-pop.robot-ping { animation: none; opacity: 1; }
    .pgf-sign { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; }
    .pgf-pulse { animation: none; opacity: 0.7; }
    .pgf-ferry { animation: none; opacity: 1; transform: translateX(48px); }
}