/*
 * Deck styles on top of the ARDINSYS reveal.js theme (ardinsys.css).
 * Every slide is a class="canvas-slide" section drawn on a fixed 1600x900 canvas that is scaled by 0.8
 * to reveal's 1280x720 stage, so the pixel values below are canvas pixels.
 * The deck chrome (footer, Codumentor badge, background gradient) is at the end of the file.
 */

.reveal .slides section.canvas-slide {
  width: 100%;
  height: 720px;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.reveal .canvas-slide {
  --ink: #eef2f7;
  --muted: #a9b6c6;
  --line: #51607a;
  --brain: #f0a04b;
  --brain-bg: rgba(240, 160, 75, 0.18);
  --hand: #2fc7b0;
  --hand-bg: rgba(47, 199, 176, 0.18);
  --ctx: #7b95ff;
  --ctx-bg: rgba(123, 149, 255, 0.2);
  --panel: rgba(255, 255, 255, 0.07);
  --bg: #132934;
}

.reveal .canvas-slide .canvas {
  width: 1600px;
  height: 900px;
  transform: scale(0.8);
  transform-origin: 0 0;
}

.reveal .canvas-slide .slide-in {
  position: relative;
  width: 1600px;
  height: 900px;
  padding: 40px 90px 0;
  box-sizing: border-box;
  color: var(--ink);
  font-size: 24px;
}

.reveal .canvas-slide .kicker { font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.reveal .canvas-slide h2 { font-size: 76px; line-height: 1.05; margin: 6px 0 12px; color: var(--ink); }
.reveal .canvas-slide .sub { font-size: 28px; color: var(--muted); margin: 0 0 28px; line-height: 1.3; }
.reveal .canvas-slide .sub .sub-em { color: var(--hand); font-weight: 700; }

/* figures */
.reveal .canvas-slide svg.fig { display: block; margin: 0 auto; width: 100%; }
.reveal .canvas-slide svg text { fill: var(--ink); }
.reveal .canvas-slide .t-muted { fill: var(--muted) !important; }
.reveal .canvas-slide .n-brain { fill: var(--brain-bg); stroke: var(--brain); stroke-width: 3; }
.reveal .canvas-slide .n-hand { fill: var(--hand-bg); stroke: var(--hand); stroke-width: 3; }
.reveal .canvas-slide .n-ctx { fill: var(--ctx-bg); stroke: var(--ctx); stroke-width: 3; }
.reveal .canvas-slide .n-doc { fill: var(--panel); stroke: var(--line); stroke-width: 3; }
.reveal .canvas-slide .a-ink { stroke: var(--ink); stroke-width: 4; fill: none; }
.reveal .canvas-slide .a-hand { stroke: var(--hand); stroke-width: 5; fill: none; }
.reveal .canvas-slide .a-brain { stroke: var(--brain); stroke-width: 5; fill: none; }
.reveal .canvas-slide .a-ctx { stroke: var(--ctx); stroke-width: 5; fill: none; }

/* cards */
.reveal .canvas-slide .cards { display: flex; gap: 32px; margin-top: 34px; }
.reveal .canvas-slide .card { flex: 1; background: var(--panel); border-radius: 18px; padding: 26px 30px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.reveal .canvas-slide .card b { display: block; font-size: 30px; margin-bottom: 8px; color: var(--ink); }
.reveal .canvas-slide .card span { font-size: 24px; color: var(--muted); line-height: 1.35; }
.reveal .canvas-slide .msg { margin: 26px auto 0; max-width: 1180px; text-align: center; font-size: 32px; background: var(--panel); border-left: 8px solid var(--ctx); padding: 20px 30px; border-radius: 12px; }
.reveal .canvas-slide .task { display: inline-block; font-size: 28px; background: var(--panel); border: 3px solid var(--ctx); border-radius: 14px; padding: 12px 26px; margin-bottom: 14px; }
.reveal .canvas-slide .big-cards { display: flex; gap: 36px; margin-top: 60px; }
.reveal .canvas-slide .big-cards .card { padding: 40px 36px; min-height: 330px; }
.reveal .canvas-slide .big-cards .num { font-size: 72px; font-weight: 800; line-height: 1; margin-bottom: 22px; }
.reveal .canvas-slide .big-cards b { font-size: 34px; line-height: 1.2; margin-bottom: 16px; }
.reveal .canvas-slide .big-cards span { font-size: 27px; }
.reveal .canvas-slide .wide-card { display: flex; align-items: center; gap: 30px; margin-top: 34px; padding: 26px 34px; }
.reveal .canvas-slide .wide-card .num { flex: none; font-size: 60px; line-height: 1; }
.reveal .canvas-slide .wide-card b { font-size: 34px; line-height: 1.2; margin-bottom: 6px; }
.reveal .canvas-slide .wide-card span { font-size: 27px; }
.reveal .canvas-slide .map-cards .card { border-top: 8px solid var(--line); }
.reveal .canvas-slide .map-cards .hum { font-size: 20px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.reveal .canvas-slide .map-cards .arrow { font-size: 30px; color: var(--muted); margin: 2px 0 6px; }

/* screenshot placeholders + callouts (replace .ph with an <img src="img/...">) */
.reveal .canvas-slide .shot { position: relative; margin: 18px auto 0; height: 590px; border: 3px dashed var(--line); border-radius: 16px; background: rgba(255, 255, 255, .04); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.reveal .canvas-slide .shot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; }
.reveal .canvas-slide .shot .ph { font-size: 26px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.reveal .canvas-slide .callout { position: absolute; z-index: 2; background: #2b3a52; color: #fff; font-size: 22px; font-weight: 600; line-height: 1.25; padding: 10px 18px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); max-width: 520px; }
.reveal .canvas-slide .callout.c-ctx { background: #3b5bdb; }
.reveal .canvas-slide .callout.c-brain { background: #c9711a; }
.reveal .canvas-slide .callout.c-hand { background: #0e8f7e; }

/* title / closing slides */
.reveal .canvas-slide .title { display: flex; flex-direction: column; justify-content: center; height: 100%; padding-bottom: 60px; }
.reveal .canvas-slide .title h1 { font-size: 130px; line-height: 1.05; margin: 14px 0 18px; color: var(--ink); }
.reveal .canvas-slide .title p { font-size: 36px; color: var(--muted); margin: 0 0 60px; }

/* v2: shock slides, role icons, watermark, code, statements */
.reveal .canvas-slide .slide-in { isolation: isolate; }
.reveal .canvas-slide .prog { position: absolute; right: 60px; top: 40px; display: flex; align-items: center; gap: 14px; }
.reveal .canvas-slide .prog .pi { width: 40px; height: 40px; opacity: .25; filter: grayscale(1); }
.reveal .canvas-slide .prog .pi.on { opacity: 1; filter: none; width: 54px; height: 54px; }
.reveal .canvas-slide .wm { position: absolute; right: -110px; bottom: -90px; width: 600px; height: 600px; opacity: .07; z-index: -1; pointer-events: none; }
.reveal .canvas-slide .code { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important; }
.reveal .canvas-slide.stmt h2 { font-size: 84px; margin: 4px 0 14px; }
.reveal .canvas-slide.stmt .sub { font-size: 32px; margin-bottom: 40px; }
.reveal .canvas-slide .q { font-size: 72px; font-weight: 700; line-height: 1.15; margin-top: 150px; max-width: 1300px; }
.reveal .canvas-slide .q-sub { font-size: 42px; font-weight: 600; color: var(--brain); margin-top: 56px; }
.reveal .canvas-slide .center { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding-bottom: 64px; text-align: center; }
.reveal .canvas-slide .center h1 { font-size: 128px; line-height: 1.05; margin: 0 0 56px; font-weight: 800; color: #fff; }
.reveal .canvas-slide .center h1 .star { color: var(--brain); }
.reveal .canvas-slide .fineprint { position: absolute; left: 60px; right: 60px; bottom: 36px; text-align: center; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 22px; letter-spacing: .5px; color: rgba(238, 242, 247, .38); }
.reveal .canvas-slide .sig { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 60px; color: var(--brain); border: 3px solid rgba(240, 160, 75, .55); border-radius: 20px; padding: 18px 44px; background: rgba(240, 160, 75, .08); }
.reveal .canvas-slide .sig.sig-side { position: absolute; right: 90px; top: 100px; font-size: 34px; padding: 12px 26px; border-radius: 14px; }
.reveal .canvas-slide .title h1 { font-size: 96px; }

/* memory map slide: human memory subsystems -> Codumentor memories (+ the shared fifth) */
.reveal .canvas-slide .mem-fig .mm-neural path { fill: none; stroke: var(--muted); stroke-width: 2; opacity: .22; }
.reveal .canvas-slide .mem-fig .mm-panel { fill: rgba(255, 255, 255, .045); stroke: var(--line); stroke-width: 2; }
.reveal .canvas-slide .mem-fig .mm-node use { color: var(--c); }
.reveal .canvas-slide .mem-fig .mm-core { fill: #10222d; stroke: var(--c); stroke-width: 3; }
.reveal .canvas-slide .mem-fig .mm-halo { fill: var(--c); opacity: .15; transform-box: fill-box; transform-origin: center; animation: mm-pulse 3.6s ease-in-out infinite; animation-delay: var(--p, 0s); }
.reveal .canvas-slide .mem-fig .mm-hl { font-size: 19px; text-anchor: middle; fill: var(--muted); letter-spacing: .03em; }
.reveal .canvas-slide .mem-fig .mm-t { font-size: 27px; font-weight: 700; fill: var(--c); }
.reveal .canvas-slide .mem-fig .mm-s { font-size: 19px; fill: var(--muted); }
.reveal .canvas-slide .mem-fig .mm-crowd use { fill: #1b3a49; stroke: #7a8aa0; stroke-width: 14; }
.reveal .canvas-slide .mem-fig .mm-spark circle { fill: #ffd166; transform-box: fill-box; transform-origin: center; animation: mm-twinkle 1.8s ease-in-out infinite; }
.reveal .canvas-slide .mem-fig .mm-spark circle:nth-child(2n) { animation-delay: -.9s; }

/* links draw themselves when the slide comes up, then dots flow along them */
.reveal .canvas-slide .mem-fig .mm-link,
.reveal .canvas-slide .mem-fig .mm-gold { stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal .canvas-slide .mem-fig .mm-link { stroke: var(--c); opacity: .6; }
.reveal .canvas-slide .mem-fig .mm-gold { stroke: #ffd166; opacity: .75; }
.reveal .canvas-slide .mem-fig .mm-flow { stroke: var(--c); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 .08; opacity: 0; }
.reveal .slides section.present .mem-fig .mm-link { animation: mm-draw 1s ease-out var(--d) forwards; }
.reveal .slides section.present .mem-fig .mm-flow { animation: mm-show .6s ease-out calc(var(--d) + .9s) forwards, mm-flow 2.6s linear infinite; }
.reveal .canvas-slide .mem-fig .fragment.visible .mm-gold { animation: mm-draw .9s ease-out var(--d) forwards; }

/* annotated screenshots (transparency, live): .sx is the image box in canvas px; --W/--H = the image's own pixel size,
   and every .hl / .callout inside is positioned in those image pixels (--x, --y, --w, --h), so they track the scaling.
   Each .ann is one fragment: the ring pops in, the current one glows stronger and pings (the rest of the image stays visible for context), then the label slides in. */
.reveal .canvas-slide .sx { position: absolute; }
.reveal .canvas-slide .sx > img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; box-sizing: border-box; border: 2px solid var(--line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.reveal .canvas-slide .sx .ann { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.reveal .canvas-slide .sx .ann.current-fragment { z-index: 5; }
.reveal .canvas-slide .sx .hl {
  position: absolute; box-sizing: border-box;
  left: calc(var(--x) / var(--W) * 100%); top: calc(var(--y) / var(--H) * 100%);
  width: calc(var(--w) / var(--W) * 100%); height: calc(var(--h) / var(--H) * 100%);
  border: 4px solid var(--c); border-radius: 10px;
  box-shadow: 0 0 18px var(--c);
  opacity: 0; transform: scale(1.15);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.5, .4, 1), box-shadow .5s ease;
}
.reveal .canvas-slide .sx .ann.visible .hl { opacity: 1; transform: none; }
.reveal .canvas-slide .sx .ann.current-fragment .hl { box-shadow: 0 0 28px var(--c), 0 0 8px var(--c); }
.reveal .canvas-slide .sx .hl::after { content: ""; position: absolute; inset: -4px; border: 4px solid var(--c); border-radius: 12px; opacity: 0; }
.reveal .canvas-slide .sx .ann.current-fragment .hl::after { animation: hl-ping 1.8s ease-out .45s infinite; }
.reveal .canvas-slide .sx .callout {
  left: calc(var(--x) / var(--W) * 100%); top: calc(var(--y) / var(--H) * 100%);
  width: max-content; max-width: var(--mw, 480px); font-size: 26px; padding: 12px 20px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s ease .25s, transform .45s ease .25s;
}
.reveal .canvas-slide .sx .ann.visible .callout { opacity: 1; transform: none; }
/* Front: underline the actual divider, not the conversations above it. */
.reveal .canvas-slide .sx .front-guide {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  max-width: none; max-height: none;
  fill: var(--c); stroke: var(--c);
}
/* .brief: the label only shows while its own step is current (the ring stays), for labels that would cover a later one */
.reveal .canvas-slide .sx .ann.brief.visible:not(.current-fragment) .callout { opacity: 0; transform: translateY(-14px); transition-delay: 0s; }

/* Prompt close-up: text stays readable before its underline fragment is revealed. */
.reveal .canvas-slide .prompt-text {
  margin-top: 28px;
  padding: 24px 30px;
  background: #222;
  border-left: 3px solid var(--brain);
  border-radius: 0 12px 12px 0;
  font-size: 32px;
  line-height: 1.4;
}
.reveal .canvas-slide .prompt-text p { margin: 0 0 10px; }
.reveal .canvas-slide .prompt-text p:last-child { margin-bottom: 0; }
.reveal .slides .prompt-text .fragment.prompt-step {
  opacity: 1;
  visibility: inherit;
}
.reveal .canvas-slide .prompt-mark {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: auto;
}
.reveal .canvas-slide .prompt-step.visible .prompt-mark {
  text-decoration-color: var(--brain);
}

/* projector mode (C key / ?projector=1): lift the dark screenshots so they do not wash out on a projector */
.reveal .canvas-slide .sx > img { transition: filter .3s ease; }
html.projector .reveal .canvas-slide .sx > img { filter: brightness(1.18) contrast(1.22) saturate(1.1); }
.projector-toast {
  position: fixed; left: 50%; bottom: 80px; z-index: 200; transform: translate(-50%, 12px);
  padding: 10px 22px; border-radius: 999px; background: rgba(10, 20, 30, .85); color: #fff;
  font: 600 18px/1.2 var(--r-main-font, sans-serif); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.projector-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* cover and closing slides */
.reveal .canvas-slide .cover-logo { display: block; width: 140px; height: 140px; max-width: none; max-height: none; margin: 0 0 28px; }
.reveal .canvas-slide .title.cover h1 { font-size: 120px; }
.reveal .canvas-slide .title.cover p { margin-bottom: 0; }
.reveal .canvas-slide .closing-logo { display: block; width: 150px; height: 150px; max-width: none; max-height: none; margin: 0 0 30px; }
.reveal .canvas-slide .center.closing h1 { font-size: 110px; margin: 0 0 36px; }
.reveal .canvas-slide .closing .who { font-size: 40px; font-weight: 700; }
.reveal .canvas-slide .closing .role { font-size: 26px; color: var(--muted); margin-top: 10px; }
/* closing slide: two QR codes side by side; the logo and title shrink to make room */
.reveal .canvas-slide .center.closing:has(.qr-row) .closing-logo { width: 110px; height: 110px; margin-bottom: 20px; }
.reveal .canvas-slide .center.closing:has(.qr-row) h1 { font-size: 96px; margin-bottom: 26px; }
.reveal .canvas-slide .closing .qr-row { display: flex; gap: 260px; margin-top: 40px; }
.reveal .canvas-slide .closing .qr { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.reveal .canvas-slide .closing .qr-tile { display: block; background: #fff; padding: 16px; border-radius: 16px; line-height: 0; }
.reveal .canvas-slide .closing .qr-tile img { display: block; width: 210px; height: 210px; max-width: none; max-height: none; margin: 0; }
.reveal .canvas-slide .closing .qr-label { font-size: 26px; font-weight: 600; color: var(--muted); }

/* full-height illustration under the heading ("Mi az ágens?") */
.reveal .canvas-slide .hero-img { display: block; height: 640px; width: auto; max-width: none; max-height: none; margin: 16px auto 0; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }

/* Naive abstraction: keep the image geometry and reveal a boundary across all arms. */
.reveal .canvas-slide .naive-figure { aspect-ratio: 1448 / 1086; }
.reveal .canvas-slide .naive-boundary-halo { fill: none; stroke: #fff; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.reveal .canvas-slide .naive-boundary { fill: none; stroke: #1565c0; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.reveal .canvas-slide .naive-boundary-flow { fill: none; stroke: #b9e4ff; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0 .08; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .reveal .slides section.present .naive-figure .fragment.visible > path:not(.naive-boundary-flow) {
    stroke-dasharray: 1;
    animation: naive-draw 1.467s ease-in-out both;
  }
  .reveal .slides section.present .naive-figure .fragment.visible .naive-boundary-flow {
    animation: mm-show .6s ease-out 1.467s forwards, mm-flow 2.6s linear infinite;
  }
}
@keyframes naive-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Underpants plan: one reveal fragment replaces the collected material. */
.reveal .canvas-slide.ai-projects h2 { font-size: 66px; }
.reveal .canvas-slide .ai-projects-ref-mark { font-size: .45em; vertical-align: super; }
.reveal .canvas-slide .ai-projects-reference { position: absolute; right: 55px; top: 650px; width: 240px; margin: 0; font-size: 20px; line-height: 1.4; color: var(--muted); }
.reveal .canvas-slide .ai-projects-reference a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.reveal .canvas-slide .ai-projects-reference cite { font-style: italic; }
.reveal .canvas-slide .ai-projects-meme { height: 640px; width: auto; margin: 20px auto 0; }
.reveal .canvas-slide .meme-strike { fill: none; stroke: #1565c0; stroke-width: 4; stroke-linecap: round; }
.reveal .canvas-slide .meme-replacement { fill: #1565c0; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 24px; font-weight: 700; }

/* 60/25/15 donut chart: grey base, the colored arcs come in one per fragment */
.reveal .canvas-slide .donut-layout { display: flex; align-items: center; justify-content: center; gap: 110px; margin-top: 40px; }
.reveal .canvas-slide .donut { position: relative; flex: none; width: 500px; height: 500px; border-radius: 50%; background: #4a4f5c; }
.reveal .canvas-slide .donut-seg { position: absolute; inset: 0; border-radius: 50%; filter: drop-shadow(0 0 20px rgba(232, 168, 56, .25)) drop-shadow(0 0 10px rgba(74, 158, 221, .15)); }
.reveal .canvas-slide .donut-seg-1 { background: conic-gradient(#e8a838 0% 60%, transparent 60% 100%); }
.reveal .canvas-slide .donut-seg-2 { background: conic-gradient(transparent 0% 60%, #e5190b 60% 85%, transparent 85% 100%); }
.reveal .canvas-slide .donut-seg-3 { background: conic-gradient(transparent 0% 85%, #12ac3b 85% 100%); }
.reveal .canvas-slide .donut-hole { position: absolute; inset: 105px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #10222d; box-shadow: inset 0 2px 12px rgba(0, 0, 0, .5); text-align: center; font-size: 24px; line-height: 1.3; color: var(--muted); }
.reveal .canvas-slide .donut-legend { display: flex; flex-direction: column; gap: 34px; }
.reveal .canvas-slide .legend-item { display: flex; align-items: center; gap: 24px; }
.reveal .canvas-slide .legend-item .swatch { flex: none; width: 22px; height: 84px; border-radius: 5px; background: var(--c); }
.reveal .canvas-slide .legend-item .pct { font-size: 76px; font-weight: 800; line-height: 1; color: #fff; }
.reveal .canvas-slide .legend-item .desc { font-size: 32px; line-height: 1.3; color: var(--ink); margin-top: 4px; }
.reveal .canvas-slide .legend-item .desc small { display: block; font-size: 22px; line-height: 1.3; color: var(--muted); }
/* quiet "illustrative" label: small, italic, dimmed, so it does not compete with the numbers */
.reveal .canvas-slide .chart-note { font-size: 18px; font-style: italic; letter-spacing: .03em; color: rgba(169, 182, 198, .6); margin-top: -10px; }

/* pyramid of cards: first child at the bottom, each level above narrower */
.reveal .canvas-slide .pyramid { display: flex; flex-direction: column-reverse; align-items: center; gap: 22px; max-width: 1260px; margin: 30px auto 0; }
.reveal .canvas-slide .pyramid .tier { box-sizing: border-box; padding: 16px 34px 20px; border-top: 6px solid var(--c); border-radius: 18px; background: var(--tb); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); text-align: center; }
.reveal .canvas-slide .pyramid .tier:nth-child(1) { width: 100%; }
.reveal .canvas-slide .pyramid .tier:nth-child(2) { width: 80%; }
.reveal .canvas-slide .pyramid .tier:nth-child(3) { width: max-content; min-width: 56%; max-width: 66%; }
.reveal .canvas-slide .pyramid .tier:nth-child(3) li { white-space: nowrap; }
.reveal .canvas-slide .pyramid .tier b { display: block; font-size: 36px; margin-bottom: 8px; color: var(--ink); }
.reveal .canvas-slide .pyramid ul { display: inline-grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 2), auto); column-gap: 50px; row-gap: 4px; margin: 0; padding: 0; list-style: none; text-align: left; font-size: 26px; line-height: 1.35; color: var(--ink); }
.reveal .canvas-slide .pyramid li { margin: 0; list-style: none; }

/* check list (closing thoughts) */
.reveal .canvas-slide ul.checks { display: flex; flex-direction: column; gap: 18px; margin: 50px 0 0; padding: 0; list-style: none; font-size: 36px; line-height: 1.3; color: var(--ink); }
.reveal .canvas-slide ul.checks li { position: relative; padding-left: 60px; list-style: none; }
.reveal .canvas-slide ul.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--hand); font-weight: 800; }

.reveal .canvas-slide ul.checks ul.feature-details { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0 24px; padding: 0; font-size: 26px; line-height: 1.3; }
.reveal .canvas-slide ul.checks ul.feature-details li { padding-left: 32px; }
.reveal .canvas-slide ul.checks ul.feature-details li::before { content: "•"; }

/* ---------- deck chrome (outside the slides) ---------- */
.reveal .hero-gradient {
  position: absolute; top: -171px; z-index: 1; flex-shrink: 0;
  width: min(100%, 1920px); height: 610px;
  background: linear-gradient(170deg, rgba(66, 139, 202, .3) 15.44%, transparent 55.77%);
}
.global-footer {
  position: fixed; bottom: 20px; left: 20px; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--r-main-font); font-size: 24px; color: rgba(255, 255, 255, .6);
}
.global-footer .ardinsys-footer-logo { height: 34px; opacity: .8; }
.global-footer .portfolio-footer-logo { height: 34px; opacity: .8; margin-left: 26px; }
.made-with {
  position: fixed; bottom: 26px; right: 150px; z-index: 100; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--r-main-font); font-size: 18px; line-height: 1; letter-spacing: .02em; color: rgba(255, 255, 255, .5);
}
.made-with img { display: block; flex: none; width: 24px; height: 24px; margin: 0; opacity: .75; }
/* Codumentor badge, shown on slides marked with data-state="cdm-slide" */
.cdm-badge {
  position: fixed; top: 18px; right: 24px; z-index: 100; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 8px;
  border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--r-main-font); font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: .02em; color: #fff;
  opacity: 0; transform: translateY(-10px); transition: opacity .4s ease, transform .4s ease;
}
.cdm-badge img { display: block; flex: none; width: 40px; height: 40px; margin: 0; }
.cdm-badge span { display: block; line-height: 1; }
.reveal-viewport.cdm-slide .cdm-badge { opacity: 1; transform: none; }

@keyframes hl-ping { 0% { inset: -4px; opacity: .9; } 100% { inset: -24px; opacity: 0; } }
@keyframes mm-draw { to { stroke-dashoffset: 0; } }
@keyframes mm-show { to { opacity: .9; } }
@keyframes mm-flow { from { stroke-dashoffset: .08; } to { stroke-dashoffset: 0; } }
@keyframes mm-pulse { 0%, 100% { transform: scale(1); opacity: .13; } 50% { transform: scale(1.22); opacity: .3; } }
@keyframes mm-twinkle { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.35); opacity: 1; } }

/* ---------- playful touches ----------
 * Looping animations run only on the present slide (section.present) and are switched off for prefers-reduced-motion.
 */

/* cover: gradient title + a baby robot dragon on its gold hoard ("Így neveld a sárkányodat"); the closing slide reuses it */
.reveal .canvas-slide .grad-text {
  background: linear-gradient(90deg, var(--brain), #ffd166 40%, var(--hand) 70%, var(--brain));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.reveal .slides section.present .grad-text { animation: grad-shift 9s ease-in-out infinite alternate; }
.reveal .canvas-slide .cover-dragon { position: absolute; right: 110px; top: 210px; width: 380px; height: 446px; overflow: visible; }
.reveal .canvas-slide .closing .bye-dragon { flex: none; width: 200px; height: 235px; align-self: center; overflow: visible; }
.reveal .canvas-slide .closing .qr-row:has(.bye-dragon) { gap: 30px; }
.reveal svg .dg-led-cyan { filter: drop-shadow(0 0 5px #5fffe0); }
.reveal svg .dg-led-gold { filter: drop-shadow(0 0 5px #ffd166); }
.reveal svg .dg-eyes circle { transform-box: fill-box; transform-origin: center; }
.reveal svg .dg-puffs circle { fill: rgba(225, 235, 245, .55); opacity: 0; transform-box: fill-box; transform-origin: center; }
.reveal svg .dg-glint { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.reveal svg .dg-breathe { transform-box: view-box; transform-origin: 200px 400px; }
.reveal svg .dg-head { transform-box: view-box; transform-origin: 200px 250px; }
.reveal svg .dg-wing-l { transform-box: view-box; transform-origin: 170px 270px; }
.reveal svg .dg-wing-r { transform-box: view-box; transform-origin: 230px 270px; }
.reveal svg .dg-tail { transform-box: view-box; transform-origin: 240px 372px; }
.reveal .slides section.present .dg-breathe { animation: dg-breathe 3s ease-in-out infinite alternate; }
.reveal .slides section.present .dg-head { animation: dg-tilt 4s ease-in-out infinite alternate; }
.reveal .slides section.present .dg-wing-l { animation: dg-flap-l .55s ease-in-out infinite alternate; }
.reveal .slides section.present .dg-wing-r { animation: dg-flap-r .55s ease-in-out infinite alternate; }
.reveal .slides section.present .dg-tail { animation: dg-tail 1.6s ease-in-out infinite alternate; }
.reveal .slides section.present .dg-eyes circle { animation: dg-blink 4.5s ease-in-out infinite; }
.reveal .slides section.present .dg-bulb { animation: dg-bulb 1.4s ease-in-out infinite alternate; }
.reveal .slides section.present .dg-puffs circle { animation: dg-puff 3.6s ease-out infinite; }
.reveal .slides section.present .dg-puffs circle:nth-child(2) { animation-delay: 1.2s; }
.reveal .slides section.present .dg-puffs circle:nth-child(3) { animation-delay: 2.4s; }
.reveal .slides section.present .dg-glint { animation: dg-glint 2.6s ease-in-out infinite; }
.reveal .slides section.present .dg-glint + .dg-glint { animation-delay: 1.3s; }

/* shock slides: a soft glow behind the statement */
.reveal .canvas-slide.shock .slide-in::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 42%, rgba(240, 160, 75, .12), transparent 58%); }

/* "Az LLM egy függvény*": the die always lands on 42 */
.reveal .canvas-slide .det-row { display: flex; align-items: center; gap: 22px; }
.reveal .canvas-slide .det-die { flex: none; width: 60px; height: 60px; overflow: visible; }
.reveal .canvas-slide .det-die rect { fill: #f4f1ea; }
.reveal .canvas-slide .det-die text { fill: #0b1a22; font-size: 26px; font-weight: 800; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.reveal .slides section.present .det-die { animation: die-roll 1.2s linear both; }

/* "Függvény?": a bead runs along the parabola */
.reveal .canvas-slide .fx-bead { fill: #fff; stroke: var(--ctx); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(123, 149, 255, .9)); }

/* "Szöveg be, szöveg ki": the forgetful goldfish */
.reveal .canvas-slide .goldfish .gf-body { fill: #ffa94d; }
.reveal .canvas-slide .goldfish .gf-tail { fill: #ff922b; transform-box: fill-box; transform-origin: 100% 50%; }
.reveal .canvas-slide .goldfish .gf-fin { fill: #ff922b; }
.reveal .canvas-slide .goldfish .gf-bubbles circle { fill: none; stroke: #8fd3ff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.reveal .canvas-slide .goldfish .gf-q { fill: var(--brain); font-size: 28px; font-weight: 800; }
.reveal .slides section.present .goldfish .gf-bob { animation: fish-bob 1.8s ease-in-out infinite alternate; }
.reveal .slides section.present .goldfish .gf-tail { animation: fish-tail .35s ease-in-out infinite alternate; }
.reveal .slides section.present .goldfish .gf-bubbles circle { animation: fish-bubble 2.4s ease-out infinite; }
.reveal .slides section.present .goldfish .gf-bubbles circle:nth-child(2) { animation-delay: .5s; }
.reveal .slides section.present .goldfish .gf-bubbles circle:nth-child(3) { animation-delay: 1s; }
.reveal .slides section.present .goldfish .gf-q { animation: fish-q 3s ease-in-out infinite; }

/* "Akkor hogyan beszélget velünk?": chat bubbles drift up on the sides */
.reveal .canvas-slide .chat-float { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.reveal .canvas-slide .chat-float span { position: absolute; top: 920px; left: var(--x); width: var(--w); height: 46px; border-radius: 23px 23px 23px 6px; background: var(--c); opacity: 0; display: flex; align-items: center; justify-content: center; gap: 9px; }
.reveal .canvas-slide .chat-float span.me { border-radius: 23px 23px 6px 23px; }
.reveal .canvas-slide .chat-float i { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.reveal .slides section.present .chat-float span { animation: chat-rise var(--t) linear var(--d) infinite; }
.reveal .slides section.present .chat-float i { animation: typing 1.2s ease-in-out infinite; }
.reveal .slides section.present .chat-float i:nth-child(2) { animation-delay: .2s; }
.reveal .slides section.present .chat-float i:nth-child(3) { animation-delay: .4s; }

/* context window slide: the dotted "resend" arrows flow */
.reveal .slides section.present .a-flowing { animation: dash-flow .8s linear infinite; }

/* example slide: token meter */
.reveal .canvas-slide .tok-box { fill: rgba(240, 160, 75, .08); stroke: rgba(240, 160, 75, .45); stroke-width: 2; stroke-dasharray: 6 6; }
.reveal .canvas-slide .tok-coin ellipse { fill: #c99a2e; }
.reveal .canvas-slide .tok-coin ellipse + ellipse { fill: #ffd166; stroke: #c99a2e; stroke-width: 1.5; }
.reveal .canvas-slide .tok-coin { opacity: 0; transform: translateY(-46px); transition: opacity .2s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.reveal .canvas-slide .tok-coin.on { opacity: 1; transform: none; }

/* knowledge-base donut: a spider on the outdated 60%, a sparkle on the current 15% */
.reveal .canvas-slide .legend-item { position: relative; }
.reveal .canvas-slide .spider { position: absolute; left: 330px; top: -130px; width: 60px; height: 170px; transform-origin: 50% 0; }
.reveal .slides section.present .spider { animation: spider-swing 2.8s ease-in-out infinite alternate; }
.reveal .canvas-slide .sparkle { display: inline-block; font-size: .8em; }
.reveal .slides section.present .sparkle { animation: sparkle 2s ease-in-out infinite; }

/* security slide: the hand reaches, the sandbox wall says no */
.reveal .canvas-slide .reach-fig { position: absolute; right: 90px; top: 96px; width: 400px; height: 130px; overflow: visible; }
.reveal .canvas-slide.sec-sandbox .reach-fig { position: static; display: block; width: 1000px; height: 325px; margin: 50px auto 30px; }
.reach-fig .sb-box { fill: var(--hand-bg); stroke: var(--hand); stroke-width: 3; stroke-dasharray: 10 7; }
.reach-fig .sb-label { fill: var(--muted); font-size: 17px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.reach-fig .sb-page { fill: #1f3045; stroke: var(--doc); stroke-width: 1.5; stroke-linejoin: round; }
.reach-fig .sb-fold { fill: none; stroke: var(--doc); stroke-width: 1.2; stroke-linejoin: round; }
.reach-fig .sb-writing { fill: none; stroke: var(--doc); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.reach-fig .sb-flash { stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0; }
.reach-fig .sb-boing { fill: #ffd166; opacity: 0; transform-box: fill-box; transform-origin: center; }
.reveal .slides section.present .reach-fig .sb-reach { animation: sb-reach 3.4s ease-in-out infinite; }
.reveal .slides section.present .reach-fig .sb-flash { animation: sb-flash 3.4s ease-out infinite; }
.reveal .slides section.present .reach-fig .sb-boing { animation: sb-boing 3.4s ease-out infinite; }

/* LLM in the house: air-gapped mint in a Faraday cage, a DGX Spark on the desk, the cover dragon (cloned by script) on its hoard;
   everything is visible at once and animates from the moment the slide opens; outside signals bounce off the cage.
   Waves take 3s with three staggered by 1s, so one hits the wall every whole second, in step with the 1s flash. */
.reveal .canvas-slide .ag-fig { display: block; width: 1420px; height: 600px; margin: 0 auto; overflow: visible; }
.ag-fig .ag-chair { fill: #1f3646; }
.ag-fig .ag-glow { fill: #5fffe0; opacity: .14; }
.ag-fig .ag-dot { fill: #51607a; }
.ag-fig .ag-data { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 12; }
.ag-fig .ag-brain { transform-box: fill-box; transform-origin: center; }
.ag-fig .ag-cage-frame { fill: none; stroke: #d08a4e; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* entry sequence on slide change: cage frame draws itself, then the signals start bouncing, then the AIR GAP sign + unplugged cable */
.reveal .slides section.present .ag-fig .ag-cage-frame { animation: ag-draw 1.4s .4s ease-out both; }
.reveal .slides section.present .ag-fig .ag-mesh-fill { animation: ag-fade-in 1.4s .4s ease-out both; }
.reveal .slides section.present .ag-fig .ag-signals { animation: ag-fade-in .4s 1.8s ease-out both; }
.reveal .slides section.present .ag-fig .ag-late { animation: ag-drop .6s 2.1s ease-out both; }
.ag-fig .ag-dragon { overflow: visible; }
.ag-fig .ag-wave { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.ag-fig .ag-flash { stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0; }
.ag-fig .ag-boing { fill: #ffd166; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ag-fig .ag-sign { transform-box: fill-box; transform-origin: 50% 0; }
.reveal .slides section.present .ag-fig .ag-wave.from-l { animation: ag-wave-l 3s linear infinite; }
.reveal .slides section.present .ag-fig .ag-wave.from-r { animation: ag-wave-r 3s linear infinite; }
.reveal .slides section.present .ag-fig .ag-flash { animation: ag-hit-flash 1s ease-out infinite; }
.reveal .slides section.present .ag-fig .ag-boing { animation: ag-hit-boing 1s ease-out infinite; }
.reveal .slides section.present .ag-fig .ag-data { animation: ag-flow .9s linear infinite; }
.reveal .slides section.present .ag-fig .ag-glow { animation: ag-flicker 2.6s ease-in-out infinite alternate; }
.reveal .slides section.present .ag-fig .ag-led { animation: ag-blink 1.8s ease-in-out infinite; }
.reveal .slides section.present .ag-fig .ag-brain { animation: ag-pulse 1.6s ease-in-out infinite alternate; }
.reveal .slides section.present .ag-fig .ag-head { animation: ag-bob 1.8s ease-in-out infinite alternate; }
.reveal .slides section.present .ag-fig .ag-head-2 { animation-delay: -.9s; }
.reveal .slides section.present .ag-fig .ag-bubble { animation: ag-bubble 5s ease-in-out infinite; }
.reveal .slides section.present .ag-fig .ag-bubble-2 { animation-delay: -2.5s; }
.reveal .slides section.present .ag-fig .ag-dot { animation: typing 1.2s ease-in-out infinite; }
.reveal .slides section.present .ag-fig .ag-sign { animation: ag-swing 2.4s ease-in-out infinite alternate; }


@keyframes grad-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes dg-breathe { from { transform: scale(1); } to { transform: scale(1.03, 1.035); } }
@keyframes dg-tilt { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes dg-flap-l { from { transform: rotate(10deg); } to { transform: rotate(-14deg); } }
@keyframes dg-flap-r { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes dg-tail { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes dg-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes dg-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(70px, -110px) scale(2.2); } }
@keyframes dg-bulb { from { opacity: .55; } to { opacity: 1; } }
@keyframes dg-glint { 0%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 75% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
@keyframes typing { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
/* Equal horizontal/rotation steps prevent mid-flight easing stalls. */
@keyframes die-roll {
  0% { transform: translate(-240px, -70px) rotate(-720deg); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(-180px, -100px) rotate(-540deg); }
  50% { transform: translate(-120px, -98px) rotate(-360deg); }
  75% { transform: translate(-60px, -65px) rotate(-180deg); }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
@keyframes fish-bob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes fish-tail { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes fish-bubble { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px) scale(1.1); } }
@keyframes fish-q { 0%, 45%, 100% { opacity: 0; } 55%, 85% { opacity: 1; } }
@keyframes chat-rise { 0% { transform: translateY(0); opacity: 0; } 10%, 85% { opacity: .22; } 100% { transform: translateY(-1060px); opacity: 0; } }
@keyframes dash-flow { to { stroke-dashoffset: -12; } }
@keyframes spider-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .8; } 50% { transform: scale(1.3) rotate(15deg); opacity: 1; } }
@keyframes sb-reach { 0%, 8% { transform: translateX(0); } 40% { transform: translateX(80px); } 47% { transform: translateX(62px); } 53% { transform: translateX(74px); } 75%, 100% { transform: translateX(0); } }
@keyframes sb-flash { 0%, 38% { opacity: 0; } 41% { opacity: .9; } 60%, 100% { opacity: 0; } }
@keyframes ag-wave-l { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateX(112px); opacity: .9; } }
@keyframes ag-wave-r { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateX(-78px); opacity: .9; } }
@keyframes ag-hit-flash { 0% { opacity: .9; } 35%, 100% { opacity: 0; } }
@keyframes ag-hit-boing { 0% { opacity: 1; transform: scale(1.2) rotate(15deg); } 45%, 100% { opacity: 0; transform: scale(.7) rotate(40deg); } }
@keyframes ag-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ag-fade-in { from { opacity: 0; } }
@keyframes ag-drop { from { opacity: 0; transform: translateY(-24px); } }
@keyframes ag-flow { to { stroke-dashoffset: -17; } }
@keyframes ag-flicker { from { opacity: .08; } to { opacity: .22; } }
@keyframes ag-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ag-pulse { from { transform: scale(.94); } to { transform: scale(1.06); } }
@keyframes ag-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes ag-bubble { 0%, 100% { opacity: 0; } 10%, 45% { opacity: 1; } 55% { opacity: 0; } }
@keyframes ag-swing { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes sb-boing { 0%, 38% { opacity: 0; transform: scale(.3) rotate(0deg); } 43% { opacity: 1; transform: scale(1.25) rotate(20deg); } 58%, 100% { opacity: 0; transform: scale(.9) rotate(40deg); } }

@media (prefers-reduced-motion: reduce) {
  .reveal .slides section.present [class^="dg-"], .reveal .slides section.present [class^="dg-"] *, .reveal .slides section.present .grad-text,
  .reveal .slides section.present .det-die, .reveal .slides section.present .goldfish *,
  .reveal .slides section.present .chat-float *, .reveal .slides section.present .a-flowing,
  .reveal .slides section.present .spider, .reveal .slides section.present .sparkle,
  .reveal .slides section.present .reach-fig *, .reveal .slides section.present .ag-fig * { animation: none !important; }
  .reveal .canvas-slide .chat-float { display: none; }
}