/* ==========================================================
   Kavach — Mirror — How it Works
   Scoped under .kavach-mhiw. Editorial 2-step layout ported
   from Claude Design bundle (/tmp/zynosec-design/.../Mirror
   How it Works.html). All colors resolve to theme tokens so
   the page works in light and dark.
   ========================================================== */

/* ---- Self-hosted font subsets (from Google Fonts OFL) ---- */
@font-face {
    font-family: 'Fraunces MHIW';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/mhiw/Fraunces-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces MHIW';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mhiw/Fraunces-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Serif Devanagari MHIW';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mhiw/NotoSerifDevanagari.woff2') format('woff2');
    unicode-range: U+0900-097F;
}
@font-face {
    font-family: 'Noto Serif Tamil MHIW';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mhiw/NotoSerifTamil.woff2') format('woff2');
    unicode-range: U+0B80-0BFF;
}
@font-face {
    font-family: 'Noto Serif Bengali MHIW';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mhiw/NotoSerifBengali.woff2') format('woff2');
    unicode-range: U+0980-09FF;
}
@font-face {
    font-family: 'Noto Serif Telugu MHIW';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mhiw/NotoSerifTelugu.woff2') format('woff2');
    unicode-range: U+0C00-0C7F;
}
@font-face {
    font-family: 'Noto Serif Gujarati MHIW';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mhiw/NotoSerifGujarati.woff2') format('woff2');
    unicode-range: U+0A80-0AFF;
}
@font-face {
    font-family: 'Noto Sans Kannada MHIW';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/mhiw/NotoSansKannada.woff2') format('woff2');
    unicode-range: U+0C80-0CFF;
}

/* ---- Page shell ---- */
.kavach-mhiw {
    /* Gold accent for this page — overrides the default Kavach cyan */
    --kavach-accent: #d4af37;
    --kavach-accent-soft: color-mix(in srgb, var(--kavach-accent) 20%, transparent);
    --kavach-alert: var(--kavach-alert, #e65149);

    /* Local helpers (fall back to theme tokens) */
    --mhiw-ivory: var(--text-primary);
    --mhiw-dim: var(--text-secondary);
    --mhiw-line: color-mix(in srgb, var(--text-primary) 12%, transparent);
    --mhiw-stage: #050505;

    --mhiw-serif: 'Fraunces MHIW', 'Fraunces', 'Noto Serif', Georgia, serif;
    --mhiw-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    position: relative;
    padding: 0 0 80px;
    overflow-x: clip;
    background: var(--bg-primary);
    color: var(--mhiw-ivory);
}

/* Serif-ify the page content so headlines/copy use Fraunces */
.kavach-mhiw,
.kavach-mhiw h1,
.kavach-mhiw h2,
.kavach-mhiw h3,
.kavach-mhiw p {
    font-family: var(--mhiw-serif);
}

/* ---- Corner HUD ---- */
.kavach-mhiw__hud {
    position: fixed;
    top: 92px;
    z-index: 5;
    font-family: var(--mhiw-mono);
    font-size: 10px;
    letter-spacing: 3px;
    pointer-events: none;
}
.kavach-mhiw__hud--left  { left: 24px;  color: var(--mhiw-dim); }
.kavach-mhiw__hud--right { right: 24px; color: var(--kavach-accent); }

/* ---- Section header ---- */
.kavach-mhiw__header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 120px 80px 60px;
}
.kavach-mhiw__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 36px;
}
.kavach-mhiw__eyebrow-rule {
    display: inline-block;
    width: 30px;
    height: 1px;
    background: var(--kavach-accent);
}
.kavach-mhiw__eyebrow-text {
    font-family: var(--mhiw-mono);
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--kavach-accent);
}
.kavach-mhiw__title {
    font-family: var(--mhiw-serif);
    font-weight: 300;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: -2px;
    line-height: 1.05;
    margin: 0;
    color: var(--mhiw-ivory);
    max-width: 1000px;
}
.kavach-mhiw__title-alt em {
    font-style: italic;
    font-weight: 300;
    color: var(--mhiw-dim);
}
.kavach-mhiw__title-strong {
    color: var(--mhiw-ivory);
    font-style: normal;
}
.kavach-mhiw__lede {
    font-family: var(--mhiw-serif);
    font-size: 19px;
    line-height: 1.55;
    color: var(--mhiw-dim);
    max-width: 680px;
    margin: 32px 0 0;
}

