/* =========================================================
   mechanic.monster — clandestine repair atelier
   18th-century engineering treatise meets deep-space sci-fi
   ========================================================= */

/* ---------- COLOR PALETTE ----------
   #0A0414  Obsidian Vacuum
   #1A0B2E  Deep Nebula
   #2D1551  Storm Plum
   #5E2A4A  Rust Wine
   #C8B89A  Vellum Bone
   #E8DFC8  Lamp-lit Vellum
   #A8FF60  Hazard Acid
   #7C5BFF  Cobalt Filament
   #FFFFFF  (used only as inherited spec value, never as a flat fill)
----------------------------------- */

:root {
    --obsidian: #0A0414;
    --nebula: #1A0B2E;
    --plum: #2D1551;
    --rust: #5E2A4A;
    --vellum: #C8B89A;
    --vellum-bright: #E8DFC8;
    --acid: #A8FF60;
    --cobalt: #7C5BFF;
    --pure: #FFFFFF;

    --col-w: 720px;
    --col-pad: clamp(18px, 4vw, 56px);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
    line-height: 1.62;
    font-variant-numeric: oldstyle-nums;
    color: var(--vellum);
    background: var(--obsidian);
    background-image: linear-gradient(
        178deg,
        var(--obsidian) 0%,
        var(--nebula) 22%,
        var(--plum) 50%,
        var(--nebula) 78%,
        var(--obsidian) 100%
    );
    background-attachment: fixed;
    filter: contrast(1.04) saturate(1.08);
    min-height: 100vh;
    overflow-x: hidden;

    display: grid;
    grid-template-columns: 1fr min(var(--col-w), 100%) 1fr;
    padding-block: 12vh;

    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body.lit { opacity: 1; }

/* ============ AMBIENT BACKGROUND LAYER ============ */
.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient .conduits {
    position: absolute;
    inset: -10% -5% -10% -5%;
    width: 110%;
    height: 120%;
    opacity: 0.42;
}

.conduit {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
    filter: drop-shadow(0 0 6px rgba(124, 91, 255, 0.18));
    animation: drift 22s ease-in-out infinite alternate;
}

.conduit-a { animation-duration: 22s; }
.conduit-b { animation-duration: 26s; animation-delay: -3s; opacity: 0.42; }
.conduit-c { animation-duration: 20s; animation-delay: -7s; opacity: 0.5; }
.conduit-d { animation-duration: 28s; animation-delay: -10s; opacity: 0.4; }
.conduit-e { animation-duration: 24s; animation-delay: -5s; opacity: 0.48; }

@keyframes drift {
    from { transform: translateY(-8px); }
    to   { transform: translateY(8px); }
}

.cursor-filament {
    position: fixed;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--cobalt) 0%, rgba(124, 91, 255, 0) 70%);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 320ms ease-out;
    mix-blend-mode: screen;
    z-index: 1;
}

.cursor-filament.live { opacity: 0.7; }

/* ============ HEADER ============ */
.hairline-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 4vw, 56px);
    background: linear-gradient(180deg, rgba(10, 4, 20, 0.86) 0%, rgba(10, 4, 20, 0) 100%);
    border-bottom: 1px solid rgba(94, 42, 74, 0.4);
    z-index: 10;
    backdrop-filter: blur(2px);
}

.wordmark {
    color: var(--vellum-bright);
    text-decoration: none;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
}

.wordmark-svg {
    width: 220px;
    height: 28px;
    overflow: visible;
}

.wordmark-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    fill: none;
    stroke: var(--vellum-bright);
    stroke-width: 0.7;
    letter-spacing: -0.01em;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: nibStroke 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes nibStroke {
    to {
        stroke-dashoffset: 0;
        fill: var(--vellum-bright);
    }
}

.anchors {
    display: flex;
    gap: 18px;
}

.anchor {
    color: var(--vellum);
    opacity: 0.55;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
    font-family: 'Cormorant Garamond', serif;
    transition: color 320ms ease, opacity 320ms ease, transform 320ms ease;
    padding: 6px;
}

.anchor:hover {
    color: var(--cobalt);
    opacity: 1;
    transform: translateY(-1px);
}

.anchor.active {
    color: var(--vellum-bright);
    opacity: 1;
    animation: anchorPulse 2.38s ease-in-out infinite;
}

@keyframes anchorPulse {
    0%, 100% { text-shadow: 0 0 0 rgba(232, 223, 200, 0); }
    50%      { text-shadow: 0 0 12px rgba(232, 223, 200, 0.6); }
}

