@import url(/fonts/muller/muller.css);

@property --transition {
  syntax: "*";
  inherits: true;
  initial-value: none;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none; }
}

@keyframes swap {
  0%   { transform: none; }
  49%  { transform: translateX(-150vw); }
  50%  { content-visibility: hidden; }
  51%  { transform: translateX(150vw); content-visibility: visible; }
  100% { transform: none; }
}

@keyframes fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

:root {
  --hue: 300;
  --c-hue: calc(180 + var(--hue));
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;

  --font: Muller, sans-serif;
  font-family: var(--font);

  color-scheme: light dark;
  background: oklch(0.9 0.08 var(--hue));
  transition: background 0.4s ease;

  width: 100vw;
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  :root { background: oklch(0.3 0.12 var(--hue)); }
}

#pic-holder, #pic, #pic2 {
  width: min(1000px, 75vw);
  margin: auto;
  aspect-ratio: 2000/1346;
}

#pic-holder { position: relative; }
#pic, #pic2 { position: absolute; inset: 0; }

#pic2 {
  opacity: 0;
  pointer-events: none;
}


#front .static { background: url(ufront/static.png) 0 0 / contain; }
#back .static { background: url(uback/static.png) 0 0 / contain; }

.spines { background: oklch(30.77% 0.1306 298.19); }
#front .spines { mask-image: url(ufront/spines.png); }
#back .spines { mask-image: url(uback/spines.png); }

.stripes { background: oklch(88.2% 0.0613 209.07); }
#front .stripes { mask-image: url(ufront/stripes.png); }
#back .stripes { mask-image: url(uback/stripes.png); }

.cuffs { background: oklch(72.74% 0.1008 225.69); }
#front .cuffs { mask-image: url(ufront/cuffs.png); }
#back .cuffs { mask-image: url(uback/cuffs.png); }

.outer { background: oklch(38.37% 0.1437 306.27); }
#front .outer { mask-image: url(ufront/outer.png); }
#back .outer { mask-image: url(uback/outer.png); }

.fins1 { background: oklch(85.06% 0.0961 81.4); }
#front .fins1 { mask-image: url(ufront/fins1.png); }
#back .fins1 { mask-image: url(uback/fins1.png); }

.fins2 { background: oklch(79.59% 0.1208 73.56); }
#front .fins2 { mask-image: url(ufront/fins2.png); }
#back .fins2 { mask-image: url(uback/fins2.png); }

.fins3 { background: oklch(74.11% 0.1268 64.62); }
#front .fins3 { mask-image: url(ufront/fins3.png); }
#back .fins3 { mask-image: url(uback/fins3.png); }

.belly1 { background: oklch(87.26% 0.0699 80.94); }
#front .belly1 { mask-image: url(ufront/belly1.png); }
#back .belly1 { mask-image: url(uback/belly1.png); }

.belly2 { background: oklch(76.92% 0.0954 58.36); }
#front .belly2 { mask-image: url(ufront/belly2.png); }
#back .belly2 { mask-image: url(uback/belly2.png); }

.eyes { background: oklch(36.26% 0.1107 145.78); }
#front .eyes { mask-image: url(ufront/eyes.png); }
#back .eyes { mask-image: url(uback/eyes.png); }

.masks { background: oklch(77.1% 0.0243 317.12); }
#front .masks { mask-image: url(ufront/masks.png); }
#back .masks { mask-image: url(uback/masks.png); }

.claws { background: oklch(88.92% 0.0207 325.75); }
#front .claws { mask-image: url(ufront/claws.png); }
#back .claws { mask-image: url(uback/claws.png); }

.vitiligo1 { background: oklch(79.4% 0.0588 309.27); }
#front .vitiligo1 { mask-image: url(ufront/vitiligo1.png); }
#back .vitiligo1 { mask-image: url(uback/vitiligo1.png); }

.vitiligo2 { background: oklch(93.14% 0.0331 83.71); }
#front .vitiligo2 { mask-image: url(ufront/vitiligo2.png); }
#back .vitiligo2 { mask-image: url(uback/vitiligo2.png); }

.vitiligo3 { background: oklch(95.7% 0.0296 94.35); }
#front .vitiligo3 { mask-image: url(ufront/vitiligo3.png); }
#back .vitiligo3 { mask-image: url(uback/vitiligo3.png); }

.vitiligo4 { background: oklch(95.7% 0.0296 94.35); }
#front .vitiligo4 { mask-image: url(ufront/vitiligo4.png); }
#back .vitiligo4 { mask-image: url(uback/vitiligo4.png); }

.lines { background: oklch(21.96% 0.0661 296.36); }
#front .lines { mask-image: url(ufront/lines.png); }
#back .lines { mask-image: url(uback/lines.png); }

.eye-shine { mask: none; mix-blend-mode: luminosity; }
#front .eye-shine { background: url(ufront/eyes.png) 0 0 / contain; }
#back .eye-shine { background: url(uback/eyes.png) 0 0 / contain; }


#buttons {
  margin-top: 3rem;
  display: flex; gap: 20px;
  z-index: -1;
}

button {
  --fg: var(--c-hue);
  --bg: var(--hue);
  font: 700 25pt var(--font);
  flex: 30%;
  background: oklch(0.5 0.2 var(--bg));
  color: oklch(0.95 0.075 var(--fg));
  border: 3px solid oklch(0.2 0.05 var(--bg));
  padding: 0.2em 0.5em;
  box-shadow: 6px 6px 2px oklch(0.4 0.2 var(--bg) / 0.45);
  transition:
    color 0.4s ease,
    background 0.4s ease,
    border 0.4s ease,
    translate 0.025s ease-in,
    box-shadow 0.025s ease-in;

  :root:not([data-running]) &:active,
  [data-running=swap]       &#swap,
  [data-running=reroll]     &#reroll {
    translate: 6px 6px;
    box-shadow: none;
  }
}

nav {
  position: absolute;
  bottom: 15px; left: 22px;
}

nav a {
  color: oklch(0.4 0.15 var(--c-hue));
  text-decoration: 3px solid underline;
  text-decoration-color:
    oklch(0.6 0.1 var(--c-hue));
}

@media (prefers-color-scheme: dark) {
  nav a { color: oklch(0.9 0.19 var(--c-hue)); }
}