/* /security/ai-key-thief/: the art. The hero (a living sky behind it, the thief's story in front:
   thief_hero.py) and the "two birds, one stone" scene (thief_art.py). Uses style.css's tokens;
   the art's own colours below follow light and dark. Motion: thief-art.js plays the two stories;
   the sky is CSS only (transforms), paused off-screen, still under reduced motion. */

:root {
  --ak-sky1: #cfe2f7; --ak-sky2: #f3f7fb; --ak-hill: #d3eadb; --ak-hill2: #bfdfcb; --ak-cloud: #ffffff;
  --ak-skin: #efc29c; --ak-skin-2: #d9a37b; --ak-hair: #2b2f36; --ak-pants: #33414f; --ak-pants-2: #26313c; --ak-shoe: #17212b;
  --ak-wood: #caa47c; --ak-metal: #8a98a6; --ak-laptop: #9eabb8; --ak-chair: #3f4b59;
  --akb-fake: #4f8fe0; --akb-fake-2: #d4e5fb; --akb-scan: #e0453c; --akb-scan-2: #ffd6d2; --akb-crest: #b3261e; --akb-ink: #1b2430;
  --akt-hood: #2c3345; --akt-hood-2: #222837; --akt-trim: #d93a33; --akt-face: #0d1018; --akt-glove: #161a24; --akt-leg: #232838;
  --akt-dim: rgba(12, 16, 24, .5); --akt-gold: #c9a23a; --akt-gold-2: #e8c96a;
  --ak-sky-a: #d4e6f8; --ak-sky-b: #e8f1fa;
  --ak-clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 150'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='90' cy='86' r='30'/%3E%3Ccircle cx='130' cy='66' r='40'/%3E%3Ccircle cx='172' cy='88' r='28'/%3E%3Crect x='62' y='86' width='138' height='34' rx='17'/%3E%3Ccircle cx='420' cy='108' r='20'/%3E%3Ccircle cx='448' cy='96' r='28'/%3E%3Ccircle cx='478' cy='110' r='18'/%3E%3Crect x='402' y='108' width='96' height='22' rx='11'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --ak-sky1: #10243a; --ak-sky2: #141c24; --ak-hill: #16302a; --ak-hill2: #1a3a2f; --ak-cloud: #1c2e42;
    --ak-skin: #d9a985; --ak-skin-2: #b9845f; --ak-hair: #0b1016; --ak-pants: #3b4a5a; --ak-pants-2: #2c3845; --ak-shoe: #0b1016;
    --ak-wood: #8a6a4b; --ak-metal: #5f6d7b; --ak-laptop: #7d8b99; --ak-chair: #4f5d6b;
    --akb-fake: #4a86d4; --akb-fake-2: #b9d3f5; --akb-scan: #e0544b; --akb-scan-2: #f6c3be;
    --akt-hood: #3a4359; --akt-hood-2: #2c3345; --akt-dim: rgba(2, 5, 9, .62);
    --ak-sky-a: #0f2236; --ak-sky-b: #111b26;
    --ak-clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 150'%3E%3Cg fill='%231a2e44'%3E%3Ccircle cx='90' cy='86' r='30'/%3E%3Ccircle cx='130' cy='66' r='40'/%3E%3Ccircle cx='172' cy='88' r='28'/%3E%3Crect x='62' y='86' width='138' height='34' rx='17'/%3E%3Ccircle cx='420' cy='108' r='20'/%3E%3Ccircle cx='448' cy='96' r='28'/%3E%3Ccircle cx='478' cy='110' r='18'/%3E%3Crect x='402' y='108' width='96' height='22' rx='11'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* The hero: the words left, the thief's story right (stacked on a phone), the sky behind */
.ak-hero { padding-bottom: 32px; overflow: hidden; }
.ak-hero-in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) { .ak-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 48px; } }
.ak-hero .kicker { margin-bottom: 10px; }
.page-hero.ak-hero h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; margin-bottom: 16px; }
.ak-byline { margin: 0 0 14px; font-size: 15.5px; font-weight: 650; color: var(--ink); }
.ak-hero .lede { font-size: clamp(17px, 1.8vw, 20px); margin: 0; color: var(--ink-2); }

