/* ============================================================================
   MGNTION — ARCHITECTURE EXPERIENCE
   A fullscreen surface with its own scroll, its own chrome and a per-product
   accent. Same design language as the portfolio; more air, more precision.
   ========================================================================= */

.arch-host {
  position: fixed; inset: 0; z-index: 9200;
  opacity: 0; pointer-events: none;
  transition: opacity 420ms var(--e-out);
}
.arch-host.is-open { opacity: 1; pointer-events: auto; }

.arch {
  position: absolute; inset: 0; background: var(--void);
  display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 720ms var(--e-mask);
}
.is-open .arch { clip-path: inset(0 0 0 0); }
.arch::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(var(--acc-rgb), .10), transparent 62%),
    radial-gradient(80% 50% at 50% 108%, rgba(var(--acc-rgb), .05), transparent 60%);
}

/* ---- BAR ---------------------------------------------------------------- */
.arch__bar {
  position: relative; z-index: 3; flex: none; height: 62px;
  display: flex; align-items: center; gap: var(--s-3);
  padding-inline: var(--gut);
  border-bottom: 1px solid var(--rule);
  background: rgba(5,5,5,.86); backdrop-filter: blur(18px);
}
.arch__back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--warm-2); white-space: nowrap;
  transition: color var(--d-fast) var(--e-out);
}
[data-lang='he'] .arch__back, [data-lang='ar'] .arch__back { font-family: var(--f-body); letter-spacing: .04em; }
.arch__back:hover { color: var(--acc); }
[dir='rtl'] .arch__back span { transform: scaleX(-1); display: inline-block; }
.arch__mark { color: var(--warm-3); margin-inline: auto; }
@media (max-width: 900px) { .arch__mark { display: none; } }

/* ---- LENS --------------------------------------------------------------- */
.lens { position: relative; display: flex; gap: 0; flex: none; }
.lens button {
  position: relative; z-index: 1; padding: .55rem clamp(.6rem, 1.6vw, 1.1rem);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--warm-3); white-space: nowrap;
  transition: color var(--d-fast) var(--e-out);
}
[data-lang='he'] .lens button, [data-lang='ar'] .lens button {
  font-family: var(--f-body); letter-spacing: .02em; font-size: var(--t-sm); font-weight: 600;
}
.lens button:hover { color: var(--warm); }
.lens button[aria-selected='true'] { color: var(--ink); }
.lens__ink {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--acc);
  transition: transform 520ms var(--e-inout), width 520ms var(--e-inout);
}

/* ---- SCROLL SURFACE ----------------------------------------------------- */
.arch__scroll {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .arch__scroll { scroll-behavior: auto; } }
.wrapA { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: clamp(3.5rem, 9vh, 8rem); }
.sec__t { font-size: clamp(1.9rem, 4.6vw, 4rem); margin-top: .6rem; }
.sec__n { margin-top: 1rem; max-width: 60ch; color: var(--warm-3); }
.kick {
  display: inline-flex; align-items: center; gap: .8rem; color: var(--acc);
}
.kick::before { content: ''; width: 26px; height: 1px; background: var(--acc); }

