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

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

* {
  box-sizing: border-box;
  transition: var(--transition);
}

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

:root {
  --hue: 300deg;
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;

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

  color-scheme: light dark;
  background:
    light-dark(oklch(0.9 0.08 var(--hue)),
               oklch(0.3 0.12 var(--hue)));

  overflow-x: hidden;
}

#pic {
  position: relative;
  width: min(1000px, 75vw);
  margin: auto;
  aspect-ratio: 2000/1312;
}
#pic div {
  position: absolute; inset: 0;
  mask-size: contain; mask-repeat: no-repeat;
}


#front, #back {
  transition: all 0.45s cubic-bezier(.23,-0.03,.68,1.11);
}

.back > #front { translate: 125vw; }
:not(.back) > #back { translate: -125vw; }

@media (prefers-reduced-motion: reduce) {
  #front, #back { transition: none; }

  .back > #front { translate: none; rotate: none; display: none; }
  :not(.back) > #back { translate: none; rotate: none; display: none; }
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

button {
  font: 700 25pt var(--font);
  flex: 30%;
  background: oklch(0.5 0.2 var(--hue));
  color: oklch(0.95 0.075 calc(180deg + var(--hue)));
  border: 3px solid oklch(0.2 0.05 var(--hue));
  padding: 0.2em 0.5em;
  filter: drop-shadow(0 0 10px oklch(0.4 0.2 var(--hue) / 0.45));
}

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

nav a {
  color: light-dark(oklch(0.4 0.15 calc(180deg + var(--hue))),
                    oklch(0.9 0.19 calc(180deg + var(--hue))));
  text-decoration: 3px solid underline;
  text-decoration-color:
    oklch(0.6 0.1 calc(180deg + var(--hue)));
}