/* ---- Step row ---- */
.kavach-mhiw__step {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 80px;
    display: flex;
    gap: 60px;
    align-items: center;
    flex-wrap: wrap;
}
.kavach-mhiw__step--reverse { flex-direction: row-reverse; }

.kavach-mhiw__copy {
    flex: 1 1 420px;
    min-width: 320px;
    max-width: 520px;
    padding: 40px 0;
}
.kavach-mhiw__step-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 28px;
}
.kavach-mhiw__step-num {
    font-family: var(--mhiw-mono);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--kavach-accent);
}
.kavach-mhiw__step-rule {
    flex: 1;
    height: 1px;
    background: var(--mhiw-line);
}
.kavach-mhiw__step-eyebrow {
    font-family: var(--mhiw-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mhiw-dim);
}
.kavach-mhiw__step-title {
    font-family: var(--mhiw-serif);
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 44px);
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 24px;
    color: var(--mhiw-ivory);
}
.kavach-mhiw__step-body {
    font-family: var(--mhiw-serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--mhiw-dim);
    margin: 0 0 36px;
}
.kavach-mhiw__stat {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--mhiw-line);
}
.kavach-mhiw__stat-value {
    font-family: var(--mhiw-serif);
    font-weight: 300;
    font-size: clamp(30px, 3.6vw, 44px);
    letter-spacing: -1px;
    color: var(--kavach-accent);
    line-height: 1;
}
.kavach-mhiw__stat-label {
    font-family: var(--mhiw-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mhiw-dim);
    max-width: 180px;
    line-height: 1.4;
}

/* ---- Animation frame ---- */
.kavach-mhiw__anim-wrap {
    flex: 1 1 520px;
    min-width: 0;
    max-width: 720px;
}
.kavach-mhiw__anim-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    font-family: var(--mhiw-mono);
    font-size: 10px;
    letter-spacing: 3px;
}
.kavach-mhiw__anim-label-left  { color: var(--kavach-accent); }
.kavach-mhiw__anim-label-right { color: var(--mhiw-dim); }

.kavach-mhiw__anim-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 920 / 560;
    background: var(--mhiw-stage);
    border: 1px solid var(--mhiw-line);
    box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in srgb, var(--kavach-accent) 6%, transparent);
    overflow: hidden;
}
.kavach-mhiw__anim-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 920px;
    height: 560px;
    transform-origin: 0 0;
    /* JS sets --mhiw-scale based on the frame's rendered width */
    transform: scale(var(--mhiw-scale, 1));
}
.kavach-mhiw__anim-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg,
        rgba(255,255,255,0.012) 0,
        rgba(255,255,255,0.012) 1px,
        transparent 1px,
        transparent 3px);
    z-index: 2;
}
.kavach-mhiw__anim-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-family: var(--mhiw-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--mhiw-dim);
}