/* ---- HERO --------------------------------------------------------------- */
.ah {
  position: relative; padding: clamp(3.5rem, 12vh, 9rem) var(--gut) clamp(2.5rem, 7vh, 5rem);
  max-width: 1180px; margin-inline: auto;
}
.ah__kind { display: block; color: var(--warm-3); }
.ah__n {
  font-size: clamp(2.6rem, 11vw, 9rem); margin-top: .8rem; color: var(--warm);
  direction: ltr; text-align: var(--logical-start);
}
.ah__a {
  font-size: clamp(2.6rem, 11vw, 9rem); color: transparent;
  -webkit-text-stroke: 1px rgba(var(--acc-rgb), .7);   /* .55 landed at 3.1:1 — technically AA for large type, with no margin at all. .7 takes it to 4.5:1 and the outline reads the same. */
  margin-top: -.08em;
}
.ah__s {
  margin-top: clamp(1.4rem, 4vh, 2.6rem); font-size: var(--t-lg);
  color: var(--warm-2); max-width: 34ch; line-height: 1.32;
}
.am {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  margin-top: clamp(2rem, 6vh, 4rem); background: var(--rule);
  border: 1px solid var(--rule);
}
.am__i { background: var(--void); padding: 1rem .9rem; }
.am__i b {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.75rem); color: var(--acc); letter-spacing: -.02em; direction: ltr;
}
.am__i span { display: block; margin-top: .3rem; color: var(--warm-3); }
@media (max-width: 860px) { .am { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .am { grid-template-columns: repeat(2, 1fr); } }

/* ---- PANES -------------------------------------------------------------- */
.pane[hidden] { display: none; }
.pane { animation: paneIn 620ms var(--e-out); }
@keyframes paneIn { from { opacity: 0; transform: translateY(18px) } }
@media (prefers-reduced-motion: reduce) { .pane { animation: none } }

/* ---- PROSE -------------------------------------------------------------- */
.prose { margin-top: 1.6rem; max-width: 68ch; }
.prose p {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.62; color: var(--warm-2);
  margin-bottom: 1.15em;
}
.prose p:first-child { color: var(--warm); font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.5; }
.prose p:last-child { margin-bottom: 0; }

.sec--close { border-top: 1px solid var(--rule); }
.closing {
  margin-top: 1.8rem; max-width: 30ch;
  font-family: var(--f-editorial); font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.22; color: var(--warm);
}
[data-lang='he'] .closing, [data-lang='ar'] .closing {
  font-family: var(--f-display); font-style: normal; font-weight: 700; max-width: 24ch;
}

/* ---- PRINCIPLE CARDS ---------------------------------------------------- */
.pcs { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pc {
  background: var(--void); padding: var(--s-3) 1.4rem var(--s-4); position: relative;
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i) * 70ms);
}
.pc.is-in { opacity: 1; transform: none; }
.pc::after {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--acc);
  transform: scaleX(0); transform-origin: var(--logical-start);
  transition: transform var(--d-mid) var(--e-out);
}
.pc:hover::after { transform: scaleX(1); }
.pc__n { color: var(--acc); }
.pc h4 {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: -.015em; margin-block: .8rem .55rem;
}
[data-lang='he'] .pc h4, [data-lang='ar'] .pc h4 { text-transform: none; letter-spacing: 0; }
.pc p { color: var(--warm-2); font-size: var(--t-sm); line-height: 1.68; }

/* ============================================================================
   INTERACTIVE DIAGRAM
========================================================================== */
.dg {
  position: relative; width: 100%; height: clamp(440px, 68vh, 760px);
  border-block: 1px solid var(--rule); background:
    linear-gradient(rgba(var(--acc-rgb),.03), transparent 40%),
    repeating-linear-gradient(0deg, rgba(242,237,227,.028) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(242,237,227,.028) 0 1px, transparent 1px 46px),
    var(--ink);
  overflow: hidden; touch-action: none;
}
.dg__svg { width: 100%; height: 100%; display: block; cursor: grab; }
.dg.is-dragging .dg__svg { cursor: grabbing; }
.dg__world { transition: transform 90ms linear; }

.dg__edge {
  fill: none; stroke: rgba(242,237,227,.22); stroke-width: 1.25;
  stroke-dasharray: 5 7;
  animation: flow 2.4s linear infinite; animation-delay: calc(var(--n) * -120ms);
  transition: stroke .3s var(--e-out), opacity .3s var(--e-out), stroke-width .3s var(--e-out);
}
@keyframes flow { to { stroke-dashoffset: -48; } }
.dg__edge.is-lit { stroke: var(--acc); stroke-width: 2; }
.dg__edge.is-dim { opacity: .12; animation-play-state: paused; }

