/* ============================================================
   KELPARO — three more ways to show a product, so no two sections
   scroll the same: a conversation that builds (talk), a conveyor
   a lead rides (belt), and a dashboard that explodes into layers.
   ============================================================ */

.talk, .belt, .explode { position: relative; padding-top: clamp(90px, 9vw, 140px); }
.talk__head, .belt__head { max-width: 900px; }
.talk__head .h2, .belt__head .h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; margin-top: 14px; }
.talk__points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 26px; margin-top: 10px; border-top: 1px solid var(--line); }
.talk__points div { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.talk__points b { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 900px) { .talk__points { grid-template-columns: 1fr 1fr; } }

/* ---------- talk: sticky store, conversation builds with scroll ---------- */
.talk__pin { height: 100vh; height: 100dvh; display: flex; align-items: center; }
.talk__stage { position: relative; height: min(640px, 82vh); }
.talk__device { position: absolute; left: 50%; top: 50%; width: min(940px, 66vw); transform: translate(-50%, -50%); }
.talk__screen { display: grid; grid-template-columns: 1fr 330px; height: min(520px, 64vh); }
.talk__screen .store__page { position: relative; }
.talk__meter { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #8a7a6a; }
.talk__meter i { flex: 1; height: 5px; border-radius: 3px; background: #ece2d6; overflow: hidden; }
.talk__fill { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width .5s var(--ease-out); }
.chat__head small { margin-left: auto; font-weight: 400; opacity: .7; font-size: 11px; }
.talk__body { justify-content: flex-end; }
.talk__body > [data-beat] { display: none; }
.talk__body > [data-beat].on { display: block; animation: beatIn .5s var(--ease-out) both; }
.talk__body > .pcard.on { display: grid; }
.talk__body > .verdict.on, .talk__body > .voice-sheet.on { display: flex; }
.talk__body > .ui-card.on[style*="grid"] { display: grid; }
@keyframes beatIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.talk__call { position: absolute; width: 230px; padding: 16px 16px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(17,17,16,.35); z-index: 5; opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none;
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.talk__call.on { opacity: 1; transform: none; }
.talk__call img { width: 64px; height: 64px; margin: -40px 0 6px -6px; filter: drop-shadow(0 10px 14px rgba(17,17,16,.18)); animation: megaFloat 5s ease-in-out infinite; }
.talk__call b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.015em; }
.talk__call span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }
.talk__call--l { left: 0; }
.talk__call--r { right: 0; }
.talk__call[data-beat="1"] { top: 14%; } .talk__call[data-beat="2"] { top: 30%; } .talk__call[data-beat="3"] { top: 52%; }
.talk__call[data-beat="4"] { top: 62%; } .talk__call[data-beat="5"] { top: 70%; }
@media (max-width: 1180px) { .talk__device { width: 74vw; } .talk__call { width: 200px; } }

/* ---------- belt: the lead rides a conveyor of stations ---------- */
.belt__pin { height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; }
.belt__lead { position: relative; z-index: 3; align-self: center; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px -24px rgba(17,17,16,.4); }
.belt__lead b { display: block; font-size: 14px; font-weight: 500; }
.belt__lead small { display: block; font-size: 12px; color: var(--ink-3); }
.belt__lead .av { width: 34px; height: 34px; font-size: 12px; margin: 0; }
.belt__status { transition: background .3s; min-width: 0; }
.belt__rail { position: relative; height: 2px; margin: 22px 0 34px; background: var(--line); }
.belt__rail::before { content: ''; position: absolute; left: 50%; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 6px rgba(17,17,16,.08); }
.belt__rail-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.belt__track { display: flex; gap: 26px; padding: 0 calc(50vw - 190px); will-change: transform; align-items: stretch; }
.station { flex: 0 0 380px; border-radius: 22px; background: #fff; border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 12px;
  opacity: .45; transform: scale(.92); transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), box-shadow .4s, border-color .4s; }
.station.is-on { opacity: 1; transform: none; border-color: var(--line-2); box-shadow: 0 40px 80px -40px rgba(17,17,16,.35); }
.station header { position: relative; padding-top: 28px; }
.station header img { position: absolute; top: -48px; right: -6px; width: 84px; height: 84px; filter: drop-shadow(0 14px 18px rgba(17,17,16,.2)); transition: transform .6s var(--ease-out); }
.station.is-on header img { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
.station header span { font: 500 11.5px var(--font-mono); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.station h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.025em; margin-top: 6px; }
.station > p { font-size: 13.5px; color: var(--ink-2); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.station .tbl tr.hot td { background: var(--accent-soft); }
.sig li { list-style: none; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sig em { font-style: normal; font-size: 11px; color: var(--accent); white-space: nowrap; }

/* ---------- explode: the dashboard comes apart in 3D ---------- */
.ex__pin { height: 100vh; height: 100dvh; display: flex; align-items: center; overflow: hidden; }
.ex__grid { display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: center; }
.ex__labels { display: grid; gap: 6px; }
.ex__labels li { list-style: none; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; opacity: .35; transition: opacity .35s, background .35s; }
.ex__labels li.on { opacity: 1; background: #fff; box-shadow: 0 1px 2px rgba(17,17,16,.05), 0 0 0 1px var(--line); }
.ex__labels img { width: 44px; height: 44px; flex: none; }
.ex__labels b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.015em; }
.ex__labels span span, .ex__labels li > span { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.ex__scene { perspective: 2400px; height: 600px; display: grid; place-items: center; }
.ex__stack { position: relative; width: 880px; height: 540px; transform-style: preserve-3d; transform-origin: 50% 50%; }
.ex__layer { position: absolute; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(17,17,16,.05);
  transform-style: preserve-3d; transition: box-shadow .4s, border-color .4s; }
.ex__layer.lit { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 40px 70px -30px rgba(47,91,255,.35); }
.ex__l0 { inset: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 50px 100px -40px rgba(17,17,16,.35); }
.ex__l0 .side { position: absolute; left: 0; top: 42px; bottom: 0; width: 188px; }
.ex__l1 { left: 208px; top: 64px; width: 652px; padding: 12px; }
.ex__l2 { left: 208px; top: 190px; width: 652px; padding: 14px; }
.ex__l3 { left: 208px; top: 380px; width: 360px; padding: 14px; }
.ex__l4 { left: 584px; top: 392px; width: 276px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-radius: 999px; }
.ex__l4 b { display: block; font-size: 13px; font-weight: 500; }
.ex__l4 small { display: block; font-size: 11px; color: var(--ink-3); }
.ex__l4 .wave { margin-left: auto; }
.ex__l4 .wave i { animation: wv 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); }

/* ---------- phones: no pinning ---------- */
@media (max-width: 900px) {
  .talk__pin, .belt__pin, .ex__pin { height: auto; padding: 40px 0; }
  .talk__stage { height: auto; display: grid; gap: 14px; }
  .talk__device { position: static; transform: none; width: 100%; }
  .talk__screen { grid-template-columns: 1fr; height: 560px; }
  .talk__screen .store__page { display: none; }
  .talk__body > [data-beat] { display: block; animation: none; }
  .talk__body > .pcard { display: grid; } .talk__body > .verdict, .talk__body > .voice-sheet { display: flex; }
  .talk__call { position: static; width: auto; opacity: 1; transform: none; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; }
  .talk__call img { width: 52px; height: 52px; margin: 0; grid-row: span 2; }
  .belt__track { padding: 40px 16px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .station { flex-basis: 84vw; scroll-snap-align: center; opacity: 1; transform: none; }
  .belt__rail { display: none; }
  .ex__grid { grid-template-columns: 1fr; }
  .ex__scene { height: 360px; }
  .ex__stack { transform: scale(.4); }
  .ex__labels li { opacity: 1; }
}
.talk__body > .bookcard.on { display: grid; gap: 7px; }
@media (max-width: 900px) { .talk__body > .bookcard { display: grid; gap: 7px; } }
.store__img { display: block; width: 100%; height: auto; aspect-ratio: 1180 / 670; object-fit: cover; border-radius: 14px; background: #f3ece2; }
.talk .pcard div::before { background: url(../assets/img/stoneware.webp) center 40% / 170% auto no-repeat, #f3ece2; }
.talk .pcard div:last-child::before { background-position: 85% 30%; filter: grayscale(.5) opacity(.7); }