/* Prevent the base window animation from replaying after the Fluent launch finishes. */
.os-window.open {
  animation: none;
}

.os-window.open.launching {
  animation: fluent-window-open .4s cubic-bezier(.2, .85, .25, 1);
}

.window-bar {
  touch-action: none;
}

.os-window.dragging {
  transition: none !important;
  animation: none !important;
  will-change: left, top;
  user-select: none;
  box-shadow: 0 48px 120px rgba(0, 0, 0, .52), 0 0 42px rgba(53, 165, 231, .14);
}

.os-window.dragging .window-bar {
  cursor: grabbing;
}

@media (max-width: 850px) {
  .os-window.open.launching {
    animation: fluent-window-open-mobile .35s cubic-bezier(.2, .85, .25, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .os-window.open.launching {
    animation: none;
  }
}

/* Geometric workspace motion replaces the old drifting circular blobs. */
.desktop {
  isolation: isolate;
  background:
    linear-gradient(122deg, rgba(15, 86, 155, .22), transparent 38%),
    linear-gradient(158deg, #071a31 0%, #061427 52%, #030b18 100%);
}

.desktop::before {
  inset: 6vh -10vw auto auto;
  width: 58vw;
  height: 78vh;
  border-radius: 0;
  clip-path: polygon(35% 0, 100% 15%, 76% 100%, 0 78%);
  background:
    linear-gradient(128deg, rgba(77, 190, 255, .03) 10%, rgba(69, 160, 255, .28) 48%, rgba(101, 78, 255, .07) 74%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transform-origin: 60% 50%;
  animation: workspace-pane 12s cubic-bezier(.45, 0, .25, 1) infinite alternate;
}

.desktop::after {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background-image:
    repeating-linear-gradient(116deg, transparent 0 68px, rgba(88, 198, 255, .14) 69px 70px, transparent 71px 138px),
    repeating-linear-gradient(26deg, transparent 0 110px, rgba(112, 95, 255, .08) 111px 113px, transparent 114px 220px);
  background-size: 160% 160%, 145% 145%;
  opacity: .32;
  filter: none;
  mask-image: linear-gradient(105deg, transparent 8%, #000 43%, rgba(0, 0, 0, .45) 77%, transparent 96%);
  animation: workspace-data-flow 18s linear infinite;
}

.wallpaper-grid {
  opacity: .19;
  background-size: 68px 68px;
  transform-origin: center bottom;
  animation: workspace-grid 14s ease-in-out infinite alternate;
}

.wallpaper-grid::before {
  content: '';
  position: absolute;
  inset: -30% -55%;
  background: linear-gradient(102deg, transparent 42%, rgba(91, 207, 255, .11) 48%, rgba(116, 100, 255, .2) 50%, rgba(91, 207, 255, .08) 52%, transparent 58%);
  transform: translateX(-26%);
  animation: workspace-scan 8s ease-in-out infinite;
}

@keyframes workspace-pane {
  0% { transform: translate3d(3vw, -2vh, 0) skewX(-3deg) scale(.96); opacity: .55; }
  52% { transform: translate3d(-2vw, 2vh, 0) skewX(2deg) scale(1.04); opacity: .9; }
  100% { transform: translate3d(-6vw, -1vh, 0) skewX(-1deg) scale(1); opacity: .64; }
}

@keyframes workspace-data-flow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 420px -240px, -300px 210px; }
}

@keyframes workspace-grid {
  from { transform: perspective(850px) rotateX(13deg) scale(1.1) translateY(0); }
  to { transform: perspective(850px) rotateX(10deg) scale(1.16) translateY(14px); }
}

@keyframes workspace-scan {
  0%, 12% { transform: translateX(-34%); opacity: 0; }
  28% { opacity: 1; }
  76% { opacity: .85; }
  100% { transform: translateX(34%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop::before,
  .desktop::after,
  .wallpaper-grid,
  .wallpaper-grid::before {
    animation: none !important;
  }
}