/* =====================================================================
   0x0A – SUB//STRATUM · Design « C2 — Os & sang »
   ===================================================================== */

:root {
    --bg: #0d0b09;
    --fg: #ece0c4;
    --dim: #a39780;
    --glow: rgba(236, 224, 196, 0.28);
    --panel: rgba(13, 11, 9, 0.86);
    --title-shadow: #8a1c10;
    --ring-on: #ff4b2b;
    --ring-off: rgba(236, 224, 196, 0.14);
    --ring-glow: rgba(255, 75, 43, 0.5);
    --label-off: rgba(236, 224, 196, 0.35);
    --flash: rgba(255, 90, 60, 0.26);
    --ascii-color: #da581d;
    --ascii-opacity: 1;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}

body {
    color: var(--fg);
    font-family: 'VT323', 'Courier New', Courier, monospace;
    font-size: clamp(19px, 1.65vw, 24px);
    line-height: 1.22;
    text-shadow: 0 0 6px var(--glow);
}

button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.screen { position: fixed; inset: 0; }

/* ── Écran 1 : chargement ── */

.screen--loading {
    z-index: 10;
    background: var(--bg);
    transition: opacity 0.6s ease;
}
.screen--loading.is-leaving { opacity: 0; }

.flash-layer { position: absolute; inset: 0; pointer-events: none; }
.flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 45% at 50% 58%, var(--flash), rgba(0, 0, 0, 0) 75%);
    animation: flash 0.8s ease-out 1 both;
}
.flash--big { background: radial-gradient(ellipse 80% 70% at 50% 58%, var(--flash), rgba(0, 0, 0, 0) 80%); }

.loading-inner {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.2vh, 24px);
    padding: 24px 16px;
    animation: rise 1.2s ease both;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.brand-presents {
    font-family: 'Pixelify Sans', monospace;
    font-size: 16px;
    letter-spacing: 0.2em;
    color: var(--dim);
    text-shadow: none;
}
.brand-title {
    font-family: 'Jacquard 24', serif;
    font-weight: 400;
    font-size: clamp(40px, 6.4vw, 96px);
    line-height: 1;
    color: var(--fg);
    text-shadow: 4px 4px 0 var(--title-shadow), 8px 8px 0 #000;
}
.brand-title .zero {
    display: inline-block;
    width: 0.3256em;
    height: 0.5814em;
    vertical-align: baseline;
    overflow: visible;
    filter: drop-shadow(4px 4px 0 var(--title-shadow)) drop-shadow(4px 4px 0 #000);
}

.funnel {
    position: relative;
    flex: none;
    width: min(900px, 100%, calc((100vh - 420px) * 2.25));
    aspect-ratio: 900 / 400;
}
.ring, .ring-wave {
    position: absolute;
    border-radius: 50%;
}
.ring {
    border: 1px solid var(--ring-off);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.ring.is-lit {
    border-color: var(--ring-on);
    box-shadow: 0 0 16px var(--ring-glow), inset 0 0 16px var(--ring-glow);
    animation: ignite 1.1s ease-out 1;
}
.ring.is-current { border-width: 2px; }
.ring-wave {
    border: 2px solid var(--ring-on);
    opacity: 0;
    pointer-events: none;
}
.ring-wave.is-lit { animation: wave 1.3s ease-out 1; }
.ring-label {
    position: absolute;
    transform: translate(0.5em, 0.7em);
    font-family: 'Pixelify Sans', monospace;
    font-size: clamp(9px, 1.1vw, 14px);
    line-height: 1;
    color: var(--label-off);
    text-shadow: none;
    transition: color 0.4s ease;
}
.ring-label.is-lit {
    color: var(--ring-on);
    animation: lab 0.9s ease-out 1;
}
.core {
    position: absolute;
    left: 44%;
    top: 72.5%;
    width: 12%;
    height: 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--ring-on), rgba(0, 0, 0, 0));
    opacity: 0;
}
.core.is-on { animation: pulse 2.4s ease-in-out infinite; }

