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

/* живые скриншоты: плоская графика с жёсткими тенями; при наведении страница прокручивается */
.sw {
  position: absolute;
  inset: 0;
}

.sw-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask: linear-gradient(120deg,#000,transparent 70%);
  mask: linear-gradient(120deg,#000,transparent 70%);
}

.kb {
  position: absolute;
  left: 6%;
  top: 9%;
  width: 74%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 0 0 2px var(--ink),.7em .7em 0 var(--acc);
  transform: rotate(-2.2deg);
  transition: transform .9s var(--e1),box-shadow .9s var(--e1);
}

.kb-top {
  display: flex;
  align-items: center;
  gap: .5em;
  height: 2.4em;
  padding: 0 1em;
  background: var(--pale);
  border-bottom: 2px solid var(--ink);
}

.kb-top i {
  width: .75em;
  height: .75em;
  border-radius: 50%;
  background: var(--ink);
}

.kb-top i:nth-child(2) {
  background: var(--acc);
}

.kb-top i:nth-child(3) {
  background: var(--card);
  box-shadow: 0 0 0 1.5px var(--ink);
}

.kb-url {
  margin-left: 1em;
  height: 1.5em;
  padding: 0 .9em;
  border-radius: 99px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  display: flex;
  align-items: center;
  font-size: .95em;
  font-weight: 700;
  color: var(--ink);
}

.kb-view {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

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

/* на тач-экранах то же самое делает класс .is-live (карточка в кадре), а не залипающий :hover */
.case.is-live .kb {
  transform: rotate(0deg);
  box-shadow: 0 0 0 2px var(--ink),1.1em 1.1em 0 var(--acc);
}

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

@media (hover:hover) and (pointer:fine) {
  .case:hover .kb {
    transform: rotate(0deg);
    box-shadow: 0 0 0 2px var(--ink),1.1em 1.1em 0 var(--acc);
  }
  .case:hover .kb-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: 22%;
  position: absolute;
  z-index: 2;
  right: 5%;
  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 30px 60px -18px rgba(0,0,0,.7);
  transform: translate3d(0,0,0);
  transition: transform 1.1s var(--e1);
}

.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);
}

@media (hover:hover) and (pointer:fine) {
  .case:hover .phn {
    transform: translate3d(0,-3%,0);
  }
}

.sticker {
  position: absolute;
  z-index: 3;
  left: 4%;
  bottom: 7%;
  padding: .6em 1.1em;
  border-radius: 99px;
  background: var(--acc);
  color: var(--ink);
  font: 900 1.9em/1 var(--f-x);
  text-transform: uppercase;
  letter-spacing: .01em;
  box-shadow: 0 0 0 2px var(--ink);
  transform: rotate(-6deg);
  transition: transform .9s var(--e1);
}

.case--l .sticker {
  background: var(--card);
}

@media (hover:hover) and (pointer:fine) {
  .case:hover .sticker {
    transform: rotate(0deg) scale(1.06);
  }
}

@media (max-width:640px) {
  .kb {
    width: 82%;
    left: 5%;
  }
  .phn {
    --pw: 29%;
    right: 4%;
    bottom: 5%;
  }
  .sticker {
    font-size: 2.6em;
  }
}