/**
 * AI Comic Studio — western comics / graphic-novel overrides.
 * Loaded after manga-creator.css on /tools/ai-comic-studio.
 * Shares .et-mgc chrome + JS with AI Manga Studio; only brand, presets, and motion differ.
 */

.et-tool-page--comic-creator {
    --et-mgc-accent: #ef4444;
    --et-accent-primary: #ef4444;
    --et-accent-primary-hover: #dc2626;
    --et-mgc-accent-soft: color-mix(in srgb, #ef4444 14%, transparent);
    --et-mgc-accent-border: color-mix(in srgb, #ef4444 34%, var(--et-border, rgba(255, 255, 255, 0.14)));
}

.et-tool-page--comic-creator .et-tool-page-title__icon {
    color: #ef4444;
}

.et-mgc--comic {
    --et-mgc-accent: #ef4444;
    --et-accent-primary: #ef4444;
    --et-accent-primary-hover: #dc2626;
    --et-mgc-accent-soft: color-mix(in srgb, #ef4444 14%, transparent);
    --et-mgc-accent-border: color-mix(in srgb, #ef4444 34%, var(--et-border, rgba(255, 255, 255, 0.14)));
}

.et-mgc--comic .et-mgc-workflow__step.is-current {
    border-color: color-mix(in srgb, #ef4444 45%, var(--et-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 18%, transparent);
}

.et-mgc--comic .et-mgc-workflow__step.is-current .et-mgc-workflow__num {
    background: #ef4444;
    color: #fff;
}

.et-mgc--comic .et-mgc-wf-next-bar.is-complete .et-mgc-wf-next-bar__btn:not(:disabled),
.et-mgc--comic .et-mgc-step1-script-callout__badge {
    background: #ef4444;
}

.et-mgc--comic .et-mgc-studio-bar__sub {
    max-width: 46rem;
}

/* Processing overlay — comic book punches / halftone */
.et-mgc--comic .et-mgc-gen-overlay {
    background:
        radial-gradient(circle at 20% 30%, rgba(239, 68, 68, 0.22), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.2), transparent 42%),
        rgba(12, 14, 24, 0.88);
}

.et-mgc--comic .et-mgc-gen-overlay__speedlines {
    background:
        repeating-conic-gradient(from 12deg at 50% 50%,
            transparent 0deg 6deg,
            rgba(255, 255, 255, 0.12) 6deg 7deg);
    opacity: 0.85;
}

.et-mgc--comic .et-mgc-gen-overlay.is-busy .et-mgc-gen-overlay__speedlines {
    animation: et-cmc-speedlines 2.2s linear infinite;
}

.et-mgc--comic .et-mgc-gen-overlay__halftone {
    opacity: 0.5;
    background-image: radial-gradient(circle, rgba(255, 220, 80, 0.28) 1.2px, transparent 1.2px);
    background-size: 6px 6px;
}

.et-mgc--comic .et-mgc-gen-overlay__burst {
    position: absolute;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.et-mgc--comic .et-mgc-gen-overlay__burst--a {
    width: 7rem;
    height: 7rem;
    top: 18%;
    left: 12%;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.35);
}

.et-mgc--comic .et-mgc-gen-overlay__burst--b {
    width: 5.5rem;
    height: 5.5rem;
    bottom: 16%;
    right: 10%;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.35);
}

.et-mgc--comic .et-mgc-gen-overlay.is-busy .et-mgc-gen-overlay__burst--a {
    animation: et-cmc-burst-pop 1.4s ease-out infinite;
}

.et-mgc--comic .et-mgc-gen-overlay.is-busy .et-mgc-gen-overlay__burst--b {
    animation: et-cmc-burst-pop 1.4s ease-out 0.45s infinite;
}

.et-mgc--comic .et-mgc-gen-overlay__brush {
    color: #facc15;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.65));
}

.et-mgc--comic .et-mgc-gen-overlay__sfx {
    font-family: 'Bangers', 'Comic Neue', Impact, sans-serif;
    font-size: 1.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #111;
    paint-order: stroke fill;
    text-shadow:
        3px 3px 0 #111,
        -1px -1px 0 rgba(255, 255, 255, 0.35);
}

.et-mgc--comic .et-mgc-gen-sfx--a {
    color: #fef08a;
    top: 8%;
    left: 6%;
    transform: rotate(-12deg);
    --et-cmc-rot: -12deg;
}

.et-mgc--comic .et-mgc-gen-sfx--b {
    color: #fca5a5;
    top: 14%;
    right: 8%;
    transform: rotate(8deg);
    --et-cmc-rot: 8deg;
}

.et-mgc--comic .et-mgc-gen-sfx--c {
    color: #93c5fd;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    --et-cmc-rot: -4deg;
}

.et-mgc--comic .et-mgc-gen-overlay.is-busy .et-mgc-gen-sfx--a {
    animation: et-cmc-sfx-pop 0.9s ease-in-out infinite alternate;
}

.et-mgc--comic .et-mgc-gen-overlay.is-busy .et-mgc-gen-sfx--b {
    animation: et-cmc-sfx-pop 0.85s ease-in-out 0.2s infinite alternate;
}

.et-mgc--comic .et-mgc-gen-overlay.is-busy .et-mgc-gen-sfx--c {
    animation: et-cmc-sfx-pop 0.95s ease-in-out 0.35s infinite alternate;
}

@keyframes et-cmc-speedlines {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1.08); }
}

@keyframes et-cmc-burst-pop {
    0% { opacity: 0; transform: scale(0.4); }
    35% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes et-cmc-sfx-pop {
    from { transform: scale(0.92) rotate(var(--et-cmc-rot, -8deg)); opacity: 0.75; }
    to { transform: scale(1.08) rotate(var(--et-cmc-rot, -8deg)); opacity: 1; }
}

/* Mobile — match manga compact stacking; red accent on primary CTA */
@media (max-width: 991px) {
    .et-tool-page--comic-creator .et-tool-page-lead {
        display: none;
    }

    .et-mgc--comic .et-mgc-wf-next-bar__btn.btn-et-primary {
        background: #dc2626;
        border-color: #b91c1c;
        color: #fff;
    }

    .et-mgc--comic .et-mgc-wf-next-bar__btn.btn-et-primary:hover:not(:disabled) {
        background: #ef4444;
        border-color: #dc2626;
        color: #fff;
    }

    .et-mgc--comic.is-wf-step-1 .et-mgc-canvas-stage-shell {
        min-height: min(38vh, 280px);
    }
}

/* Demo caption + tour — match dark comic studio chrome */
.et-tool-page--comic-creator .et-mgc-demo-bar,
.et-mgc--comic ~ .et-mgc-demo-bar,
body.et-page-tool .et-mgc-demo-bar {
    border-color: rgba(239, 68, 68, 0.4);
}

.et-tool-page--comic-creator .et-mgc-demo-bar__label {
    color: #fecaca;
}

.et-tool-page--comic-creator .et-mgc-demo-caption,
body.et-page-tool .et-mgc-demo-caption {
    border-color: rgba(239, 68, 68, 0.28);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(239, 68, 68, 0.16);
}

.et-tool-page--comic-creator .et-mgc-demo-caption__eyebrow {
    color: #fca5a5;
}

.et-tool-page--comic-creator .et-mgc-tour-head {
    background: rgba(239, 68, 68, 0.1);
}

.et-tool-page--comic-creator .et-mgc-tour-icon {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.et-tool-page--comic-creator .et-mgc-tour-step {
    color: #f87171;
}

.et-tool-page--comic-creator .et-mgc-demo-highlight {
    outline-color: rgba(239, 68, 68, 0.9) !important;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.2) !important;
}

/* Comic lettering: no vertical-text chrome; flatter FX fold */
.et-mgc--comic #et-mgc-bubble-vertical {
    display: none;
}

/* Western comics lettering — ALL CAPS speech + denser tracking */
.et-mgc--comic .et-mgc-bubble-text__inner {
    font-family: 'Comic Neue', 'Arial Rounded MT Bold', Arial, sans-serif;
    letter-spacing: 0.042em;
    line-height: 1.06;
}

.et-mgc--comic .et-mgc-bubble-text__inner--speech,
.et-mgc--comic .et-mgc-bubble-text__inner--scream {
    text-transform: uppercase;
    letter-spacing: 0.042em;
    line-height: 1.06;
}

.et-mgc--comic .et-mgc-bubble-text__inner--thought,
.et-mgc--comic .et-mgc-bubble-text__inner--whisper {
    font-family: 'Comic Neue', Arial, sans-serif;
    letter-spacing: 0.018em;
    text-transform: none;
}

.et-mgc--comic .et-mgc-bubble-text__inner--sfx {
    letter-spacing: 0.1em;
}

.et-mgc--comic .et-mgc-step2-block--generate {
    border-color: color-mix(in srgb, #ef4444 22%, var(--et-border, rgba(255, 255, 255, 0.14)));
}

/* Canvas-first pack polish — western comic accent on the floating dock */
.et-mgc--comic.et-mgc--canvas-first .et-mgc-canvas-guide--top {
    border-color: color-mix(in srgb, #ef4444 36%, var(--et-border, rgba(255, 255, 255, 0.14)));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32), 0 0 0 1px color-mix(in srgb, #ef4444 12%, transparent);
}
.et-mgc--comic.et-mgc--canvas-first .et-mgc-workflow__step.is-current {
    background: color-mix(in srgb, #ef4444 16%, var(--et-bg-input, #1a1a24));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 42%, transparent);
}
.et-mgc--comic.et-mgc--canvas-first .et-mgc-workflow {
    background: color-mix(in srgb, #ef4444 8%, rgba(255, 255, 255, 0.04));
}