/* Живые скриншоты в карточках кейсов: окно браузера + iPhone, страница прокручивается при наведении */

/* живые скриншоты: браузер + телефон в «невесомости», при наведении страница прокручивается */
.shot {
  position: absolute;
  inset: 0;
}

.shot-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 70% at 30% 18%,color-mix(in srgb,var(--brand) 34%,transparent),transparent 70%),
    radial-gradient(50% 60% at 92% 96%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 70%),
    #08090C;
}

.shot-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 40px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 100%;
  -webkit-mask: radial-gradient(70% 70% at 50% 40%,#000,transparent);
  mask: radial-gradient(70% 70% at 50% 40%,#000,transparent);
}

/* в покое — плоский 2D-наклон: 3D-перспектива в Chrome растрирует скриншот мыльно */
.brw {
  position: absolute;
  z-index: 1;
  left: 6%;
  top: 9%;
  width: min(78cqw,(82cqh - 28px) * 1.6);
  border-radius: 12px;
  overflow: hidden;
  background: #15161A;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14),
    0 40px 80px -30px rgba(0,0,0,.95),
    0 0 80px -30px color-mix(in srgb,var(--brand) 60%,transparent);
  transform: rotate(1.4deg) skewX(-1.6deg) scale(.975);
  transform-origin: 50% 0;
  transition: transform 1.1s var(--ease);
}

.brw-top {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  background: linear-gradient(#1A1B20,#141519);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brw-top i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
}

.brw-url {
  margin-left: 12px;
  flex: 1;
  max-width: 58%;
  height: 17px;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  color: #AEB3BB;
  letter-spacing: .04em;
}

.brw-url::before {
  content: "";
  width: 6px;
  height: 7px;
  border-radius: 1.5px;
  border: 1px solid #8C919A;
  border-top-width: 2px;
}

.brw-view {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #fff;
}

.brw-img {
  width: 100%;
  height: auto;
  transform: translate3d(0,0,0);
  transition: transform 1.6s cubic-bezier(.45,0,.2,1);
  will-change: transform;
}

.case:hover .brw,
.case.is-live .brw {
  transform: none;
}

.case:hover .brw-img,
.case.is-live .brw-img {
  transform: translate3d(0,var(--pan,-70%),0);
  transition: transform 9s cubic-bezier(.45,0,.4,1) .3s;
}

/* iPhone 16 Pro: титановая рамка, чёрный безель, Dynamic Island, кнопки, статус-бар iOS, блик стекла */
.phn {
  --pw: min(21%,33cqh);
  position: absolute;
  z-index: 2;
  right: 6%;
  bottom: 7%;
  width: var(--pw);
  aspect-ratio: 71.5/149.6;
  border-radius: 16.4% / 7.84%;
  padding: calc(var(--pw) * .036);
  background: #030303;
  box-shadow: inset 0 0 0 1px #1c1c1e,
    0 0 0 1.2px #3d3d41,
    0 0 0 2px #9a9aa0,
    0 0 0 2.8px #2a2a2d,
    0 3px 6px rgba(0,0,0,.5),
    0 40px 70px -24px rgba(0,0,0,.95),
    0 0 60px -26px color-mix(in srgb,var(--brand) 70%,transparent);
  transform: translate3d(0,0,0);
  transition: transform 1.1s var(--ease);
}

.phn-b {
  position: relative;
  width: 100%;
  height: 100%;
}

.phn-k {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg,#141416,#6a6a70 60%,#2a2a2d);
}

.phn-k.a {
  left: -4.6px;
  top: 17.5%;
  height: 4.6%;
}

.phn-k.v1 {
  left: -4.6px;
  top: 25%;
  height: 8%;
}

.phn-k.v2 {
  left: -4.6px;
  top: 35%;
  height: 8%;
}

.phn-k.p {
  right: -4.6px;
  top: 27%;
  height: 12%;
  background: linear-gradient(270deg,#141416,#6a6a70 60%,#2a2a2d);
}

.phn-k.c {
  right: -4.2px;
  top: 56%;
  height: 7%;
  width: 1.1%;
  background: linear-gradient(270deg,#0e0e10,#3c3c40);
}

.phn-scr {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 13.2% / 6.1%;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.phn-scr img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top;
}

.ios-sb {
  flex: none;
  height: 12.2cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6cqw 7.5cqw 0 10.5cqw;
  background: var(--sb,#fff);
  color: var(--sbc,#000);
  font: 600 4.3cqw/1 -apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  letter-spacing: -.01em;
}

.ios-sb svg {
  height: 3.2cqw;
  width: auto;
  display: block;
  fill: currentColor;
}

.ios-ic {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
}

.phn-di {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 2.6cqw;
  width: 31cqw;
  height: 9.2cqw;
  margin-left: -15.5cqw;
  border-radius: 9cqw;
  background: #000;
}

.phn-di::after {
  content: "";
  position: absolute;
  right: 5.4cqw;
  top: 50%;
  width: 3.2cqw;
  height: 3.2cqw;
  margin-top: -1.6cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,#2a3550 0 30%,#0b0d14 70%);
}

.phn-hi {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2.2cqw;
  width: 34cqw;
  height: 1.3cqw;
  margin-left: -17cqw;
  border-radius: 2cqw;
  background: rgba(0,0,0,.75);
}

.phn-scr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 27%,rgba(255,255,255,0) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.case:hover .phn {
  transform: translate3d(0,-3%,0);
}

@media (max-width:640px) {
  .brw {
    left: 5%;
    top: 8%;
  }
  .phn {
    right: 4%;
    --pw: min(29%,36cqh);
    bottom: 5%;
  }
}