* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--desktop-void);
}

a {
  color: var(--ink);
}

a:hover {
  color: var(--bevel-blue-light);
}

button {
  font: inherit;
}

@keyframes cpBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes cpPop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

#desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--desktop-void) url("../assets/bg-poster.png") center / cover no-repeat;
  font-family: var(--font-verdana);
  -webkit-font-smoothing: antialiased;
}

#bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

#scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
}

/* Fades the flickering background video to black while reel.html (the
   Vimeo embed) is open, and back once it's closed. Sits above the video and
   scanlines but below the window stack so it never dims the window itself. */
#video-dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

#video-dim[data-active="1"] {
  opacity: 1;
}

/* #window-stack itself is deliberately not given position/size in CSS:
   each .window-frame child is independently position:absolute against
   #desktop (the nearest positioned ancestor). An empty full-bleed box here
   would sit above #desktop-icon-layer in z-order and swallow clicks meant
   for the boot icon underneath it. */

#desktop-icon-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#loader-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: min(520px, 92vw);
}