/* SocialDebug.Org / Unit 001 / Q.A. FAIL
   A bone-white showroom in which chrome specimens are inspected under
   theatrical light. Forensic minimalism, with one crimson heartbeat. */

:root {
    /* Chrome metallic palette */
    --bone-bright: #f4f4f1;
    --lab-pearl: #ebebe6;
    --polished-argent: #d8dde2;
    --industrial-silver: #aab0b6;
    --gunmetal-cool: #5a6068;
    --anvil-black: #1c1f24;
    --quicksilver: #ffffff;
    --kill-switch: #d4111c;
    --industrial-citron: #d6e02f;
    --schematic-grey: #c8ccd0;

    /* Composition */
    --frame-pad: clamp(18px, 2.4vw, 36px);
    --module-gap: clamp(10px, 1vw, 18px);
    --hairline: 1px solid rgba(200, 204, 208, 0.42);

    /* Depth */
    --depth: 0;
    --section-depth: 0;
    --section-progress: 0;
    --cursor-x: 0;
    --cursor-y: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bone-bright);
    color: var(--anvil-black);
    font-family: "Nunito", "Inter", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.95) 0%, var(--bone-bright) 40%, var(--lab-pearl) 100%),
        var(--bone-bright);
}

/* ==========  STAGE  ========== */
#stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    perspective: 2400px;
    perspective-origin: 50% 45%;
}

/* ==========  GRID HAIRLINES  ========== */
.grid-hairlines {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    pointer-events: none;
    z-index: 1;
    opacity: 0.65;
}
.grid-hairlines span {
    border-right: 1px solid rgba(200, 204, 208, 0.25);
}
.grid-hairlines span:last-child {
    border-right: none;
}
.grid-hairlines::before,
.grid-hairlines::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(200, 204, 208, 0.25);
}
.grid-hairlines::before { top: 33.33%; }
.grid-hairlines::after { top: 66.66%; }

/* ==========  SCHEMATIC BACKGROUND  ========== */
.schematic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.06;
    pointer-events: none;
    z-index: 1;
    transform: translate(calc(var(--cursor-x) * -4px), calc(var(--cursor-y) * -4px));
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========  DEBRIS  ========== */
.debris {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.debris-item {
    position: absolute;
    opacity: 0.55;
    filter: drop-shadow(0 4px 6px rgba(28, 31, 36, 0.08));
    will-change: transform;
}
.d-screw { width: 28px; top: 18%; left: 8%; animation: lissajous-1 26s ease-in-out infinite; }
.d-gear { width: 50px; top: 72%; left: 14%; animation: lissajous-2 38s ease-in-out infinite; }
.d-washer { width: 36px; top: 12%; right: 22%; animation: lissajous-3 33s ease-in-out infinite; }
.d-trace { width: 90px; bottom: 28%; right: 10%; animation: lissajous-4 41s ease-in-out infinite; opacity: 0.4; }
.d-bolt { width: 56px; top: 38%; left: 5%; animation: lissajous-5 46s ease-in-out infinite; }
.d-screw2 { width: 22px; bottom: 18%; left: 42%; animation: lissajous-6 31s ease-in-out infinite; }
.d-gear2 { width: 36px; top: 62%; right: 6%; animation: lissajous-2 44s ease-in-out infinite reverse; }

@keyframes lissajous-1 { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(30px,-20px) rotate(120deg)} 66%{transform:translate(-15px,25px) rotate(240deg)} }
@keyframes lissajous-2 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(40px,-30px) rotate(180deg)} }
@keyframes lissajous-3 { 0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(-25px,18px) rotate(90deg)} 75%{transform:translate(20px,-25px) rotate(-90deg)} }
@keyframes lissajous-4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,15px)} }
@keyframes lissajous-5 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(15px,-20px) rotate(20deg)} }
@keyframes lissajous-6 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(20px,15px)} 66%{transform:translate(-15px,20px)} }

/* ==========  CORNER MODULES  ========== */
.corner {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}
.corner > * {
    pointer-events: auto;
}

.corner-tl { top: var(--frame-pad); left: var(--frame-pad); }
.corner-tr { top: var(--frame-pad); right: var(--frame-pad); }
.corner-bl { bottom: var(--frame-pad); left: var(--frame-pad); }
.corner-br { bottom: var(--frame-pad); right: var(--frame-pad); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }

