@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 swap1 {
  0%   { transform: none; }
  49%  { transform: translateX(-150vw); }
  50%  { content-visibility: hidden; }
  100% { content-visibility: hidden; transform: none; }
}

@keyframes swap2 {
  0%   { content-visibility: hidden; transform: translateX(150vw); }
  49%  { content-visibility: visible; opacity: 1; }
  100% { transform: none; opacity: 1; }
}

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

:root, body {
  min-height: 100vh;
  margin: 0;
}

:root {
  --hue: 300;
  --c-hue: calc(180 + var(--hue));
  align-items: center; justify-content: center;

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

  --shadow-color: 6px 6px 2px oklch(0.4 0.2 var(--hue) / 0.45);
  @media (prefers-color-scheme: dark) {
    --shadow-color: 6px 6px 2px oklch(0.1 0.15 var(--hue) / 0.45);
  }

  color-scheme: light dark;
  background:
    url(bright-squares.png),
    linear-gradient(to bottom in oklch,
      oklch(0.9 0.08 var(--hue)),
      oklch(0.7 0.10 var(--hue)));
  background-blend-mode: screen;

  @media (prefers-color-scheme: dark) {
    background:
      url(bright-squares.png),
      linear-gradient(to bottom in oklch,
        oklch(0.3 0.08 var(--hue)),
        oklch(0.2 0.09 var(--hue)));
  }

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

body {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

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

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

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

#buttons {
  flex: none;
  display: flex;
  margin: 0 2rem 2.5rem;
  align-items: start;
  z-index: 1;
  translate: -2em -6em;
}

button {
  --fg: var(--c-hue);
  --bg: var(--hue);
  font: 700 20pt var(--font);
  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 4em 0.2em 0.5em;
  transform-origin: center right;
  box-shadow: var(--shadow-color);
  transition: all 0.4s ease;

  [data-ready] & { transform: rotate(-60deg); }

  :root:not([data-running]) &:active,
  [data-running=swap]       &#swap,
  [data-running=reroll]     &#reroll {
    transform: rotate(-60deg) translate(-1em);
  }

  + button { margin-left: -6.5em; }
}

#back {
  position: absolute;
  top: 22px; left: 22px;

  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) {
    color: oklch(0.9 0.19 var(--c-hue));
  }
}

/* #palette-holder { */
/*   overflow: auto; */
/* } */

#palette-holder {
  width: min(90vw, 1126px);
  margin: 2.5rem auto 0;
}
#palette { width: 100%; }