/* shenhavs · "what else I build", five full-screen panels on the pan rail.
   range.js writes per panel: --t (0 entering, 0.5 centred, 1 leaving),
   --in (how centred, 0..1) and --pose (the subject's second state, 0..1).
   The mirrored stage and rail mechanics live in site.css. */

.range--panels .range__stage { align-items: stretch; }
.rail--panels { gap: 0; padding: 0; height: 100%; align-items: stretch; }
.cp { position: relative; width: 100vw; height: 100%; overflow: hidden; display: grid; grid-template-columns: 0.4fr 0.6fr; align-items: center;
  background: radial-gradient(42% 60% at 34% 52%, color-mix(in oklab, var(--g, #ff6b2c) 20%, transparent), transparent 70%), #0b0c0f;
  border-inline-start: 1px solid var(--sc-hairline);
}
.cp--lead, .cp--note { width: 62vw; grid-template-columns: 1fr; padding-inline: var(--sc-gutter); background: #0b0c0f; border: 0; }
.cp--lead { align-content: center; gap: 1.4rem; padding-inline-start: calc(var(--sc-gutter) + 10vw); }
.cp--lead .range__title { font-size: clamp(4.4rem, 9vw, 9.6rem); }
.cp--lead p { margin: 0; max-width: 34ch; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.cp--lead [data-bind] { color: var(--sc-ink); }
.cp--note p { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.4rem, 6vw, 6.4rem); line-height: 0.9; }
.cp--note span { color: var(--sc-accent); }

.cp__word {
  position: absolute; left: -2%; top: 50%; margin: 0; z-index: 0; pointer-events: none; user-select: none; direction: ltr;
  font: 800 clamp(8rem, 19vw, 20rem)/0.8 "Syne", var(--sc-font-display); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--g, #fff) 40%, transparent);
  transform: translate3d(calc((var(--t, 0.5) - 0.5) * -26vw), -50%, 0); opacity: calc(0.25 + var(--in, 0) * 0.5);
}
.cp__text { grid-column: 1; position: relative; z-index: 3; padding-inline: var(--sc-gutter) 1rem; display: grid; gap: 1rem;
  opacity: clamp(0, calc(var(--in, 0) * 2.2 - 0.4), 1); transform: translateY(calc((1 - clamp(0, calc(var(--in, 0) * 2.2 - 0.4), 1)) * 24px)); }
.cp__text h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(4rem, 7vw, 7.6rem); line-height: 0.86; }
.cp__text p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.5; color: #d9d2c5; max-width: 30ch; text-wrap: pretty; }
.cp__yours { padding-top: 1rem; border-top: 1px solid var(--sc-hairline-strong); color: var(--sc-ink) !important; }
.cp__yours b { color: var(--g, var(--sc-accent)); font-weight: 600; }

.cp__vis { grid-column: 2; grid-row: 1; position: relative; z-index: 1; height: 100%; }
.cp__img {
  position: absolute; left: 50%; bottom: 6%; height: 80%; width: auto; max-width: none;
  transform: translate3d(calc(-50% + (0.5 - var(--t, 0.5)) * 14vw), 0, 0) scale(calc(0.9 + var(--in, 0) * 0.1));
  transform-origin: 50% 100%; filter: drop-shadow(0 40px 60px rgb(0 0 0 / 0.55));
}
.cp__a { opacity: calc(1 - var(--pose, 0)); }
.cp__b { opacity: var(--pose, 0); }

/* agents: the conversation the robot is having */
.cp__bubbles { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 2; left: 2%; top: 10%; display: grid; gap: 0.7rem; width: min(17rem, 30vw); }
.cp__bubbles li {
  justify-self: start; padding: 0.7rem 1rem; border-radius: 16px 16px 16px 4px; font-size: var(--sc-t-sm); line-height: 1.4;
  background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14); color: var(--sc-ink);
  opacity: clamp(0, calc(var(--pose, 0) * 3 - var(--k, 0)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--pose, 0) * 3 - var(--k, 0)), 1)) * 14px));
}
.cp__bubbles li.me { justify-self: end; border-radius: 16px 16px 4px 16px; background: rgb(255 107 44 / 0.18); border-color: rgb(255 107 44 / 0.4); }
.cp__bubbles li:nth-child(2) { --k: 1; } .cp__bubbles li:nth-child(3) { --k: 2; }

/* automation: the flow the arm is running */
[data-cp="auto"] .cp__img { transform: translate3d(calc(-50% + (0.5 - var(--t, 0.5)) * 14vw), 0, 0) rotate(calc((0.5 - var(--t, 0.5)) * 6deg)) scale(calc(0.9 + var(--in, 0) * 0.1)); }
.cp__flow { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 2; left: 6%; bottom: 10%; display: flex; gap: 0.5rem; direction: rtl; }
.cp__flow li {
  padding: 0.55rem 0.9rem; border-radius: 999px; font-size: var(--sc-t-sm); white-space: nowrap;
  background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14); color: var(--ink-dim);
  transition: color 240ms, border-color 240ms, background-color 240ms;
}
.cp__flow li.is-on { color: var(--sc-ink); border-color: rgb(255 138 61 / 0.6); background: rgb(255 138 61 / 0.16); }

/* sites: real work on real-looking devices */
.cp__vis--devices { perspective: 1600px; }
.cp__laptop { position: absolute; left: 50%; top: 50%; width: min(40rem, 50vw); transform-style: preserve-3d;
  transform: translate(-56%, -56%) rotateX(10deg) rotateY(calc((var(--t, 0.5) - 0.5) * 50deg + 14deg)) scale(calc(0.9 + var(--in, 0) * 0.1)); }