/* When the active specimen reaches deep zoom, glide corners outward */
.zoomed-in .corner-tl { transform: translate(-32%, -32%); opacity: 0.35; }
.zoomed-in .corner-tr { transform: translate(32%, -32%); opacity: 0.35; }
.zoomed-in .corner-bl { transform: translate(-32%, 32%); opacity: 0.35; }
.zoomed-in .corner-br { transform: translate(32%, 32%); opacity: 0.35; }

/* --- Serial plate (TL) --- */
.serial-plate {
    position: relative;
    background: linear-gradient(170deg, var(--polished-argent) 0%, var(--lab-pearl) 50%, var(--industrial-silver) 100%);
    border: 1px solid var(--schematic-grey);
    padding: 14px 22px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 2px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(90, 96, 104, 0.2) inset,
        0 8px 22px rgba(28, 31, 36, 0.06);
    min-width: 220px;
}
.serial-row {
    font-family: "DM Mono", "Inter", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--gunmetal-cool);
    text-transform: uppercase;
}
.serial-row:first-child {
    color: var(--anvil-black);
    font-weight: 500;
}
.severity-tag {
    color: var(--anvil-black);
    border-top: 1px solid rgba(90, 96, 104, 0.25);
    margin-top: 4px;
    padding-top: 4px;
    font-weight: 500;
}
.serial-rivet {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--quicksilver) 0%, var(--industrial-silver) 50%, var(--gunmetal-cool) 100%);
    box-shadow: 0 0 0 1px rgba(28, 31, 36, 0.15);
}
.serial-rivet { top: 6px; left: 6px; }
.rivet-2 { top: 6px; right: 6px; left: auto; }
.rivet-3 { bottom: 6px; left: 6px; }
.rivet-4 { bottom: 6px; right: 6px; left: auto; }

/* --- Diagnostics tile (TR) --- */
.diagnostics-tile {
    background: var(--quicksilver);
    border: 1px solid var(--schematic-grey);
    border-radius: 2px;
    padding: 10px 14px 10px 14px;
    width: 280px;
    box-shadow: 0 8px 24px rgba(28, 31, 36, 0.05);
    position: relative;
}
.tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(200, 204, 208, 0.6);
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.tile-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--industrial-citron);
    box-shadow: 0 0 8px rgba(214, 224, 47, 0.55);
    animation: led-pulse 2.4s ease-in-out infinite;
}
@keyframes led-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(214, 224, 47, 0.55); }
    50% { opacity: 0.5; box-shadow: 0 0 2px rgba(214, 224, 47, 0.3); }
}
.tile-label {
    font-family: "DM Mono", monospace;
    font-size: 0.6875rem;
    color: var(--gunmetal-cool);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 1;
}
.tile-body {
    font-family: "DM Mono", monospace;
    font-size: 0.8125rem;
    color: var(--anvil-black);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-height: 1.2em;
    line-height: 1.2;
}
.tile-cursor {
    color: var(--industrial-citron);
    animation: cursor-flicker 0.7s steps(2, end) infinite;
    margin-left: 1px;
}
@keyframes cursor-flicker {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.15; }
}
.tile-foot {
    margin-top: 8px;
    border-top: 1px solid rgba(200, 204, 208, 0.6);
    padding-top: 6px;
    display: flex;
    justify-content: space-between;
}
.tile-meta {
    font-family: "DM Mono", monospace;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    color: var(--industrial-silver);
    text-transform: uppercase;
}

/* --- Severity dial (BL) --- */
.severity-dial {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.dial-svg {
    width: 140px;
    height: 140px;
    filter: drop-shadow(0 6px 12px rgba(28, 31, 36, 0.12));
}
#dial-needle {
    transform-origin: 80px 80px;
    transition: none;
}
.dial-readout {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: "DM Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.readout-row {
    display: flex;
    gap: 10px;
}
.readout-key {
    color: var(--industrial-silver);
}
.readout-val {
    color: var(--anvil-black);
}

