/*!
 * 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.macbook {
  background: #bebebe;
  border-radius: 34px;
  width: 960px;
  height: 600px;
  margin: 0 auto;
  padding: 44px 44px 76px;
}

.mockframe.macbook:before {
  content: "";
  background: #1e1e1e;
  border-radius: 30px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
}

.mockframe.macbook .top-bar {
  content: "";
  background: #bebebe;
  border-bottom-right-radius: 90px 18px;
  border-bottom-left-radius: 90px 18px;
  width: calc(100% + 140px);
  height: 40px;
  display: block;
  position: absolute;
  top: 680px;
  left: -70px;
  box-shadow: inset 0 -4px 13px 3px #2229;
}

.mockframe.macbook .top-bar:before {
  content: "";
  background: #f0f0f0;
  border-bottom: 2px solid #aaa;
  border-radius: 5px;
  width: 100%;
  height: 24px;
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

.mockframe.macbook .top-bar:after {
  content: "";
  background: #ddd;
  border-radius: 0 0 20px 20px;
  width: 16%;
  height: 14px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 -3px 10px #999;
}

.mockframe.macbook .bottom-bar {
  content: "";
  background: none;
  width: calc(100% + 140px);
  height: 26px;
  display: block;
  position: absolute;
  top: 680px;
  left: -70px;
}

.mockframe.macbook .bottom-bar:before, .mockframe.macbook .bottom-bar:after {
  content: "";
  width: 80px;
  height: calc(100% - 2px);
  display: block;
  position: absolute;
  top: 0;
}

.mockframe.macbook .bottom-bar:before {
  background: linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80% 100%, #f0f0f0 100%);
  left: 0;
}

.mockframe.macbook .bottom-bar:after {
  background: linear-gradient(to right, #f0f0f0 0% 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);
  right: 0;
}

.mockframe.macbook .camera {
  background: #3c3d3d;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: 20px;
  left: 50%;
}

.mockframe.macbook .home {
  display: none;
}

.mockframe.macbook-pro {
  background: #333;
  border-radius: 20px 20px 0 0;
  width: 960px;
  height: 600px;
  margin: 0 auto;
  padding: 24px 24px 0;
}

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

.mockframe.macbook-pro .screen {
  box-shadow: none;
  border-radius: 10px 10px 0 0;
}

.mockframe.macbook-pro .notch {
  z-index: 4;
  background: #0d0d0d;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  width: 180px;
  height: 24px;
  margin-left: -90px;
  position: absolute;
  top: 24px;
  left: 50%;
}

.mockframe.macbook-pro .notch:before, .mockframe.macbook-pro .notch:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 0;
}

.mockframe.macbook-pro .notch:after {
  background: radial-gradient(circle at 0 100%, #0000 0 70%, #0d0d0d 70% 100%);
  left: -8px;
}

.mockframe.macbook-pro .notch:before {
  background: radial-gradient(circle at 100% 100%, #0000 0 70%, #0d0d0d 70% 100%);
  right: -8px;
}

.mockframe.macbook-pro .notch .camera {
  z-index: 5;
  background: #3c3d3d;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  position: absolute;
  top: 8px;
  left: 50%;
}

.mockframe.macbook-pro .notch .camera:before {
  content: "";
  background: radial-gradient(circle at 30% 30%, #1a1a2a 0%, #0a0a10 100%);
  border-radius: 100%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.mockframe.macbook-pro .top-bar {
  content: "";
  background: #333;
  border-bottom-right-radius: 90px 18px;
  border-bottom-left-radius: 90px 18px;
  width: calc(100% + 140px);
  height: 40px;
  display: block;
  position: absolute;
  top: 624px;
  left: -70px;
  box-shadow: inset 0 -4px 13px 3px #0009;
}

.mockframe.macbook-pro .top-bar:before {
  content: "";
  background: linear-gradient(#444 0%, #2a2a2a 100%);
  border-bottom: 1px solid #1a1a1a;
  width: 100%;
  height: 10px;
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

.mockframe.macbook-pro .top-bar:after {
  content: "";
  background: #222;
  border-radius: 0 0 10px 10px;
  width: 14%;
  height: 6px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  box-shadow: inset 0 -2px 6px #0009;
}

.mockframe.macbook-pro .bottom-bar {
  content: "";
  background: none;
  width: calc(100% + 140px);
  height: 26px;
  display: block;
  position: absolute;
  top: 624px;
  left: -70px;
}

.mockframe.macbook-pro .bottom-bar:before, .mockframe.macbook-pro .bottom-bar:after {
  content: "";
  width: 80px;
  height: calc(100% - 2px);
  display: block;
  position: absolute;
  top: 0;
}

.mockframe.macbook-pro .bottom-bar:before {
  background: linear-gradient(to right, #2a2a2a 0%, #444 5%, #555 14%, #3a3a3a 41%, #4a4a4a 80% 100%);
  left: 0;
}

.mockframe.macbook-pro .bottom-bar:after {
  background: linear-gradient(to right, #4a4a4a 0% 20%, #3a3a3a 59%, #555 86%, #444 95%, #2a2a2a 100%);
  right: 0;
}

.mockframe.macbook-pro .home, .mockframe.macbook-pro .volume, .mockframe.macbook-pro .sleep, .mockframe.macbook-pro .sensor, .mockframe.macbook-pro .speaker, .mockframe.macbook-pro .sensors, .mockframe.macbook-pro .more-sensors, .mockframe.macbook-pro .inner-shadow, .mockframe.macbook-pro .inner {
  display: none;
}

.mockframe.macbook-pro.silver {
  background: #c5c5c5;
}

.mockframe.macbook-pro.silver:before {
  background: #0d0d0d;
}

.mockframe.macbook-pro.silver .notch {
  background: #0d0d0d;
}

.mockframe.macbook-pro.silver .notch:after {
  background: radial-gradient(circle at 0 100%, #0000 0 70%, #0d0d0d 70% 100%);
}

.mockframe.macbook-pro.silver .notch:before {
  background: radial-gradient(circle at 100% 100%, #0000 0 70%, #0d0d0d 70% 100%);
}

.mockframe.macbook-pro.silver .top-bar {
  background: #c5c5c5;
}

.mockframe.macbook-pro.silver .top-bar:before {
  background: linear-gradient(#d8d8d8 0%, #b5b5b5 100%);
  border-bottom-color: #a0a0a0;
}

.mockframe.macbook-pro.silver .top-bar:after {
  background: #a0a0a0;
  box-shadow: inset 0 -2px 6px #0000004d;
}

.mockframe.macbook-pro.silver .bottom-bar:before {
  background: linear-gradient(to right, #909090 0%, #b5b5b5 5%, #d0d0d0 14%, #a5a5a5 41%, silver 80% 100%);
}

.mockframe.macbook-pro.silver .bottom-bar:after {
  background: linear-gradient(to right, silver 0% 20%, #a5a5a5 59%, #d0d0d0 86%, #b5b5b5 95%, #909090 100%);
}