/* ============================== ТЕХНОЛОГИИ (REDESIGN-30) ==============================
   Кусок d3/m3: слева нарисованный разрез с тремя слоями ткани — без подписей; справа ледяная табличка
   (кадр tk-ice-tablet), в неё «вморожены» название, вступление и пять пунктов — без иконок и линий.
   Под разрезом — пять нарисованных линз деталей (tech-lens-*), разложенных волной по снегу, подписи напечатаны на карте.
   Координаты — от верха куска (--ph — его высота): блок технологий ровно с отрезок куска, картина едет 1:1. */
.ws-tk { position: relative; }

.wk-tablet {
  position: absolute;
  left: 71%;
  top: calc(var(--ph, 960px) * 0.2);
  z-index: 3;
  width: min(29%, 470px);
  min-height: calc(min(29vw, 470px) * 1.5);
  padding: calc(min(29vw, 470px) * 0.16) calc(min(29vw, 470px) * 0.16) calc(min(29vw, 470px) * 0.22) calc(min(29vw, 470px) * 0.2);
  background: url("/img/world/assets/tk-ice-tablet/main-720.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(-2px 4px 2px rgba(138, 143, 200, 0.32)) drop-shadow(-10px 14px 14px rgba(138, 143, 200, 0.22));
}
.wk-tablet-in {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #353535;
}
.wk-title {
  margin: 0;
  font: 600 clamp(22px, 2cqw, 30px)/1 "Unbounded", "Montserrat", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9d302b;
}
.wk-intro {
  margin: 12px 0 0;
  font: 500 13px/1.42 "Montserrat", sans-serif;
  color: #353535;
}
.wk-specs {
  display: grid;
  gap: 11px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.wk-spec-k {
  margin: 0;
  font: 400 11px/1.2 "Cousine", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(53, 53, 53, 0.8);
}
.wk-spec-v {
  margin: 3px 0 0;
  font: 600 clamp(17px, 1.45cqw, 22px)/1.1 "Unbounded", "Montserrat", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #9d302b;
}
.wk-spec-t {
  margin: 3px 0 0;
  font: 500 12px/1.35 "Montserrat", sans-serif;
  color: #353535;
}

/* «Конструкция» — топоним над волной линз */
.wk-build-title { --wt-x: 49%; --wt-y: calc(var(--ph, 960px) * 0.01); --wt-rz: -3deg; }

.wk-lenses {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wk-lens {
  --d: clamp(92px, 7.6cqw, 128px);
  position: absolute;
  z-index: 3;
  width: calc(var(--d) * 1.6);
  text-align: center;
}
.wk-lens:nth-child(1) { left: 51.5%; top: calc(var(--ph, 960px) * 0.075); }
.wk-lens:nth-child(2) { left: 58%;   top: calc(var(--ph, 960px) * 0.255); }
.wk-lens:nth-child(3) { left: 52.5%; top: calc(var(--ph, 960px) * 0.435); }
.wk-lens:nth-child(4) { left: 58%;   top: calc(var(--ph, 960px) * 0.615); }
.wk-lens:nth-child(5) { left: 52.5%; top: calc(var(--ph, 960px) * 0.795); }
.wk-glass {
  position: relative;
  display: block;
  width: var(--d);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--art, #fff) center / contain no-repeat;
}
/* контактная тень-эллипс на снегу, цвет тени дня */
.wk-glass::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -9%;
  z-index: -1;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138, 143, 200, 0.5), transparent);
  translate: -6% 0;
}
.wk-lens-title {
  margin: 8px 0 0;
  font: 600 13px/1.25 "Unbounded", "Montserrat", sans-serif;
  color: #2f2a33;
}
.wk-lens-text {
  margin: 3px 0 0;
  font: 600 12.5px/1.38 "Montserrat", sans-serif;
  color: #2f2a33;
}
.wk-lens-title,
.wk-lens-text {
  text-shadow: 0 0 2px #fff, 0 0 6px rgba(255, 255, 255, 0.9);
}

@media not all {
  .wk-spec,
  .wk-intro,
  .wk-title {
    opacity: 0;
    filter: blur(6px);
    transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--k, -1) * 90ms + 180ms);
  }
  .wk-tablet.is-in .wk-spec,
  .wk-tablet.is-in .wk-intro,
  .wk-tablet.is-in .wk-title { opacity: 1; filter: none; }

  .wk-lens {
    opacity: 0;
    transform: translateY(-14px) scale(1.04);
    transition: opacity 300ms ease-out, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--k, 0) * 90ms);
  }
  .wk-lenses.is-in .wk-lens { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .wk-glass { transition: transform 180ms ease-out; }
  .wk-glass::after { transition: opacity 180ms ease-out, transform 180ms ease-out; }
  .wk-lens:hover .wk-glass { transform: scale(1.06); }
  .wk-lens:hover .wk-glass::after { opacity: 0.6; transform: scale(1.15); }
}

/* телефон: разрез во всю ширину вверху куска, ниже табличка, ниже линзы волной — подпись с противоположной стороны */
@media (max-width: 767px) {
  .ws-tk { padding: calc(var(--ph, 585px) * 0.62) 16px 32px; }
  .wk-tablet { position: relative; left: auto; top: auto; width: min(88%, 360px); margin: 0 auto; }
  .wk-tablet { padding: 56px 44px 70px 46px; min-height: 0; }
  .wk-title { font-size: 22px; }
  .wk-intro { font-size: 12.5px; }
  .wk-specs { gap: 8px; margin-top: 12px; }
  .wk-spec-v { font-size: 17px; }
  .wk-spec-t { font-size: 11.5px; }
  .wk-build-title { position: relative; left: auto; top: auto; display: block; margin: 34px 0 40px 4px; transform: rotate(-2deg); }
  .wk-lenses { display: grid; gap: 24px; margin-bottom: 360px; }
  .wk-lens {
    --d: 132px;
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    display: grid;
    grid-template-columns: var(--d) minmax(0, 214px);
    align-items: center;
    gap: 4px 12px;
    min-height: calc(var(--d) + 24px);
    text-align: left;
  }
  .wk-lens:nth-child(even) { grid-template-columns: minmax(0, 214px) var(--d); justify-content: end; text-align: right; }
  .wk-lens:nth-child(even) .wk-glass { grid-column: 2; grid-row: 1 / span 2; }
  .wk-lens .wk-glass { grid-row: 1 / span 2; margin: 0; }
  .wk-lens-title { margin: 0; align-self: end; }
  .wk-lens-text { align-self: start; }
}