/* --- Mantra (BR) --- */
.mantra {
    font-family: "Hanken Grotesk", "Inter", sans-serif;
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.04em;
    font-size: clamp(1.5rem, 2.6vw, 2.6rem);
    text-align: right;
    color: var(--anvil-black);
    text-transform: lowercase;
    max-width: 14ch;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}
.mantra-text {
    transition: opacity 0.4s ease;
    display: inline;
}
.mantra-text.swap { opacity: 0; }
.mantra-asterisk {
    display: inline-block;
    width: clamp(20px, 1.6vw, 30px);
    height: clamp(20px, 1.6vw, 30px);
    transform-origin: center;
    animation: defect-rotate 24s linear infinite;
    margin-bottom: 0.18em;
}
.mantra-asterisk svg {
    width: 100%;
    height: 100%;
}
@keyframes defect-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* The dot on the lowercase 'i' in mantras */
.mantra-text .ii::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 0.18em;
    height: 0.18em;
    border-radius: 50%;
    background: var(--kill-switch);
}
.ii { position: relative; display: inline-block; color: transparent; }
.ii::before {
    content: attr(data-ch);
    color: var(--anvil-black);
    position: relative;
}

.mute-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--schematic-grey);
    border-radius: 2px;
    padding: 6px 10px;
    font-family: "DM Mono", monospace;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    color: var(--gunmetal-cool);
    text-transform: uppercase;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.6);
    transition: background 0.25s ease, color 0.25s ease;
}
.mute-toggle:hover { background: var(--quicksilver); color: var(--anvil-black); }
.mute-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--industrial-silver);
    transition: background 0.25s ease;
}
.mute-toggle.active .mute-dot { background: var(--industrial-citron); }

/* ==========  PERSPECTIVE BAY  ========== */
.perspective-bay {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    z-index: 10;
}

.specimen-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    opacity: 0;
    pointer-events: none;
    transform: translateZ(-1500px) scale(0.7);
    transition: none;
    will-change: transform, opacity;
}
.specimen-layer.active {
    opacity: 1;
    pointer-events: auto;
}

