/* Производственный шоу-рил — утверждённый вариант 02 «Технический кадр». */
.page-pps .pps-tech-showreel {
  --showreel-ink: #0b2a3b;
  --showreel-muted: #56758a;
  --showreel-cyan: #00BDDC;
  --showreel-line: #c4dce8;
  --showreel-line-strong: #8db9cf;
  --showreel-motion-fast: 180ms;
  --showreel-motion-base: 260ms;
  --showreel-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--showreel-ink);
  background: linear-gradient(90deg, #eaf4f9 0 max(calc((100vw - 1440px) / 2 + 138px), 138px), #f8fcfe max(calc((100vw - 1440px) / 2 + 138px), 138px));
}

.page-pps .pps-tech-showreel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(35, 110, 150, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 110, 150, .045) 1px, transparent 1px);
  background-size: 52px 52px;
}

.page-pps .pps-tech-showreel__inner {
  width: min(100%, 1440px);
  min-height: 720px;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  margin: 0 auto;
  padding: clamp(52px, 5.5vw, 78px) clamp(28px, 7vw, 104px);
}

.page-pps .pps-tech-showreel__rail {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 24px 4px 0;
  border-right: 1px solid var(--showreel-line-strong);
}

.page-pps .pps-tech-showreel__kicker {
  color: var(--showreel-cyan);
  font: 700 11px/1 "PT Root UI", Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  rotate: 180deg;
}

.page-pps .pps-tech-showreel__rail > strong {
  color: #d3e7ef;
  font: 500 96px/1 "Commissioner Local", Commissioner, Arial, sans-serif;
  letter-spacing: -.08em;
}

.page-pps .pps-tech-showreel__rail > p {
  margin: 0;
  color: #6b8799;
  font: 700 9px/1.8 "PT Root UI", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-pps .pps-tech-showreel__main { min-width: 0; }

.page-pps .pps-tech-showreel__head {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 58px;
  align-items: end;
}

.page-pps .pps-tech-showreel__head h2 {
  margin: 0;
  font-family: "Commissioner Local", Commissioner, Arial, sans-serif;
  font-size: clamp(42px, 4.3vw, 62px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.page-pps .pps-tech-showreel__head > p {
  max-width: 420px;
  margin: 0 0 4px;
  color: var(--showreel-muted);
  font-size: 14px;
  line-height: 1.6;
}

.page-pps .pps-tech-showreel__frame {
  position: relative;
  height: 444px;
  margin-top: 34px;
  padding: 18px 18px 38px;
  border: 1px solid var(--showreel-line-strong);
  background: rgba(255, 255, 255, .8);
}

.page-pps .pps-tech-showreel__corner {
  position: absolute;
  z-index: 2;
  top: -1px;
  width: 26px;
  height: 26px;
  border-top: 3px solid var(--showreel-cyan);
}

.page-pps .pps-tech-showreel__corner--left { left: -1px; border-left: 3px solid var(--showreel-cyan); }
.page-pps .pps-tech-showreel__corner--right { right: -1px; border-right: 3px solid var(--showreel-cyan); }

.page-pps .pps-tech-showreel__film {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #071a29;
}

.page-pps .pps-tech-showreel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-pps .pps-tech-showreel__film::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 23, 38, .18), transparent 40%, rgba(4, 23, 38, .3));
  transition: opacity var(--showreel-motion-base) var(--showreel-ease);
}

.page-pps .pps-tech-showreel__play {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  min-width: 176px;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 10px 15px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 0;
  color: #fff;
  background: rgba(4, 34, 57, .86);
  box-shadow: 0 12px 28px rgba(0, 20, 36, .22);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform var(--showreel-motion-fast) var(--showreel-ease), background-color var(--showreel-motion-fast) var(--showreel-ease);
}

.page-pps .pps-tech-showreel__play[hidden] { display: none; }

.page-pps .pps-tech-showreel__play-icon {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 221, 236, .7);
  border-radius: 50%;
}

