@import url("/assets/iso.css");

/* Matches the SVG viewBox from interactive.js. Update both together. */
.desk-figure .iso-figure__frame {
  aspect-ratio: 624.6 / 321;
}

/* Materials */

.iso .m-cover { --paper: color-mix(in srgb, var(--color-text) 72%, var(--color-bg)); }
.iso .m-pen { --paper: color-mix(in srgb, var(--color-accent) 30%, var(--color-bg)); }
.iso .m-grip { --paper: color-mix(in srgb, var(--color-text) 10%, var(--color-bg)); }

/* The notebook */

.iso .rule { stroke: color-mix(in srgb, var(--color-text) 22%, var(--color-bg)); }

.iso .ink,
.iso .inked {
  stroke: var(--line);
  stroke-width: 0.5;
}

/* Written strokes are revealed behind the pen; interactive.js moves the dash offset. */
.iso .ink {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  visibility: hidden;
}

.iso .ink-a {
  stroke: var(--color-accent);
  stroke-width: 0.8;
}

.iso .tube-in.ribbon { stroke: color-mix(in srgb, var(--color-text) 30%, var(--color-bg)); }

/* The laptop screen. Windows sit a little lighter than the screen behind them. */

.iso .win { fill: color-mix(in srgb, var(--color-text) 76%, var(--color-bg)); }
.iso .pop-bg { fill: color-mix(in srgb, var(--color-text) 64%, var(--color-bg)); }
.iso .title { stroke-width: 0.9; }

.iso .dim {
  fill: var(--color-text);
  fill-opacity: 0.4;
}

.iso .pop {
  opacity: 0;
  transition: opacity 0.2s;
}

.iso .pop.is-on {
  opacity: 1;
}

.iso .progress {
  stroke: var(--color-accent);
  stroke-width: 0.9;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.iso .ui-badge,
.iso .warn,
.iso .warn-mark,
.iso .warn-dot { stroke: var(--color-accent); }

.iso .warn {
  fill: color-mix(in srgb, var(--color-accent) 25%, transparent);
  stroke-width: 0.6;
}

.iso .warn-mark { stroke-width: 0.6; }
.iso .warn-dot { stroke-width: 0.7; }

.iso .spin { animation: desk-spin 0.96s linear infinite; }
.iso .spin-1 { animation-delay: -0.84s; }
.iso .spin-2 { animation-delay: -0.72s; }
.iso .spin-3 { animation-delay: -0.6s; }
.iso .spin-4 { animation-delay: -0.48s; }
.iso .spin-5 { animation-delay: -0.36s; }
.iso .spin-6 { animation-delay: -0.24s; }
.iso .spin-7 { animation-delay: -0.12s; }

@keyframes desk-spin {
  0% { stroke-opacity: 1; }
  100% { stroke-opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .iso .spin {
    animation: none;
  }
}