/* The Door - the SCENE (public threshold only, scoped to .door-page).
   base.css is the shared material system (the chiseled crystal-panels, buttons, fields,
   and ithildin inscription that /intranet/home wears). This file does NOT re-skin that;
   it adds only what the door needs on top of it:
     1. an atmospheric scene behind the content (cold moss / wet basalt / fog),
     2. an aperture that frames the column as a lit opening in a dark rock face,
     3. the foxfire seam on the invite field (the one signature gesture),
     4. an intentional lower door-face where the sliding form reserves height.
   Cold, wet, dim. "A website you'd spot a Sasquatch on." No warmth anywhere.
   See intent/vision/the-door-theme.md. Loaded after base.css on registrations#new. */

.door-page {
    --moon:    #8cac96;
    --moon-hi: #cdd7d2;
    --glow:    #4bbadb;   /* schiller cyan; the one rare cold accent */
    position: relative;
    z-index: 1;
    isolation: isolate;
    /* width + panel craft come from base.css (.content-wrapper + .crystal-panel). */
}

/* ═══════════════════════ Atmosphere: the wet rock face ═══════════════════════ */
/* Unified surface: the door now shares the global wet-runnel from base.css instead of a
   separate opaque scene. Hidden so one theme carries across door and interior.
   (The .ds-grade/.ds-moon/... rules below are now dead; slated for removal at cleanup.) */
.ds-scene { display: none; }
.ds-scene > * { position: absolute; inset: 0; }

.ds-grade {
    background: linear-gradient(178deg, #0f1712 0%, #0a0d09 46%, #080a07 74%, #0a0d0a 100%);
}
/* The one cool light: moon through fog, over the column. */
.ds-moon {
    background: radial-gradient(34% 40% at 50% 18%,
        rgba(205,215,210,0.13) 0%, rgba(130,158,148,0.06) 44%, transparent 74%);
    mix-blend-mode: screen;
    filter: blur(12px);
    animation: ds-breathe 12s ease-in-out infinite;
}
.ds-fog { mix-blend-mode: screen; will-change: transform; }
.ds-fog-1 {
    background: radial-gradient(50% 15% at 50% 40%, rgba(156,170,164,0.12), transparent 72%);
    filter: blur(26px);
    opacity: 0.9;
    animation: ds-drift-a 38s ease-in-out infinite;
}
.ds-fog-2 {
    background: radial-gradient(56% 18% at 52% 66%, rgba(120,140,130,0.10), transparent 74%);
    filter: blur(30px);
    opacity: 0.8;
    animation: ds-drift-b 50s ease-in-out infinite;
}
/* Damp moss ground pooling at the base of the door. */
.ds-floor {
    background: radial-gradient(40% 26% at 50% 100%,
        rgba(48,82,59,0.28) 0%, rgba(31,55,41,0.15) 44%, transparent 72%);
    mix-blend-mode: screen;
    filter: blur(16px);
}
/* Soft cool light band behind the column so the center is brightest. */
.ds-hall {
    background: radial-gradient(34% 86% at 50% 42%,
        rgba(120,150,140,0.09) 0%, rgba(70,96,78,0.05) 46%, transparent 72%);
    mix-blend-mode: screen;
    filter: blur(20px);
    animation: ds-breathe 9s ease-in-out infinite;
}
/* Painter's tooth. */
.ds-grain {
    opacity: 0.28;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.53 0 0 0 0 0.5 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}
/* The aperture: wall the flanks to frame-dark so the column reads as an opening in stone. */
.ds-vignette {
    background:
        linear-gradient(90deg, #05070a 0%, rgba(5,7,10,0) 18%, rgba(5,7,10,0) 82%, #05070a 100%),
        radial-gradient(54% 82% at 50% 42%, transparent 42%, rgba(4,7,10,0.82) 100%);
}

@keyframes ds-breathe { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes ds-drift-a { 0%,100% { transform: translate3d(-2%,0,0); } 50% { transform: translate3d(3%,-1%,0); } }
@keyframes ds-drift-b { 0%,100% { transform: translate3d(2%,0,0); } 50% { transform: translate3d(-3%,1%,0); } }
@media (prefers-reduced-motion: reduce) { .ds-moon, .ds-fog, .ds-hall { animation: none; } }

/* ═══════════════════════ The seam ═══════════════════════ */
/* The trough itself is .ds-seam-field, shared with any field in base.css. This wrapper
   only adds the lower-lip line accent below it. */
.door-page .ds-seam { position: relative; }
/* A seam of light along the lower lip: fog-grey at rest, foxfire on presence. */
.door-page .ds-seam::after {
    content: '';
    position: absolute;
    left: 6px; right: 6px; bottom: 2px;
    height: 1px;
    background: rgba(163,172,163,0.28);
    background: color-mix(in oklab, rgba(163,172,163,0.28) calc((1 - var(--presence)) * 100%), var(--moss-live) calc(var(--presence) * 100%));
    opacity: 0.85;
    box-shadow: 0 0 5px rgba(75,186,219,0.28);
    pointer-events: none;
    transition: box-shadow 0.5s ease, opacity 0.5s ease;
}
.door-page .ds-seam:focus-within::after {
    opacity: 1;
    background: var(--glow);
    box-shadow: 0 0 7px rgba(75,186,219,0.85), 0 0 18px rgba(75,186,219,0.5);
}

/* The redacted line reads as a deliberate wink, not broken text: reveal on presence. */
.door-page .redacted-font { cursor: default; }
.door-page li:hover .redacted-font { font-family: var(--sans, sans-serif); }

/* ═══════════════════════ Invite panel: the field-station component ═══════════════════════ */
/* Ported from the Design board's diagonal-cleft invite panel: a mono label with a leading
   rule, a spec-line hint (the code is a 4-word BIP39 mnemonic), a near-black trough with a
   foxfire underline, and a boxed mono enter cut on the same diagonal as the field. */
.door-page .seam-lab {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    margin-bottom: 0.85rem;
}
.door-page .seam-lab label { margin: 0; }
.door-page .seam-lab h2 {
    font-family: var(--mono); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--fog-dim); text-align: left;
    display: flex; align-items: center; gap: 0.7rem;
}
.door-page .seam-lab h2::before {
    content: ''; width: 22px; height: 1px; background: var(--moss-live); opacity: 0.7;
}
.door-page .seam-hint {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--fog-dim); white-space: nowrap;
}

/* the trough: near-black fill, moss ring at rest, foxfire ring + bloom when engaged */
.door-page .ds-seam-field {
    color: var(--silver-lit);
    background: rgba(0,0,0,.6);
    border: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.8), inset 0 0 0 1px rgba(75,186,219,.35),
        inset -2px -1px 16px rgba(75,186,219,.16), 0 0 14px rgba(75,186,219,.10);
    transition: box-shadow 0.6s ease;
}
.door-page .ds-seam-field:focus {
    outline: none;
    box-shadow: inset 0 3px 7px rgba(0,0,0,.8), inset 0 0 0 1px var(--glow),
        inset -2px -1px 18px rgba(75,186,219,.34), 0 0 34px rgba(75,186,219,.26);
}

