/* ============================================================
   Materia OS — Bureau : boot, wallpaper, widget, icônes
   ============================================================ */

/* --- Écran de démarrage --- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--surface);
  transition: opacity .6s var(--ease), visibility .6s;
}
#boot.done { opacity: 0; visibility: hidden; }
.boot-logo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: boot-pulse 1.6s var(--ease) infinite;
}
.boot-core {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  animation: boot-morph 1.6s var(--ease) infinite;
}
@keyframes boot-pulse {
  0%, 100% { border-radius: 50%; transform: rotate(0deg) scale(1); }
  50% { border-radius: 30%; transform: rotate(45deg) scale(1.08); }
}
@keyframes boot-morph {
  0%, 100% { border-radius: 50%; }
  50% { border-radius: 26%; }
}
.boot-name {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 6px;
  color: var(--on-surface-variant);
  text-transform: uppercase;
}

/* --- Bureau --- */
#desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* --- Fond d'écran --- */
#wallpaper {
  position: absolute;
  inset: 0;
  background: var(--surface-dim);
  overflow: hidden;
  transition: background 1s var(--ease);
}
#wallpaper .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .85;
  will-change: transform;
}
#wallpaper .b1 {
  width: 55vw; height: 55vw;
  top: -18vw; left: -12vw;
  background: hsl(var(--hue) 70% 74%);
  animation: drift1 34s ease-in-out infinite alternate;
}
#wallpaper .b2 {
  width: 48vw; height: 48vw;
  bottom: -20vw; right: -10vw;
  background: hsl(calc(var(--hue) + 60) 60% 70%);
  animation: drift2 42s ease-in-out infinite alternate;
}
#wallpaper .b3 {
  width: 30vw; height: 30vw;
  top: 32%; left: 42%;
  background: hsl(calc(var(--hue) - 40) 55% 78%);
  opacity: .55;
  animation: drift3 28s ease-in-out infinite alternate;
}
:root[data-mode="dark"] #wallpaper .b1 { background: hsl(var(--hue) 45% 30%); }
:root[data-mode="dark"] #wallpaper .b2 { background: hsl(calc(var(--hue) + 60) 38% 26%); }
:root[data-mode="dark"] #wallpaper .b3 { background: hsl(calc(var(--hue) - 40) 35% 32%); opacity: .5; }

@keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.15) rotate(20deg); } }
@keyframes drift2 { to { transform: translate(-10vw, -12vh) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-14vw, 10vh) scale(1.25); } }

/* Style « Mesh » */
:root[data-wallpaper="mesh"] #wallpaper .blob { display: none; }
:root[data-wallpaper="mesh"] #wallpaper {
  background:
    radial-gradient(at 20% 20%, hsl(var(--hue) 65% 75%) 0, transparent 55%),
    radial-gradient(at 80% 15%, hsl(calc(var(--hue) + 70) 60% 76%) 0, transparent 50%),
    radial-gradient(at 75% 85%, hsl(calc(var(--hue) - 50) 55% 72%) 0, transparent 55%),
    radial-gradient(at 15% 80%, hsl(calc(var(--hue) + 30) 60% 78%) 0, transparent 50%),
    var(--surface-dim);
}
:root[data-mode="dark"][data-wallpaper="mesh"] #wallpaper {
  background:
    radial-gradient(at 20% 20%, hsl(var(--hue) 40% 24%) 0, transparent 55%),
    radial-gradient(at 80% 15%, hsl(calc(var(--hue) + 70) 35% 22%) 0, transparent 50%),
    radial-gradient(at 75% 85%, hsl(calc(var(--hue) - 50) 32% 20%) 0, transparent 55%),
    radial-gradient(at 15% 80%, hsl(calc(var(--hue) + 30) 35% 25%) 0, transparent 50%),
    var(--surface-dim);
}

/* Style « Minimal » */
:root[data-wallpaper="minimal"] #wallpaper .blob { display: none; }
:root[data-wallpaper="minimal"] #wallpaper {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-dim) 100%);
}

/* Style « Toile » (dessin fait dans Toile) */
:root[data-wallpaper="custom"] #wallpaper .blob { display: none; }
:root[data-wallpaper="custom"] #wallpaper {
  background-size: cover;
  background-position: center;
}

/* --- Widget horloge --- */
#widget-clock {
  position: absolute;
  top: 48px;
  left: 56px;
  pointer-events: none;
  color: var(--on-surface);
  text-shadow: 0 2px 24px rgb(0 0 0 / .08);
}
.w-time {
  font-size: clamp(64px, 9vw, 118px);
  font-weight: 250;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.w-date {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 500;
  color: var(--on-surface-variant);
  text-transform: capitalize;
}

/* --- Icônes du bureau --- */
#icons {
  position: absolute;
  top: 40px;
  right: 36px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 106px);
  gap: 8px;
  height: calc(100% - 140px);
  align-content: start;
}
.dicon {
  width: 96px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-m);
  transition: background var(--dur-s) var(--ease);
}
.dicon:hover { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.dicon.sel { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.dicon-glyph {
  width: 52px;
  height: 52px;
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, var(--primary-container));
  color: var(--fg, var(--on-primary-container));
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-s) var(--ease), border-radius var(--dur-m) var(--ease);
}
.dicon:hover .dicon-glyph { transform: scale(1.07); border-radius: var(--r-l); }
.dicon:active .dicon-glyph { transform: scale(.95); }
.dicon-glyph .material-symbols-rounded { font-size: 28px; }
.dicon-label {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: var(--on-surface);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  padding: 2px 8px;
  border-radius: var(--r-full);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

/* --- Aperçu d'ancrage (snap) --- */
#snap-preview {
  position: absolute;
  z-index: 4999;
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 2px solid var(--primary);
  transition: all var(--dur-s) var(--ease);
  pointer-events: none;
}

/* --- Couche fenêtres --- */
#windows { position: absolute; inset: 0; pointer-events: none; }
#windows > * { pointer-events: auto; }