/* Desktop: wallpaper layers, icons (rest / hover states), entrance. */

.screen { position: fixed; inset: 0 0 var(--taskbar-h) 0; overflow: hidden; }
.windows { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.windows > .win { pointer-events: auto; }
.win.is-max { inset: 0 !important; }

/* ---------- wallpaper ---------- */
.wallpaper { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0a1fd6; }
.wallpaper img, .wp-sky { image-rendering: pixelated; user-select: none; }
.wp-sky { position: absolute; inset: 0; background: url(../assets/wallpaper/wallpaper-sky.png) center / cover no-repeat; }
.wp-hill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wp-cloud-track {
  position: absolute; left: 0; top: var(--y); width: 200vw;
  animation: wp-drift var(--dur) linear infinite;
  will-change: transform;
}
.wp-cloud-track img { position: absolute; top: 0; width: var(--w); height: auto; left: var(--x); }
.wp-cloud-track img + img { left: calc(var(--x) + 100vw); }
@keyframes wp-drift { to { transform: translateX(-100vw); } }

.wp-shimmer {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../assets/wallpaper/wallpaper-hill.png) center / cover no-repeat;
          mask: url(../assets/wallpaper/wallpaper-hill.png) center / cover no-repeat;
  background: linear-gradient(100deg, transparent 42%, rgb(255 255 160 / .13) 50%, transparent 58%) 0 0 / 300% 100% no-repeat;
  animation: wp-shimmer 16s steps(64) infinite;
}
@keyframes wp-shimmer { from { background-position: 120% 0; } to { background-position: -220% 0; } }

.wp-still { background: url(../assets/wallpaper/wallpaper-desktop.png) center / cover no-repeat; image-rendering: pixelated; }
@media (max-width: 767px) { .wp-still { background-image: url(../assets/wallpaper/wallpaper-mobile.png); } }

/* ---------- icons ---------- */
.icons {
  --art: 64px;
  --tile-w: 164px;
  --tile-h: calc(var(--art) + 29px + 26px);
  position: absolute; z-index: 2; top: 10px; left: 6px; bottom: 6px;
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, var(--tile-h));
  grid-auto-columns: var(--tile-w);
  gap: 2px 0; align-content: start;
}
@media (min-width: 1024px) { .icons { --art: 96px; } }

.desk-icon {
  width: var(--tile-w); height: var(--tile-h); padding: 8px 0 0; border: 0; background: none;
  display: flex; justify-content: center; align-items: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.desk-icon:focus-visible { outline: none; }
.di-lift {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transform-origin: 50% 85%;
  transition: transform 460ms var(--ease-spring);
}
.desk-icon[data-state="hover"] .di-lift { transform: translateY(-6px) scale(1.1); }

.di-art {
  position: relative; width: var(--art); height: var(--art);
  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / .35));
  transition: filter 460ms var(--ease-out);
}
.desk-icon[data-state="hover"] .di-art { filter: drop-shadow(6px 9px 0 rgb(0 0 0 / .2)); }
.di-art img { position: absolute; inset: 0; width: 100%; height: 100%; }

.di-label { display: block; width: 154px; height: 29px; padding: 0 2px; }
.desk-icon:focus-visible .di-label { background: var(--select); outline: 1px dotted var(--light); outline-offset: -1px; }

/* rest/hover image swap */
.l-hover { visibility: hidden; }
.desk-icon[data-state="hover"] .l-hover { visibility: visible; }
.desk-icon[data-state="hover"] .l-rest { visibility: hidden; }