/* "AI-key thief" and "AI keys": a colour and an underline that sweeps in */
.ak-hl-thief, .ak-hl-keys {
  background-image: linear-gradient(color-mix(in srgb, var(--bad) 30%, transparent), color-mix(in srgb, var(--bad) 30%, transparent));
  background-repeat: no-repeat; background-position: 0 92%; background-size: 100% .2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ak-hl-thief { color: var(--bad); white-space: nowrap; }
.ak-hl-keys { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ak-key-ic { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .22em; color: var(--bad); }
@media (prefers-reduced-motion: no-preference) {
  .ak-hl-thief, .ak-hl-keys { animation: ak-sweep 1s .5s var(--ease) both; }
  .ak-hl-keys { animation-delay: .9s; }
}
@keyframes ak-sweep { from { background-size: 0 .2em; } to { background-size: 100% .2em; } }

/* The living sky */
.ak-sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--ak-sky-a), var(--ak-sky-b) 62%, var(--page));
}
.ak-cl { position: absolute; left: 0; width: calc(100% + 640px); background-image: var(--ak-clouds); background-repeat: repeat-x; will-change: transform; }
.ak-cl1 { top: 2%; height: 150px; background-size: 640px 150px; opacity: .85; animation: ak-pan 120s linear infinite; }
.ak-cl2 { top: 30%; height: 105px; background-size: 448px 105px; background-position: 210px 0; opacity: .6; animation: ak-pan2 170s linear infinite; }
.ak-cl3 { top: 58%; height: 75px; background-size: 320px 75px; background-position: 90px 0; opacity: .45; animation: ak-pan3 240s linear infinite; }
@keyframes ak-pan { to { transform: translateX(-640px); } }
@keyframes ak-pan2 { to { transform: translateX(-448px); } }
@keyframes ak-pan3 { to { transform: translateX(-320px); } }
.ak-fly { position: absolute; left: 0; width: 46px; height: 42px; opacity: .5; will-change: transform; animation: ak-fly 30s linear infinite; }
.ak-fly svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ak-fly1 { top: 9%; animation-duration: 30s; animation-delay: -4s; }
.ak-fly2 { top: 21%; width: 40px; animation-duration: 36s; animation-delay: -20s; }
.ak-fly3 { top: 70%; width: 30px; opacity: .32; animation-duration: 48s; animation-delay: -31s; }
.ak-fly4 { top: 4%; width: 26px; opacity: .3; animation-duration: 56s; animation-delay: -12s; }
@keyframes ak-fly { from { transform: translateX(calc(100vw + 60px)); } to { transform: translateX(-90px); } }
.ak-bob { animation: ak-bob 1.7s ease-in-out infinite alternate; }
.ak-fly2 .ak-bob { animation-duration: 1.3s; }
@keyframes ak-bob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.ak-flap { transform-box: fill-box; transform-origin: 30% 50%; animation: ak-flap .3s ease-in-out infinite alternate; }
@keyframes ak-flap { from { transform: rotate(-28deg); } to { transform: rotate(24deg); } }
.ak-hero.is-paused .ak-sky *, .ak-birds-stage.is-paused .ak-cloud { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ak-sky *, .ak-hl-thief, .ak-hl-keys { animation: none !important; }
  .ak-fly1 { transform: translateX(58vw); } .ak-fly2 { transform: translateX(30vw); }
  .ak-fly3 { transform: translateX(84vw); } .ak-fly4 { transform: translateX(8vw); }
}

