/* effects.css: what desktopFX (effects.js) toggles. Every moving part has a reduced-motion fallback that lands on the
   same end state at once. Cursors are the browser's own: no images, nothing fetched. */

/* the desktop as a whole: a transform on #desktop takes the windows, the icons and Vulny with it; the taskbar stays */
#desktop { transition: transform .6s ease-in-out; }
#desktop.fx-flip { transform: rotate(180deg); }
#desktop.fx-mirror { transform: scaleX(-1); }
#desktop.fx-flip.fx-mirror { transform: rotate(180deg) scaleX(-1); }
/* on a phone the desktop is taller than it is wide, so a flat spin would poke out both sides mid-turn and make the page
   scroll sideways; a tumble over both axes lands on the same upside-down end state without ever leaving the viewport */
@media (max-width: 820px) {
  #desktop.fx-flip { transform: rotateX(180deg) rotateY(180deg); }
  #desktop.fx-flip.fx-mirror { transform: rotateX(180deg) rotateY(180deg) scaleX(-1); }
}

/* one window: the shake animates `translate`, which composes with the window manager's transform: translate(x, y) */
.fx-jitter { animation: fx-shake .18s linear infinite; }
@keyframes fx-shake { 0% { translate: 0 0; } 25% { translate: 3px -2px; } 50% { translate: -3px 2px; } 75% { translate: 2px 3px; } 100% { translate: -2px -3px; } }

/* cursors */
body.fx-cursor-hand, body.fx-cursor-hand * { cursor: pointer !important; }
body.fx-cursor-busy, body.fx-cursor-busy * { cursor: wait !important; }
body.fx-cursor-crosshair, body.fx-cursor-crosshair * { cursor: crosshair !important; }
body.fx-cursor-none, body.fx-cursor-none * { cursor: none !important; }

/* Comet Cursor */
.fx-trail-dot { position: fixed; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; z-index: 6500; box-shadow: 0 0 4px rgba(255,255,255,.8); animation: fx-trail .7s ease-out forwards; }
@keyframes fx-trail { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.2) translateY(8px); } }

/* canvases: matrix rain, webcam snow */
.fx-rain, .fx-noise { display: block; width: 100%; height: 100%; background: #000; image-rendering: pixelated; }

/* ASCII wallpaper: over the rainbow (#wallpaper, z 0), under the desktop (z 1) */
#fx-wallpaper { position: fixed; inset: 0; z-index: 0; margin: 0; padding: 4px 6px; overflow: hidden; pointer-events: none; user-select: none; box-shadow: none; white-space: pre;
  font: 12px/14px "Courier New", monospace; color: rgba(255,255,255,.8); text-shadow: 1px 1px 0 #000; background: rgba(0,0,0,.6); }

/* message box */
.fx-msgbox { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; }
.fx-msgbox-ico { font-size: 32px; line-height: 1; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.fx-msgbox p { margin: 0; line-height: 1.4; }
.fx-msgbox-row { justify-content: flex-end; }
.fx-primary { font-weight: bold; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf, 0 0 0 1px #000; }

/* keyboard LEDs in the tray */
#fx-leds { display: inline-flex; gap: 3px; align-items: center; padding: 0 3px; }
.fx-led { display: inline-block; width: 7px; height: 7px; border: 1px solid #555; background: #1d3a24; box-shadow: inset 1px 1px rgba(0,0,0,.5); }
.fx-led.on { background: #00ff44; box-shadow: 0 0 4px #00ff44; }

@media (prefers-reduced-motion: reduce) {
  #desktop { transition: none; }
  .fx-jitter { animation: none; }
  .fx-trail-dot { display: none; }
}