@import url("./project-theme-core.css");

body.signature-room {
  color-scheme: dark;
  background:
    radial-gradient(circle at var(--cursor-x, 72%) var(--cursor-y, 28%), color-mix(in srgb, var(--project-accent) 17%, transparent), transparent 22rem),
    linear-gradient(color-mix(in srgb, var(--project-text) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--project-text) 3%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 72% 30%, var(--project-bg-alt), var(--project-bg) 68%);
  background-size: auto, var(--project-grid) var(--project-grid), var(--project-grid) var(--project-grid), auto;
}

.signature-room .room { align-items: stretch; padding: clamp(.75rem, 2vw, 1.5rem); }
.signature-room .room::before { inset: clamp(.75rem, 2vw, 1.5rem); border-color: var(--project-border); border-radius: calc(var(--project-radius) + 8px); background: color-mix(in srgb, var(--project-bg) 68%, transparent); box-shadow: inset 0 0 100px rgba(0,0,0,.22), var(--project-shadow); }
.signature-room .room-id,.signature-room .coordinate { color: var(--project-text-muted); }

.signature-shell { position:relative; z-index:1; display:grid; grid-template-rows:auto 1fr auto; width:min(100%,88rem); min-height:calc(100dvh - clamp(1.5rem,4vw,3rem)); margin:auto; margin-top:3.3rem; overflow:hidden; border:1px solid var(--project-border); border-radius:var(--project-radius); background:color-mix(in srgb,var(--project-bg) 73%,transparent); box-shadow:var(--project-shadow),var(--project-glow); animation:signature-enter .55s var(--project-transition) both; }
.signature-shell::before { position:absolute; inset:0; z-index:-1; content:""; background:linear-gradient(115deg,transparent 0 47%,color-mix(in srgb,var(--project-accent) 8%,transparent) 48% 52%,transparent 53%),linear-gradient(to bottom,transparent 68%,color-mix(in srgb,var(--project-accent-secondary) 12%,transparent)); pointer-events:none; }
.signature-shell::after { position:absolute; inset:4.5rem 1.2rem 3.8rem; z-index:-1; content:""; border:1px solid color-mix(in srgb,var(--project-border) 48%,transparent); clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); opacity:.38; pointer-events:none; }
.signature-bar,.signature-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border-block:1px solid var(--project-border); color:var(--project-text-muted); font:750 .72rem/1.4 var(--project-font-mono); letter-spacing:.13em; text-transform:uppercase; }
.signature-bar > span { padding:.42rem .7rem; border:1px solid var(--project-border); border-radius:999px; color:var(--project-text); }
.signature-exit { min-height:2.6rem; display:inline-flex; align-items:center; color:var(--project-text); }
.signature-stage { display:grid; grid-template-columns:minmax(0,.8fr) minmax(20rem,1.2fr); gap:clamp(1.4rem,5vw,5rem); align-items:center; padding:clamp(3.8rem,8vw,7rem) clamp(1rem,5vw,5rem); perspective:1200px; }
.signature-kicker { margin:0 0 1.1rem; color:var(--project-accent); font:800 .74rem/1.4 var(--project-font-mono); letter-spacing:.2em; text-transform:uppercase; }
.signature-title { margin:0; max-width:11ch; font:800 clamp(3.3rem,8vw,7.5rem)/.84 var(--project-font); letter-spacing:-.075em; text-transform:uppercase; }
.signature-statement { max-width:39rem; margin:1.6rem 0 0; color:var(--project-text-muted); font-size:clamp(1rem,1.65vw,1.28rem); line-height:1.6; }
.signature-signals { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.5rem; }
.signature-signals span { padding:.5rem .7rem; border:1px solid var(--project-border); border-radius:calc(var(--project-radius) * .65); background:var(--project-surface); color:var(--project-text); font:800 .68rem/1 var(--project-font-mono); letter-spacing:.1em; }
.return-memory { min-height:1.6rem; margin:1.2rem 0 0; color:var(--project-accent-secondary); font:700 .72rem/1.5 var(--project-font-mono); letter-spacing:.1em; text-transform:uppercase; }