/* folders: flap pops open, badge comes alive */
.desk-icon[data-kind="folder"][data-state="hover"] .l-hover { transform-origin: 50% 85%; animation: folder-pop 220ms steps(3) both; }
@keyframes folder-pop { from { transform: scaleY(.84); } }
.l-badge { transition: transform 200ms steps(2); }
.desk-icon[data-state="hover"] .l-badge { transform: translateY(-3%); }
.desk-icon[data-state="hover"] .b-badge-cd { animation: cd-shimmer 900ms steps(9) infinite; }
@keyframes cd-shimmer { to { filter: hue-rotate(360deg) saturate(1.6); } }
.desk-icon[data-state="hover"] .b-badge-film { transform-origin: 75% 70%; animation: reel-spin 800ms steps(4) infinite; }
@keyframes reel-spin { 25% { transform: translateY(-3%) rotate(-6deg); } 75% { transform: translateY(-3%) rotate(6deg); } }
.desk-icon[data-state="hover"] .b-badge-crt { animation: crt-blink 1s steps(1) infinite; }
@keyframes crt-blink { 50% { filter: brightness(1.7) saturate(1.3); } }
.desk-icon[data-state="hover"] .b-badge-phone { animation: phone-glow 900ms steps(3) infinite alternate; }
@keyframes phone-glow { to { filter: brightness(1.45) saturate(1.4); } }

/* showreel TV: CRT power-on flicker, then antennas wiggle */
.desk-icon[data-kind="tv"][data-state="hover"] .l-hover { animation: tv-on 420ms steps(1) both; }
@keyframes tv-on {
  0% { opacity: 0; } 18% { opacity: 1; filter: brightness(2.4); } 32% { opacity: .15; }
  52% { opacity: 1; filter: brightness(1.5); } 70% { filter: brightness(1.1); } 100% { opacity: 1; filter: none; }
}
.desk-icon[data-kind="tv"][data-state="hover"] .di-art { animation: tv-wiggle 320ms steps(2) 420ms 2; }
@keyframes tv-wiggle { 50% { transform: rotate(-2.5deg); } }

/* contact: flip phone opens from the hinge, screen glows */
.desk-icon[data-kind="phone"][data-state="hover"] .l-hover {
  transform-origin: 50% 90%;
  animation: phone-flip 260ms steps(3) both, phone-screen 900ms steps(2) 300ms infinite alternate;
}
@keyframes phone-flip { from { transform: scaleY(.45); } }
@keyframes phone-screen { to { filter: brightness(1.18) saturate(1.2); } }

