/* shenhavs · "the layers". A pinned 3D stack of four 920x577 plates (the
   stack is scaled to fit by layers.js through --k). The plates sit at local
   depths set per frame; the camera move is a transform on the stack. */

.lay__stage { background: #07080a; overflow: clip; }
.lay__room {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 38% at 38% 8%, rgb(255 255 255 / 0.09), transparent 70%),
    radial-gradient(60% 45% at 38% 92%, rgb(255 107 44 / 0.09), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, #0f1115, #07080a 70%);
}
.lay__scene { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 38% 36%; }
.lay__stack {
  position: absolute; left: 38%; top: 46%; width: 920px; height: 577px; margin: -288px 0 0 -460px;
  transform-style: preserve-3d; will-change: transform;
}

.lay__plate {
  position: absolute; inset: 0; border-radius: 22px; transform-style: preserve-3d; will-change: transform, opacity;
  backface-visibility: visible;
}
.lay__plate--ui { background: #f7f6f2; box-shadow: 0 60px 120px -30px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.6); overflow: hidden; }
.lay__plate--ui img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lay__plate--glass {
  background:
    linear-gradient(150deg, rgb(255 255 255 / 0.10), rgb(255 255 255 / 0.02) 40%, rgb(255 255 255 / 0.05) 100%),
    rgb(14 16 21 / 0.82);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.28), 0 50px 100px -30px rgb(0 0 0 / 0.6);
}
/* the metal lip: a lit edge along the near side of every plate */
.lay__plate::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent); opacity: 0.7;
}
.lay__name {
  position: absolute; z-index: 4; right: 22px; top: 18px; padding: 6px 12px; border-radius: 999px;
  background: rgb(10 11 14 / 0.86); border: 1px solid rgb(255 255 255 / 0.16); color: var(--sc-ink);
  font: 600 15px/1 var(--sc-font-text); opacity: var(--nm, 0); transition: opacity 300ms;
}
.lay__plate--ui .lay__name { background: rgb(10 11 14 / 0.92); }