.loading-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    width: 100%;
    max-width: 940px;
}
.loading-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.6em;
    font-size: clamp(24px, 2.25vw, 32px);
    white-space: pre;
}
.loading-status {
    font-size: clamp(22px, 2vw, 28px);
    color: var(--dim);
    text-shadow: none;
}
@media (max-width: 600px) {
    .loading-bar { font-size: clamp(15px, 4.4vw, 24px); }
    .loading-status { font-size: 20px; }
}

.btn-cta {
    margin-top: 6px;
    min-height: 52px;
    padding: 0 28px;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--fg);
    font-family: 'VT323', monospace;
    font-size: 28px;
    letter-spacing: 0.08em;
    text-shadow: inherit;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.btn-cta:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-cta:not(:disabled):hover,
.chip:hover,
.btn-son:hover,
.btn-close:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.14); }

/* ── Écran 2 : animation ASCII + Seuil ── */

.screen--main { z-index: 1; background: var(--bg); }

.ascii-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ascii-art {
    flex: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 6px;
    line-height: 1;
    white-space: pre;
    letter-spacing: 0;
    color: var(--ascii-color);
    opacity: var(--ascii-opacity);
    text-shadow: none;
}

.intro-note {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s steps(3);
    z-index: 2;
}
.intro-note.is-visible { opacity: 1; }
.intro-note__box {
    max-width: 62ch;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 18px 22px;
    background: var(--panel);
}
.intro-note__l2 { opacity: 0; transition: opacity 0.2s steps(2) 0.7s; }
.intro-note.is-visible .intro-note__l2 { opacity: 1; }

.seuil {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    z-index: 5;
}
.seuil-bar {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 24px;
    padding: 6px 8px 6px 16px;
    background: var(--panel);
    color: var(--fg);
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: seuil-bar-in 1s ease forwards;
}
.seuil-bar__label,
.seuil-bar__action {
    opacity: 0;
    animation: seuil-bar-content-in 0.65s ease forwards;
    animation-delay: 1s;
}
.seuil-bar__title {
    font-family: 'Jacquard 24', serif;
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1;
    color: var(--fg);
    text-transform: none;
    letter-spacing: 0.01em;
    text-shadow: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.seuil-bar__title .zero {
    display: inline-block;
    width: 0.3256em;
    height: 0.5814em;
    vertical-align: baseline;
    overflow: visible;
}
.btn-son {
    min-height: 42px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fg);
    color: var(--bg);
    border: 4px double var(--fg);
    font-family: 'VT323', monospace;
    font-size: 22px;
    letter-spacing: 0.08em;
    text-shadow: none;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.seuil-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 16px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadein 0.3s steps(3) both;
}
.seuil-panel {
    width: min(900px, 100%);
    margin: auto;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    padding: 22px;
    box-sizing: border-box;
}
.seuil-intro {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 12rem;
    transition:
        max-height 0.55s ease,
        opacity 0.45s ease,
        margin 0.55s ease,
        transform 0.55s ease;
}
.seuil-intro.is-dismissed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    transform: translateY(-1.25em);
    pointer-events: none;
}
.seuil-text { max-width: 64ch; }
.seuil-prose.is-hidden { display: none; }

.seuil-scroll.is-engaged {
    align-items: flex-start;
    justify-content: flex-start;
}

.seuil-panel--engaged .seuil-countdown {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-top: 0;
    background: var(--panel);
}

.countdown-box {
    position: relative;
    border: 4px double var(--fg);
    padding: 26px 18px 16px;
    margin: 24px 0 14px;
    transition: margin 0.55s ease;
}
.box-tab {
    position: absolute;
    top: -0.75em;
    left: 18px;
    padding: 0 10px;
    background: var(--bg);
    letter-spacing: 0.08em;
}
.countdown-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 18px;
}
.unit {
    flex: 1 1 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.unit__value {
    font-size: clamp(44px, 6vw, 76px);
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
}
.unit__label {
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-shadow: none;
}

.chip-log,
.log {
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    min-height: 0;
}
.chip-log {
    position: relative;
    overflow: hidden;
    flex: none;
    margin-bottom: 14px;
}
.log:empty { display: none; }

.chip-log__entry,
.log__entry {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    max-width: 64ch;
    animation: chip-msg-in 0.35s ease both;
}
.chip-log__entry.is-leaving,
.log__entry.is-leaving {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    z-index: 1;
    animation: chip-msg-out 0.45s ease forwards;
    pointer-events: none;
}
.chip-log__cmd,
.log__cmd {
    letter-spacing: 0.04em;
}
.chip-log__msg,
.log__msg {
    max-width: 64ch;
}

.prompt { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.prompt__line { display: flex; align-items: center; gap: 10px; }
.prompt__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--fg);
    caret-color: var(--fg);
    text-shadow: inherit;
    text-transform: uppercase;
}
.prompt__input:focus { outline: none; }
.prompt__input::placeholder { color: inherit; opacity: 0.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--fg);
    font-family: 'VT323', monospace;
    font-size: 0.85em;
    letter-spacing: 0.06em;
    text-shadow: inherit;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

