/* Generated copy of docs/design-system/icbe/pack/components.css (build_packs.py). Do not edit here. */
/* iCBE comic pack: components. Prefix ic-. Use pack variables only (the build lints colours and fonts).
   Source of truth: docs/design-system/icbe/DESIGN.md. */

/* @component ic-wrap: centred content column (1200px) with side gutters; ic-wrap--narrow for reading width */
.ic-wrap { width: 100%; max-width: calc(var(--ap-space-container) + 2 * var(--ap-space-gutter)); margin: 0 auto; padding: 0 var(--ap-space-gutter); }
.ic-wrap--narrow { max-width: calc(var(--ap-space-narrow) + 2 * var(--ap-space-gutter)); }

/* @component ic-band: a full-width section with comic vertical rhythm and an ink rule above and below; modifiers --cream --yellow --red --night --paper */
.ic-band { position: relative; padding: var(--ap-space-section-y) 0; border-top: var(--ap-space-outline) solid var(--ap-c-ink); }
.ic-band--cream { background-color: var(--ap-c-cream-50); }
.ic-band--yellow { background-color: var(--ap-c-yellow-400); }
.ic-band--red { background-color: var(--ap-c-red-600); color: var(--ap-c-white); }
.ic-band--night { background-color: var(--ap-c-night-900); color: var(--ap-c-white); }
.ic-band--paper { background-color: var(--ap-c-paper-300); }

/* @component ic-dots: halftone dot texture as a background layer; ic-dots--light on dark or saturated grounds */
.ic-dots { background-image: radial-gradient(var(--ap-c-dots-ink) 1.4px, transparent 1.7px); background-size: 9px 9px; }
.ic-dots--light { background-image: radial-gradient(var(--ap-c-dots-white) 1.4px, transparent 1.7px); background-size: 9px 9px; }

/* @component ic-speed: comic speed lines radiating from a point (yellow); ic-speed--red; set --ic-speed-at to move the origin */
.ic-speed { background: repeating-conic-gradient(from 0deg at var(--ic-speed-at, 70% 45%), var(--ap-c-yellow-400) 0deg 5deg, var(--ap-c-yellow-500) 5deg 10deg); }
.ic-speed--red { background: repeating-conic-gradient(from 0deg at var(--ic-speed-at, 50% 40%), var(--ap-c-red-600) 0deg 5deg, var(--ap-c-red-700) 5deg 10deg); }

/* @component ic-panel: the basic comic panel: white, 4px ink outline, hard ink shadow; modifiers --yellow --red --cyan --cream --flat (no shadow) --tilt */
.ic-panel { position: relative; background: var(--ap-c-white); color: var(--ap-c-ink); border: var(--ap-space-outline) solid var(--ap-c-ink); box-shadow: var(--ap-shadow-hard); }
.ic-panel--yellow { background: var(--ap-c-yellow-400); }
.ic-panel--red { background: var(--ap-c-red-600); color: var(--ap-c-white); }
.ic-panel--cyan { background-color: var(--ap-c-cyan-500); }
.ic-panel--cream { background: var(--ap-c-cream-50); }
.ic-panel--flat { box-shadow: none; }
.ic-panel--tilt { transform: rotate(-1deg); }

/* @component ic-caption: yellow narration tag pinned to a panel's top-left corner (Bangers) */
.ic-caption { position: absolute; top: calc(-1 * var(--ap-space-outline)); left: calc(-1 * var(--ap-space-outline)); margin: 0; padding: 2px 14px; background: var(--ap-c-yellow-400); color: var(--ap-c-ink); border: var(--ap-space-outline) solid var(--ap-c-ink); font-family: var(--ap-font-tag); font-size: var(--ap-fs-tag); letter-spacing: var(--ap-ls-tag); line-height: var(--ap-lh-tag); }

/* @component ic-bubble: speech bubble (white, ink outline, rounded) with a tail at bottom-left; ic-bubble--yellow */
.ic-bubble { position: relative; background: var(--ap-c-white); color: var(--ap-c-ink); border: var(--ap-space-outline) solid var(--ap-c-ink); border-radius: var(--ap-radius-bubble); padding: 18px 22px; }
.ic-bubble::after { content: ""; position: absolute; left: 36px; bottom: -22px; width: 26px; height: 22px; background: inherit; border-left: var(--ap-space-outline) solid var(--ap-c-ink); border-bottom: var(--ap-space-outline) solid var(--ap-c-ink); transform: skewX(35deg); transform-origin: top left; }
.ic-bubble--yellow { background: var(--ap-c-yellow-400); }

/* @component ic-burst: starburst shape (12 points) for numbers, badges and photo backdrops; ic-burst--16 has 16 finer points; colour it with background */
.ic-burst { clip-path: polygon(50% 0%,57.8% 21%,75% 6.7%,71.2% 28.8%,93.3% 25%,79% 42.2%,100% 50%,79% 57.8%,93.3% 75%,71.2% 71.2%,75% 93.3%,57.8% 79%,50% 100%,42.2% 79%,25% 93.3%,28.8% 71.2%,6.7% 75%,21% 57.8%,0% 50%,21% 42.2%,6.7% 25%,28.8% 28.8%,25% 6.7%,42.2% 21%); display: flex; align-items: center; justify-content: center; text-align: center; }
.ic-burst--16 { clip-path: polygon(50% 0%,57.4% 12.7%,69.1% 3.8%,71.1% 18.4%,85.4% 14.6%,81.6% 28.9%,96.2% 30.9%,87.3% 42.6%,100% 50%,87.3% 57.4%,96.2% 69.1%,81.6% 71.1%,85.4% 85.4%,71.1% 81.6%,69.1% 96.2%,57.4% 87.3%,50% 100%,42.6% 87.3%,30.9% 96.2%,28.9% 81.6%,14.6% 85.4%,18.4% 71.1%,3.8% 69.1%,12.7% 57.4%,0% 50%,12.7% 42.6%,3.8% 30.9%,18.4% 28.9%,14.6% 14.6%,28.9% 18.4%,30.9% 3.8%,42.6% 12.7%); }

