@use 'sass:math';
@use 'sass:meta';
@use 'sass:map';
@use 'sass:list';
@use 'sass:string';
@use 'sass:selector';
@use '../vendors/smthr/smth' as *;

.container {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
}

.controls-wrapper {
  position: absolute;
  top: 2%;
  z-index: 9999;
}

.stage-title {
  @include font(3rem, 700, normal, $family: font-stack('system'));
  @include text-tracking-in('contract', true, null, 1.4s, 0.2s);
  // @include text-emboss(0.8, #000, 3px);
  @include text-outline(black, $is-important: true);
  // @include text-shadow(calc(1vw + 1px), calc(2px + 1rem), calc(0.5rem - 1px), hsla(0, 0%, 0%, 0.8));
  // @include long-shadow();

  position: absolute;
  top: 10%;
  color: $white;
  color: color-contrast(#80f, hsl);
  color: color-complement(#80f, hsl);
  color: color-invert(#80f, 100%, hsl);

  &:hover {
    @include wobble(top);
  }
}

.stage {
  @include animation-stage(500px, 50%, 80%, 900, 80vh);
  // @include gradient(conv-color(rgba(#80f, 0.3), hsl), rgba(blue, 0.5));
  // @include gradient(blue, green, 150deg, 0%, 100%, false, true, true);
  // @include gradient(red, purple, circle at center in hsl longer hue, 0%, 100%);
  @include gradient(red, blue, 45deg, 0% 50%, 50% 100%);
  @include flex-center($flex-dir: 'column');

  border: 4px solid #000;
  margin: 0 auto;
}

.card {
  @include clamp-width(11rem, 35%, 22rem);
  @include clamp-height(5.5rem, 40%, 22rem);
  @include depth-level(3);
  @include font(
    4rem,
    900,
    normal,
    small-caps,
    1.5,
    font-stack('system'),
    semi-expanded,
    1.5px
  );
  // @include inner-side-shadow('top', 5vh, hsla(180, 80%, 20%, 1));

  position: relative;
  border: 8px solid conv-color(#08f, 'hsl');
  border-radius: 12px;
  background: conv-color(#08f, 'hsl') padding-box;
  font-variant-caps: all-small-caps;
  text-align: center;
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: 200ms;
  transition-timing-function: ease-out;

  &:hover {
    @include depth-level(5, #fff);

    border-color: tint(rgba(#08f, 0.8), 10%);
    transform: translateY(-1.06%) scale(1.021212);
  }

  &:active {
    @include depth-level(0);
    // @include shape-shadow($turn-off: true);

    border-color: shade(rgba(#08f, 0.8), 10%);
    transform: none;
  }

  // animation: 3s clip-wave infinite;

  // @include shape-shadow(#3336);
}

@keyframes hue-shift {
  @for $i from 0 to 100 {
    $completeness: math.div($i, 100);

    #{$i}% {
      background-color: hsl(time-equation('hue-rotation', $completeness), 80%, 90%);
    }
  }
}

.front {
  $col: #2dccb8;
  @include animation-front-face;
  @include flex-center;

  border: 8px solid conv-color(#08f, 'hsl');
  border-radius: 12px;
  background: conv-color($col, hwb) padding-box;
  color: color-contrast($col, hsl);
  color: color-complement($col, hsl);

  // @include color-shifter(blue green purple orange red black white, 2.5s, 0s, infinite, alternate, linear, 'bg');
  text-align: center;
  // animation: hue-shift 20s infinite;

  > .txt {
    // @include color-shifter(blue green purple orange red black white, 2.5s, 0s, infinite, reverse alternate, linear, 'fg');
  }
}

$flip-axis: 'horizontal';

.back {
  @include animation-back-face($flip-axis);
  @include flex-center;

  border: 8px solid conv-color(#08f, 'hsl');
  border-radius: 12px;
  background: conv-color($gray-9, 'hsl') padding-box;
  color: #fff;
  text-align: center;
}

.active-anim-flip {
  @include hinge('open', 'fwd', 'top-right');

  // animation: accelerate-rotation 3s infinite;
}

.active-anim-flip-rev {
  @include hinge('close', 'bck', 'top-right');
  // @include swing(open, top-right, nofade);
  // @include flip(
  //   forwards,
  //   $flip-axis,
  //   0.6s,
  //   $anim-dir: alternate-reverse,s
  //   $anim-num: 2
  // );
}

.active-anim-flip-scale {
    @include flip-scale(
    top,
    $flip-axis,
    0.6s,
    // $anim-dir: alternate-reverse,
    $anim-num: 2
  );
}

.active-anim-shrink {
  @include flip-scale(bottom, $flip-axis, 0.6s, $anim-dir: alternate-reverse);
}

.active-anim-vanish {
  @include vanish('in', left, 1.5s);
}

.active-anim-puff {
  @include puff('out', 'back');
}

.active-anim-poof {
  @include poof('in', topright);
}

.active-anim-poof-puff {
  @include poof-puff('in', front);
}

.active-anim-zoom {
  @include zoom('in', 'top', 1.35s);
}

.active-anim-speed {
  @include speed('in', 'right');
}

.btn {
  // @include ghost-button(1.25rem, rgb(3, 23, 95, 1), 700, system-ui, 3px, rgb(3, 23, 95, 1), 1rem 1.25rem, 0.5s, color-text-contrast(rgba(3, 23, 95, 1)));
  @include reset;
  @include button-base(
    rgba(#08f, 1),
    #fff,
    6px ridge rgba(#80f, 0.8),
    16px,
    0 1rem,
    0.875rem 1.75rem,
    system-ui,
    1.5rem
  );
  @include depth-level(2, #80f);

  transition-property: transform, box-shadow, border-color, background-color,
    color;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;

  &:hover {
    @include depth-level(4, #80f);

    border-color: tint(rgba(#80f, 0.8), 10%);
    background-color: tint(rgba(#08f, 1), 10%);
    transform: translateY(-2px) scale(1.005);
  }

  &:active {
    @include depth-level(0);

    border-color: shade(rgba(#80f, 0.8), 10%);
    background-color: shade(rgba(#08f, 1), 10%);
    transform: none;
  }
}

.ribbon {
  @include corner-ribbon;

  @include font(
    1.5rem,
    700,
    normal,
    $height: 1,
    $family: (system-ui, sans-serif)
  );

  color: #fff;

  &:hover {
    @include text-glitch(
      3s,
      $iterations: infinite,
      $anim-dir: alternate-reverse,
      $use-margin: true
    );
  }
}

.search-form,
.login-form,
.new-account-form {
  width: 50%;

  @include elem(button, input) {
    border-color: hsl(274 100% 50% / 0.8);

    @include mod(focused, active) {
    border-color: hsl(348 100% 50% / 0.95);
    }
  }
}

@keyframes accelerate-rotation {
  @for $i from 0 through 100 {
    $completeness: math.div($i, 100);

    #{$i}% {
     transform: rotate(time-equation('rotational-acceleration', $completeness));
    }
  }
}

@keyframes clip-wave {
  @for $i from 0 through 100 {
    $completeness: math.div($i, 100);

    #{$i}% {
      clip-path: time-equation('clip-path-wave', $completeness)
    }
  }

}

.test {
  content: meta.inspect(list-sort(('a' 'c' 'q' 1 '3' 'z' '.')));
}