.signature-machine { position:relative; min-height:min(61dvh,40rem); padding:clamp(1rem,3vw,2.2rem); display:grid; grid-template-rows:1fr auto auto; gap:1.2rem; overflow:hidden; border:1px solid var(--project-border); border-radius:var(--project-radius); background:radial-gradient(circle at center,color-mix(in srgb,var(--project-accent-secondary) 18%,transparent),transparent 47%),var(--project-surface); box-shadow:inset 0 0 80px rgba(0,0,0,.2),var(--project-glow); transform:rotateY(-2deg); transition:transform var(--project-transition),border-color var(--project-transition); }
.signature-machine:focus-within,.signature-machine:hover { border-color:color-mix(in srgb,var(--project-accent) 62%,var(--project-border)); transform:rotateY(0); }
.signal-map { position:relative; min-height:18rem; margin:0; padding:0; list-style:none; }
.signal-node { position:absolute; width:clamp(6rem,11vw,9rem); aspect-ratio:1; display:grid; place-items:center; padding:.7rem; border:1px solid var(--project-border); border-radius:50%; background:color-mix(in srgb,var(--project-surface-strong) 86%,transparent); box-shadow:0 18px 45px rgba(0,0,0,.24); color:var(--project-text); font:800 .7rem/1.25 var(--project-font-mono); letter-spacing:.08em; text-align:center; }
.signal-node:nth-child(1){left:4%;top:8%}.signal-node:nth-child(2){right:5%;top:3%}.signal-node:nth-child(3){left:19%;bottom:2%}.signal-node:nth-child(4){right:18%;bottom:6%}
.signal-node::after { position:absolute; left:100%; width:clamp(2rem,9vw,8rem); height:1px; content:""; background:linear-gradient(90deg,var(--project-accent),transparent); transform:rotate(var(--line-angle,18deg)); transform-origin:left; opacity:.48; }
.signal-node:nth-child(2)::after,.signal-node:nth-child(4)::after{left:auto;right:100%;transform-origin:right}
.project-readout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
.project-readout span { min-height:4.3rem; padding:.7rem; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--project-border); border-radius:calc(var(--project-radius) * .55); background:color-mix(in srgb,var(--project-surface-strong) 72%,transparent); }
.project-readout small { color:var(--project-text-muted); font:750 .6rem/1.2 var(--project-font-mono); letter-spacing:.1em; }
.project-readout output { color:var(--project-text-muted); font:850 clamp(.72rem,1.2vw,.95rem)/1.15 var(--project-font-mono); }
.project-readout.is-live output { color:var(--project-accent); text-shadow:0 0 18px color-mix(in srgb,var(--project-accent) 38%,transparent); }
.sequence-running .signal-node { animation:signal-wake .65s ease both; }.sequence-running .signal-node:nth-child(2){animation-delay:.22s}.sequence-running .signal-node:nth-child(3){animation-delay:.44s}.sequence-running .signal-node:nth-child(4){animation-delay:.66s}
.signature-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; margin:0; padding:0; list-style:none; }
.signature-steps li { min-height:3.5rem; padding:.7rem; display:flex; align-items:center; border-top:1px solid var(--project-border); color:color-mix(in srgb,var(--project-text-muted) 58%,transparent); font:750 .65rem/1.35 var(--project-font-mono); letter-spacing:.08em; }
.signature-steps li.is-active { color:var(--project-warning); border-color:var(--project-warning); }.signature-steps li.is-complete { color:var(--project-text); border-color:var(--project-accent); }
.signature-action { min-height:3.25rem; padding:.9rem 1.2rem; border:1px solid var(--project-accent); border-radius:calc(var(--project-radius) * .7); background:var(--project-accent); color:var(--project-bg); cursor:pointer; font:850 .76rem/1 var(--project-font-mono); letter-spacing:.12em; text-transform:uppercase; transition:transform var(--project-transition),box-shadow var(--project-transition); }
.signature-action:hover,.signature-action:focus-visible { outline:0; transform:translateY(-2px); box-shadow:0 14px 40px color-mix(in srgb,var(--project-accent) 25%,transparent); }.signature-action:disabled{cursor:progress;opacity:.72}
.signature-room.project-complete .signature-machine { border-color:color-mix(in srgb,var(--project-accent) 75%,var(--project-border)); }
.signature-room.project-complete .signature-action { background:transparent; color:var(--project-accent); }

