@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 shadow {
  filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
  @media (prefers-color-scheme: dark) {
    filter: drop-shadow(6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45));
  }
}

@mixin box {
  @include shadow;
  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));
  padding:    0.2rem 0.5rem;
}


@layer base, layering, come-in;

@layer base {
  * { 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]);

    color-scheme: light dark;
    @media (prefers-color-scheme: dark) {
      background: bg([0.3 0.08, 0.2 0.09]);
    }
    background-blend-mode: screen;
  }

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

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

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

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

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

  #buttons { position: fixed;    top:    -60px; left: -20px; }
  #reroll  { position: absolute; bottom: 0;     left: 0; }
  #swap    { position: absolute; bottom: 0;     left: 2.5em; }
  #hideui  { position: absolute; bottom: 0;     left: 5em; }

  #buttons button {
    @include box;
    width: calc(6em + 100px);
    text-align: left;

    $rotate: rotate(-60deg);
    transform: $rotate;
    transform-origin: center right;

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

  #back, #showui { position: fixed; top: 22px; left: 22px; }
  #showui { transform: translateX(-200%); }

  #palette-holder {
    margin: -60px auto 0;
    overflow-y: hidden;
  }
  #palette, #showui { @include shadow; }

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


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

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


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

  [data-state=fullquox], [data-state=loading] {
    #buttons button { transform: none;             }
    #state-message  { transform: translateX(100%); }
    #palette        { transform: translateY(125%); }
    #back           { transform: translateX(-200%); }
  }

  [data-state=fullquox] { #showui { transform: none; } }
}