/* TECHSHAN-IMS scroll-linked product story */
.language-toggle {
  min-height: 42px;
  border: 1px solid #344057;
  background: transparent;
  color: #dfe6f2;
  padding: 8px 11px;
  font: 500 11px var(--mono);
  cursor: pointer;
}

.language-toggle:hover { color: #b8ff62; border-color: #b8ff62; }

.ims-story {
  --p: 0;
  --inventory-x: -34;
  --pos-x: 34;
  --panel-scale: .78;
  --detail-opacity: 0;
  --intro-opacity: 1;
  --rail-x: 0;
  --architecture-opacity: 0;
  min-height: 470vh;
  position: relative;
  background: #080d18;
  color: #f4f7fb;
}

.ims-story__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  min-height: 650px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.ims-story__halo {
  position: absolute;
  width: min(75vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 98, 255, .24), rgba(12, 17, 34, 0) 67%);
  transform: translateY(calc(var(--p) * -8vh));
  z-index: -1;
}

.ims-story__header {
  width: min(1120px, calc(100% - 48px));
  position: absolute;
  top: clamp(96px, 12vh, 140px);
  text-align: center;
  opacity: var(--intro-opacity);
  transform: translateY(calc(var(--p) * -42px)) scale(calc(1 - var(--p) * .07));
  will-change: transform, opacity;
}

.ims-story__kicker,
.ims-story__eyebrow,
.ims-story__step {
  font: 500 11px/1.3 var(--mono);
  letter-spacing: .14em;
  color: #b8ff62;
  text-transform: uppercase;
}

.ims-story__header h2 {
  margin: 12px 0 0;
  font-size: clamp(46px, 8vw, 116px);
  letter-spacing: -.08em;
  line-height: .88;
}

.ims-story__header p:last-child {
  max-width: 530px;
  color: #b8c2d7;
  margin: 22px auto 0;
  font-size: clamp(15px, 1.6vw, 19px);
}

.ims-stage {
  position: relative;
  width: min(1060px, 86vw);
  height: min(48vw, 530px);
  min-height: 310px;
  margin-top: clamp(170px, 27vh, 270px);
  overflow: hidden;
  border: 1px solid rgba(126, 145, 186, .32);
}

.ims-stage__frame {
  position: absolute;
  top: 50%;
  width: 48%;
  aspect-ratio: 1.64;
  overflow: hidden;
  border: 1px solid rgba(220, 230, 255, .32);
  background: #101a33;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
  will-change: transform, opacity, clip-path;
}

.ims-stage__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ims-stage__frame--inventory { left: 0; transform: translate(var(--inventory-x), -50%) scale(var(--panel-scale)); clip-path: inset(0 0 0 0); }
.ims-stage__frame--pos { right: 0; transform: translate(var(--pos-x), -50%) scale(var(--panel-scale)); clip-path: inset(0 0 0 0); }
.ims-stage__frame figcaption { position: absolute; left: 13px; bottom: 10px; margin: 0; font: 500 10px var(--mono); letter-spacing: .08em; color: white; background: rgba(5, 9, 18, .73); padding: 6px 8px; }

.ims-stage__unified {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184, 255, 98, .72);
  box-shadow: inset 0 0 0 1px rgba(184, 255, 98, .11), 0 0 90px rgba(78, 100, 255, .24);
  opacity: calc(var(--detail-opacity) * .9);
  pointer-events: none;
}