.page-pps .pps-tech-showreel__play svg { width: 20px; height: 20px; fill: #fff; transform: translateX(1px); }
.page-pps .pps-tech-showreel__play strong { align-self: end; font: 500 12px/1 "PT Root UI", Arial, sans-serif; white-space: nowrap; }
.page-pps .pps-tech-showreel__play small { align-self: start; color: #8fd4df; font: 700 9px/1 "PT Root UI", Arial, sans-serif; letter-spacing: .12em; }
.page-pps .pps-tech-showreel__play:active { transform: translate(-50%, -50%) scale(.98); }
.page-pps .pps-tech-showreel__play:focus-visible { outline: 3px solid #79e5f4; outline-offset: 4px; }

.page-pps .pps-tech-showreel__status {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 16px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .7);
  font: 700 8px/1 "PT Root UI", Arial, sans-serif;
  letter-spacing: .12em;
  pointer-events: none;
}

.page-pps .pps-tech-showreel__status i { flex: 1; height: 1px; background: rgba(255, 255, 255, .42); }
.page-pps .pps-tech-showreel__film.is-playing::after,
.page-pps .pps-tech-showreel__film.is-playing .pps-tech-showreel__status { opacity: 0; }
.page-pps .pps-tech-showreel__film.has-error .pps-tech-showreel__play { border-color: #ffb3a8; }

.page-pps .pps-tech-showreel__spec {
  position: absolute;
  right: 18px;
  bottom: 13px;
  left: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #6f8c9d;
  font: 700 8px/1 "PT Root UI", Arial, sans-serif;
  letter-spacing: .09em;
}

@media (hover: hover) and (pointer: fine) {
  .page-pps .pps-tech-showreel__play:hover {
    background: rgba(5, 59, 91, .96);
    transform: translate(-50%, calc(-50% - 2px));
  }
}

@media (max-width: 1100px) {
  .page-pps .pps-tech-showreel { background: linear-gradient(90deg, #eaf4f9 0 92px, #f8fcfe 92px); }
  .page-pps .pps-tech-showreel__inner { grid-template-columns: 92px minmax(0, 1fr); gap: 40px; padding-inline: 48px; }
  .page-pps .pps-tech-showreel__head { gap: 36px; }
}

@media (max-width: 820px) {
  .page-pps .pps-tech-showreel { background: #f8fcfe; }
  .page-pps .pps-tech-showreel__inner { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding: 48px 28px; }
  .page-pps .pps-tech-showreel__rail { min-height: 0; flex-direction: row; align-items: center; padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--showreel-line-strong); }
  .page-pps .pps-tech-showreel__kicker { writing-mode: initial; rotate: none; }
  .page-pps .pps-tech-showreel__rail > strong { font-size: 56px; }
  .page-pps .pps-tech-showreel__rail > p { text-align: right; }
  .page-pps .pps-tech-showreel__head { grid-template-columns: 1fr; gap: 20px; }
  .page-pps .pps-tech-showreel__frame { height: auto; aspect-ratio: 16 / 10.5; }
}

@media (max-width: 520px) {
  .page-pps .pps-tech-showreel__inner { padding: 38px 20px; }
  .page-pps .pps-tech-showreel__head h2 { font-size: 38px; line-height: .98; }
  .page-pps .pps-tech-showreel__head > p { font-size: 13px; }
  .page-pps .pps-tech-showreel__rail > p { display: none; }
  .page-pps .pps-tech-showreel__frame { aspect-ratio: 4 / 3; padding: 8px 8px 30px; }
  .page-pps .pps-tech-showreel__play { min-width: 0; grid-template-columns: 42px 1fr; padding: 8px 12px 8px 8px; }
  .page-pps .pps-tech-showreel__play-icon { width: 42px; height: 42px; }
  .page-pps .pps-tech-showreel__play strong { font-size: 11px; }
  .page-pps .pps-tech-showreel__spec span:nth-child(2) { display: none; }
}

@media (max-width: 360px) {
  .page-pps .pps-tech-showreel__inner { padding-inline: 16px; }
  .page-pps .pps-tech-showreel__head h2 { font-size: 34px; }
  .page-pps .pps-tech-showreel__play strong { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .page-pps .pps-tech-showreel__play,
  .page-pps .pps-tech-showreel__film::after { transition-duration: 1ms; }
  .page-pps .pps-tech-showreel__play:active { transform: translate(-50%, -50%); }
}