/* L0 hotspot on the real Send button */
.lay__hot { position: absolute; left: 682px; top: 530px; z-index: 3; opacity: var(--hot, 0); transition: opacity 300ms; pointer-events: none; }
.lay__hot i { position: absolute; left: -26px; top: -14px; width: 58px; height: 28px; border-radius: 8px; border: 2px solid var(--sc-accent); box-shadow: 0 0 0 6px rgb(255 107 44 / 0.18); animation: hotpulse 1.4s ease-in-out infinite; }
.lay__hot code { position: absolute; left: -150px; top: -64px; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: #0d0e11; color: #ffb48f; font: 600 14px/1 ui-monospace, Consolas, monospace; box-shadow: var(--sc-e2); }
@keyframes hotpulse { 50% { box-shadow: 0 0 0 12px rgb(255 107 44 / 0.06); } }

/* L1 people */
.lay__people { position: absolute; inset: 78px 40px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lay__person { display: grid; align-content: start; gap: 18px; padding: 22px; border-radius: 16px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); }
.lay__person > div p { margin: 0; font: 600 20px/1.2 var(--sc-font-text); color: var(--sc-ink); }
.lay__person > div span { font-size: 14px; color: var(--sc-ink-soft); }
.lay__ava { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #2a2c33; color: var(--sc-ink); font: 600 17px/1 var(--sc-font-text); }
.lay__ava--bot { background: rgb(255 107 44 / 0.2); color: #ffb48f; }
.lay__person ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lay__person li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 9px; font-size: 15px; background: rgb(255 255 255 / 0.04); color: var(--sc-ink); }
.lay__person li::after { font-size: 13px; font-weight: 600; }
.lay__person li.ok::after { content: "מאושר"; color: #7ee2a8; }
.lay__person li.no { color: var(--ink-dim); }
.lay__person li.no::after { content: "נעול"; color: #ff9b84; }
.lay__person li { opacity: clamp(0.25, calc(var(--lp, 0) * 6 - var(--k, 0) * 0.5), 1); }

/* L2 connections */
.lay__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.lay__links path { stroke: rgb(255 255 255 / 0.18); stroke-width: 2; fill: none; stroke-dasharray: 340; stroke-dashoffset: calc(340 - var(--lp, 0) * 680); }
.lay__links path.is-limited { stroke: rgb(255 180 120 / 0.35); stroke-dasharray: 6 8; stroke-dashoffset: 0; opacity: clamp(0, calc(var(--lp, 0) * 3 - 0.6), 1); }
.lay__pulses circle { fill: var(--sc-accent); opacity: clamp(0, calc(var(--lp, 0) * 3 - 0.5), 1); filter: drop-shadow(0 0 6px rgb(255 107 44 / 0.9)); }
.lay__pulses circle.is-limited { fill: #ffd2b0; }
.lay__hub { position: absolute; left: 460px; top: 288px; translate: -50% -50%; padding: 18px 26px; border-radius: 18px; background: #f7f6f2; color: #1a1622; font: 700 22px/1 var(--sc-font-text); box-shadow: 0 0 0 6px rgb(255 255 255 / 0.06), 0 20px 40px -10px rgb(0 0 0 / 0.6); direction: ltr; }
.lay__node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; padding: 12px 18px; border-radius: 14px; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.16); color: var(--sc-ink); font: 600 17px/1 var(--sc-font-text); white-space: nowrap; }
.lay__node--ai { border-color: rgb(255 180 120 / 0.45); color: #ffd2b0; }
.lay__tag { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; padding: 5px 10px; border-radius: 999px; background: #0c0d10; border: 1px solid rgb(126 226 168 / 0.4); color: #a6f0c0; font: 600 13px/1 var(--sc-font-text); white-space: nowrap; opacity: clamp(0, calc(var(--lp, 0) * 3 - 0.8), 1); }
.lay__tag--lim { border-color: rgb(255 180 120 / 0.45); color: #ffd2b0; }

/* L3 data */
.lay__db { position: absolute; inset: 78px 40px 40px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
.lay__table { display: grid; align-content: start; gap: 8px; direction: ltr; }
.lay__table p { margin: 0; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 10px; background: rgb(255 255 255 / 0.05); font-size: 16px; color: var(--sc-ink); }
.lay__table .lay__th { background: transparent; color: var(--ink-dim); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding-block: 4px; }
.lay__table code { font: 500 15px/1 ui-monospace, Consolas, monospace; color: #7ee2a8; }
.lay__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.lay__facts li { padding: 16px 18px; border-radius: 12px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); color: var(--sc-ink-soft); font-size: 15px; opacity: clamp(0.2, calc(var(--lp, 0) * 4 - var(--k, 0) * 0.6), 1); }
.lay__facts li:nth-child(2) { --k: 1; } .lay__facts li:nth-child(3) { --k: 2; }
.lay__facts b { display: block; margin-bottom: 4px; color: var(--sc-ink); font: 600 22px/1.1 var(--sc-font-text); }
.lay__person:nth-child(2) li { --k: 1; } .lay__person:nth-child(3) li { --k: 2; }

/* the beam and the packet live in stack space; layers.js sizes and places them */
.lay__beam {
  position: absolute; left: 682px; top: 530px; width: 4px; height: var(--beamH, 0px); margin-left: -2px;
  transform-origin: 50% 0; border-radius: 4px; pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 140 80 / 0), rgb(255 140 80 / 0.85) 15%, rgb(255 140 80 / 0.85) 85%, rgb(255 140 80 / 0));
  box-shadow: 0 0 18px 4px rgb(255 107 44 / 0.45); opacity: var(--beam, 0);
}
.lay__packet {
  position: absolute; left: 682px; top: 530px; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #ffb48f 45%, rgb(255 107 44 / 0) 72%); opacity: var(--beam, 0);
  box-shadow: 0 0 30px 10px rgb(255 107 44 / 0.5); pointer-events: none;
}

/* captions */
.lay__copy { position: absolute; z-index: 5; right: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(26rem, 30vw); display: grid; }
.lay__cap { grid-area: 1 / 1; align-self: center; display: grid; gap: 1rem; opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); pointer-events: none; }
.lay__cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.lay__cap p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.5; color: #d9d2c5; text-wrap: pretty; }
.lay__q { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 3.8vw, 3.9rem) !important; line-height: 0.95 !important; color: var(--sc-ink) !important; text-wrap: balance; }
.lay__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.4rem, 5.6vw, 6rem); line-height: 0.88; }
.lay__title span { color: var(--sc-accent); }
.lay__credit { position: absolute; z-index: 5; left: var(--sc-gutter); bottom: 1.4rem; margin: 0; font-size: var(--sc-t-xs); color: var(--ink-dim); opacity: var(--cred, 1); }

@media (max-width: 860px) {
  .lay__scene { perspective-origin: 50% 30%; }
  .lay__stack { left: 50%; top: 34%; }
  .lay__copy { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: calc(var(--wo-h) + var(--bar) + 1.6rem); translate: none; }
  .lay__cap { align-self: end; gap: 0.6rem; }
  .lay__cap p { font-size: var(--sc-t-base); }
  .lay__q { font-size: 2.3rem !important; }
  .lay__title { font-size: 2.9rem; }
  .lay__credit { bottom: auto; top: 4.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lay__hot i, .lay__pulses { animation: none; }
  .lay__pulses { display: none; }
  .lay__cap { transition-duration: 200ms; transform: none; }
}

/* ======================================================= FOUNDATIONS == */
.arch__stage { background: #07080a; }
.arch__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--rv, 0) * 0.55);
  background:
    repeating-linear-gradient(0deg, rgb(150 200 255 / 0.10) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgb(150 200 255 / 0.10) 0 1px, transparent 1px 48px),
    linear-gradient(rgb(8 20 40 / 0.35), rgb(8 20 40 / 0.35));
  mix-blend-mode: screen;
}
.arch__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arch__lines path { fill: none; stroke: rgb(170 215 255 / 0.85); stroke-width: 1.5; stroke-dasharray: 6 6; filter: drop-shadow(0 0 4px rgb(120 190 255 / 0.8)); }
.arch__labels span {
  position: absolute; left: 0; top: 0; z-index: 2; padding: 0.4rem 0.75rem; border-radius: 6px; white-space: nowrap;
  background: rgb(8 18 34 / 0.82); border: 1px solid rgb(150 200 255 / 0.55); color: #dcebff;
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text); box-shadow: 0 0 18px rgb(80 160 255 / 0.25);
  translate: -50% -50%; opacity: 0; transform: translateY(8px);
  transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out);
}
.arch__labels span::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 0.6rem; background: rgb(150 200 255 / 0.6); }
.arch__labels span.is-on { opacity: 1; transform: none; }
.arch__labels span[hidden] { display: none; }
.arch__scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 78% at 100% 100%, rgb(7 8 10 / 0.97) 0%, rgb(7 8 10 / 0.9) 36%, rgb(7 8 10 / 0.55) 56%, transparent 78%), linear-gradient(to top, rgb(7 8 10 / 0.6), transparent 32%); }
.arch__copy { position: absolute; z-index: 3; right: var(--sc-gutter); bottom: clamp(3rem, 9vh, 6rem); width: min(32rem, 40vw); display: grid; }
.arch__copy > * { grid-area: 1 / 1; align-self: end; margin: 0; }
.arch__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.4rem, 6vw, 6.4rem); line-height: 0.88; }
.arch__title span { color: #9cc8ff; }
.arch__line { font-size: var(--sc-t-xl); line-height: 1.38; color: #e2ddd2; text-wrap: pretty; }
.arch__line b { display: block; margin-bottom: 0.3rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.8em; line-height: 1; color: var(--sc-ink); }
@media (max-width: 860px) {
  .arch__scrim { background: linear-gradient(to top, rgb(7 8 10 / 0.95) 0%, rgb(7 8 10 / 0.75) 30%, transparent 55%); }
  .arch__copy { left: var(--sc-gutter); width: auto; bottom: calc(var(--wo-h) + var(--bar) + 1.6rem); }
  .arch__title { font-size: 3rem; }
  .arch__line { font-size: var(--sc-t-lg); }
  .arch__labels span { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
}
/* reduced motion never fetches the clip: the finished building still takes over halfway */
.arch__end { display: none; }
@media (prefers-reduced-motion: reduce) {
  .arch__end { display: block; position: absolute; inset: 0; opacity: var(--endv, 0); transition: opacity 300ms; }
  .arch__end img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
}