.ims-stage__unified span { position: absolute; right: 14px; top: 12px; font: 10px var(--mono); color: #b8ff62; letter-spacing: .1em; }

.ims-stage__detail {
  position: absolute;
  inset: 0;
  opacity: var(--detail-opacity);
  transform: scale(calc(.92 + var(--detail-opacity) * .08));
  transition: opacity .16s linear;
  pointer-events: none;
}

.ims-stage__detail img { width: 100%; height: 100%; object-fit: cover; object-position: top; border: 1px solid rgba(220, 230, 255, .3); box-shadow: 0 28px 70px rgba(0, 0, 0, .43); }
.ims-stage__detail figcaption { position: absolute; bottom: 14px; left: 15px; padding: 7px 10px; margin: 0; background: #b8ff62; color: #07101b; font: 10px var(--mono); letter-spacing: .08em; }

.ims-story__module-rail {
  position: absolute;
  bottom: 7vh;
  left: 0;
  display: flex;
  gap: 10px;
  transform: translateX(calc(var(--rail-x) * -1px));
  will-change: transform;
}

.ims-story__module-rail span { flex: 0 0 clamp(155px, 15vw, 220px); padding: 15px; border-top: 1px solid #45516b; color: #cbd3e0; font: 600 13px var(--sans); }
.ims-story__module-rail span:first-child { margin-left: max(24px, calc((100vw - min(1120px, 86vw)) / 2)); }

.ims-story__copy {
  position: absolute;
  bottom: 13vh;
  left: max(24px, calc((100vw - min(1120px, 86vw)) / 2));
  width: min(380px, 40vw);
  opacity: var(--detail-opacity);
  transform: translateY(calc((1 - var(--detail-opacity)) * 18px));
  z-index: 3;
  background: rgba(8, 13, 24, .84);
  border-left: 2px solid #b8ff62;
  padding: 14px 16px;
}

.ims-story__copy h3 { font-size: clamp(24px, 3.1vw, 42px); letter-spacing: -.06em; line-height: 1; margin: 8px 0; }
.ims-story__copy p { color: #b9c4d8; font-size: 14px; margin: 0; }
.ims-story__progress { position: absolute; right: 24px; bottom: 8vh; writing-mode: vertical-rl; font: 10px var(--mono); color: #aab5c9; letter-spacing: .12em; }

.ims-architecture {
  position: absolute;
  top: 50%;
  right: max(24px, calc((100vw - min(1120px, 86vw)) / 2));
  width: min(230px, 22vw);
  display: grid;
  gap: 5px;
  opacity: var(--architecture-opacity);
  transform: translateY(-50%) translateX(calc((1 - var(--architecture-opacity)) * 26px));
  pointer-events: none;
  z-index: 4;
}

.ims-architecture span { background: rgba(8, 13, 24, .91); border: 1px solid #52617e; padding: 8px 10px; text-align: center; font: 10px var(--mono); letter-spacing: .06em; }
.ims-architecture span:nth-child(odd) { border-color: #b8ff62; }

@media (max-width: 700px) {
  .ims-story { min-height: auto; padding: 78px 0 48px; }
  .ims-story__sticky { height: auto; min-height: 0; display: block; overflow: visible; }
  .ims-story__halo, .ims-story__progress, .ims-story__module-rail { display: none; }
  .ims-architecture { position: static; width: calc(100% - 36px); margin: 18px auto 0; opacity: 1; transform: none; }
  .ims-story__header { position: static; width: calc(100% - 36px); margin: 0 auto 36px; text-align: left; opacity: 1; transform: none; }
  .ims-story__header h2 { font-size: 54px; }
  .ims-stage { width: calc(100% - 36px); height: auto; min-height: 0; margin: 0 auto; display: grid; gap: 16px; }
  .ims-stage__frame { position: relative; inset: auto; width: 100%; transform: none; clip-path: none; }
  .ims-stage__frame--inventory, .ims-stage__frame--pos { left: auto; right: auto; transform: none; }
  .ims-stage__frame img { aspect-ratio: 1.63; }
  .ims-stage__unified { inset: 14px; opacity: 1; }
  .ims-stage__detail { position: relative; inset: auto; display: block; opacity: 1; transform: none; margin-top: 16px; }
  .ims-stage__detail img { aspect-ratio: 1.63; }
  .ims-story__copy { position: static; width: calc(100% - 36px); margin: 34px auto 0; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ims-story { min-height: auto; padding: 80px 0; }
  .ims-story__sticky { position: static; height: auto; min-height: 0; overflow: visible; }
  .ims-story__halo, .ims-story__progress, .ims-story__module-rail { display: none; }
  .ims-architecture { position: static; width: min(1120px, calc(100% - 48px)); margin: 18px auto; opacity: 1; transform: none; grid-template-columns: repeat(3, 1fr); }
  .ims-story__header, .ims-story__copy { position: static; width: min(1120px, calc(100% - 48px)); margin: 0 auto 32px; opacity: 1; transform: none; text-align: left; }
  .ims-stage { height: auto; min-height: 0; margin: 0 auto; display: grid; gap: 16px; }
  .ims-stage__frame, .ims-stage__detail { position: relative; inset: auto; width: 100%; opacity: 1; transform: none; clip-path: none; }
  .ims-stage__frame--inventory, .ims-stage__frame--pos { left: auto; right: auto; }
  .ims-stage__detail { display: block; }
  .ims-stage__unified { opacity: 1; }
}