/* Clamshell v2 homepage: interactive "close the lid" demo (see lid-demo.js). */
.ld {
  --ld-mute: #62666d;
  --ld-deep: #1f3480;
  --ld-blue: #345cd6;
  --ld-light: #7d9aff;
  width: 100%;
}

.ld-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.ld-canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  image-rendering: pixelated;
  pointer-events: none;
}
.ld-on .ld-canvas { display: block; }

/* The whole laptop is one button: click, Enter or Space toggles the lid; drag moves it. */
.ld-hit {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.ld-on .ld-hit { display: block; }
.ld.is-dragging .ld-hit { cursor: grabbing; }
.ld-hit:focus-visible { outline: 2px solid var(--ld-light); outline-offset: -4px; }

/* No-JS frame: a closed, dithered laptop. */
.ld-fallback {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 26%;
  pointer-events: none;
}
.ld-on .ld-fallback { display: none; }
.ld-fb-slab {
  width: 58%;
  height: 72%;
  margin: 0 auto;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  background: repeating-conic-gradient(var(--ld-blue) 0 25%, var(--ld-deep) 0 50%) 0 0 / 6px 6px;
}
.ld-fb-lip {
  width: 63%;
  height: 9px;
  margin: 0 auto;
  background: var(--ld-blue);
}

.ld-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}