.dg__node { cursor: pointer; transition: opacity .35s var(--e-out); }
.dg__box {
  fill: #0C0B09; stroke: rgba(242,237,227,.20); stroke-width: 1;
  transition: stroke .3s var(--e-out), fill .3s var(--e-out);
}
.dg__label {
  fill: var(--warm); font-family: var(--f-display); font-weight: 600;
  font-size: 13px; letter-spacing: .01em; pointer-events: none;
}
.dg__node--hero .dg__box  { stroke: rgba(var(--acc-rgb), .75); fill: rgba(var(--acc-rgb), .09); }
.dg__node--hero .dg__label{ fill: var(--acc-lift, #fff); }
.dg__node--io .dg__box    { stroke-dasharray: 3 3; fill: transparent; }
.dg__node--branch .dg__box{ fill: rgba(242,237,227,.035); }
.dg__node--future .dg__box{ stroke-dasharray: 6 5; stroke: rgba(242,237,227,.28); fill: transparent; }
.dg__node--future .dg__label { fill: var(--warm-2); }
.dg__node--group .dg__box { fill: rgba(var(--acc-rgb), .05); stroke: rgba(var(--acc-rgb), .45); }

.dg__node:hover .dg__box, .dg__node.is-lit .dg__box,
.dg__node:focus-visible .dg__box { stroke: var(--acc); fill: rgba(var(--acc-rgb), .14); }
.dg__node.is-active .dg__box { stroke: var(--acc); stroke-width: 2; fill: rgba(var(--acc-rgb), .2); }
.dg__node.is-dim { opacity: .2; }

.dg__hint {
  position: absolute; inset-inline-start: 1rem; bottom: 1rem; z-index: 2;
  color: var(--warm-3); pointer-events: none;
}
@media (max-width: 700px) { .dg__hint { display: none; } }
.dg__zoom {
  position: absolute; inset-inline-end: 1rem; bottom: 1rem; z-index: 2;
  display: flex; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.dg__zoom button {
  background: rgba(5,5,5,.82); backdrop-filter: blur(8px);
  padding: .45rem .7rem; font-family: var(--f-mono); font-size: 11px;
  color: var(--warm-2); min-width: 34px;
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.dg__zoom button:hover { color: var(--ink); background: var(--acc); }

.dg__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 3;
  width: min(390px, 88%); overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem 1.4rem 2.5rem;
  background: rgba(8,8,7,.94); backdrop-filter: blur(20px);
  border-inline-start: 1px solid rgba(var(--acc-rgb), .4);
  animation: panelIn 420ms var(--e-out);
  text-align: var(--logical-start);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) } }
.dgp__x {
  position: absolute; top: .9rem; inset-inline-end: 1rem;
  color: var(--warm-3); font-size: 12px; line-height: 1;
}
.dgp__x:hover { color: var(--acc); }
.dgp__kind { color: var(--acc); }
.dgp__t {
  font-family: var(--f-display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -.02em; margin: .5rem 0 .7rem; direction: ltr;
}
.dgp__p { color: var(--warm); font-size: .95rem; line-height: 1.55; }
.dgp__blk { margin-top: 1.3rem; }
.dgp__blk h5 {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--warm-3); margin-bottom: .5rem;
}
.dgp__blk ul { list-style: none; display: grid; gap: .3rem; }
.dgp__blk li {
  font-size: .84rem; color: var(--warm-2); line-height: 1.5;
  padding-inline-start: .85rem; position: relative;
}
.dgp__blk li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .58em;
  width: 4px; height: 1px; background: var(--acc);
}

/* ---- SUBSYSTEM EXPLORER ------------------------------------------------- */
.subs { margin-top: var(--s-4); border-top: 1px solid var(--rule); }
.sub {
  border-bottom: 1px solid var(--rule);
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i) * 45ms);
}
.sub.is-in { opacity: 1; transform: none; }
.sub__h {
  width: 100%; display: grid; grid-template-columns: 3rem 1fr auto 1.6rem;
  gap: 1rem; align-items: center; text-align: var(--logical-start);
  padding-block: clamp(1rem, 2.4vh, 1.5rem);
}
.sub__n { color: var(--warm-3); transition: color var(--d-fast) var(--e-out); }
.sub__t {
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.1;
  transition: color var(--d-fast) var(--e-out);
}
.sub__tag { color: var(--warm-3); text-align: var(--logical-end); }
.sub__x { position: relative; width: 14px; height: 14px; justify-self: end; }
.sub__x::before, .sub__x::after {
  content: ''; position: absolute; inset: 0; margin: auto; background: var(--warm-2);
  transition: transform var(--d-mid) var(--e-out), background var(--d-fast) var(--e-out);
}
.sub__x::before { width: 14px; height: 1px; }
.sub__x::after  { width: 1px; height: 14px; }
.sub.is-open .sub__x::after { transform: scaleY(0); }
.sub__h:hover .sub__t, .sub.is-open .sub__t { color: var(--acc); }
.sub__h:hover .sub__n, .sub.is-open .sub__n { color: var(--acc); }
.sub.is-open .sub__x::before { background: var(--acc); }
.sub__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 620ms var(--e-inout); }
.sub.is-open .sub__body { grid-template-rows: 1fr; }
.sub__in { overflow: hidden; }
.sub__p {
  color: var(--warm); font-size: var(--t-md); line-height: 1.55;
  max-width: 62ch; padding-bottom: 1.2rem;
}
.sub__l {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .45rem 1.6rem; padding-bottom: 2rem;
}
.sub__l li {
  font-size: var(--t-sm); color: var(--warm-2); line-height: 1.55;
  padding-inline-start: 1rem; position: relative;
}
.sub__l li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .62em;
  width: 5px; height: 1px; background: rgba(var(--acc-rgb), .8);
}
@media (max-width: 760px) {
  .sub__h { grid-template-columns: 2.2rem 1fr 1.2rem; gap: .7rem; }
  .sub__tag { grid-column: 2; text-align: var(--logical-start); }
}