/* A stage: the frame both stories play in */
.ak-stage {
  position: relative; aspect-ratio: 640 / 440; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--win-shadow);
}
.ak-thief-stage { aspect-ratio: 600 / 450; }
.ak-svg { display: block; width: 100%; height: 100%; }
.ak-replay {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font: 650 13.5px/1 var(--sans); cursor: pointer; color: var(--ink);
  background: var(--glass); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s, transform .12s;
}
.ak-thief-stage .ak-replay { top: 3px; bottom: auto; right: 8px; gap: 4px; padding: 4px 10px; font-size: 12px; }
.ak-thief-stage .ak-replay svg { width: 13px; height: 13px; }
@media (max-width: 599px) { .ak-thief-stage .ak-replay { top: 2px; padding: 2px 8px; font-size: 11px; } }
.ak-replay:hover { border-color: var(--rule-2); }
.ak-replay:active { transform: scale(.96); }
.ak-stage text { font-family: var(--round); }

/* The thief's story */
.akt-page { fill: var(--surface); }
.akt-bar { fill: var(--sunk); }
.akt-dot1 { fill: #ef6b63; } .akt-dot2 { fill: #e6b34a; } .akt-dot3 { fill: #48b883; }
.akt-addr { fill: var(--surface); stroke: var(--rule); }
.akt-addr-t { font: 600 13px var(--sans) !important; fill: var(--ink-2); }
.akt-sk { fill: var(--sunk); }
.akt-sk-btn { fill: color-mix(in srgb, var(--accent-fill) 40%, var(--sunk)); }
.akt-dim { fill: var(--akt-dim); }
.akt-cone { mix-blend-mode: screen; }
.akt-beam1 { stop-color: #ffe7a0; stop-opacity: .85; }
.akt-beam2 { stop-color: #ffe7a0; stop-opacity: .14; }
.akt-shine1 { stop-color: #ffe08a; stop-opacity: .95; }
.akt-shine2 { stop-color: #ffe08a; stop-opacity: 0; }
.akt-glow { fill: url(#akt-shine); }
.akt-lamp { fill: #2b3142; stroke: #8a98a6; stroke-width: 1.5; }
.akt-lamp-mouth { fill: #ffe7a0; }
.akt-lamp-arm { stroke: #8a98a6; stroke-width: 4; stroke-linecap: round; }
.akt-seen { fill: var(--surface); stroke: var(--accent-fill); stroke-width: 2; }
.akt-seen-t { font: 750 15.5px var(--round); fill: var(--ink); }
.akt-markbg { fill: var(--accent-fill); }
.akt-markink { fill: #fff; }
.akt-shadow { fill: rgba(0, 0, 0, .28); }
.akt-hood, .akt-body { fill: var(--akt-hood); }
.akt-trim, .akt-band, .akt-tip { fill: var(--akt-trim); }
.akt-pocket { fill: var(--akt-hood-2); }
.akt-string { stroke: var(--akt-trim); stroke-width: 3; stroke-linecap: round; fill: none; }
.akt-face { fill: var(--akt-face); }
.akt-eye { fill: #fff; }
.akt-pupil { fill: #10131a; }
.akt-mouth { stroke: rgba(255, 255, 255, .75); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.akt-sleeve { stroke: var(--akt-hood); stroke-width: 20; stroke-linecap: round; fill: none; }
.akt-glove { fill: var(--akt-glove); stroke: var(--akt-hood-2); stroke-width: 2; }
.akt-leg { fill: var(--akt-leg); }
.akt-shoe { fill: #0b0e14; }
.akt-alarm { fill: var(--akt-trim); stroke: #fff; stroke-width: 2.5; }
.akt-alarm-i { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.akt-mask { fill: #f6cfa6; stroke: #e0a777; stroke-width: 2.5; }
.akt-mask-ink, .akt-mask-smile { stroke: #3a2a1f; stroke-width: 3.6; fill: none; stroke-linecap: round; }
.akt-cheek { fill: #f08f8f; opacity: .55; }
.akt-ring { fill: none; stroke: var(--akt-gold); stroke-width: 5; }
.akt-cord { stroke: var(--akt-gold); stroke-width: 2; opacity: .75; }
.akt-shaft { stroke: var(--akt-gold); stroke-width: 8; stroke-linecap: round; fill: none; }
.akt-bow { fill: #fff; stroke: var(--akt-gold); stroke-width: 4; }
.akt-kpill { fill: var(--surface); stroke: var(--rule); }
.akt-klabel { font: 750 16px var(--round) !important; fill: var(--ink); }
.akt-stamp { fill: #fff4f3; stroke: #d93a33; stroke-width: 2.5; }
.akt-stampt { font: 800 16px var(--mono) !important; fill: #c0352f; letter-spacing: .04em; }
.akt-counter { fill: var(--term); stroke: rgba(255, 255, 255, .12); }
.akt-c-label { font: 650 12.5px var(--sans) !important; fill: var(--term-dim); letter-spacing: .08em; text-transform: uppercase; }
.akt-count { font: 800 30px var(--mono) !important; fill: #fff; }
.akt-secs { font: 650 16px var(--sans) !important; fill: var(--term-dim); }
.akt-rec { fill: #ef6b63; }
.akt-badge { fill: var(--good); }
.akt-badge-ok { fill: #fff; }
.akt-badge-tick { stroke: var(--good); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.akt-badge-t { font: 800 18px var(--round); fill: #fff; }
.akt-cap-bg { fill: var(--term); }
.akt-caption { font: 800 19px var(--round); fill: #fff; }
.akt-card { fill: var(--surface); stroke: var(--rule); filter: drop-shadow(0 14px 22px rgba(23, 33, 43, .18)); }
.akt-card-head { font: 650 15px var(--sans) !important; fill: var(--ink-2); }
.akt-live { fill: var(--good); }
.akt-live-t { font: 750 13px var(--sans) !important; fill: var(--good); letter-spacing: .08em; text-transform: uppercase; }
.akt-card-rule { stroke: var(--rule); stroke-width: 1.5; }
.akt-card-who { font: 750 24px var(--round); fill: var(--ink); }
.akt-card-sub { font: 500 19px var(--sans) !important; fill: var(--ink-2); }
.akt-live-dot { fill: var(--good); }
.akt-gbar1 { fill: #ff3d6e; mix-blend-mode: multiply; }
.akt-gbar2 { fill: #24c8ff; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .akt-gbar1, .akt-gbar2 { mix-blend-mode: screen; } }

/* The two birds: the scene */
.ak-sky1 { stop-color: var(--ak-sky1); }
.ak-sky2 { stop-color: var(--ak-sky2); }
.ak-glow1 { stop-color: var(--accent-fill); stop-opacity: .55; }
.ak-glow2 { stop-color: var(--accent-fill); stop-opacity: 0; }
.ak-cloud { fill: var(--ak-cloud); }
.ak-hill { fill: var(--ak-hill); }
.ak-hill2 { fill: var(--ak-hill2); }
.ak-wood { fill: var(--ak-wood); }
.ak-metal { fill: var(--ak-metal); }
.ak-metal-s { stroke: var(--ak-metal); stroke-width: 6; stroke-linecap: round; }
.ak-wheel { fill: var(--ak-chair); }
.ak-chair { fill: var(--ak-chair); }
.ak-laptop { fill: var(--ak-laptop); }
.ak-lid { stroke: var(--ak-laptop); stroke-width: 7; stroke-linecap: round; fill: none; }
.ak-led { fill: var(--accent-fill); }
.ak-mug { fill: #ef6b63; }
.ak-mug-h { stroke: #ef6b63; stroke-width: 3; fill: none; }
.ak-pants { fill: var(--ak-pants); }
.ak-pants-back { fill: var(--ak-pants-2); }
.ak-shoe { fill: var(--ak-shoe); }
.ak-top { fill: var(--accent-fill); }
.ak-collar { stroke: rgba(0, 0, 0, .18); stroke-width: 3; fill: none; stroke-linecap: round; }
.ak-sleeve { stroke: color-mix(in srgb, var(--accent-fill) 88%, #000); stroke-width: 13; stroke-linecap: round; fill: none; }
.ak-sleeve-back { stroke: color-mix(in srgb, var(--accent-fill) 70%, #000); }
.ak-skin { fill: var(--ak-skin); }
.ak-ear { fill: var(--ak-skin-2); }
.ak-hair { fill: var(--ak-hair); }
.ak-trail { fill: none; stroke: var(--accent-fill); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; opacity: .75; }
.akb-fake .akb-body, .akb-fake .akb-tail { fill: var(--akb-fake); }
.akb-fake .akb-belly, .akb-fake .akb-wing { fill: var(--akb-fake-2); }
.akb-scan .akb-body, .akb-scan .akb-tail { fill: var(--akb-scan); }
.akb-scan .akb-belly, .akb-scan .akb-wing { fill: var(--akb-scan-2); }
.akb-wing { stroke: rgba(23, 33, 43, .18); stroke-width: 1.5; }
.akb-ant { stroke: var(--akb-ink); stroke-width: 3; stroke-linecap: round; }
.akb-antball { fill: #ffd84d; stroke: var(--akb-ink); stroke-width: 1.5; }
.akb-lens { fill: #fff; stroke: var(--akb-ink); stroke-width: 3; }
.akb-frame { stroke: var(--akb-ink); stroke-width: 3; stroke-linecap: round; }
.akb-pupil { fill: var(--akb-ink); }
.akb-nose { fill: #f4a9a0; stroke: #d9837a; stroke-width: 1.2; }
.akb-stache { fill: #2a2018; }
.akb-beak { fill: #f5a524; }
.akb-crest { fill: var(--akb-crest); }
.akb-mask { fill: var(--akb-ink); }
.akb-eye { fill: #fff; }
.akb-brow { stroke: var(--akb-ink); stroke-width: 3; stroke-linecap: round; }
.akb-bar { stroke: #6b7280; stroke-width: 3.6; stroke-linecap: round; fill: none; }
.ak-feather { opacity: .95; }
.ak-tag { fill: var(--surface); stroke-width: 2.5; }
.ak-tag1 { stroke: var(--akb-fake); }
.ak-tag2 { stroke: var(--akb-scan); }
.ak-tagt { font: 750 19px var(--round); fill: var(--ink); }
.ak-stone { fill: var(--accent-fill); stroke: #fff; stroke-width: 2; }
.ak-mark { fill: #fff; }
.ak-slabel { font: 800 16px var(--round); fill: var(--accent); letter-spacing: .02em; }
.ak-badge { fill: var(--surface); stroke-width: 2.5; }
.ak-badge1 { stroke: var(--akb-fake); }
.ak-badge2 { stroke: var(--akb-scan); }
.ak-ok { fill: var(--good); }
.ak-tick { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ak-btxt { font: 750 20px var(--round); fill: var(--ink); }
.ak-head { font: 800 38px var(--round); letter-spacing: -.02em; fill: var(--ink); }
.ak-head2 { fill: var(--accent); }
.ak-birds-fig .ak-stage { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Until thief-art.js draws the first frame, the end waits (no flash of the last frame). */
  .ak-thief-stage[data-state="wait"] svg > [data-a] { visibility: hidden; }
  .ak-birds-stage[data-state="wait"] .ak-head, .ak-birds-stage[data-state="wait"] [data-a^="badge"],
  .ak-birds-stage[data-state="wait"] .ak-trail { visibility: hidden; }
  .ak-cloud1 { animation: ak-drift 18s ease-in-out infinite alternate; }
  .ak-cloud2 { animation: ak-drift 14s ease-in-out -4s infinite alternate-reverse; }
  .ak-cloud3 { animation: ak-drift 16s ease-in-out -8s infinite alternate; }
}
@keyframes ak-drift { to { transform: translateX(22px); } }
@media (prefers-reduced-motion: reduce) { .ak-replay { transition: none; } }