<header>
    <h1>The Eduardo Presley</h1>
    <h2>INTERNET SHRINE</h2>
  </header>

@import "bourbon";

// VARIABLES

$color-background: black;
$color-text: #FAFCF4;
$color-shadow: #ED3E5D;

$purple: #572D8C;
$blue: #0E3D59;
$green: #88A61B;
$yellow: #F29F05;
$orange: #F25C05;
$red: #D92525;
$color-list: $red $orange $yellow $green $blue $purple;

// FUNCTIONS

@function multiply-list($colors, $multiplier) {
    $l: ();
    @each $c in $colors {
        @for $j from 1 through $multiplier {
            $l: append($l, $c);
        }
    }
    @return $l;
}

// MIXINS

@mixin smooth-seg-rainbow($colors, $color-height: 1, $offset-percent: 0) {
    @if($color-height < 1) { @warn '$color-height (' + $color-height + ') out of bounds.'; }
    @if($offset-percent < 0 or $offset-percent > 100) { @warn '$offset-percent (' + $offset-percent + ') out of bounds'; }

    $ts: ();
    $num-colors: length($colors);
    $num-shadows: $num-colors * $color-height;
    $offset: floor($num-shadows * ($offset-percent / 100));
    $colors: multiply-list($colors, $color-height);

    @for $i from 0 through $num-shadows - 1 {
        $offset_i: ($i + $offset) % $num-shadows;
        $pos: ($i + 1)*1px;
        $ts: $ts, $pos $pos 0 nth($colors, ($offset_i + 1));
    }

    text-shadow: $ts, 0 0 0;
}
@mixin jump-seg-rainbow($colors, $color-height: 1, $offset-percent: 0) {
    @if($color-height < 1) { @warn '$color-height (' + $color-height + ') out of bounds.'; }
    @if($offset-percent < 0 or $offset-percent > 100) { @warn '$offset-percent (' + $offset-percent + ') out of bounds'; }

    $ts: ();
    $num-colors: length($colors);
    $offset: floor($num-colors * ($offset-percent/100));

    @for $i from 0 through $num-colors - 1 {
        @for $j from 1 through $color-height {
            $pos: ($i * $color-height + $j)*1px;
            $offset_i: ($i + $offset) % $num-colors;
            $ts: $ts, $pos $pos 0 nth($colors, ($offset_i + 1));
        }
    }

    text-shadow: $ts, 0 0 0;
}

// STYLE

body { 
  background-color: $color-background;
  color: $color-text;
}
header {
  text-align: center;
  padding: 0;

  h1 {
    @include animation(slick-eduardo-keys 3s linear infinite);
    @include animation-direction(reverse);

    font-size: 6em;
    margin-top: 4rem;
  }
  
  h2 {
    @include animation(high-eduardo-keys-mini 2s linear infinite);

    font-size: 3em;
    margin-top: 2rem;
  }
}

$color-height: 16;
$color-height-mini: 12;

@include keyframes(slick-eduardo-keys) {
  $num-frames: 50;
  $multiplier: 100 / $num-frames;

  0% {
    @include smooth-seg-rainbow($color-list, $color-height);
  }
  @for $i from 1 through $num-frames {
    $percent-base: $i * $multiplier;
    #{$percent-base * 1%} {
      @include smooth-seg-rainbow($color-list, $color-height, $percent-base);
    }
  }
}
@include keyframes(high-eduardo-keys-mini) {
  $num-colors: length($color-list);
  $uptightedness: 1; // increase to make colors go "HUT! HUT!", decrease to make colors go "yeaaahh..."
  $num-frames: $num-colors * $uptightedness;
  $multiplier: 100 / $num-frames;

  0% {
    @include jump-seg-rainbow($color-list, $color-height-mini);
  }
  @for $i from 1 through $num-frames {
    $percent-base: $i * $multiplier;
    #{$percent-base * 1%} {
      @include jump-seg-rainbow($color-list, $color-height-mini, $percent-base);
    }
  }
}