/* ---- CAPABILITY CARDS --------------------------------------------------- */
.caps { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cap {
  background: var(--void); padding: 1.5rem 1.3rem 2rem; position: relative; overflow: hidden;
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i) * 60ms);
}
.cap.is-in { opacity: 1; transform: none; }
.cap::before {
  content: ''; position: absolute; inset: 0; background: rgba(var(--acc-rgb), .07);
  transform: translateY(101%); transition: transform var(--d-mid) var(--e-out);
}
.cap:hover::before { transform: translateY(0); }
.cap h4 {
  position: relative; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: -.015em;
  color: var(--acc); margin-bottom: .6rem;
}
.cap p { position: relative; color: var(--warm-2); font-size: var(--t-sm); line-height: 1.65; }
.caps--future .cap h4 { color: var(--warm); }
.caps--future .cap { border-top: 1px dashed rgba(var(--acc-rgb), .35); }

/* ---- TECH STACK --------------------------------------------------------- */
.sgs { padding-bottom: clamp(4rem, 12vh, 9rem); display: grid; gap: clamp(2rem, 5vh, 3.4rem); }
.sg {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i) * 45ms);
}
.sg.is-in { opacity: 1; transform: none; }
.sg__h {
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .24em;
  text-transform: uppercase; color: var(--acc);
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem;
}
[data-lang='he'] .sg__h, [data-lang='ar'] .sg__h { font-family: var(--f-body); letter-spacing: .06em; }
.sg__i { display: flex; flex-wrap: wrap; gap: .45rem; }
.tok {
  padding: .55rem .9rem; border: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .02em;
  color: var(--warm-2); direction: ltr; white-space: nowrap;
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.tok:hover {
  border-color: var(--acc); color: var(--warm);
  background: rgba(var(--acc-rgb), .10); transform: translateY(-2px);
}

/* ---- FOOT --------------------------------------------------------------- */
.arch__foot {
  border-top: 1px solid var(--rule); padding: var(--s-4) var(--gut);
  display: flex; gap: 1px; max-width: 1180px; margin-inline: auto; width: 100%;
  flex-wrap: wrap;
}
.arch__backb, .arch__live {
  flex: 1 1 240px; padding: 1.2rem 1.4rem; border: 1px solid var(--rule);
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: .95rem; text-align: center;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
[data-lang='he'] .arch__backb, [data-lang='ar'] .arch__backb,
[data-lang='he'] .arch__live,  [data-lang='ar'] .arch__live { text-transform: none; letter-spacing: 0; }
.arch__backb:hover { background: var(--warm); color: var(--ink); border-color: var(--warm); }
.arch__live { color: var(--acc); border-color: rgba(var(--acc-rgb), .5); }
.arch__live:hover { background: var(--acc); color: var(--ink); }

/* the Architecture action on the portfolio now leads somewhere */
.action--arch .action__t { color: var(--warm); }
.action--arch::before { background: var(--warm); }

/* ---- MOBILE ------------------------------------------------------------- */
@media (max-width: 760px) {
  .arch__bar { height: 54px; gap: .6rem; }
  .lens button { padding: .45rem .55rem; font-size: 9.5px; letter-spacing: .08em; }
  .ah__s { font-size: 1.1rem; max-width: none; }
  .dg { height: 60vh; }
  .dg__panel { width: 100%; inset-inline-start: 0; border-inline-start: 0; border-top: 1px solid rgba(var(--acc-rgb),.4); inset-block: 40% 0; }
  .dg__label { font-size: 12px; }
  .sub__l { grid-template-columns: 1fr; }
  .arch__foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .arch, .arch-host { transition: none; }
  .dg__edge { animation: none; }
  .pc, .sub, .cap, .sg { opacity: 1 !important; transform: none !important; }
}