/* ---- Scene: ConceptH (front-page newspaper scan) ---- */
.mhiw-fp {
    position: relative;
    width: 920px;
    height: 560px;
    background: #070706;
    color: var(--mhiw-ivory);
    font-family: var(--mhiw-serif);
}
.mhiw-fp__masthead {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
    font-family: var(--mhiw-mono);
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(232,226,214,0.55);
}
.mhiw-fp__masthead-live { color: #d4af37; }
.mhiw-fp__section {
    position: absolute;
    top: 56px;
    left: 72px;
    right: 72px;
    border-bottom: 1px solid rgba(232,226,214,0.15);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.mhiw-fp__section-title {
    font-family: var(--mhiw-serif);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(232,226,214,0.55);
}
.mhiw-fp__section-tag {
    font-family: var(--mhiw-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(232,226,214,0.35);
}
.mhiw-fp__rows {
    position: absolute;
    top: 110px;
    left: 72px;
    right: 72px;
}
.mhiw-fp__row {
    position: absolute;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
}
.mhiw-fp__row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(232,226,214,0.08);
}
.mhiw-fp__tag {
    width: 40px;
    font-family: var(--mhiw-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(232,226,214,0.35);
}
.mhiw-fp__head {
    flex: 1;
    font-size: 22px;
    letter-spacing: -0.2px;
    color: rgba(232,226,214,0.55);
    transition: color .3s, opacity .3s;
}
.mhiw-fp__row[data-script="en"] .mhiw-fp__head { font-family: Georgia, 'Noto Serif', serif; }
.mhiw-fp__row[data-script="hi"] .mhiw-fp__head { font-family: 'Noto Serif Devanagari MHIW', 'Noto Serif Devanagari', serif; }
.mhiw-fp__row[data-script="ta"] .mhiw-fp__head { font-family: 'Noto Serif Tamil MHIW', 'Noto Serif Tamil', serif; }
.mhiw-fp__row[data-script="bn"] .mhiw-fp__head { font-family: 'Noto Serif Bengali MHIW', 'Noto Serif Bengali', serif; }
.mhiw-fp__row[data-script="te"] .mhiw-fp__head { font-family: 'Noto Serif Telugu MHIW', 'Noto Serif Telugu', serif; }
.mhiw-fp__row[data-script="gu"] .mhiw-fp__head { font-family: 'Noto Serif Gujarati MHIW', 'Noto Serif Gujarati', serif; }
.mhiw-fp__row.is-reached .mhiw-fp__head {
    color: var(--mhiw-ivory);
    opacity: 1;
}
.mhiw-fp__row.is-deepfake .mhiw-fp__head {
    color: var(--kavach-alert);
    text-decoration: line-through;
    text-decoration-color: rgba(230,81,73,0.75);
    text-decoration-thickness: 1px;
    opacity: 0.9;
}
.mhiw-fp__verdict {
    width: 240px;
    text-align: right;
    font-family: var(--mhiw-mono);
    font-size: 9px;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity .35s;
}
.mhiw-fp__row.is-reached .mhiw-fp__verdict { opacity: 1; }
.mhiw-fp__verdict strong {
    color: #d4af37;
    font-weight: 400;
}
.mhiw-fp__row.is-deepfake .mhiw-fp__verdict strong { color: var(--kavach-alert); }
.mhiw-fp__verdict-meta {
    color: rgba(232,226,214,0.35);
    margin-top: 4px;
    letter-spacing: 1.5px;
}
.mhiw-fp__row.is-deepfake .mhiw-fp__verdict-meta { color: rgba(232,226,214,0.45); }
.mhiw-fp__scan {
    position: absolute;
    left: 72px;
    right: 72px;
    height: 1px;
    background: #d4af37;
    box-shadow: 0 0 8px #d4af37;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}
.mhiw-fp__caption {
    position: absolute;
    left: 72px;
    right: 72px;
    bottom: 34px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid rgba(232,226,214,0.15);
    padding-top: 14px;
}
.mhiw-fp__caption-lede {
    font-family: var(--mhiw-serif);
    font-size: 22px;
    color: var(--mhiw-ivory);
    letter-spacing: -0.3px;
}
.mhiw-fp__caption-accent { color: #d4af37; }
.mhiw-fp__caption-alert { color: var(--kavach-alert); }
.mhiw-fp__caption-dim { color: rgba(232,226,214,0.45); }
.mhiw-fp__caption-counter {
    font-family: var(--mhiw-mono);
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(232,226,214,0.35);
}

/* ---- Scene: ConceptF (mask-slips portrait + glitch) ---- */
.mhiw-ms {
    position: relative;
    width: 920px;
    height: 560px;
    background: #050505;
    color: var(--mhiw-ivory);
    overflow: hidden;
}
.mhiw-ms__top-left {
    position: absolute;
    top: 28px;
    left: 60px;
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(212,175,55,0.7);
    font-family: var(--mhiw-mono);
}
.mhiw-ms__top-right {
    position: absolute;
    top: 28px;
    right: 60px;
    font-size: 9px;
    letter-spacing: 2px;
    font-family: var(--mhiw-mono);
    color: rgba(232,226,214,0.4);
}
.mhiw-ms__top-right.is-detected { color: var(--kavach-alert); }
.mhiw-ms__svg { position: absolute; inset: 0; }
.mhiw-ms__greet {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 400;
    color: var(--mhiw-ivory);
    letter-spacing: 0.5px;
    opacity: 0;
    text-align: center;
    transition: color .3s;
    pointer-events: none;
}
.mhiw-ms__greet[data-lang="hi"]  { font-family: 'Noto Serif Devanagari MHIW', serif; }
.mhiw-ms__greet[data-lang="ta"]  { font-family: 'Noto Serif Tamil MHIW', serif; }
.mhiw-ms__greet[data-lang="bn"]  { font-family: 'Noto Serif Bengali MHIW', serif; }
.mhiw-ms__greet[data-lang="kn"]  { font-family: 'Noto Sans Kannada MHIW', sans-serif; }
.mhiw-ms__greet[data-lang="en"]  { font-family: Georgia, 'Noto Serif', serif; }
.mhiw-ms__greet-script {
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(232,226,214,0.35);
    font-family: var(--mhiw-mono);
    margin-top: 4px;
}
.mhiw-ms__caption {
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 44px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.mhiw-ms__caption-lede {
    font-family: var(--mhiw-serif);
    font-size: 24px;
    color: var(--mhiw-ivory);
    letter-spacing: -0.3px;
    max-width: 600px;
}
.mhiw-ms__caption-accent { color: #d4af37; }
.mhiw-ms__caption-dim { color: rgba(232,226,214,0.45); }
.mhiw-ms__caption-confidence {
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(232,226,214,0.35);
    font-family: var(--mhiw-mono);
}

/* ---- Footer strip ---- */
.kavach-mhiw__strip {
    max-width: 1280px;
    margin: 80px auto 80px;
    padding: 60px 80px 0;
    border-top: 1px solid var(--mhiw-line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}
.kavach-mhiw__strip-k {
    font-family: var(--mhiw-serif);
    font-weight: 300;
    font-size: 32px;
    letter-spacing: -0.8px;
    color: var(--mhiw-ivory);
    margin-bottom: 12px;
}
.kavach-mhiw__strip-v {
    font-family: var(--mhiw-serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--mhiw-dim);
    margin-bottom: 18px;
}
.kavach-mhiw__strip-meta {
    font-family: var(--mhiw-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--kavach-accent);
}

/* ---- Bottom mark ---- */
.kavach-mhiw__mark {
    text-align: center;
    padding-top: 20px;
    font-family: var(--mhiw-mono);
    font-size: 9px;
    letter-spacing: 4px;
    color: color-mix(in srgb, var(--text-primary) 25%, transparent);
}
.kavach-mhiw__mark::first-letter,
.kavach-mhiw__mark {
    /* Devanagari for कवच uses this family */
    font-family: 'Noto Serif Devanagari MHIW', var(--mhiw-mono);
}

/* ---- Light-mode stage lift: the animation frames are designed
   dark. In light mode, keep the stage itself dark (the animation
   is literally a "screen") but keep everything around it light. ---- */
[data-theme="light"] .kavach-mhiw__anim-frame,
[data-theme="light"] .mhiw-fp,
[data-theme="light"] .mhiw-ms {
    /* stage stays dark; handled by fixed colors in scene CSS above */
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
    .kavach-mhiw__header { padding: 100px 40px 40px; }
    .kavach-mhiw__step { padding: 40px; gap: 40px; }
    .kavach-mhiw__strip { padding: 60px 40px 0; gap: 40px; }
}
@media (max-width: 767px) {
    .kavach-mhiw__hud { display: none; }
    .kavach-mhiw__header { padding: 80px 20px 30px; }
    .kavach-mhiw__title { letter-spacing: -1px; }
    .kavach-mhiw__lede { font-size: 17px; }
    .kavach-mhiw__step {
        padding: 20px;
        gap: 30px;
        flex-direction: column;
    }
    .kavach-mhiw__step--reverse { flex-direction: column; }
    .kavach-mhiw__copy { padding: 20px 0; max-width: none; }
    .kavach-mhiw__strip {
        grid-template-columns: 1fr;
        padding: 40px 20px 0;
        margin-top: 40px;
    }
    .kavach-mhiw__strip-k { font-size: 28px; }
}

/* ---- Reduced motion: freeze scenes on verified end-state ---- */
@media (prefers-reduced-motion: reduce) {
    .kavach-mhiw__anim-scanlines { display: none; }
}