/* The Architect — synchsupport.org/architect only (loaded after site.css).
   Look: Precursor-style ion-green light on deep teal-black stone. The page constructs itself:
   the hero arch is built stone by stone, text decodes from glyphs, and sections fabricate as they
   scroll in (architect.js). Everything here is scoped under body.arch-page; the Synch nav and footer
   keep the site's own colours.
   Motion only ever starts from a hidden state behind html.js-decode (set by theme-init.js before
   first paint, and never when animations are off), so no-JS and "Stop animations" show the finished page. */

/* ── colours ──
   The hero is always the dark chamber. Everything else in <main> follows the site's light/dark choice:
   light = pale stone and deep green, dark = teal-black and ion green. Same three-way pattern as site.css. */
.arch-page main {
  --blue: #14875c; --blue-ink: #0b6645; --blue-wash: #def3e8;
  --bg: #f3f7f2; --bg-2: #e9f0ea; --panel: #fbfdfa; --line: #d2dfd5;
  --ink: #0d1a14; --ink-2: #33463d; --mute: #5d7067;
  --ion: #14875c; --ion-pale: #8fe0bd; --ion-glow: rgba(20, 135, 92, .35);
  --fab-bg: rgba(255, 255, 255, .72); --fab-line: rgba(20, 135, 92, .55);
  --circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%230b6645' stroke-opacity='.07'%3E%3Cpath d='M0 60h70l30 30v60h60l30-30h50M120 0v30l-20 20M240 200h-60l-20 20v20M40 240v-50l30-30h20'/%3E%3C/g%3E%3Cg fill='%230b6645' fill-opacity='.09'%3E%3Crect x='97' y='87' width='6' height='6'/%3E%3Crect x='157' y='147' width='6' height='6'/%3E%3Crect x='117' y='47' width='6' height='6'/%3E%3C/g%3E%3C/svg%3E");
}
.arch-page .arch-hero, :root[data-theme="dark"] .arch-page main {
  --blue: #3dffb0; --blue-ink: #7fd9b4; --blue-wash: #0c2a1f;
  --bg: #06100d; --bg-2: #081612; --panel: #0b1b16; --line: #173329;
  --ink: #e6fff4; --ink-2: #b9d9cb; --mute: #7fa192;
  --ion: #3dffb0; --ion-pale: #b6ffe0; --ion-glow: rgba(61, 255, 176, .45);
  --fab-bg: rgba(11, 30, 23, .78); --fab-line: rgba(61, 255, 176, .5);
  --circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%233dffb0' stroke-opacity='.06'%3E%3Cpath d='M0 60h70l30 30v60h60l30-30h50M120 0v30l-20 20M240 200h-60l-20 20v20M40 240v-50l30-30h20'/%3E%3C/g%3E%3Cg fill='%233dffb0' fill-opacity='.12'%3E%3Crect x='97' y='87' width='6' height='6'/%3E%3Crect x='157' y='147' width='6' height='6'/%3E%3Crect x='117' y='47' width='6' height='6'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .arch-page main {
    --blue: #3dffb0; --blue-ink: #7fd9b4; --blue-wash: #0c2a1f;
    --bg: #06100d; --bg-2: #081612; --panel: #0b1b16; --line: #173329;
    --ink: #e6fff4; --ink-2: #b9d9cb; --mute: #7fa192;
    --ion: #3dffb0; --ion-pale: #b6ffe0; --ion-glow: rgba(61, 255, 176, .45);
    --fab-bg: rgba(11, 30, 23, .78); --fab-line: rgba(61, 255, 176, .5);
    --circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%233dffb0' stroke-opacity='.06'%3E%3Cpath d='M0 60h70l30 30v60h60l30-30h50M120 0v30l-20 20M240 200h-60l-20 20v20M40 240v-50l30-30h20'/%3E%3C/g%3E%3Cg fill='%233dffb0' fill-opacity='.12'%3E%3Crect x='97' y='87' width='6' height='6'/%3E%3Crect x='157' y='147' width='6' height='6'/%3E%3Crect x='117' y='47' width='6' height='6'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
/* "Higher contrast" in the accessibility panel still wins over the green palette */
:root.a11y-contrast .arch-page main { --ink: #000; --ink-2: #0f1a15; --mute: #26352e; --line: #6f8a7d; --blue-ink: #064d33; }
:root.a11y-contrast .arch-page .arch-hero, :root.a11y-contrast[data-theme="dark"] .arch-page main { --ink: #fff; --ink-2: #effff8; --mute: #c8e2d6; --line: #6f9a88; --blue-ink: #b6ffe0; }
@media (prefers-color-scheme: dark) {
  :root.a11y-contrast:not([data-theme="light"]) .arch-page main { --ink: #fff; --ink-2: #effff8; --mute: #c8e2d6; --line: #6f9a88; --blue-ink: #b6ffe0; }
}

.arch-page main { background: var(--circuit) 0 0 / 240px 240px, var(--bg); color: var(--ink); }
.arch-page main .section--alt { background: color-mix(in srgb, var(--bg-2) 82%, transparent); }
.arch-page main ::selection { background: color-mix(in srgb, var(--ion) 35%, transparent); }

/* buttons: a faint ion edge, brighter on hover; "Add The Architect" carries the light */
.arch-page main .btn { border-color: color-mix(in srgb, var(--ion) 35%, var(--line)); background: color-mix(in srgb, var(--panel) 85%, transparent);
  box-shadow: inset 0 0 14px -8px var(--ion-glow); transition: background .15s, border-color .15s, box-shadow .25s, transform .15s; }
.arch-page main .btn:hover { border-color: var(--ion); box-shadow: inset 0 0 14px -6px var(--ion-glow), 0 0 18px -6px var(--ion-glow); }
.arch-page main .btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 22px -8px var(--ion-glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
.arch-page main .btn--primary:hover { background: var(--blue-ink); border-color: var(--ion-pale); box-shadow: 0 0 28px -4px var(--ion-glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
.arch-page .arch-hero .btn--primary, :root[data-theme="dark"] .arch-page main .btn--primary { color: #04140d; }
.arch-page .arch-hero .btn--primary:hover, :root[data-theme="dark"] .arch-page main .btn--primary:hover { background: var(--ion-pale); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .arch-page main .btn--primary { color: #04140d; }
  :root:not([data-theme="light"]) .arch-page main .btn--primary:hover { background: var(--ion-pale); }
}

/* ── hero: the dark chamber ── */
.arch-hero { position: relative; overflow: hidden; isolation: isolate; padding: 88px 0 80px;
  background: radial-gradient(ellipse 60% 70% at 76% 52%, rgba(61, 255, 176, .13), transparent 70%), var(--bg); border-bottom: 1px solid var(--line); }
.arch-hero .wrap { position: relative; z-index: 1; }
@media (min-width: 901px) { .arch-hero.hero--split .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.arch-hero h1 { color: var(--ink); text-shadow: 0 0 32px rgba(61, 255, 176, .18); }
.arch-hero .lead { color: var(--ink-2); }
.arch-hero__note { margin-top: 14px; font-size: .92rem; }
.arch-hero__mark { display: flex; justify-content: center; }
.arch-mark { width: 100%; max-width: 440px; height: auto; overflow: visible; }
@media (max-width: 900px) {
  .arch-hero { padding: 40px 0 60px; }
  .arch-hero__mark { order: -1; justify-content: flex-start; }
  .arch-mark { max-width: 220px; }
}

/* faint angular circuit traces behind the hero; they open out from the middle on load */
.arch-circuit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.arch-circuit path { fill: none; stroke: var(--ion); stroke-opacity: .16; stroke-width: 1.5; }
.arch-circuit rect { fill: var(--ion); fill-opacity: .3; }

/* ion cubes: small rotated squares of green light drifting about the chamber */
.arch-ions { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.arch-ions i { position: absolute; width: var(--s, 10px); height: var(--s, 10px); background: var(--ion-pale); border: 1px solid var(--ion);
  box-shadow: 0 0 12px 2px var(--ion-glow), inset 0 0 4px var(--ion); opacity: var(--o, .55); transform: rotate(45deg);
  animation: ion-drift var(--t, 22s) ease-in-out infinite alternate; }
.arch-ions i:nth-child(1) { left: 6%;  top: 18%; --s: 8px;  --t: 19s; --dx: 18px; --dy: -24px; }
.arch-ions i:nth-child(2) { left: 46%; top: 12%; --s: 6px;  --t: 24s; --dx: -14px; --dy: 20px; --o: .4; }
.arch-ions i:nth-child(3) { left: 58%; top: 78%; --s: 11px; --t: 27s; --dx: 22px; --dy: -18px; }
.arch-ions i:nth-child(4) { left: 92%; top: 22%; --s: 9px;  --t: 21s; --dx: -20px; --dy: 26px; }
.arch-ions i:nth-child(5) { left: 84%; top: 86%; --s: 6px;  --t: 18s; --dx: -12px; --dy: -22px; --o: .4; }
.arch-ions i:nth-child(6) { left: 28%; top: 90%; --s: 7px;  --t: 25s; --dx: 16px; --dy: -14px; --o: .35; }
.arch-ions i:nth-child(7) { left: 70%; top: 6%;  --s: 12px; --t: 30s; --dx: 10px; --dy: 30px; --o: .45; }
@keyframes ion-drift { to { transform: translate(var(--dx, 12px), var(--dy, -20px)) rotate(225deg); } }

/* ── the arch (inline SVG, same geometry as /assets/architect/icon.svg) ── */
.arch-mark .a-ground { fill: #7fd9b4; opacity: .55; }
.arch-mark .a-pillar, .arch-mark .a-stone { fill: url(#arch-stone); }
.arch-mark .a-key { fill: url(#arch-keystone); }
.arch-mark .a-glow > * { fill: #3dffb0; opacity: 0; }
.arch-mark .a-ground, .arch-mark .a-pillar, .arch-mark .a-stone, .arch-mark .a-key, .arch-mark .a-glow > * { transform-box: fill-box; transform-origin: center; }
.arch-mark .a-pillar { transform-origin: center bottom; }
/* where each voussoir flies in from: outwards along its own radius, tilted */
.a-v1 { --dx: -90px; --dy: -16px; --rot: -16deg; } .a-v7 { --dx: 90px; --dy: -16px; --rot: 16deg; }
.a-v2 { --dx: -74px; --dy: -54px; --rot: -13deg; } .a-v6 { --dx: 74px; --dy: -54px; --rot: 13deg; }
.a-v3 { --dx: -42px; --dy: -84px; --rot: -10deg; } .a-v5 { --dx: 42px; --dy: -84px; --rot: 10deg; }

/* build order (seconds after load): ground draws 0–.45 · pillars rise .3–.85 · voussoirs lock in pairs
   from the bottom .75–1.8 · keystone drops 1.6–2.15 · an ion pulse runs pillar → arch → pillar 2.15–3.3 */
.js-decode .arch-page .a-ground { animation: a-ground .5s cubic-bezier(.6, 0, .2, 1) both; }
.js-decode .arch-page .a-pillar { animation: a-rise .55s cubic-bezier(.2, .7, .2, 1) .3s both; }
.js-decode .arch-page .a-pillar--r { animation-delay: .38s; }
.js-decode .arch-page .a-stone { animation: a-fly .48s cubic-bezier(.25, .9, .3, 1.15) var(--at) both; }
.a-v1 { --at: .75s; } .a-v7 { --at: .87s; } .a-v2 { --at: .99s; } .a-v6 { --at: 1.11s; } .a-v3 { --at: 1.23s; } .a-v5 { --at: 1.35s; }
.js-decode .arch-page .a-key { animation: a-key .6s cubic-bezier(.3, .7, .3, 1) 1.6s both; }
/* glow copies: a quick flash as each stone locks, then the travelling pulse; the keystone keeps breathing */
.js-decode .arch-page .a-glow > * { animation: a-flash .4s ease-out var(--lock, 9s), a-flash .55s ease-in-out var(--pulse); }
.g-pl { --pulse: 2.15s; } .g-v1 { --lock: 1.1s; --pulse: 2.23s; } .g-v2 { --lock: 1.34s; --pulse: 2.31s; } .g-v3 { --lock: 1.58s; --pulse: 2.39s; }
.g-key { --lock: 2.05s; --pulse: 2.47s; } .g-v5 { --lock: 1.7s; --pulse: 2.55s; } .g-v6 { --lock: 1.46s; --pulse: 2.63s; } .g-v7 { --lock: 1.22s; --pulse: 2.71s; } .g-pr { --pulse: 2.79s; }
.js-decode .arch-page .a-glow > .g-pl, .js-decode .arch-page .a-glow > .g-pr { animation: a-flash .55s ease-in-out var(--pulse); }
.js-decode .arch-page .a-glow > .g-key { animation: a-flash .4s ease-out var(--lock), a-flash .55s ease-in-out var(--pulse), a-breathe 4s ease-in-out 3.2s infinite; }
@keyframes a-ground { from { transform: scaleX(0); opacity: 0; } }
@keyframes a-rise { from { transform: scaleY(0); } }
@keyframes a-fly { from { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } 60% { opacity: 1; } }
@keyframes a-key { from { transform: translateY(-170px); opacity: 0; } 55% { transform: translateY(8px); opacity: 1; } 78% { transform: translateY(-3px); } }
@keyframes a-flash { 0%, 100% { opacity: 0; } 35% { opacity: .9; } }
@keyframes a-breathe { 0%, 100% { opacity: 0; } 50% { opacity: .28; } }

/* the circuit opens out and the cubes appear once the arch is powered */
.js-decode .arch-page .arch-circuit { animation: a-open 1.4s cubic-bezier(.6, 0, .2, 1) .2s both; }
.js-decode .arch-page .arch-ions { animation: a-fade 1s ease-out 2.3s both; }
@keyframes a-open { from { clip-path: inset(0 50% 0 50%); opacity: 0; } }
@keyframes a-fade { from { opacity: 0; } }

/* ── decoding text (architect.js) — reuses site.css's .dc-ch letters with our own angular glyphs ── */
.js-decode:not(.a11y-still) .arch-page [data-arch-decode]:not(.dc-ready) { visibility: hidden; }
.js-decode:not(.arch-ready) .arch-page [data-arch-decode]:not(.dc-ready) { animation: dc-fallback 0s 3s forwards; }
.arch-page .dc-ch.is-scr::after { font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'Apple Symbols', ui-monospace, monospace;
  font-weight: 400; color: var(--ion); text-shadow: 0 0 8px var(--ion-glow); }
.arch-page .dc-ch.is-cur::before { background: var(--ion); box-shadow: 0 0 8px var(--ion); }

/* ── fabricating panels ──
   Without JS a .fab is a plain bordered panel. architect.js adds .has-fx and a layer of parts
   (fill, edges, scan, build line, corners); the panel's own background moves into that layer.
   On .is-built: scan line passes → outline draws → fill rises behind a bright build edge → content lands. */
.arch-page .fab { position: relative; padding: 36px; background: var(--fab-bg); border: 1px solid color-mix(in srgb, var(--fab-line) 55%, var(--line)); }
.arch-page .fab.has-fx { background: none; border-color: transparent; }
.arch-page .shots.fab { margin-top: 36px; }
@media (max-width: 640px) { .arch-page .fab { padding: 22px 18px; } }
.fab__fx { position: absolute; inset: -1px; overflow: hidden; pointer-events: none; z-index: 0; }
.fab__fx i { position: absolute; inset: 0; }
.fab > :not(.fab__fx) { position: relative; z-index: 1; }
.fab__fill { background: var(--fab-bg); }
.fab__edge-h { border-top: 1px solid var(--fab-line); border-bottom: 1px solid var(--fab-line); }
.fab__edge-v { border-left: 1px solid var(--fab-line); border-right: 1px solid var(--fab-line); }
/* corner brackets, drawn with four gradients */
.fab__corners { --c: var(--ion); --l: 14px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px var(--l);
  background-repeat: no-repeat; opacity: .8; }
/* the scan line (bottom edge of a full-height layer, so translateY(-100%) puts it above the panel) */
.fab__scan { opacity: 0; background: linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--ion) 14%, transparent)); border-bottom: 2px solid var(--ion); box-shadow: 0 6px 18px -6px var(--ion-glow); }
/* the build edge riding on top of the rising fill */
.fab__rise { opacity: 0; border-top: 2px solid var(--ion-pale); box-shadow: 0 -4px 16px -2px var(--ion-glow), inset 0 6px 14px -8px var(--ion); }

/* waiting to be built (only while motion is allowed and architect.js is running) */
.js-decode:not(.a11y-still) .arch-page .fab:not(.is-built) { opacity: 0; }
.js-decode:not(.arch-ready) .arch-page .fab:not(.is-built) { animation: dc-fallback 0s 4s forwards; }

.is-built .fab__scan { animation: fab-scan .6s cubic-bezier(.5, 0, .5, 1) both; }
.is-built .fab__corners { animation: fab-blink .5s steps(2, jump-none) .1s both; }
.is-built .fab__edge-h { animation: fab-draw-h .5s cubic-bezier(.6, 0, .2, 1) .25s both; }
.is-built .fab__edge-v { animation: fab-draw-v .5s cubic-bezier(.6, 0, .2, 1) .38s both; }
.is-built .fab__fill { animation: fab-fill .65s cubic-bezier(.4, 0, .2, 1) .62s both; }
.is-built .fab__rise { animation: fab-rise .65s cubic-bezier(.4, 0, .2, 1) .62s both; }
.is-built > :not(.fab__fx) { animation: fab-land .5s cubic-bezier(.2, .7, .2, 1) .95s both; }
@keyframes fab-scan { from { transform: translateY(-100%); opacity: 1; } 80% { opacity: 1; } to { transform: none; opacity: 0; } }
@keyframes fab-blink { from { opacity: 0; } }
@keyframes fab-draw-h { from { transform: scaleX(0); } }
@keyframes fab-draw-v { from { transform: scaleY(0); } }
@keyframes fab-fill { from { clip-path: inset(100% 0 0 0); } }
@keyframes fab-rise { from { transform: translateY(100%); opacity: 1; } 85% { opacity: 1; } to { transform: none; opacity: 0; } }
@keyframes fab-land { from { opacity: 0; transform: translateY(8px); } }

/* ── screenshots arrive as holograms: green and scan-lined, until a fabrication beam sweeps across ── */
.arch-page .art { position: relative; border-color: color-mix(in srgb, var(--fab-line) 40%, var(--line)); }
.holo-wrap { position: relative; display: block; }
.holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.holo__tint { background: #3dffb0; mix-blend-mode: color; box-shadow: inset 0 0 0 1px var(--ion); }
.holo__lines { background: repeating-linear-gradient(to bottom, rgba(61, 255, 176, .16) 0 1px, transparent 1px 4px), linear-gradient(rgba(6, 30, 22, .25), rgba(6, 30, 22, .25)); }
.holo__beam { background: linear-gradient(to right, transparent calc(100% - 46px), rgba(182, 255, 224, .35) calc(100% - 4px), #e9fff6 calc(100% - 2px), transparent); }
.is-built .holo-wrap img { animation: holo-flicker .5s linear calc(1s + var(--i, 0) * .18s) both; }
.is-built .holo__tint, .is-built .holo__lines { animation: holo-wipe 2s cubic-bezier(.5, 0, .5, 1) calc(1s + var(--i, 0) * .18s) both; }
.is-built .holo__beam { animation: holo-beam 2s cubic-bezier(.5, 0, .5, 1) calc(1s + var(--i, 0) * .18s) both; }
@keyframes holo-flicker { 0% { opacity: 0; } 18% { opacity: .75; } 26% { opacity: .2; } 44% { opacity: .9; } 52% { opacity: .45; } 70%, 100% { opacity: 1; } }
@keyframes holo-wipe { 0% { opacity: 0; clip-path: inset(0 0 0 0); } 12%, 45% { opacity: 1; clip-path: inset(0 0 0 0); } 92% { opacity: 1; clip-path: inset(0 0 0 100%); } 100% { opacity: 0; clip-path: inset(0 0 0 100%); } }
@keyframes holo-beam { 0%, 45% { opacity: 0; transform: translateX(-100%); } 50% { opacity: 1; } 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* stop animations: every part sits in its finished state */
.a11y-still .arch-page .fab { opacity: 1; }