/* boxed mono enter, cut on the same diagonal as the trough */
.door-page .enter {
    margin-top: 1.05rem; display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--glow); padding: 0.72rem 1.5rem; cursor: pointer; background: var(--basalt-lit);
    border: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    /* ithildin: rest-state foxfire that swells with the dark-adaptation clock (--presence). */
    text-shadow: 0 0 calc(4px + 8px * var(--presence)) rgba(75,186,219, calc(0.25 + 0.40 * var(--presence)));
    box-shadow: inset 1px 1px 0 rgba(75,186,219,.28),
        inset 0 0 0 1px rgba(75,186,219, calc(0.22 + 0.40 * var(--presence))),
        0 0 calc(10px + 24px * var(--presence)) rgba(75,186,219, calc(0.10 + 0.24 * var(--presence))),
        6px 6px 12px rgba(0,0,0,.5);
}
/* The ease lives on the hover state only: the rest state follows the presence clock,
   and a transition there would restart on every tick. */
.door-page .enter:hover,
.door-page .enter:focus-visible {
    transition: color 0.4s ease, box-shadow 0.4s ease, text-shadow 0.4s ease;
    color: var(--silver-lit);
    text-shadow: 0 0 14px rgba(75,186,219,.60);
    box-shadow: inset 1px 1px 0 rgba(75,186,219,.40), inset 0 0 0 1px var(--glow),
        0 0 30px rgba(75,186,219,.34), 6px 6px 12px rgba(0,0,0,.5);
    outline: none;
}

/* Moss seeps along the lower lip of each carved panel: plantlife in the recesses. */
.door-page .crystal-panel::after {
    content: ''; position: absolute; left: 24px; bottom: 7px; width: 40%; height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--moss-live), transparent);
    opacity: 0.55; filter: blur(0.4px);
}

.door-page .registration-form {
    min-height: 0;
    position: relative;
    transition: height 0.45s ease;
}

/* ═══════════════════════ The wordmark: Redaction ═══════════════════════ */
/* The degrading typeface (halftone dot grid). Self-hosted: vendored from
   @fontsource/redaction-35 via bin/setup-js in dev and the matching Dockerfile
   RUN block in the image, falls back to the serif stack if missing. */
@font-face {
    font-family: 'Redaction 35';
    font-weight: 400;
    font-display: swap;
    src: url('/the-door/fonts/redaction-35-400.woff2') format('woff2');
}
.door-page {
    --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
/* Only the letterforms change; base.css keeps the presence color-climb, relief, and glow. */
.door-page h1 {
    font-family: 'Redaction 35', var(--serif);
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.015em;
    text-shadow: 0 0 1px rgba(228,236,232,0.5), 0 0 12px rgba(75,186,219,0.22);
}

/* On rejection, the welcome degrades: same Redaction family, a heavily eroded grade
   instead of the crisp one. Redaction is numbered by erosion amount (10 crisp ... 100
   heavily eroded); 100 is the most extreme dial. Mirrors the Redaction 35 @font-face
   above: self-hosted the same way. Loads lazily the first time
   body.door-angry .door-welcome matches, so a fresh calm visit never fetches it. */
@font-face {
    font-family: 'Redaction 100';
    font-weight: 400;
    font-display: swap;
    src: url('/the-door/fonts/redaction-100-400.woff2') format('woff2');
}
/* A font-family swap only changes glyph shapes; it cannot raise a pixel's luminance,
   so it is safe alongside the hard-snap rule in base.css. Layers on top of the
   blur/opacity/transform recede already applied to these same elements in base.css:
   the greeting erodes, blurs, and drifts away together. */
body.door-angry .door-welcome h1,
body.door-angry .door-welcome .subtitle,
body.door-angry .door-welcome p {
    font-family: 'Redaction 100', var(--serif);
}

/* ═══════════════════════ Services as a field-log manifest ═══════════════════════ */
.door-page .svc-log { list-style: none; margin: 1rem 0 0; padding: 0; }
.door-page .svc-log li {
    display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline;
    margin: 0; padding: 0.8rem 0; border-bottom: 1px solid rgba(163,172,163,0.14);
}
.door-page .svc-log li:last-child { border-bottom: 0; }
.door-page .svc-log .k {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fog-dim); white-space: nowrap;
}