/* about: pencil scribbles a line */
.l-pencil { transition: transform 200ms steps(2); }
.l-scribble { position: absolute; left: 16%; top: 71%; width: 0; height: 3.2%; background: #1d1d6b; }
.desk-icon[data-kind="notepad"][data-state="hover"] .l-pencil { animation: pencil-scribble 520ms steps(4) infinite; }
@keyframes pencil-scribble { 0% { transform: translate(-12%, 4%); } 50% { transform: translate(-2%, 2%); } 100% { transform: translate(-12%, 4%); } }
.desk-icon[data-kind="notepad"][data-state="hover"] .l-scribble { animation: scribble-line 640ms steps(8) forwards; }
@keyframes scribble-line { to { width: 44%; } }

/* outtakes: the crumpled film jiggles */
.desk-icon[data-kind="trash"][data-state="hover"] .l-base { transform-origin: 50% 95%; animation: jiggle 480ms steps(4) infinite; }
@keyframes jiggle { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

/* instagram: the camera flashes */
.desk-icon { text-decoration: none; }
.l-flash { position: absolute; left: 50%; top: 46%; width: 0; height: 0; border-radius: 50%; background: #fff; opacity: 0; }
.desk-icon[data-kind="camera"][data-state="hover"] .l-flash { animation: cam-burst 700ms steps(4) infinite; }
@keyframes cam-burst {
  0% { width: 0; height: 0; margin: 0; opacity: 0; }
  20% { width: 70%; height: 70%; margin: -35% 0 0 -35%; opacity: .95; }
  60% { width: 90%; height: 90%; margin: -45% 0 0 -45%; opacity: 0; }
  100% { opacity: 0; }
}
.desk-icon[data-kind="camera"][data-state="hover"] .l-base { animation: cam-flash 700ms steps(2) infinite; }

/* tiktok: the clapper snaps shut and open */
.desk-icon[data-kind="clapper"][data-state="hover"] .l-rest { visibility: visible; }
.desk-icon[data-kind="clapper"][data-state="hover"] .l-hover { animation: clap 520ms steps(1) infinite; }
@keyframes clap { 0% { visibility: visible; } 55% { visibility: hidden; } }

/* ---------- entrance: CRT power-on + icons pop in (< 1s total) ---------- */
.boot-flash { position: fixed; inset: 0; z-index: 9500; pointer-events: none; display: none; }
.is-booting .boot-flash {
  display: block; background: #fff;
  animation: crt-on 380ms steps(6) forwards;
}
@keyframes crt-on {
  0% { transform: scale(1, .004); opacity: 1; }
  40% { transform: scale(1, .004); opacity: 1; }
  70% { transform: scale(1, 1); opacity: .55; }
  100% { transform: scale(1, 1); opacity: 0; }
}
.is-booting .desk-icon { animation: icon-pop 260ms var(--ease-spring) both; animation-delay: calc(240ms + var(--i) * 60ms); }
@keyframes icon-pop { from { transform: translateY(8px) scale(.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .desk-icon[data-state="hover"] .di-lift, .desk-icon[data-state="hover"] .l-badge { transform: none; }
  .desk-icon[data-state="hover"] .l-scribble { width: 44%; }
  .is-booting .boot-flash { display: none; }
  .wp-cloud-track, .wp-shimmer { animation: none; }
}

/* ---------- taskbar ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: 8000;
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 3px;
  background: var(--chrome);
  box-shadow: inset 0 1px var(--mid), inset 0 2px var(--light);
}
.start-btn { display: flex; align-items: center; gap: 5px; height: 32px; padding: 2px 10px 2px 4px; font-weight: 600; font-size: var(--fs-m); }
.start-btn.is-pressed { box-shadow: var(--pressed); }
.start-orb { width: 24px; height: 24px; }
.start-btn:hover .start-orb { animation: orb-shine 600ms steps(4); }
@keyframes orb-shine { 50% { filter: brightness(1.6) saturate(1.3); } }

.start-menu {
  position: absolute; left: 3px; bottom: calc(var(--taskbar-h) - 3px);
  display: flex; min-width: 230px; padding: 3px;
  background: var(--chrome); box-shadow: var(--raised);
}
.start-banner {
  width: 30px; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  background: linear-gradient(0deg, var(--sky-deep), var(--sky));
}
.start-banner span { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--light); font-weight: 600; font-size: var(--fs-l); letter-spacing: .02em; }
.start-items { flex: 1; display: flex; flex-direction: column; padding: 2px 0; }
.start-items button {
  display: flex; align-items: center; gap: 10px; padding: 4px 18px 4px 8px; border: 0; background: none;
  font-size: var(--fs-m); text-align: left;
}
.start-items img { width: 32px; height: 32px; }
.start-items button:hover, .start-items button:focus-visible { background: var(--select); color: var(--light); outline: none; }

.task-btns { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.task-btn {
  display: flex; align-items: center; gap: 5px; min-width: 0; width: 170px; height: 32px; padding: 2px 8px;
  border: 0; background: var(--chrome); box-shadow: var(--raised); text-align: left; font-size: var(--fs-s);
}
.task-btn img { width: 16px; height: 16px; flex: none; }
.task-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-btn[aria-pressed="true"] {
  box-shadow: var(--pressed); font-weight: 600;
  background: repeating-conic-gradient(var(--chrome) 0 25%, var(--light) 0 50%) 0 0 / 2px 2px;
}

.tray {
  display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 6px;
  box-shadow: var(--sunken); font-size: var(--fs-s);
}
.tray a, .sound-btn { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border: 0; padding: 0; background: none; }
.tray a img { position: absolute; inset: 1px; width: 24px; height: 24px; }
.tray .l-hover { visibility: hidden; }
.tray a:hover .l-hover, .tray a:focus-visible .l-hover { visibility: visible; }
.tray a:hover .l-rest, .tray a:focus-visible .l-rest { visibility: hidden; }
.tray a[data-kind="instagram"]:hover img { animation: cam-flash 420ms steps(2); }
@keyframes cam-flash { 30% { filter: brightness(3) saturate(0); } }
.tray a:hover, .sound-btn:hover { transform: translateY(-1px); }
.clock { min-width: 44px; text-align: right; padding-left: 4px; }