/* Illustrated view (owner decision 2026-09-30): one self-drawing schematic
   figure per page header, in the drawing language of the GCC AI Hub
   (gcchk-ai.com, js/page-figures.js), the shared signature of the German
   Chamber's platforms. Loaded on every page since 30 Sep 2026 (approved
   after a switchable preview); the figures come from v2-figures.js. Ink: AHK green linework with the ESG
   orange as the one accent; white linework on the green hub hero. All
   motion stops under prefers-reduced-motion. */

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/space-mono-400-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/space-mono-700-latin.woff2') format('woff2');
}

:root {
    --draft: #1a5c38;
    --draft-dim: #6f8f7c;
    --draft-faint: #c3d4c9;
    --chalk: #DE8703;
    --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
/* On the green hub hero the drawing turns white, as on the AI Hub's field */
.pgf-on-dark {
    --draft: #f4faf6;
    --draft-dim: rgba(244, 250, 246, 0.62);
    --draft-faint: rgba(244, 250, 246, 0.28);
    --chalk: #ffc766;
}

/* ===== Header layout: text left, figure right (AI Hub page header) ===== */
.v2-fig-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 48px; align-items: center;
    max-width: 1060px; margin: 0 auto 36px; text-align: left; }
/* !important: the page-specific heading rules carry ids (#compass, #cbam) */
.v2-fig-head .atlas-label { margin: 0 0 14px !important; }
.v2-fig-head .section-head-text, .v2-fig-head .section-title, .v2-fig-head .section-subtitle, .v2-fig-head .briefing-title,
.v2-fig-head h1, .v2-fig-head .voluntary-subtitle, .v2-fig-head .briefing-dateline { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
.v2-fig-head .section-subtitle { margin-bottom: 0 !important; max-width: 640px; }
.v2-fig { width: 100%; max-width: 300px; justify-self: end; }
.v2-fig-text > :last-child { margin-bottom: 0; }
/* the figure takes the place of the small section icon and graphic */
.v2-fig-head .section-icon,
.v2-fig-head .section-graphic { display: none; }
.section-head.v2-fig-head { max-width: 1060px; }
.v2-regdetail-head.v2-fig-host::after { content: ''; display: table; clear: both; }
.v2-regdetail-head.v2-fig-host > .v2-fig { float: right; width: 260px; margin: 0 0 16px 32px; }
/* hub: the signature scene sits in the hero's right column (the photo is gone
   since 2 Oct 2026); its box keeps the scene's 480 x 300 ratio before it draws */
.hero-image.v2-fig-hero { align-self: center; }
.hero-image.v2-fig-hero .v2-fig { max-width: 560px; justify-self: auto; margin-left: auto; aspect-ratio: 480 / 300; }

@media (max-width: 899px) {
    .v2-fig-head { grid-template-columns: 1fr; gap: 18px; text-align: center; }
    .v2-fig-head .atlas-label { margin: 0 auto 14px !important; }
    .v2-fig-head .section-head-text, .v2-fig-head .section-title, .v2-fig-head .section-subtitle, .v2-fig-head .briefing-title,
    .v2-fig-head h1, .v2-fig-head .voluntary-subtitle, .v2-fig-head .briefing-dateline { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
    .v2-fig { max-width: 190px; justify-self: center; }
    .v2-regdetail-head.v2-fig-host > .v2-fig { float: none; width: auto; max-width: 200px; margin: 0 0 12px; }
    .hero-image.v2-fig-hero .v2-fig { max-width: 440px; margin: 0 auto; }
    .legal .v2-fig-head, body[data-v2page="privacy"] .v2-fig-head, body[data-v2page="terms"] .v2-fig-head { text-align: left; }
}
body.legal-page .v2-fig-head, .legal .v2-fig-head { max-width: none; margin: 0 0 20px; }

/* ===== The drawing (ported from the AI Hub: robot-* and pgf-*) ===== */
.pgf { display: block; width: 100%; height: auto; overflow: visible; }
.pgf-line { fill: none; stroke: var(--draft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pgf-chalk { stroke: var(--chalk); }
.pgf-fill-chalk { fill: var(--chalk); }
.pgf-dim { fill: none; stroke: var(--draft-dim); stroke-width: 1; stroke-dasharray: 4 4; }
.pgf-draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); animation: pgfDraw 1.1s ease forwards; animation-delay: var(--d, 0s); }
@keyframes pgfDraw { to { stroke-dashoffset: 0; } }
.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-glyph { fill: var(--draft); font-family: var(--font-mono); font-size: 34px; font-weight: 700; }
.pgf-leader { fill: none; stroke: var(--draft-dim); stroke-width: 1; }
.pgf-leader-dot { fill: var(--draft-dim); }
.pgf-dot { fill: var(--draft); }
.pgf .pgf-soft { stroke: var(--draft-dim); stroke-width: 1.25; }
.pgf .pgf-soft.pgf-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-route { fill: none; stroke: var(--draft); stroke-width: 1.5; stroke-dasharray: 6 6; stroke-linecap: round; }
.pgf-route-dim { fill: none; stroke: var(--draft-dim); stroke-width: 1.25; stroke-dasharray: 5 5; stroke-linecap: round; }

/* 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.pgf-ping { animation: pgfFade 0.5s ease forwards, pgfPing 2.6s ease-in-out infinite; animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.5s); }
@keyframes pgfFade { to { opacity: 1; } }
@keyframes pgfPing { 0%, 100% { opacity: 0.35; } 50% { 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-tilt { animation: pgfTilt 5s ease-in-out infinite alternate 2s; }
@keyframes pgfTilt { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.pgf-scanx { animation: pgfScanX 8s ease-in-out infinite alternate 2.2s; }
@keyframes pgfScanX { to { transform: translateX(-96px); } }
.pgf-lift { animation: pgfLift 5s ease-in-out infinite alternate 2.2s; }
@keyframes pgfLift { to { transform: translateY(-8px); } }
.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-ribbon { animation: pgfRibbon 4.5s ease-in-out infinite alternate 2.2s; }
@keyframes pgfRibbon { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.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-swing { animation: pgfSwing 5s ease-in-out infinite alternate 2s; }
@keyframes pgfSwing { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.pgf-latch { animation: pgfLatch 6s ease-in-out infinite 2.2s; }
@keyframes pgfLatch { 0%, 12% { transform: translateY(-9px); } 24%, 100% { transform: translateY(0); } }
.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; }
}
/* smoke and CO2 puffs rise and fade */
.pgf-puff { opacity: 0; animation: pgfPuff 4.8s ease-out infinite; animation-delay: var(--d, 2s); }
@keyframes pgfPuff { 0% { opacity: 0; transform: translate(0, 6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -26px); } }
/* water: the wave lines drift sideways */
.pgf-sea { animation: pgfSea 4s linear infinite; }
@keyframes pgfSea { from { transform: translateX(0); } to { transform: translateX(-24px); } }
/* a dot travelling along a route (offset-path set inline) */
.pgf-travel { offset-rotate: 0deg; animation: pgfTravel 5s ease-in-out infinite; animation-delay: var(--d, 2.2s); opacity: 0; }
@keyframes pgfTravel { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* the container ship crosses, fades out at the far shore and starts over */
.pgf-ship { animation: pgfShip 14s linear infinite 2.2s; }
@keyframes pgfShip {
    0% { transform: translateX(0); opacity: 0; }
    6%, 86% { opacity: 1; }
    100% { transform: translateX(150px); opacity: 0; }
}
/* the boom gate lifts and drops */
.pgf-boom { animation: pgfBoom 6s ease-in-out infinite 2.4s; }
@keyframes pgfBoom { 0%, 25% { transform: rotate(0); } 40%, 70% { transform: rotate(-38deg); } 85%, 100% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
    .pgf-draw { animation: none; stroke-dashoffset: 0; }
    .pgf-slide, .pgf-sway, .pgf-tilt, .pgf-scanx, .pgf-lift, .pgf-spin, .pgf-hand, .pgf-wave, .pgf-write, .pgf-ribbon,
    .pgf-rock, .pgf-swing, .pgf-latch, .pgf-sea, .pgf-boom { animation: none; }
    .pgf-notes, .pgf-pop, .pgf-fadein { animation: none; opacity: 1; }
    .pgf-sign { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; }
    .pgf-puff { animation: none; opacity: 0.8; }
    .pgf-travel { animation: none; opacity: 0; }
    .pgf-ship { animation: none; opacity: 1; transform: translateX(60px); }
}
@media print { .v2-fig { display: none !important; } }