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

/* Matches the SVG viewBox from interactive.js. Update both together. */
.tablet-figure .iso-figure__frame {
  aspect-ratio: 518 / 453.6;
}

.tablet-figure .iso {
  --paint-0: color-mix(in srgb, var(--color-accent) 45%, var(--color-bg));
  --paint-1: color-mix(in srgb, var(--color-accent) 55%, var(--color-text));
}

/* Materials */

.iso .m-wood { --paper: color-mix(in srgb, var(--color-text) 4%, var(--color-bg)); }
.iso .m-body { --paper: color-mix(in srgb, var(--color-text) 12%, var(--color-bg)); }
.iso .m-metal { --paper: color-mix(in srgb, var(--color-text) 30%, var(--color-bg)); }
.iso .m-eraser { --paper: color-mix(in srgb, var(--color-text) 45%, var(--color-bg)); }
.iso .m-lead-0 { --paper: var(--paint-0); }
.iso .m-lead-1 { --paper: var(--paint-1); }

/* The app on the screen, drawn in page units */

.iso .ui-panel {
  fill: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  stroke: var(--line);
  stroke-width: 0.1;
}

.iso .swatch {
  stroke: var(--line);
  stroke-width: 0.12;
}

.iso .swatch-0 { fill: var(--paint-0); }
.iso .swatch-1 { fill: var(--paint-1); }
.iso .swatch-2 { fill: color-mix(in srgb, var(--color-text) 15%, var(--color-bg)); }
.iso .swatch-3 { fill: color-mix(in srgb, var(--color-text) 40%, var(--color-bg)); }
.iso .swatch-4 { fill: color-mix(in srgb, var(--color-text) 70%, var(--color-bg)); }

.iso .pick {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 0.3;
  opacity: 0;
  transition: opacity 0.2s;
}

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

.iso .art {
  stroke: var(--line);
  stroke-width: 0.28;
}

.iso .knob { fill: var(--line); }

/* Paint is revealed behind the pencil; interactive.js moves the dash offset. */
.iso .paint {
  stroke-width: 3.4;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  visibility: hidden;
}

.iso .paint-0 { stroke: var(--paint-0); }
.iso .paint-1 { stroke: var(--paint-1); }

[data-paint] {
  transition: opacity 0.8s;
}

[data-paint].is-faded { opacity: 0; }

/* The payoff: the window lights up and a few sparkles pop. */
.iso .lamp {
  fill: var(--color-accent);
  opacity: 0;
  transition: opacity 0.4s;
}

.iso .lamp.is-on {
  opacity: 1;
  filter: drop-shadow(0 0 1.5px var(--color-accent));
}

.iso .sparkle {
  fill: var(--color-accent);
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s, transform 0.3s;
}

.iso .sparkle.is-on {
  opacity: 1;
  transform: scale(1);
  animation: tablet-twinkle 1.2s ease-in-out 0.3s infinite;
}

@keyframes tablet-twinkle {
  50% { transform: scale(0.6); }
}

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