/*!
 * MockFrame device styles
 * Adapted from Marvel devices.css (https://github.com/marvelapp/devices.css)
 * Original work Copyright (c) 2014 Marvelapp — MIT License
 * Modifications Copyright (c) 2026 Mohammed Banani — MIT License
 */
.mockframe {
  transition: all .5s cubic-bezier(.075, .82, .165, 1);
  display: inline-block;
  position: relative;
  box-sizing: content-box !important;
}

.mockframe .screen {
  z-index: 3;
  background: #fff;
  border-radius: 1px;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 3px #111;
}

.mockframe .top-bar, .mockframe .bottom-bar {
  background: #000;
  width: 100%;
  height: 3px;
  display: block;
}

.mockframe .middle-bar {
  background: #000;
  width: 3px;
  height: 4px;
  position: absolute;
  top: 0;
  left: 90px;
}

.mockframe.pixel10 {
  background: #1a1a1a;
  border-radius: 48px;
  width: 412px;
  height: 915px;
  padding: 12px;
}

.mockframe.pixel10:before {
  content: "";
  z-index: 1;
  background: #0d0d0d;
  border-radius: 44px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.pixel10:after {
  content: "";
  z-index: 2;
  pointer-events: none;
  border-radius: 40px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  display: block;
  position: absolute;
  top: 8px;
  left: 8px;
  box-shadow: inset 0 0 8px #ffffff0d;
}

.mockframe.pixel10 .screen {
  box-shadow: none;
  border-radius: 38px;
}

.mockframe.pixel10 .camera {
  z-index: 5;
  background: #101010;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  position: absolute;
  top: 24px;
  left: 50%;
  box-shadow: inset 0 0 4px #000c;
}

.mockframe.pixel10 .camera:before {
  content: "";
  background: radial-gradient(circle at 30% 30%, #2a2a3a 0%, #0a0a10 100%);
  border-radius: 100%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 3px;
  left: 3px;
}

.mockframe.pixel10 .sleep {
  background: #1a1a1a;
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 72px;
  position: absolute;
  top: 180px;
  right: -3px;
}

.mockframe.pixel10 .volume {
  background: #1a1a1a;
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 100px;
  position: absolute;
  top: 260px;
  right: -3px;
}

.mockframe.pixel10 .top-bar, .mockframe.pixel10 .bottom-bar, .mockframe.pixel10 .sensor, .mockframe.pixel10 .speaker, .mockframe.pixel10 .sensors, .mockframe.pixel10 .more-sensors, .mockframe.pixel10 .inner-shadow, .mockframe.pixel10 .home, .mockframe.pixel10 .inner {
  display: none;
}

.mockframe.pixel10.porcelain {
  background: #e8e5e1;
}

.mockframe.pixel10.porcelain:before {
  background: #0d0d0d;
}

.mockframe.pixel10.porcelain .sleep, .mockframe.pixel10.porcelain .volume {
  background: #d5d2ce;
}

.mockframe.pixel10.mint {
  background: #afdbc5;
}

.mockframe.pixel10.mint:before {
  background: #0d0d0d;
}

.mockframe.pixel10.mint .sleep, .mockframe.pixel10.mint .volume {
  background: #9bcdb5;
}

.mockframe.pixel10.rose {
  background: #e8c4c4;
}

.mockframe.pixel10.rose:before {
  background: #0d0d0d;
}

.mockframe.pixel10.rose .sleep, .mockframe.pixel10.rose .volume {
  background: #dab5b5;
}

.mockframe.pixel10.landscape {
  width: 915px;
  height: 412px;
}

.mockframe.pixel10.landscape .camera {
  margin-top: -6px;
  margin-left: 0;
  top: 50%;
  left: 24px;
}

.mockframe.pixel10.landscape .sleep {
  border-radius: 2px 2px 0 0;
  width: 72px;
  height: 3px;
  top: -3px;
  left: 180px;
  right: auto;
}

.mockframe.pixel10.landscape .volume {
  border-radius: 2px 2px 0 0;
  width: 100px;
  height: 3px;
  top: -3px;
  left: 260px;
  right: auto;
}

.mockframe.galaxy-s25 {
  background: #1e1e1e;
  border-radius: 42px;
  width: 412px;
  height: 892px;
  padding: 10px;
  box-shadow: inset 0 0 2px #ffffff26;
}

.mockframe.galaxy-s25:before {
  content: "";
  z-index: 1;
  background: #0a0a0a;
  border-radius: 40px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
}

.mockframe.galaxy-s25 .inner {
  z-index: 1;
  pointer-events: none;
  background: none;
  border-top: 2px solid #ffffff1a;
  border-bottom: 2px solid #ffffff1a;
  border-radius: 42px;
  width: 100%;
  height: calc(100% - 4px);
  position: absolute;
  top: 2px;
  left: 0;
  box-shadow: inset 0 0 4px #ffffff1a;
}

.mockframe.galaxy-s25 .screen {
  box-shadow: none;
  border-radius: 36px;
}

.mockframe.galaxy-s25 .camera {
  z-index: 5;
  background: #050505;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: 22px;
  left: 50%;
  box-shadow: 0 0 0 2px #0a0a0a;
}

.mockframe.galaxy-s25 .camera:before {
  content: "";
  background: radial-gradient(circle at 30% 30%, #1a1a2a 0%, #050510 100%);
  border-radius: 100%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
}

.mockframe.galaxy-s25 .speaker {
  z-index: 4;
  background: #0a0a0a;
  border-radius: 4px;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  position: absolute;
  top: 14px;
  left: 50%;
}

.mockframe.galaxy-s25 .sleep {
  background: #2a2a2a;
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 54px;
  position: absolute;
  top: 220px;
  right: -3px;
}

.mockframe.galaxy-s25 .volume {
  background: #2a2a2a;
  border-radius: 2px 0 0 2px;
  width: 3px;
  height: 80px;
  position: absolute;
  top: 180px;
  left: -3px;
}

.mockframe.galaxy-s25 .volume:before {
  content: "";
  background: inherit;
  border-radius: 2px 0 0 2px;
  width: 3px;
  height: 80px;
  position: absolute;
  top: 100px;
  left: 0;
}

.mockframe.galaxy-s25 .top-bar, .mockframe.galaxy-s25 .bottom-bar, .mockframe.galaxy-s25 .sensor, .mockframe.galaxy-s25 .sensors, .mockframe.galaxy-s25 .more-sensors, .mockframe.galaxy-s25 .inner-shadow, .mockframe.galaxy-s25 .home {
  display: none;
}

.mockframe.galaxy-s25 .overflow {
  pointer-events: none;
  border-radius: 42px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.mockframe.galaxy-s25 .shadow {
  background: radial-gradient(#0006 0%, #0000 60%);
  border-radius: 100%;
  width: 80px;
  height: 80px;
  position: absolute;
}

.mockframe.galaxy-s25 .shadow--tl {
  top: -15px;
  left: -15px;
}

.mockframe.galaxy-s25 .shadow--tr {
  top: -15px;
  right: -15px;
}

.mockframe.galaxy-s25 .shadow--bl {
  bottom: -15px;
  left: -15px;
}

.mockframe.galaxy-s25 .shadow--br {
  bottom: -15px;
  right: -15px;
}

.mockframe.galaxy-s25.icy-blue {
  background: #c5d5e0;
  box-shadow: inset 0 0 2px #fff6;
}

.mockframe.galaxy-s25.icy-blue:before {
  background: #0a0a0a;
}

.mockframe.galaxy-s25.icy-blue .inner {
  border-top-color: #ffffff4d;
  border-bottom-color: #ffffff4d;
}

.mockframe.galaxy-s25.icy-blue .sleep, .mockframe.galaxy-s25.icy-blue .volume {
  background: #a5b8c8;
}

.mockframe.galaxy-s25.navy {
  background: #1a2a40;
}

.mockframe.galaxy-s25.navy .sleep, .mockframe.galaxy-s25.navy .volume {
  background: #152235;
}

.mockframe.galaxy-s25.silver {
  background: silver;
  box-shadow: inset 0 0 2px #ffffff80;
}

.mockframe.galaxy-s25.silver:before {
  background: #0a0a0a;
}

.mockframe.galaxy-s25.silver .inner {
  border-top-color: #fff6;
  border-bottom-color: #fff6;
}

.mockframe.galaxy-s25.silver .sleep, .mockframe.galaxy-s25.silver .volume {
  background: #a8a8a8;
}

.mockframe.galaxy-s25.mint {
  background: #a8d8c8;
  box-shadow: inset 0 0 2px #fff6;
}

.mockframe.galaxy-s25.mint:before {
  background: #0a0a0a;
}

.mockframe.galaxy-s25.mint .sleep, .mockframe.galaxy-s25.mint .volume {
  background: #90c5b5;
}

.mockframe.galaxy-s25.landscape {
  width: 892px;
  height: 412px;
}

.mockframe.galaxy-s25.landscape .camera {
  margin-top: -5px;
  margin-left: 0;
  top: 50%;
  left: 22px;
}

.mockframe.galaxy-s25.landscape .speaker {
  width: 4px;
  height: 40px;
  margin-top: -20px;
  margin-left: 0;
  top: 50%;
  left: 14px;
}

.mockframe.galaxy-s25.landscape .sleep {
  border-radius: 2px 2px 0 0;
  width: 54px;
  height: 3px;
  top: -3px;
  left: 220px;
  right: auto;
}

.mockframe.galaxy-s25.landscape .volume {
  border-radius: 0 0 2px 2px;
  width: 80px;
  height: 3px;
  top: 100%;
  left: 180px;
}

.mockframe.galaxy-s25.landscape .volume:before {
  border-radius: 0 0 2px 2px;
  width: 80px;
  height: 3px;
  top: 0;
  left: 100px;
}