/* Manga Ink — light paper theme: black ink, halftone dots, comic panels, speech bubbles.
   Motion: panels slam in, letters bounce, POW! on click, speed lines (theme.js). */
/* fonts: https://fonts.googleapis.com/css2?family=Bangers&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap */

:root {
  --bg: #f5efe2;
  --surface: #fffaf0;
  --surface2: #efe6d3;
  --accent: #c8102e;
  --accent2: #1d3557;
  --accent3: #ffbe0b;
  --danger: #c8102e;
  --warning: #ffbe0b;
  --purple: #6d597a;
  --text: #141414;
  --dim: #5c5446;
  --border: #141414;
  --font-head: 'Bangers', 'Zen Kaku Gothic New', Impact, sans-serif;
  --font-body: 'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-code: 'Space Mono', ui-monospace, monospace;
  --nav-bg: rgba(245,239,226,0.94);
  --shadow: 6px 6px 0 #141414;
  --radius: 4px;
  --btn-radius: 6px;
  --card-radius: 6px;
  --clip-btn: none;
  --scanline-opacity: 0;
  --grain-opacity: .05;
  --line: 3px solid #141414;
  --ink: #141414;
}

/* Paper with a faint halftone wash */
body.theme-manga-ink {
  background:
    radial-gradient(circle at 1px 1px, rgba(20,20,20,.09) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(180deg, #f8f3e8, #f1e9d8);
  background-attachment: fixed;
}
.theme-manga-ink .scanline, .theme-manga-ink .hero-glow { display: none; }
.theme-manga-ink ::selection { background: var(--accent3); color: var(--ink); }

/* Speed lines radiating behind the hero */
.theme-manga-ink .hero::after {
  content: ''; position: absolute; inset: -40%; z-index: 0; pointer-events: none; opacity: .14;
  background: repeating-conic-gradient(from 0deg at 62% 48%, #141414 0deg 1.4deg, transparent 1.4deg 7deg);
  -webkit-mask: radial-gradient(circle at 62% 48%, transparent 0 18%, #000 45%); mask: radial-gradient(circle at 62% 48%, transparent 0 18%, #000 45%);
  animation: mi-spin 90s linear infinite;
}
@keyframes mi-spin { to { transform: rotate(360deg); } }
.theme-manga-ink .hero::before { display: none; }

/* ---------- Type ---------- */
.theme-manga-ink :is(h1, h2, h3, .section-title, .page-title, .hero-name) { font-family: var(--font-head); font-weight: 400; letter-spacing: .03em; color: var(--ink); }
.theme-manga-ink :is(.section-title, .page-title) { text-transform: uppercase; text-shadow: 3px 3px 0 var(--accent3); line-height: 1; }
.theme-manga-ink .hero-name { text-transform: uppercase; letter-spacing: .04em; color: var(--ink); text-shadow: 4px 4px 0 var(--accent), 8px 8px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); }
.theme-manga-ink .mi-mark { position: relative; z-index: 0; color: var(--ink); text-shadow: 3px 3px 0 #fff; }
.theme-manga-ink .mi-mark::before { content: ''; position: absolute; z-index: -1; left: -.08em; right: -.08em; bottom: .05em; height: .42em; background: var(--accent3); transform: skewX(-12deg) rotate(-1deg); }
/* eyebrow = speech bubble */
.theme-manga-ink .eyebrow {
  position: relative; display: inline-block; padding: 7px 14px; background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  font-family: var(--font-code); font-weight: 700; color: var(--ink); letter-spacing: .08em; box-shadow: 3px 3px 0 var(--ink);
}
.theme-manga-ink .eyebrow::before { content: ""; position: absolute; left: 20px; bottom: -9px; width: 14px; height: 14px; background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); box-shadow: none; }
.theme-manga-ink .hero-role, .theme-manga-ink .role-word { font-family: var(--font-head); color: var(--accent); font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: .05em; text-transform: uppercase; }
.theme-manga-ink .lead, .theme-manga-ink .hero-tagline { color: #2a2620; font-weight: 500; }

/* ---------- Nav ---------- */
.theme-manga-ink #nav.scrolled { border-bottom: 3px solid var(--ink); backdrop-filter: none; }
.theme-manga-ink .nav-logo { font-family: var(--font-head); font-weight: 400; letter-spacing: .06em; color: var(--ink); font-size: 1.6rem; }
.theme-manga-ink .nav-logo span { color: var(--accent); }
.theme-manga-ink .nav-links a, .theme-manga-ink .nav-more-btn { font-family: var(--font-body); font-weight: 700; font-size: .85rem; letter-spacing: .02em; color: var(--ink); text-transform: none; }
.theme-manga-ink .nav-links a:hover, .theme-manga-ink .nav-links a.active { color: var(--accent); }
.theme-manga-ink .nav-links > li > a::after { height: 4px; background: var(--accent3); bottom: 0; z-index: -1; }

/* ---------- Buttons: ink-outlined, offset shadow, press ---------- */
.theme-manga-ink .btn, .theme-manga-ink .btn-send {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 400; letter-spacing: .08em; border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s, background .2s;
}
.theme-manga-ink .btn:hover, .theme-manga-ink .btn-send:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 6px 6px 0 var(--ink); }
.theme-manga-ink .btn:active, .theme-manga-ink .btn-send:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.theme-manga-ink .btn-primary, .theme-manga-ink .btn-send { background: var(--accent); color: #fff; }
.theme-manga-ink .btn-primary:hover, .theme-manga-ink .btn-send:hover { background: #ff4757; color: #fff; }
.theme-manga-ink .btn-outline, .theme-manga-ink .btn-ghost { background: #fff; color: var(--ink); }
.theme-manga-ink .btn-outline:hover, .theme-manga-ink .btn-ghost:hover { background: var(--accent3); color: var(--ink); }
.theme-manga-ink .btn-startup { background: var(--accent3); color: var(--ink); }

/* ---------- Cards = manga panels ---------- */
.theme-manga-ink :is(.card, .project-card, .service-card, .post-card, .testimonial-card, .pricing-card, .repo-card, .collab-card, .download-card, .research-card, .skill-card, .timeline-card, .startup-card, .tool-card, .form-v2, .contact-item, .stat-box, .faq-item) {
  background: #fff; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 6px 6px 0 var(--ink);
  transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s;
}
.theme-manga-ink :is(.card, .project-card, .service-card, .post-card, .pricing-card, .repo-card, .collab-card, .download-card, .research-card, .tool-card):hover {
  transform: translate(-4px, -4px) rotate(-.6deg); box-shadow: 10px 10px 0 var(--ink);
}
.theme-manga-ink :is(.card, .project-card, .service-card, .post-card):nth-child(even):hover { transform: translate(-4px, -4px) rotate(.6deg); }
.theme-manga-ink :is(.project-media, .post-media, .detail-hero-media, .download-media) { border-bottom: 3px solid var(--ink); position: relative; }
.theme-manga-ink :is(.project-media, .post-media, .detail-hero-media, .download-media) img { filter: saturate(1.08) contrast(1.06); transition: filter .35s, transform .5s; }
.theme-manga-ink :is(.project-media, .post-media, .detail-hero-media, .download-media)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transition: opacity .35s;
  background: radial-gradient(circle at 2px 2px, rgba(20,20,20,.16) 1px, transparent 1.4px) 0 0 / 5px 5px;
}
.theme-manga-ink :is(.project-card, .post-card, .download-card):hover img { filter: none; transform: scale(1.04); }
.theme-manga-ink :is(.project-card, .post-card, .download-card):hover :is(.project-media, .post-media, .download-media)::after { opacity: 0; }
.theme-manga-ink .project-index { font-family: var(--font-head); color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.theme-manga-ink .project-category, .theme-manga-ink .project-badge { background: var(--accent3); color: var(--ink); border: 2px solid var(--ink); }
.theme-manga-ink :is(.tag, .pill, .filter-chip, .type-chip) { border: 2px solid var(--ink); color: var(--ink); background: #fff; border-radius: 4px; font-weight: 700; }
.theme-manga-ink .filter-chip.active { background: var(--ink); color: var(--accent3); }
.theme-manga-ink :is(.post-title, .project-title, .service-title) { font-family: var(--font-head); letter-spacing: .04em; font-weight: 400; }

/* ---------- Marquee: comic strip ---------- */
.theme-manga-ink .marquee { background: var(--accent3); border-block: 3px solid var(--ink); }
.theme-manga-ink .marquee-item { font-family: var(--font-head); color: var(--ink); font-weight: 400; letter-spacing: .06em; }
.theme-manga-ink .marquee-item::after { content: '★'; color: var(--accent); }
.theme-manga-ink .marquee-sm { background: #fff; }

/* ---------- POW bubbles (theme.js) ---------- */
.mi-pow {
  position: fixed; z-index: 99999; pointer-events: none; padding: 10px 16px; transform: translate(-50%, -50%);
  font-family: 'Bangers', Impact, sans-serif; font-size: 2rem; letter-spacing: .04em; color: #fff; background: var(--accent);
  -webkit-text-stroke: 1px #141414; text-shadow: 3px 3px 0 #141414;
  clip-path: polygon(50% 0, 61% 22%, 86% 8%, 78% 34%, 100% 42%, 80% 58%, 94% 84%, 66% 76%, 54% 100%, 42% 78%, 14% 92%, 22% 64%, 0 50%, 20% 36%, 8% 10%, 36% 22%);
  padding: 34px 40px;
}

/* ---------- Misc ---------- */
.theme-manga-ink .prose { font-weight: 400; }
.theme-manga-ink .prose a { color: var(--accent2); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--accent3); }
.theme-manga-ink .prose strong { color: var(--accent); }
.theme-manga-ink .prose blockquote { border-left: 6px solid var(--ink); background: #fff; font-family: var(--font-body); font-weight: 700; box-shadow: 4px 4px 0 var(--ink); border: 3px solid var(--ink); border-radius: 18px; padding: 16px 20px; font-style: normal; }
.theme-manga-ink :is(input, textarea, select) { border: 3px solid var(--ink) !important; border-radius: 6px; background: #fff; color: var(--ink); }
.theme-manga-ink :is(input, textarea, select):focus { box-shadow: 4px 4px 0 var(--accent); }
.theme-manga-ink .inquiry-tab { border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.theme-manga-ink .inquiry-tab.active { background: var(--ink); color: var(--accent3); }
.theme-manga-ink .cta-band { background: var(--accent3); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.theme-manga-ink .footer-giant { font-family: var(--font-head); color: transparent; -webkit-text-stroke: 2px rgba(20,20,20,.18); opacity: 1; }
.theme-manga-ink .site-footer .footer-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.theme-manga-ink .scroll-progress-bar, .theme-manga-ink .progress-bar-fill { background: var(--accent); }
.theme-manga-ink .cursor-dot { background: var(--accent); }
.theme-manga-ink .cursor-ring { border: 2px solid var(--ink); }
.theme-manga-ink .hero-stage-frame { border: 4px solid var(--ink); border-radius: 6px; box-shadow: 10px 10px 0 var(--ink); background: #fff; }
.theme-manga-ink .tape-chip { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--font-head); font-size: .95rem; letter-spacing: .06em; border-radius: 16px; }
.theme-manga-ink .tape-chip::before { display: none; }
.theme-manga-ink .stage-caption { color: var(--ink); text-shadow: none; background: var(--accent3); padding: 4px 8px; border: 2px solid var(--ink); }
.theme-manga-ink #preloader { background: var(--accent3); }
.theme-manga-ink .preloader-name { font-family: var(--font-head); font-weight: 400; color: var(--ink); }
.theme-manga-ink .site-announce { background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }
.theme-manga-ink #toast { color: var(--ink); }

html.lite .theme-manga-ink .hero::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .theme-manga-ink .hero::after { animation: none; } }