.cp__lscreen { aspect-ratio: 16 / 10; border-radius: 14px 14px 4px 4px; padding: 10px; background: #111216; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 40px 80px -20px rgb(0 0 0 / 0.7); overflow: hidden; }
.cp__lscreen img { display: block; width: 100%; height: auto; border-radius: 4px; transform: translateY(calc(var(--t, 0) * -32%)); }
.cp__lbase { display: block; height: 14px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#3a3c42, #1a1b1f); box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.7); }
.cp__phone { position: absolute; left: 50%; top: 50%; width: min(11rem, 14vw); aspect-ratio: 9 / 19; border-radius: 30px; padding: 8px; background: #0d0d0f;
  box-shadow: inset 0 0 0 2px #2c2d33, 0 40px 70px -20px rgb(0 0 0 / 0.75); overflow: hidden;
  transform: translate(calc(70% + (0.5 - var(--t, 0.5)) * 8vw), -30%) rotateY(calc((0.5 - var(--t, 0.5)) * 30deg - 10deg)) rotateZ(-4deg); }
.cp__pscreen { height: 100%; border-radius: 22px; overflow: hidden; background: #fff; }
.cp__pscreen img { display: block; width: 100%; height: auto; transform: translateY(calc(var(--t, 0) * -18%)); }

/* systems: the rack wakes up */
.cp__rack { height: 84%; }
.cp__leds {
  position: absolute; left: 50%; bottom: 14%; width: 9%; height: 58%; z-index: 2; pointer-events: none;
  transform: translate3d(calc(-50% + (0.5 - var(--t, 0.5)) * 14vw), 0, 0);
  background-image: radial-gradient(circle, rgb(120 210 255 / 0.95) 0 1.5px, transparent 2.5px), radial-gradient(circle, rgb(255 140 70 / 0.9) 0 1.5px, transparent 2.5px);
  background-size: 14px 11px, 22px 17px; background-position: 2px 0, 9px 5px;
  opacity: calc(var(--in, 0) * 0.9); mix-blend-mode: screen; animation: leds 1.6s steps(3) infinite;
}
@keyframes leds { 33% { background-position: 2px 3px, 9px 0; } 66% { background-position: 6px 0, 3px 5px; } }
.cp__cards { position: absolute; z-index: 2; left: 4%; top: 24%; display: grid; gap: 0.7rem; }
.cp__cards p { margin: 0; display: grid; gap: 0.15rem; padding: 0.8rem 1rem; border-radius: 12px; min-width: 11rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  background: rgb(12 20 28 / 0.85); border: 1px solid rgb(76 194 255 / 0.35);
  opacity: clamp(0, calc(var(--in, 0) * 3 - 1 - var(--k, 0) * 0.4), 1); transform: translateX(calc((1 - clamp(0, calc(var(--in, 0) * 3 - 1 - var(--k, 0) * 0.4), 1)) * -24px)); }
.cp__cards p:nth-child(2) { --k: 1; margin-inline-start: 2.5rem; } .cp__cards p:nth-child(3) { --k: 2; }
.cp__cards b { color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-base); }

/* security: the lock closes */
[data-cp="security"] .cp__img { height: 74%; bottom: 10%; transform: translate3d(calc(-50% + (0.5 - var(--t, 0.5)) * 14vw), calc(var(--pose, 0) * 10px), 0) scale(calc(0.9 + var(--in, 0) * 0.1)); }
.cp__ring { position: absolute; left: 50%; bottom: 8%; width: 30vh; height: 30vh; margin-left: -15vh; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgb(74 222 128 / 0.35), transparent); opacity: var(--pose, 0);
  transform: translateX(calc((0.5 - var(--t, 0.5)) * 14vw)) scale(calc(0.8 + var(--pose, 0) * 0.4)); }

@media (max-width: 860px) {
  .cp { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: stretch; background: radial-gradient(70% 45% at 50% 32%, color-mix(in oklab, var(--g, #ff6b2c) 22%, transparent), transparent 70%), #0b0c0f; }
  .cp--lead, .cp--note { width: 86vw; grid-template-rows: auto; align-content: center; }
  .cp__vis { grid-column: 1; grid-row: 1; }
  .cp__text { grid-column: 1; grid-row: 2; padding: 0 var(--sc-gutter) calc(var(--wo-h) + var(--bar) + 1.6rem); gap: 0.6rem; }
  .cp__text h3 { font-size: 3.2rem; }
  .cp__text p { font-size: var(--sc-t-base); }
  .cp__word { top: 30%; font-size: 30vw; }
  .cp__img { height: 78%; bottom: 2%; }
  .cp__bubbles { top: 8%; width: 13rem; left: 3%; }
  .cp__bubbles li { font-size: 0.78rem; padding: 0.5rem 0.75rem; }
  .cp__flow { bottom: 2%; left: 3%; right: 3%; flex-wrap: wrap; justify-content: center; }
  .cp__flow li { font-size: 0.72rem; padding: 0.4rem 0.65rem; }
  .cp__laptop { width: 74vw; }
  .cp__phone { width: 25vw; transform: translate(calc(80% + (0.5 - var(--t, 0.5)) * 8vw), -18%) rotateZ(-4deg); }
  .cp__cards { top: 6%; left: 3%; }
  .cp__cards p { min-width: 9rem; padding: 0.55rem 0.75rem; font-size: 0.74rem; }
  .cp__ring { width: 24vh; height: 24vh; margin-left: -12vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cp__leds { animation: none; }
  .cp__word { transform: translate3d(0, -50%, 0); }
}