/* Browser mockup
   Usage: .browser-mockup > .browser-mockup__viewport > img + optional figcaption */
.browser-mockup {
  --mockup-from: #e6f5df;
  --mockup-to: #f8fbf4;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --media-scale: 1;
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: clamp(24px, 4vw, 46px);
  background: linear-gradient(145deg, var(--mockup-from), var(--mockup-to));
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 30px;
  perspective: 1400px;
}

.browser-mockup::before,
.browser-mockup::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.browser-mockup::before {
  top: 5%;
  right: 3%;
  width: 32%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, .48);
  border-radius: 50%;
  filter: blur(2px);
}

.browser-mockup::after {
  bottom: 8%;
  left: 4%;
  width: 74px;
  height: 42px;
  opacity: .3;
  background-image: radial-gradient(circle, rgba(39, 106, 55, .6) 1.5px, transparent 1.7px);
  background-size: 13px 13px;
}

.browser-mockup__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 1.78 / 1;
  padding-top: 38px;
  background: rgba(248, 250, 248, .84);
  border: 1px solid rgba(194, 206, 197, .9);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(25, 48, 31, .17), 0 6px 18px rgba(25, 48, 31, .08), inset 0 1px rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transform: translate3d(0, var(--mockup-lift, 0), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--media-scale));
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .75, .2, 1), box-shadow .45s ease;
  will-change: transform;
}

.browser-mockup__viewport::before {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 8px;
  height: 8px;
  content: "";
  background: #ef8f83;
  border-radius: 50%;
  box-shadow: 14px 0 #efc764, 28px 0 #74c98b;
}

.browser-mockup__viewport::after {
  position: absolute;
  top: 10px;
  left: 50%;
  width: min(42%, 250px);
  height: 18px;
  content: "";
  background: rgba(222, 228, 223, .8);
  border: 1px solid rgba(209, 217, 211, .8);
  border-radius: 6px;
  transform: translateX(-50%);
}

.browser-mockup__viewport img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #f2f5f2;
}

.browser-mockup figcaption {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 12px 0 -4px 8px;
  padding: 6px 10px;
  color: #59655c;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(218, 226, 219, .9);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(30, 52, 35, .07);
  backdrop-filter: blur(10px);
  font-size: .67rem;
  font-weight: 750;
}

.browser-mockup:hover {
  --mockup-lift: -6px;
  --media-scale: 1.008;
}

.browser-mockup:hover .browser-mockup__viewport {
  box-shadow: 0 38px 82px rgba(25, 48, 31, .2), 0 8px 22px rgba(25, 48, 31, .08);
}

.browser-mockup--hero {
  padding: clamp(18px, 3vw, 32px);
  --mockup-from: rgba(227, 245, 220, .72);
  --mockup-to: rgba(255, 247, 237, .72);
}

.browser-mockup--hero .browser-mockup__viewport {
  aspect-ratio: 1.8 / 1;
  padding-top: 46px;
  border-radius: 18px;
}

.browser-mockup--hero .browser-mockup__viewport::before { top: 19px; left: 18px; }
.browser-mockup--hero .browser-mockup__viewport::after { top: 12px; height: 23px; }

.browser-mockup--compact { padding: 18px; border-radius: 22px; }
.browser-mockup--compact .browser-mockup__viewport { padding-top: 30px; border-radius: 11px; }
.browser-mockup--compact .browser-mockup__viewport::before { top: 11px; left: 11px; width: 6px; height: 6px; box-shadow: 11px 0 #efc764, 22px 0 #74c98b; }
.browser-mockup--compact .browser-mockup__viewport::after { top: 7px; height: 15px; }
.browser-mockup--compact figcaption { margin-top: 9px; }

@media (max-width: 720px) {
  .browser-mockup { padding: 15px; border-radius: 21px; }
  .browser-mockup__viewport { padding-top: 30px; border-radius: 11px; }
  .browser-mockup__viewport::before { top: 11px; left: 11px; width: 6px; height: 6px; box-shadow: 11px 0 #efc764, 22px 0 #74c98b; }
  .browser-mockup__viewport::after { top: 7px; height: 15px; }
  .browser-mockup::after { display: none; }
}

@media (prefers-contrast: more) {
  .browser-mockup__viewport { border-color: #8d9c90; }
}