/* Heyming OS — desktop surface: icons, file drag, selection box, wallpaper, drop zone.
 *
 * Color literals migrated to brand tokens. The Ghostscript tiger SVG stays
 * (it's a wallpaper, not chrome). Selection/drop accents are now brand violet.
 */

/* Desktop Icons */
.desktop-icon {
  position: absolute;
  width: 64px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: transform var(--motion-hover);
  user-select: none;
  z-index: 5;
  padding: 4px;
}

.desktop-icon:hover .icon {
  transform: scale(1.1);
}

.desktop-icon:hover .label {
  background: var(--accent-primary-bg);
  color: var(--text-on-accent);
}

.desktop-icon .icon {
  font-size: 48px;
  margin-bottom: 4px;
  transition: transform var(--motion-hover);
  text-shadow: 1px 1px 2px color-mix(in srgb, var(--pure-black) 30%, transparent);
}

.desktop-icon .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-on-accent);
  text-shadow: 1px 1px 2px color-mix(in srgb, var(--pure-black) 80%, transparent);
  text-align: center;
  line-height: 1.2;
  max-width: 64px;
  word-wrap: break-word;
  padding: 1px 3px;
  border-radius: 2px;
  transition: background var(--motion-hover), color var(--motion-hover);
}

/* Dragging state for file icons */
.desktop-icon.file-icon[draggable='true'] {
  cursor: grab;
}

.desktop-icon.file-icon:active {
  cursor: grabbing;
  opacity: 0.7;
  transform: scale(0.95);
}

.desktop-icon.file-icon.selected {
  background: var(--accent-primary-soft);
  border-radius: var(--radius-sm);
  outline: 2px solid var(--accent-primary);
}

.desktop-icon.file-icon.selected .label {
  background: var(--accent-primary-bg);
  color: var(--text-on-accent);
}

/* Keyboard focus rings for desktop icons (tab / arrow navigation) */
.desktop-icon:focus-visible {
  outline: 2px solid var(--focus-ring-inner);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--focus-ring-outer);
}

.desktop-icon.file-icon.selected:focus-visible {
  outline-color: var(--accent-primary-hover);
}

/* Desktop drag selection box */
.desktop-selection-box {
  position: absolute;
  border: 1px solid var(--accent-primary);
  background: var(--accent-primary-soft);
  border-radius: 2px;
  pointer-events: none;
  z-index: 100;
}

/* Desktop Background with Famous Ghostscript Tiger SVG */
#os-desktop {
  background-image: url('../../assets/ghostscript_tiger.svg');
  background-size: 25%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Vignette overlay deliberately removed for the heyming-engineering brand
 * (no gradients, period). The Ghostscript tiger SVG sits flat on the
 * desktop tint. The ::before pseudo-rule is preserved as a no-op so any
 * downstream JS that queries layout/size still finds it. */
#os-desktop::before {
  content: '';
  display: none;
}

/* Drop zone active state */
#os-desktop.drop-active {
  background-color: var(--accent-primary-soft);
}

#os-desktop.drop-active::after {
  content: '📥 Drop files here';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-on-accent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--pure-black) 55%, transparent);
  background: var(--accent-primary-bg);
  padding: 1.75rem 3rem;
  border-radius: var(--radius-lg);
  border: 3px dashed var(--accent-primary-hover);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pure-black) 16%, transparent);
  pointer-events: none;
  z-index: 9999;
  animation: pulse-drop 1.2s ease-in-out infinite;
}

@keyframes pulse-drop {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
    opacity: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  #os-desktop.drop-active::after {
    animation: none;
  }
}