/* @component ic-title: giant outlined English comic title (Bangers, white with ink outline and a coloured second shadow); ic-title--red */
.ic-title { margin: 0; font-family: var(--ap-font-display); font-size: var(--ap-fs-display); line-height: var(--ap-lh-display); letter-spacing: var(--ap-ls-display); font-weight: 400; color: var(--ap-c-white); text-shadow: 5px 5px 0 var(--ap-c-ink), -2px -2px 0 var(--ap-c-ink), 2px -2px 0 var(--ap-c-ink), -2px 2px 0 var(--ap-c-ink), 9px 9px 0 var(--ap-c-red-600); }
.ic-title--red { color: var(--ap-c-red-600); text-shadow: 5px 5px 0 var(--ap-c-ink), -2px -2px 0 var(--ap-c-ink), 2px -2px 0 var(--ap-c-ink), -2px 2px 0 var(--ap-c-ink), 9px 9px 0 var(--ap-c-white); }

/* @component ic-sfx: Bangers sound-effect / label text (English only), e.g. "Warning!", "Episode 1", "No. 01" */
.ic-sfx { font-family: var(--ap-font-sfx); font-size: var(--ap-fs-sfx); line-height: var(--ap-lh-sfx); letter-spacing: var(--ap-ls-sfx); font-weight: 400; }

/* @component ic-h2: condensed Anek Bangla section headline; ic-h2--slab puts it in a tilted ink slab with yellow letters */
.ic-h2 { margin: 0 0 18px; font-family: var(--ap-font-headline); font-stretch: 75%; font-weight: 800; font-size: var(--ap-fs-headline); line-height: var(--ap-lh-headline); }
.ic-h2--slab { display: inline-block; background: var(--ap-c-ink); color: var(--ap-c-yellow-400); padding: 8px 22px 10px; transform: rotate(-1.5deg); }

/* @component ic-btn: comic button: red, ink outline, hard shadow, lifts on hover; ic-btn--yellow; never full width on desktop */
.ic-btn { display: inline-block; padding: 15px 28px; background: var(--ap-c-red-600); color: var(--ap-c-white); border: var(--ap-space-outline) solid var(--ap-c-ink); box-shadow: 6px 6px 0 var(--ap-c-ink); font-family: var(--ap-font-button); font-weight: var(--ap-fw-button); font-size: var(--ap-fs-button); line-height: var(--ap-lh-button); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.ic-btn:hover { color: var(--ap-c-white); transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ap-c-ink); }
.ic-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ap-c-ink); }
.ic-btn--yellow { background: var(--ap-c-yellow-400); color: var(--ap-c-ink); }
.ic-btn--yellow:hover { color: var(--ap-c-ink); }

/* @component ic-hazard: yellow/ink diagonal hazard frame around a white panel (warnings, disclaimers) */
.ic-hazard { padding: 12px; background: repeating-linear-gradient(-45deg, var(--ap-c-yellow-400) 0 18px, var(--ap-c-ink) 18px 36px); }
.ic-hazard > * { background: var(--ap-c-white); }

/* @component ic-card: trading card: yellow frame, white inner panel, header row (number + archetype), art window, title, text */
.ic-card { background: var(--ap-c-yellow-400); border: var(--ap-space-outline) solid var(--ap-c-ink); padding: 12px; box-shadow: 8px 8px 0 var(--ap-c-red-600); color: var(--ap-c-ink); }
.ic-card__in { background: var(--ap-c-white); border: var(--ap-space-outline-thin) solid var(--ap-c-ink); padding: 18px; height: 100%; }
.ic-card__art { margin: 12px 0; height: 150px; border: var(--ap-space-outline-thin) solid var(--ap-c-ink); display: flex; align-items: center; justify-content: center; }

/* @component ic-classified: locked/secret card: night diagonal stripes with a red "Classified" stamp */
.ic-classified { position: relative; min-height: 110px; border: var(--ap-space-outline) solid var(--ap-c-ink); background: repeating-linear-gradient(-45deg, var(--ap-c-night-700) 0 14px, var(--ap-c-night-800) 14px 28px); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ap-c-on-dark); }
.ic-stamp { display: inline-block; font-family: var(--ap-font-sfx); font-size: var(--ap-fs-sfx); letter-spacing: .12em; color: var(--ap-c-red-600); border: var(--ap-space-outline-thin) solid var(--ap-c-red-600); padding: 0 12px; transform: rotate(-8deg); background: var(--ap-c-night-900); }

/* @component ic-pop / ic-pulse / ic-spin / ic-shake: motion helpers (only run when the visitor allows motion) */
.ic-pop { transition: transform .2s var(--ap-motion-pop); }
@media (prefers-reduced-motion: no-preference) {
  .ic-pop:hover { transform: scale(1.03) rotate(-.6deg); }
  .ic-pulse { animation: ic-pulse 1.6s ease-in-out infinite; }
  .ic-spin { animation: ic-spin 40s linear infinite; }
  .ic-shake { animation: ic-shake 3.2s ease-in-out infinite; }
}
@keyframes ic-pulse { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.07) rotate(-3deg); } }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-shake { 0%, 90%, 100% { transform: rotate(-2deg); } 93% { transform: rotate(2deg); } 96% { transform: rotate(-3deg); } }