@use 'sass:math';
@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 }
}


// https://oakreef.ie/transy :)
$transy-default: 250ms;
@mixin transy($prop: transform, $duration: $transy-default) {
  transition: $prop $duration 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.125 var(--hue) / 0.45));
  }
}

$box-texture: url(3px-tile.png);
$box-bg: oklch(0.3 0.2 var(--hue));
$box-fg: oklch(0.95 0.075 var(--c-hue));

$button-bg: oklch(0.5 0.25 var(--hue));
$button-fg: oklch(0.98 0.1 var(--c-hue));

@mixin box($font-scale: 1, $button: false) {
  @include shadow;
  // respecify font family for <button>
  font:       700 (20pt * $font-scale) var(--font);
  padding:    0.2rem 0.5rem;
  @if $button {
    background: $box-texture, $button-bg;
    color:      $button-fg;
  } @else {
    background: $box-texture, $box-bg;
    color:      $box-fg;
  }
  background-blend-mode: hard-light;
  border: 3px solid oklch(0.2 0.05 var(--hue));
}

@mixin image-button {
  @include box($button: true);
  padding: 5px;
  border: 2px solid $button-fg;
  > * { display: block; }
}

@mixin button-arrow {
  &::before {
    content: '';
    display: inline-block;
    height: 1.25ex; aspect-ratio: 2/3;
    background:
      conic-gradient(from -124deg at 100% 50%,
        currentcolor, currentcolor 68deg, transparent 68deg);
  }
}

@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, $img) {
      $lg: to bottom in oklch;
      @each $l, $c in $lcs { $lg: $lg, oklch($l $c var(--hue)); }
      @return url(#{$img}), linear-gradient($lg);
    }

    background: bg([0.9 0.08, 0.7 0.1], 'groovepaper.png');
    background-blend-mode: screen;

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

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

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

  button { cursor: pointer; }

  #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($button: true);
    @include button-arrow;
    &::before { margin-right: 0.5ex; }
    width: calc(6em + 1.5ex + 100px);
    text-align: left;

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

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

  #showui { @include image-button; }

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

  #palette-bar {
    margin: -60px auto 0;
    position: relative;
  }
  #palette-holder {
    padding-top: 25px;
    overflow-y: hidden;
  }
  #palette { @include shadow; }
  #download-button {
    @include image-button;
    position: absolute;
    bottom: 100%;
    right: 20px;
  }


  @mixin history-flex {
    display:     flex;
    flex-flow:   column;
    align-items: end;
    gap:         3px;
  }
  @mixin history-box($font-scale: 1, $button: false) {
    @include box($font-scale, $button);
    border-right: none;
    width: 100%;
    padding-right: 1em;
  }

  #history {
    $width: 24em;
    width: $width;
    position: fixed; top: 3rem; right: -1rem;
    @include history-flex;
  }
  #current {
    @include history-box;
    position: absolute;
    top: 0; left: 0;
    font-size: 150%;
    display: grid;
    grid-template: "a c" "b c" / auto min-content;
    gap: 0 15px;
    align-items: start;
  }
  #current-hello {
    grid-area: a;
    font-size: 75%;
  }
  #current-name {
    grid-area: b;
    max-width: 16em;
    word-break: break-word;
    &::spelling-error { text-decoration: none; }
  }
  #history-button {
    @include image-button;
    grid-area: c;
  }
  :is(#current-name, .history-item) img { max-width: 50%; }

  #close-history {
    @include box(0.8, $button: true);
    margin: 0; height: 1lh; width: 1lh;
    position: absolute; top: 0; left: calc(-1lh);
    img {
      position: absolute;
      inset: 0; width: 100%; height: 100%;
      object-position: center;
    }
  }

  #history-items {
    $bottom-fade-size: 3lh;
    $top-fade-size: math.div($bottom-fade-size, 2);
    @include history-flex;
    position: absolute;
    top: -$top-fade-size; left: 0;
    width: 100%;
    pointer-events: none;
    height: 65vh;
    overflow: hidden auto;
    padding: $top-fade-size 0 $bottom-fade-size;
    mask: linear-gradient(to bottom,
      transparent, black $top-fade-size,
      black calc(100% - $bottom-fade-size), transparent);
  }
  .history-item {
    @include history-box(0.8, $button: true);
    @include button-arrow;
    display:      flex;
    gap:          5px;
    align-items:  center;
  }
  .history-colors {
    height: 0.8em;
    flex:   none;
  }
  .history-name {
    width: 100%;
    padding-right: 2rem;
    text-align:  left;
    white-space: nowrap;
    overflow:    hidden;
  }
  .history-item, #close-history { transform: translateX(25em); }
  #history-close-target {
    position: absolute;
    inset: 0 0 0 0;
  }
}


@layer layering {
  #main { z-index: 0; }
  #aux { z-index: 1; }
  #buttons, #palette-holder, #back, #showui, #download-button { z-index: 2; }
  #history-close-target { z-index: 3; }
  #history { z-index: 4; }
}


@layer come-in {
  @media not (prefers-reduced-motion: reduce) {
    #buttons button, #current, #palette, #back, #showui, .history-item {
      @include transy;
    }

    #current { @include transy(all); }
    #close-history { @include transy; }
    #download-button { @include transy(opacity); }
  }

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

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

  [data-state=history] {
    #history-items { pointer-events: auto; }
    #close-history { pointer-events: auto; transform: none; }

    #current { opacity: 0; }

    @for $i from 0 through 6 {
      .history-item:nth-child(#{$i}) {
        transform: translateX(3% * $i); }
    }
    .history-item:nth-child(n+7) { transform: translateX(3% * 7); }
  }

  @media not (prefers-reduced-motion: reduce) {
    @for $i from 2 through 6 {
      .history-item:nth-child(#{$i}) {
        transition-delay: ($i - 1) * 40ms;
      }
    }
    .history-item:nth-child(n+7) {
      transition-delay: 240ms;
    }
  }
}