/* A shared mechanism with project-specific spatial expression. */
[data-visual="meter"] .signal-node,[data-visual="dashboard"] .signal-node { width:42%; height:4.4rem; aspect-ratio:auto; border-radius:calc(var(--project-radius) * .55); }
[data-visual="meter"] .signal-node:nth-child(1),[data-visual="dashboard"] .signal-node:nth-child(1){left:2%;top:5%}[data-visual="meter"] .signal-node:nth-child(2),[data-visual="dashboard"] .signal-node:nth-child(2){right:2%;top:27%}[data-visual="meter"] .signal-node:nth-child(3),[data-visual="dashboard"] .signal-node:nth-child(3){left:2%;bottom:25%}[data-visual="meter"] .signal-node:nth-child(4),[data-visual="dashboard"] .signal-node:nth-child(4){right:2%;bottom:3%}
[data-visual="language"] .signal-node { border-radius:999px; aspect-ratio:auto; min-height:4.2rem; }
[data-visual="vision"] .signal-map { background:linear-gradient(var(--project-border) 1px,transparent 1px),linear-gradient(90deg,var(--project-border) 1px,transparent 1px);background-size:38px 38px;clip-path:inset(0 round var(--project-radius));}
[data-visual="vision"] .signal-map::after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,transparent,var(--project-accent),transparent);opacity:.25;transform:translateX(-100%);animation:vision-sweep 4.8s ease-in-out infinite}
[data-visual="riad"] .signal-node { border-radius:50% 50% calc(var(--project-radius) * .45) calc(var(--project-radius) * .45); }
[data-visual="compass"] .signal-map::before { position:absolute; inset:50% auto auto 50%; width:8rem; aspect-ratio:1; content:"K"; display:grid; place-items:center; border:1px solid var(--project-accent); border-radius:50%; color:var(--project-accent); font:800 2rem var(--project-font); transform:translate(-50%,-50%) rotate(-12deg); }
[data-visual="spark"] .signal-node { border-radius:35% 65% 56% 44%; }
[data-visual="flight"] .signal-node,[data-visual="air-network"] .signal-node { border-radius:999px 999px 18px 18px; }
[data-visual="memory"] .signal-node { border-style:dashed; box-shadow:0 0 42px color-mix(in srgb,var(--project-accent) 15%,transparent); }
[data-visual="arena"] .signal-map::before { position:absolute; inset:12% 42%; content:"VS"; display:grid; place-items:center; border-block:1px solid var(--project-accent); color:var(--project-accent); font:900 1.4rem var(--project-font-mono); }
[data-visual="radar"] .signal-map { overflow:hidden; border-radius:50%; background:repeating-radial-gradient(circle,var(--project-border) 0 1px,transparent 1px 3.5rem); }
[data-visual="radar"] .signal-map::before { position:absolute; inset:50% 0 auto 50%; width:50%; height:1px; content:""; background:linear-gradient(90deg,var(--project-accent),transparent); transform-origin:left; animation:radar-room 4s linear infinite; }
[data-visual="readiness"] .signal-node { border-radius:2px; border-left:4px solid var(--project-accent); }
[data-visual="governance"] .signal-map::before { position:absolute; left:50%; top:8%; bottom:8%; width:1px; content:""; background:var(--project-accent); opacity:.45; }
[data-visual="city"] .signal-node { border-radius:2px; width:clamp(5rem,8vw,7rem); }
[data-visual="city"] .signal-node:nth-child(1){height:45%}[data-visual="city"] .signal-node:nth-child(2){height:62%}[data-visual="city"] .signal-node:nth-child(3){height:35%}[data-visual="city"] .signal-node:nth-child(4){height:53%}

body.signature-room[data-project="octopus-riad"] { color-scheme:light; }
body.signature-room[data-project="octopus-riad"] .room::before,body.signature-room[data-project="octopus-riad"] .signature-shell { background:rgba(251,250,246,.78); }