/* ============ CENTRAL COLUMN ============ */
.column {
    grid-column: 2;
    transform: rotate(0.4deg);
    transform-origin: 50% 30%;
    position: relative;
    z-index: 2;
    padding: 0 var(--col-pad);
    max-width: 100%;
}

/* ============ SECTIONS ============ */
.section {
    position: relative;
    padding-block: clamp(70px, 10vh, 140px);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.opener {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(2.4rem, 6vw, 5.6rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--vellum-bright);
    margin-bottom: 0.6em;
}

.opener em {
    font-style: italic;
    font-weight: 500;
}

.lede {
    font-size: clamp(1.125rem, 1.25vw, 1.3rem);
    color: var(--vellum);
    margin-bottom: 1.4em;
    max-width: 64ch;
}

.section p {
    margin-bottom: 1.1em;
    max-width: 64ch;
}

mark {
    background: transparent;
    color: var(--acid);
    padding: 0 0.05em;
    border-bottom: 1px solid rgba(168, 255, 96, 0.4);
}

.mono {
    font-family: 'IBM Plex Mono', Menlo, monospace;
    font-size: 0.86em;
    color: var(--vellum);
    border-bottom: 1px solid var(--rust);
    padding-bottom: 0;
    letter-spacing: 0;
}

/* ============ HAILING FREQUENCY ============ */
.section-hail {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hail-line {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.32;
    color: var(--vellum-bright);
    max-width: 28ch;
    margin: 0 auto 1.4em;
    letter-spacing: -0.005em;
}

.hail-line span {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 700ms ease, transform 700ms ease;
    margin-right: 0.18em;
}

.section-hail.in-view .hail-line span {
    opacity: 1;
    transform: translateY(0);
}

/* word-by-word stagger */
.hail-line span:nth-child(1)  { transition-delay: 0.32s; }
.hail-line span:nth-child(2)  { transition-delay: 0.64s; }
.hail-line span:nth-child(3)  { transition-delay: 0.96s; }
.hail-line span:nth-child(4)  { transition-delay: 1.28s; }
.hail-line span:nth-child(5)  { transition-delay: 1.60s; }
.hail-line span:nth-child(6)  { transition-delay: 1.92s; }
.hail-line span:nth-child(7)  { transition-delay: 2.24s; }
.hail-line span:nth-child(8)  { transition-delay: 2.56s; }
.hail-line span:nth-child(9)  { transition-delay: 2.88s; }
.hail-line span:nth-child(10) { transition-delay: 3.20s; }
.hail-line span:nth-child(11) { transition-delay: 3.52s; }

.hail-coords {
    color: var(--vellum);
    opacity: 0.7;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}

/* ============ DIAGNOSIS — engine in left margin ============ */
.section-diagnosis { position: relative; }

.margin-left {
    position: absolute;
    left: calc(-1 * (var(--col-pad) + 240px));
    top: 14%;
    width: 240px;
    transform: rotate(-0.4deg); /* counter the column tilt */
}

.margin-right {
    position: absolute;
    right: calc(-1 * (var(--col-pad) + 260px));
    top: 22%;
    width: 260px;
    transform: rotate(-0.4deg);
}

.margin-caption {
    color: var(--vellum);
    opacity: 0.62;
    font-size: 0.84rem;
    line-height: 1.4;
    margin-top: 8px;
    font-style: italic;
}

/* engine illustration */
.illus { width: 100%; height: auto; display: block; }

.ink-stroke {
    fill: none;
    stroke: var(--vellum);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.86;
    vector-effect: non-scaling-stroke;
}

.illus-engine .ink-stroke {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 4s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-diagnosis.in-view .illus-engine .ink-stroke {
    stroke-dashoffset: 0;
}

.callout {
    stroke: var(--rust);
    stroke-width: 0.5;
    fill: none;
    opacity: 0.8;
}

.callout-label {
    font-family: 'EB Garamond', serif;
    font-size: 9px;
    fill: var(--vellum);
    font-style: italic;
    opacity: 0.78;
}

.fracture {
    fill: none;
    stroke: var(--acid);
    stroke-width: 0.8;
    stroke-linecap: round;
    opacity: 0.62;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 3.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}

.section-diagnosis.in-view .illus-engine .fracture { stroke-dashoffset: 0; }

/* ============ MANIFESTO PLATE ============ */
.section-manifesto {
    padding-block: clamp(120px, 16vh, 220px);
    text-align: center;
    background: radial-gradient(
        ellipse at center,
        rgba(45, 21, 81, 0.55) 0%,
        rgba(10, 4, 20, 0) 70%
    );
    /* break the 720px column slightly */
    margin-inline: calc(-1 * var(--col-pad));
}

.manifesto-plate {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 var(--col-pad);
}

.manifesto-prelude {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--rust);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 2em;
}

.manifesto-line {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(2.6rem, 7vw, 6.4rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--vellum-bright);
    margin-bottom: 0.7em;
}

.manifesto-line em {
    font-style: italic;
    color: var(--vellum-bright);
    text-decoration: underline;
    text-decoration-color: var(--rust);
    text-decoration-thickness: 1px;
    text-underline-offset: 8px;
}

.manifesto-coda {
    font-family: 'EB Garamond', serif;
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    color: var(--vellum);
    opacity: 0.84;
    max-width: 56ch;
    margin: 0 auto;
    font-style: italic;
}

/* ============ ORNAMENTAL RULE ============ */
.rule {
    padding: 28px 0;
    display: flex;
    justify-content: center;
}

.rule svg {
    width: 100%;
    max-width: 400px;
    height: 8px;
    overflow: visible;
}

.rule line, .rule path {
    stroke: var(--rust);
    stroke-width: 0.6;
    fill: none;
    opacity: 0.65;
}

/* ============ SPECIMENS ============ */
.section-specimens { position: relative; }

.specimens {
    list-style: none;
    margin-top: 2.4em;
}

.specimen {
    position: relative;
    padding: 36px 0 32px;
    border-top: 1px solid rgba(94, 42, 74, 0.55);
    counter-increment: spec;
}

.specimen:last-child {
    border-bottom: 1px solid rgba(94, 42, 74, 0.55);
}

.spec-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.numeral {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-feature-settings: "smcp";
    font-variant: small-caps;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--vellum-bright);
    letter-spacing: 0.04em;
    min-width: 2.4em;
}

.specimen h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--vellum-bright);
    line-height: 1.1;
    letter-spacing: -0.005em;
}

