/* CurtainCall, assets/comic.css
   The comic "Book a demo" button, on every page that shows it: the homepage and the seven other pages (the four
   case-study pages and the three legal pages). Moved out of assets/home.css verbatim on 2026-10-11, so the seven
   pages carry the same button as the homepage instead of the old gradient pill; the one addition is the
   reduced-motion block at the end, which the button used to borrow from home.css's page-wide rule and which a page
   without home.css would otherwise not have.
   Needs assets/tokens.css first (the --comic-* colours and --font-comic) and assets/comic.js (the random jolt per
   button and the random burst position per press; it does not need home.js). The cursors and the CLICK! burst are
   images in assets/comic/.
   Load order: link this file BEFORE the page's own stylesheet (home.css or pages.css). home.css hides the nav's button
   at 900px and under with `.nav-demo { display: none }`, which has the same specificity as `.btn-comic { display: ... }`
   below, so whichever file loads later wins; pages.css does the same under 560px. */

/* Dekko, the comic lettering, used by this button only. font-weight is literal on purpose: @font-face descriptors
   cannot take var() (round 6 tried it and the browser dropped the descriptor). */
@font-face { font-family: "Dekko"; src: url(/assets/fonts/dekko-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Comic button: every outlined "Book a demo" (2026-10-06, Eric's request). Eduard Constantin's
   Comic-book-button-anim (CC0, assets/comic/LICENSE-CC0.txt), ported from React and Framer Motion to CSS plus a few
   lines in assets/comic.js. Eric's picks: the site's cyan in place of the comic yellow, the repo's Dekko lettering,
   and "Let's talk!" as the hover label. A cyan face over light-cyan halftone stripes, inked in the page's darkest
   colour; on hover the label swaps and the button shakes with a purple and blue misprint split; pressed, it shrinks
   and a CLICK! burst pops above it at a random spot, under the repo's pointing-hand cursors. Not glass: it paints its
   own face, so assets/glass.js leaves it alone. The two labels share one grid cell, so the swap never changes the
   button's width. Reduced motion and capture switch the shake off with every other animation. ---------- */
.btn-comic { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 22px 2px; font-family: var(--font-comic); font-size: var(--text-lg); line-height: var(--leading-none); letter-spacing: var(--tracking-slight); text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--comic-ink); background: var(--comic-face); border: 3px solid var(--comic-ink); cursor: url(/assets/comic/pointer.png) 6 2, pointer; transition: transform .1s cubic-bezier(.455, .03, .515, .955); }
.btn-comic::after { content: ""; position: absolute; inset: 0; z-index: -3; background-color: var(--comic-face-light); background-image: repeating-linear-gradient(-45deg, var(--comic-stripe) 0 3px, transparent 3px 9px); }
.btn-comic::before { content: ""; position: absolute; inset: 0; z-index: -2; box-shadow: inset 0 0 50px var(--comic-face); }
.btn-lg.btn-comic { min-height: 48px; padding: 6px 30px 3px; font-size: var(--text-xl); }
/* On a touch screen the 40 px default is under the 44 px floor for a target (final verify, 2026-10-11: the nav's button
   on an iPad at 1024, and the credits' at any touch width). The large size is 48 already. A mouse keeps 40. */
@media (pointer: coarse) { .btn-comic { min-height: var(--tap-min); } }
.btn-comic-label { display: grid; }
.btn-comic-label > span { grid-area: 1 / 1; text-align: center; }
.bc-hover { visibility: hidden; }
/* The burst grows from .6 as it fades in, not from nothing (review B7.3, 2026-10-12; the original component popped it
   from scale 0). */
.btn-comic-burst { position: absolute; left: 0; right: 0; top: -80px; height: 64px; background: url(/assets/comic/click.png) center / contain no-repeat; opacity: 0; transform: translateX(var(--bc-x, 0px)) scale(.6); transition: opacity .1s, transform .1s; pointer-events: none; }
.nav .btn-comic-burst { top: auto; bottom: -76px; }
.btn-comic:active { transform: scale(.9); cursor: url(/assets/comic/clicked.png) 8 4, pointer; }
.btn-comic:active .btn-comic-burst { opacity: 1; transform: translateX(var(--bc-x, 0px)) scale(1.2); transition-duration: .07s; }
@media (hover: hover) and (pointer: fine) {
  .btn-comic:hover .bc-rest { visibility: hidden; }
  .btn-comic:hover .bc-hover { visibility: visible; }
  .btn-comic:hover { animation: comic-shake .2s cubic-bezier(.455, .03, .515, .955), comic-split .2s cubic-bezier(.455, .03, .515, .955); }
}
/* The component's two keyframe lists, per property: --bc-shake is the jolt, a random 6 to 11 px per button. The jolt
   moves the separate translate property, so it adds to the press's transform: scale(.9) instead of replacing it; until
   2026-10-12 a press in the shake's first .2 s showed no press at all (review B7.3). */
@keyframes comic-shake {
  0% { translate: 0; }
  14% { translate: calc(-1 * var(--bc-shake, 8px)) 0; }
  28% { translate: var(--bc-shake, 8px) 0; }
  43% { translate: calc(2px - var(--bc-shake, 8px)) 0; }
  57% { translate: calc(var(--bc-shake, 8px) - 2px) 0; }
  71% { translate: calc(-1 * var(--bc-shake, 8px)) 0; }
  86% { translate: var(--bc-shake, 8px) 0; }
  100% { translate: 0; }
}
@keyframes comic-split {
  0%, 100% { text-shadow: none; filter: none; }
  20%, 60% { text-shadow: -14px 0 2px var(--comic-glitch-ink), 14px 0 2px var(--comic-glitch-b); filter: drop-shadow(-5px 0 1px var(--comic-glitch-a)) drop-shadow(5px 0 1px var(--comic-glitch-b)); }
  40%, 80% { text-shadow: 14px 0 2px var(--comic-glitch-ink), -14px 0 2px var(--comic-glitch-b); filter: drop-shadow(5px 0 1px var(--comic-glitch-a)) drop-shadow(-5px 0 1px var(--comic-glitch-b)); }
}

/* Reduced motion: no jolt and no misprint split, and the press and burst answer at once rather than over .1s. The label
   still swaps and the burst still shows, because those say what happened rather than move anything. */
@media (prefers-reduced-motion: reduce) {
  .btn-comic, .btn-comic-burst { transition-duration: .001ms; }
  .btn-comic:hover { animation: none; }
}