/* Pop-up son */
.volume-pop {
    position: absolute;
    z-index: 6;
    top: 92px;
    right: 16px;
    width: min(500px, calc(100% - 32px));
    padding: 28px 18px 16px;
    background: var(--bg);
    border: 4px double var(--fg);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fadein 0.2s steps(2) both;
}
.vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.vrow__label { flex: 0 0 8ch; text-shadow: none; }
.vrow__val { flex: 0 0 3.5ch; text-align: right; text-shadow: none; }
.vbar {
    position: relative;
    flex: none;
    min-height: 40px;
    display: flex;
    align-items: center;
}
.vbar__text { white-space: pre; letter-spacing: -0.02em; pointer-events: none; text-shadow: none; }
.vbar:focus-within { outline: 2px solid currentColor; outline-offset: 4px; }
.vbar input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    background: transparent;
}
.vbar input:focus-visible { outline: none; }
.vbar input::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.vbar input::-webkit-slider-thumb { appearance: none; width: 4px; height: 36px; background: transparent; }
.vbar input::-moz-range-track { background: transparent; }
.vbar input::-moz-range-thumb { width: 4px; height: 36px; border: 0; background: transparent; }
.volume-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.btn-close {
    min-height: 44px;
    padding: 0 16px;
    background: var(--fg);
    color: var(--bg);
    border: 1px solid var(--fg);
    text-shadow: none;
    letter-spacing: 0.06em;
    cursor: pointer;
}

/* ── Effet écran cathodique ── */

.crt { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.crt--scan {
    background: repeating-linear-gradient(to bottom,
        rgba(0, 0, 0, 0.06) 0px, rgba(0, 0, 0, 0.06) 1px,
        rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3px);
}
.crt--vignette { box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.85); }
.crt--flicker { background: var(--fg); opacity: 0; animation: flick 4s ease-in-out infinite; }

/* ── Animations ── */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes seuil-bar-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes seuil-bar-content-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ignite {
    0% { filter: brightness(3.4) saturate(0.35); transform: scale(1.04); border-width: 3px; }
    30% { filter: brightness(2); }
    100% { filter: none; transform: none; }
}
@keyframes wave { 0% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.34); } }
@keyframes lab {
    0% { transform: translate(0.5em, 0.7em) scale(2.1); filter: brightness(2.6); }
    100% { transform: translate(0.5em, 0.7em) scale(1); filter: none; }
}
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes flick { 0%, 100% { opacity: 0; } 50% { opacity: 0.05; } }
@keyframes chip-msg-in {
    from { opacity: 0; transform: translateY(0.6em); }
    to { opacity: 1; transform: none; }
}
@keyframes chip-msg-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(calc(-100% - 0.9em)); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-inner, .ring.is-lit, .ring-wave.is-lit, .ring-label.is-lit,
    .flash, .core.is-on, .crt--flicker, .seuil-bar, .seuil-bar__label, .seuil-bar__action,
    .seuil-scroll, .volume-pop, .chip-log__entry, .log__entry, .seuil-intro {
        animation: none;
        transition: none;
    }
    .seuil-bar, .seuil-bar__label, .seuil-bar__action { opacity: 1; }
    .seuil-intro.is-dismissed { max-height: 0; opacity: 0; }
    .core.is-on { opacity: 0.8; }
    .flash { display: none; }
}