.spec-tag {
    color: var(--vellum);
    opacity: 0.8;
    margin-bottom: 12px;
    display: inline-block;
}

.spec-body {
    max-width: 64ch;
}

.spec-illus {
    position: absolute;
    right: -150px;
    top: 36px;
    width: 120px;
    height: 120px;
    opacity: 0.78;
}

.spec-illus .ink-stroke {
    stroke-width: 0.8;
}

.fracture-small {
    fill: none;
    stroke: var(--rust);
    stroke-width: 0.8;
    stroke-linecap: round;
    opacity: 0.7;
}

.spec-illus-label {
    font-family: 'EB Garamond', serif;
    font-size: 9px;
    fill: var(--vellum);
    opacity: 0.66;
}

/* phase portrait */
.illus-phase { width: 100%; height: auto; }

.phase-a, .phase-b {
    fill: none;
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4200;
    stroke-dashoffset: 4200;
    transition: stroke-dashoffset 4.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.phase-a { stroke: var(--rust); opacity: 0.78; }
.phase-b { stroke: var(--cobalt); opacity: 0.7; transition-delay: 0.4s; }

.section-specimens.in-view .phase-a,
.section-specimens.in-view .phase-b { stroke-dashoffset: 0; }

.phase-label {
    font-family: 'EB Garamond', serif;
    font-size: 11px;
    fill: var(--vellum);
    opacity: 0.7;
}

/* ============ APPARATUS ============ */
.apparatus-frame {
    margin-top: 2.4em;
    padding: 26px;
    border: 1px solid rgba(94, 42, 74, 0.55);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(10, 4, 20, 0.4) 0%, rgba(26, 11, 46, 0.2) 100%);
    position: relative;
}

.apparatus-frame::before, .apparatus-frame::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--rust);
    opacity: 0.7;
}
.apparatus-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.apparatus-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.apparatus-svg {
    width: 100%;
    height: auto;
    display: block;
}

.apparatus-curve {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(124, 91, 255, 0.4));
    transition: d 80ms linear;
}

.apparatus-axis {
    stroke: var(--rust);
    stroke-width: 0.5;
    stroke-dasharray: 2 4;
    opacity: 0.5;
}

.apparatus-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    fill: var(--vellum);
    opacity: 0.7;
}