.network-room { background:radial-gradient(circle at 50% 15%,#252231,#0a0a0c 62%); }
.network-room .room { align-items:stretch; justify-content:flex-start; overflow:auto; padding:5.5rem clamp(1rem,4vw,4rem) 3rem; }
.network-room .room::before{position:fixed}.network-heading{position:relative;z-index:2;width:min(100%,80rem);margin:0 auto 2rem}.network-heading h1{margin:.6rem 0;font-size:clamp(3rem,8vw,7rem);line-height:.86;letter-spacing:-.07em}.network-heading p{max-width:48rem;color:var(--muted);line-height:1.6}.network-status{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;font:700 .74rem var(--mono);letter-spacing:.1em}.network-status span{padding:.55rem .7rem;border:1px solid var(--line)}
.network-grid{position:relative;z-index:2;width:min(100%,86rem);margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);perspective:1400px}.network-door{position:relative;min-height:25rem;padding:1rem 1rem 1.5rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border:1px solid color-mix(in srgb,var(--door-accent,#a77aff) 62%,#313039);border-radius:7rem 7rem .35rem .35rem;background:linear-gradient(105deg,#09090c,color-mix(in srgb,var(--door-accent,#a77aff) 20%,#121116) 48%,#08080b);box-shadow:inset 0 0 0 .5rem rgba(255,255,255,.018),0 30px 55px rgba(0,0,0,.32),0 0 34px color-mix(in srgb,var(--door-accent,#a77aff) 10%,transparent);color:var(--ink);text-decoration:none;transform:rotateY(-3deg);transform-origin:left;transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .3s ease}.network-door::before{position:absolute;right:1rem;top:52%;width:.72rem;aspect-ratio:1;content:"";border:1px solid var(--door-accent,#a77aff);border-radius:50%;background:var(--door-accent,#a77aff);box-shadow:0 0 18px var(--door-accent,#a77aff)}.network-door:hover,.network-door:focus-visible{outline:0;transform:rotateY(-10deg) translateX(.35rem);border-color:var(--door-accent,#a77aff);box-shadow:-18px 28px 55px rgba(0,0,0,.46),0 0 45px color-mix(in srgb,var(--door-accent,#a77aff) 18%,transparent)}.network-door strong{max-width:11ch;font-size:1.65rem;line-height:.94;letter-spacing:-.04em}.network-door small,.network-door span{font:700 .68rem/1.45 var(--mono);letter-spacing:.09em}.network-door small{color:var(--door-accent,#a77aff)}.network-door span{color:var(--muted)}.network-door[data-visited="true"]::after{position:absolute;right:1rem;bottom:1rem;content:"REMEMBERED";color:var(--door-accent,#a77aff);font:700 .6rem var(--mono);letter-spacing:.1em}.network-return{position:relative;z-index:2;width:min(100%,86rem);margin:2rem auto 0;color:var(--muted);font:700 .72rem var(--mono);letter-spacing:.1em}

@keyframes signature-enter{from{opacity:0;transform:translateY(.7rem) scale(.995)}to{opacity:1;transform:none}}
@keyframes signal-wake{50%{border-color:var(--project-accent);box-shadow:0 0 34px color-mix(in srgb,var(--project-accent) 28%,transparent);transform:scale(1.04)}}
@keyframes vision-sweep{0%,18%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes radar-room{to{transform:rotate(360deg)}}

@media(max-width:1100px){.network-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.signature-stage{grid-template-columns:1fr;padding-top:4.5rem}.signature-machine{min-height:34rem;transform:none}.network-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.network-door{min-height:21rem}.project-readout{grid-template-columns:1fr}}
@media(max-width:560px){.signature-bar,.signature-footer{align-items:flex-start;flex-direction:column}.signature-bar>*{min-height:2.5rem;display:inline-flex;align-items:center}.signature-title{font-size:clamp(3rem,16vw,5rem)}.signature-machine{min-height:35rem}.signature-steps{grid-template-columns:1fr 1fr}.network-grid{grid-template-columns:1fr}.network-door{min-height:13rem}.network-room .room{padding-top:5.7rem}}

/* ARKA structural safety pass: keep labels readable without changing its identity. */
body[data-project="arka-systems"] .signature-bar,
body[data-project="arka-systems"] .signature-footer { min-width:0; }
body[data-project="arka-systems"] .signature-bar > *,
body[data-project="arka-systems"] .signature-footer > * { min-width:0; overflow-wrap:anywhere; }
body[data-project="arka-systems"] .signature-machine { overflow:hidden; }
body[data-project="arka-systems"] .signal-node { overflow-wrap:anywhere; }
@media(max-width:760px){
  body[data-project="arka-systems"] .signature-shell { width:calc(100% - 1rem); margin-top:1rem; }
  body[data-project="arka-systems"] .signature-stage { min-width:0; padding-inline:.75rem; }
  body[data-project="arka-systems"] .signature-bar,
  body[data-project="arka-systems"] .signature-footer { gap:.55rem; }
  body[data-project="arka-systems"] .signature-title { max-width:100%; overflow-wrap:anywhere; }
  body[data-project="arka-systems"] .signal-map { min-height:17rem; }
  body[data-project="arka-systems"] .project-readout { grid-template-columns:1fr 1fr; }
}
@media(max-width:430px){
  body[data-project="arka-systems"] .signature-steps { grid-template-columns:1fr; }
  body[data-project="arka-systems"] .project-readout { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){.signature-shell,.sequence-running .signal-node,[data-visual="vision"] .signal-map::after{animation:none!important}}