/* XENEON EDGE device, after scripts/art/compose.mjs device(). Everything is in em: 1em = 1% of the screen width, set from --w. */
@property --ratio { syntax: "<number>"; inherits: true; initial-value: 3.5556; }

.edge-stage { container-type: inline-size; display: grid; justify-items: center; padding-block: 1.5rem 2rem; }

.edge-device {
  --w: min(86cqw, 1180px, calc(68vh * var(--ratio)));
  --ratio: 3.5556;
  --tilt: 0deg;
  --lift: 0deg;
  --bezel: 1.1em;
  position: relative;
  box-sizing: content-box;
  font-size: calc(var(--w) / 100);
  width: 100em;
  height: calc(100em / var(--ratio));
  padding: var(--bezel);
  margin-bottom: calc(100em / var(--ratio) * 0.2);
  transform: rotateY(var(--tilt)) rotateX(var(--lift));
  transition: --ratio 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease-out;
}

.edge-device > * { position: absolute; }

.edge-glow {
  inset: -3em;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mts-green) 33%, transparent), transparent 72%);
  filter: blur(2em);
  opacity: 0.55;
  pointer-events: none;
}

.edge-body {
  inset: 0;
  border-radius: 2em;
  background: linear-gradient(150deg, #34343a 0%, #0c0c0e 55%, #161618 100%);
  box-shadow: 0 0 0 0.13em rgb(255 255 255 / 0.07), 0 1.2em 3em rgb(0 0 0 / 0.65), 0.6em 1em 0 #0a0a0b;
}

.edge-stand {
  left: 42%;
  top: 100%;
  width: 16%;
  height: 20%;
  margin-top: -2px;
  background: linear-gradient(#1c1c1e, #0b0b0c);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.edge-screen {
  left: var(--bezel);
  top: var(--bezel);
  width: 100em;
  height: calc(100em / var(--ratio));
  border-radius: 0.9em;
  overflow: hidden;
  background: var(--mts-surface-000);
}

/* Checkerboard under the widget only, so transparency reads against something. */
.edge-screen::before {
  content: "";
  position: absolute;
  left: calc(var(--k, 0.1) * 12px);
  top: calc(var(--k, 0.1) * 12px);
  width: calc(var(--sw) * var(--k, 0.1) * 1px);
  height: calc(var(--sh) * var(--k, 0.1) * 1px);
  background-image: conic-gradient(var(--mts-surface-200) 25%, var(--mts-surface-100) 0 50%, var(--mts-surface-200) 0 75%, var(--mts-surface-100) 0);
  background-size: 3em 3em;
}

/* --k is screen pixels per widget pixel, set by site.js from the measured width. */
.edge-screen iframe {
  position: absolute;
  left: calc(var(--k, 0.1) * 12px);
  top: calc(var(--k, 0.1) * 12px);
  width: calc(var(--sw) * 1px);
  height: calc(var(--sh) * 1px);
  border: 0;
  background: transparent;
  transform: scale(var(--k, 0.1));
  transform-origin: 0 0;
}

.edge-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgb(255 255 255 / 0.13) 0%, rgb(255 255 255 / 0) 34%);
  box-shadow: inset 0 0 3em rgb(0 0 0 / 0.45);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .edge-device { transition: none; }
}