.apparatus-caption {
    margin-top: 16px;
    font-size: 0.92rem;
    color: var(--vellum);
    opacity: 0.74;
    font-style: italic;
    line-height: 1.5;
}

/* ============ SCHEMATIC ============ */
.schematic-frame {
    margin-top: 2.4em;
    position: relative;
    padding: 0;
}

.leaked-stamp {
    position: absolute;
    top: 22px;
    right: -10px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.18em;
    color: var(--acid);
    border: 2px solid var(--acid);
    padding: 6px 18px;
    transform: rotate(-8deg);
    z-index: 4;
    background: rgba(10, 4, 20, 0.5);
    text-shadow: 0 0 8px rgba(168, 255, 96, 0.4);
    animation: leakedPulse 4.76s ease-in-out infinite;
    pointer-events: none;
}

@keyframes leakedPulse {
    0%, 100% {
        transform: rotate(-8deg) scale(1);
        opacity: 0.86;
    }
    50% {
        transform: rotate(-7.4deg) scale(1.02);
        opacity: 1;
    }
}

.schematic-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.schematic-svg .ink-stroke {
    stroke: var(--vellum);
    stroke-width: 0.8;
    opacity: 0.7;
}

.schematic-label {
    font-family: 'EB Garamond', serif;
    font-size: 12px;
    fill: var(--vellum-bright);
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.schematic-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    fill: var(--cobalt);
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.sub.revealed .schematic-label,
.sub.revealed .schematic-sub { opacity: 0.9; }

/* ============ SIGN-OFF ============ */
.section-signoff {
    text-align: center;
    padding-bottom: 0;
}

.signoff-line {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: var(--vellum-bright);
    line-height: 1.3;
    margin: 0 auto 1.4em;
    max-width: 36ch;
}

.sigil {
    width: 200px;
    height: 140px;
    margin: 0 auto 1.6em;
    display: block;
}

.sigil-curve {
    fill: none;
    stroke: var(--vellum-bright);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
    transition: stroke-dashoffset 2.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sigil-a { transition-delay: 0s; }
.sigil-b { transition-delay: 0.3s; opacity: 0.78; }
.sigil-c { transition-delay: 0.6s; opacity: 0.6; }

.sigil-bar {
    stroke: var(--rust);
    stroke-width: 0.7;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.6s ease-out 1.2s;
}

.section-signoff.in-view .sigil-curve,
.section-signoff.in-view .sigil-bar { stroke-dashoffset: 0; }

.sigil-mark {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    fill: var(--vellum);
    text-anchor: middle;
    opacity: 0.7;
}

/* ============ HEARTBEAT ============ */
.heartbeat {
    margin-top: 1.2em;
    display: flex;
    justify-content: center;
}

.heartbeat-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 8px rgba(168, 255, 96, 0.6);
    animation: heartbeat 1.19s ease-in-out infinite; /* 0.84 Hz */
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(168, 255, 96, 0.5);
    }
    50% {
        transform: scale(1.36);
        box-shadow: 0 0 18px rgba(168, 255, 96, 0.9), 0 0 32px rgba(168, 255, 96, 0.3);
    }
}

/* ============ TOUCH RIPPLE ============ */
.tap-ripple {
    position: fixed;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cobalt);
    opacity: 0.12;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 700ms ease-out, opacity 700ms ease-out;
    z-index: 1;
}

.tap-ripple.expand {
    transform: translate(-50%, -50%) scale(8);
    opacity: 0;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px) {
    .margin-left, .margin-right {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        max-width: 320px;
        margin: 1.4em 0;
        transform: rotate(-0.4deg);
    }
    .spec-illus {
        position: relative;
        right: 0;
        top: 0;
        margin-top: 12px;
        opacity: 0.84;
    }
}

@media (max-width: 720px) {
    body { padding-block: 8vh; }
    .column { transform: rotate(0.2deg); }
    .anchors {
        position: fixed;
        top: 50%;
        right: 14px;
        flex-direction: column;
        gap: 14px;
        background: transparent;
        transform: translateY(-50%);
    }
    .anchors a:nth-child(1), .anchors a:nth-child(3) { display: none; }
    .leaked-stamp {
        font-size: 1.4rem;
        right: -4px;
        top: 8px;
        padding: 4px 12px;
    }
    .opener { font-size: clamp(2rem, 9vw, 3.4rem); }
    .manifesto-line { font-size: clamp(2rem, 10vw, 3.6rem); }
}

/* ============ SELECTION ============ */
::selection {
    background: var(--rust);
    color: var(--vellum-bright);
}