.specimen-container {
    position: relative;
    width: clamp(300px, 38vw, 560px);
    height: clamp(360px, 50vh, 600px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform;
}

.specimen-shadow {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 28px;
    background:
        radial-gradient(ellipse at center, rgba(28, 31, 36, 0.28) 0%, rgba(28, 31, 36, 0.12) 35%, transparent 75%);
    filter: blur(8px);
    z-index: -1;
    animation: shadow-bob 14s ease-in-out infinite;
}
@keyframes shadow-bob {
    0%, 100% { width: 70%; opacity: 1; }
    50% { width: 62%; opacity: 0.85; }
}

.specimen-art {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hover-y 14s ease-in-out infinite;
}
.specimen-svg {
    width: 100%;
    height: 100%;
    max-height: 86%;
    animation: spin-soft 19s ease-in-out infinite;
    filter: drop-shadow(0 14px 24px rgba(28, 31, 36, 0.14)) drop-shadow(0 4px 6px rgba(28, 31, 36, 0.08));
}

@keyframes hover-y {
    0%, 100% { transform: translateY(-6px); }
    50% { transform: translateY(6px); }
}
@keyframes spin-soft {
    0% { transform: rotateY(-8deg) rotateX(-4deg); }
    50% { transform: rotateY(8deg) rotateX(4deg); }
    100% { transform: rotateY(-8deg) rotateX(-4deg); }
}

/* ==========  RETICULE  ========== */
.reticule {
    position: absolute;
    width: clamp(320px, 42vw, 620px);
    height: clamp(360px, 52vh, 640px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.reticule-svg {
    width: 100%;
    height: 100%;
}
.reticule-svg path {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    transition: stroke-dashoffset 0.22s ease-out;
}
.specimen-layer.scrolling .reticule {
    opacity: 1;
}
.specimen-layer.scrolling .reticule-svg path {
    stroke-dashoffset: 0;
}

/* ==========  CAPTIONS ORBITING SPECIMEN  ========== */
.caption-orbit {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: "DM Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gunmetal-cool);
    transition: opacity 0.5s ease;
}
.cap-key {
    color: var(--industrial-silver);
}
.cap-val {
    color: var(--anvil-black);
}
.caption-tl {
    top: 12%;
    left: 14%;
    text-align: left;
}
.caption-br {
    bottom: 14%;
    right: 14%;
    text-align: right;
    align-items: flex-end;
}

/* ==========  NARRATIVE / HEADLINE  ========== */
.narrative {
    position: absolute;
    left: 50%;
    bottom: clamp(120px, 18vh, 200px);
    transform: translateX(-50%);
    width: min(90vw, 800px);
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoomed-in .narrative {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
}

.act-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: "DM Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gunmetal-cool);
}
.act-divider {
    width: 36px;
    height: 1px;
    background: var(--industrial-silver);
}

.headline {
    font-family: "Hanken Grotesk", "Inter", sans-serif;
    font-weight: 900;
    font-size: clamp(2.6rem, 6.4vw, 5.6rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--anvil-black);
    text-transform: none;
    display: inline-flex;
    align-items: flex-end;
    gap: 0.12em;
    flex-wrap: wrap;
    justify-content: center;
}
.headline-asterisk {
    display: inline-block;
    width: clamp(28px, 2.4vw, 44px);
    height: clamp(28px, 2.4vw, 44px);
    transform-origin: center;
    animation: defect-rotate 24s linear infinite;
    margin-bottom: 0.22em;
}
.headline-asterisk svg {
    width: 100%;
    height: 100%;
}

.body {
    font-family: "Nunito", "Inter", sans-serif;
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--anvil-black);
    max-width: 36em;
    opacity: 0.86;
}

/* ==========  MERCURY PROGRESS BAR  ========== */
.mercury-rail {
    position: absolute;
    bottom: clamp(70px, 9vh, 110px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(280px, 36vw, 520px);
    height: 22px;
    z-index: 22;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.mercury-track {
    position: absolute;
    inset: 8px 0;
    background: linear-gradient(180deg, var(--lab-pearl), var(--quicksilver));
    border: 1px solid var(--schematic-grey);
    border-radius: 1px;
}
.mercury-fill {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 0%;
    background: linear-gradient(180deg, var(--quicksilver) 0%, var(--polished-argent) 35%, var(--industrial-silver) 70%, var(--gunmetal-cool) 100%);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 0 1px rgba(90, 96, 104, 0.15) inset;
}
.mercury-label {
    position: absolute;
    top: -14px;
    left: 0;
    font-family: "DM Mono", monospace;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--industrial-silver);
}
.mercury-tick {
    position: absolute;
    top: -2px;
    width: 1px;
    height: 6px;
    background: var(--industrial-silver);
}

/* ==========  SCROLL PROMPT  ========== */
.scroll-prompt {
    position: absolute;
    bottom: clamp(28px, 4vh, 48px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 22;
    font-family: "DM Mono", monospace;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--industrial-silver);
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.scroll-prompt.dim { opacity: 0; }
.prompt-line {
    display: inline-block;
    width: 36px;
    height: 1px;
    background: var(--industrial-silver);
    animation: prompt-pulse 2.6s ease-in-out infinite;
}
@keyframes prompt-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ==========  SCROLL DRIVER  ========== */
.scroll-driver {
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}

/* ==========  HEADLINE / MANTRA SWAP TRANSITION  ========== */
.headline.swap #headline-text {
    opacity: 0;
    transition: opacity 0.35s ease;
}
#headline-text {
    transition: opacity 0.35s ease;
    display: inline;
}
#act-num, #act-name, #body-text {
    transition: opacity 0.35s ease;
}
.narrative.swap #act-num,
.narrative.swap #act-name,
.narrative.swap #body-text {
    opacity: 0;
}

/* ==========  RESPONSIVE  ========== */
@media (max-width: 880px) {
    .corner-tr .diagnostics-tile { width: 220px; }
    .caption-tl, .caption-br { display: none; }
    .narrative { bottom: 140px; }
}

@media (max-width: 640px) {
    :root { --frame-pad: 14px; }
    .serial-plate { min-width: 0; padding: 10px 14px; }
    .diagnostics-tile { width: 180px; padding: 8px 10px; }
    .dial-svg { width: 96px; height: 96px; }
    .mantra { font-size: 1.4rem; max-width: 9ch; }
    .headline { font-size: clamp(2rem, 10vw, 3rem); }
    .mercury-rail { width: 70vw; }
}