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

@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 }
}


@mixin transy {
  transition: transform 0.25s cubic-bezier(.47,.74,.61,1.2);
}

@mixin box {
  font:       700 20pt var(--font); // respecify font family for <button>
  color:      oklch(0.95 0.075 var(--c-hue));
  background: oklch(0.5 0.2 var(--hue));
  border:     3px solid oklch(0.2 0.05 var(--hue));
  box-shadow: var(--shadow-color);
  padding:    0.2rem 0.5rem;
}

@layer layout {
  * { box-sizing: border-box; }

  :root {
    --hue: 300;
    --c-hue: calc(180 + var(--hue));

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

    @function bg($lcs) {
      $lg: to bottom in oklch;
      @each $l, $c in $lcs { $lg: $lg, oklch($l $c var(--hue)); }
      @return url(bright-squares.png), linear-gradient($lg);
    }

    background: bg([0.9 0.08, 0.7 0.1]);
    --shadow-color: 6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45);

    color-scheme: light dark;
    @media (prefers-color-scheme: dark) {
      background: bg([0.3 0.08, 0.2 0.09]);
      --shadow-color: 6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45);
    }
    background-blend-mode: screen;

    overflow-x: hidden;
  }

  body {
    min-height: 100vh;
    padding: 1em;
    margin: 0;

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

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

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

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

  #buttons {
    position: absolute; top: -5em; left: 0;
  }
}

@layer layering {
  #main { z-index: 0; }
  #aux { z-index: 1; }

  #buttons, #state-message, #palette-holder { z-index: 2; }
}

@layer a {

  button {
    @include box;
    transform-origin: center right;
    padding-right: 3em;

    $rotate: rotate(-60deg);
    transform: $rotate;
    &:not(:first-child) { margin-left: -5em; }

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

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

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

  #state-message {
    @include box;
    position: absolute; top: 1em; right: -1em;
    padding-right: 2em;
  }

}

@layer come-in {
  button, #state-message, #palette { @include transy; }

  :root:not([data-ready]) {
    button         { transform: none;             }
    #state-message { transform: translateX(100%); }
    #palette       { transform: translateY(125%); }
  }
}