// imported from http://one-wolf.com/stylesheets/main.css

/* line 3, /home/ubuntu/rails-apps/OHAlpha/one-wolf/tsume/rails-5.0/One-Wolf.com/app/assets/stylesheets/background-main.scss */
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* line 9, /home/ubuntu/rails-apps/OHAlpha/one-wolf/tsume/rails-5.0/One-Wolf.com/app/assets/stylesheets/background-main.scss */
body {
  width: 100%;
  height: 100%;
  background: #333;
  background: -webkit-linear-gradient(bottom, rgba(75, 56, 88, 0.5) 10%, rgba(51, 51, 51, 0) 60%), -webkit-radial-gradient(100% 40%, ellipse, rgba(202, 176, 158, 0.5), rgba(51, 51, 51, 0) 70%), -webkit-radial-gradient(0% 0%, ellipse, rgba(103, 46, 46, 0.7), rgba(51, 51, 51, 0)), black;
  background: linear-gradient(to top, rgba(75, 56, 88, 0.5) 10%, rgba(51, 51, 51, 0) 60%), radial-gradient(ellipse at 100% 40%, rgba(202, 176, 158, 0.5), rgba(51, 51, 51, 0) 70%), radial-gradient(ellipse at 0% 0%, rgba(103, 46, 46, 0.7), rgba(51, 51, 51, 0)), black;
}

/* line 4, /home/ubuntu/rails-apps/OHAlpha/one-wolf/tsume/rails-5.0/One-Wolf.com/app/assets/stylesheets/main.scss */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* line 10, /home/ubuntu/rails-apps/OHAlpha/one-wolf/tsume/rails-5.0/One-Wolf.com/app/assets/stylesheets/main.scss */
body {
  color: #ddd;
}
/* line 12, /home/ubuntu/rails-apps/OHAlpha/one-wolf/tsume/rails-5.0/One-Wolf.com/app/assets/stylesheets/main.scss */
body a {
  color: #88f;
}
/* line 14, /home/ubuntu/rails-apps/OHAlpha/one-wolf/tsume/rails-5.0/One-Wolf.com/app/assets/stylesheets/main.scss */
body a:visited {
  color: #c8f;
}
/* line 17, /home/ubuntu/rails-apps/OHAlpha/one-wolf/tsume/rails-5.0/One-Wolf.com/app/assets/stylesheets/main.scss */
body a:active {
  color: #f44;
}
/* line 20, /home/ubuntu/rails-apps/OHAlpha/one-wolf/tsume/rails-5.0/One-Wolf.com/app/assets/stylesheets/main.scss */
body a:hover {
  color: #f88;
}

// imported from one-wolf/math.scss

@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function sqrt($r) {
  $x0: 1; // initial value
  $solution: false;
  @for $i from 1 through 10 {
    @if abs(2 * $x0) < 0,
    00000000000001 {
      // Don't want to divide by a number smaller than this
      $solution: false;
    }
    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0) !global;
    @if ( abs($x1 - $x0) / abs($x1)) < 0,
    0000001 {
      // 7 digit accuracy is desired
      $solution: true;
    }
    $x0: $x1;
  }
  @if $solution==true {
    // If $r is negative, then the output will be multiplied with <a href="http://en.wikipedia.org/wiki/Imaginary_number">i = √-1</a>
    // (√xy = √x√y) => √-$r = √-1√$r
    @if $r < 0 {
      @return $x1 #{i};
    }
    @else {
      @return $x1;
    }
  }
  @else {
    @return "No solution";
  }
}

@function pi() {
  @return 3.14159265359;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit, convert to radians.
  @if $unit==deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}

@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin / ( $sin * 0 + 1);
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos / ( $cos * 0 + 1);
}

@function tan($angle) {
  @return sin($angle) / cos($angle);
}

// pen css
$svglogo-col: rgba(0, 0, 0, .8);
$svglogo-circle-stroke: #ffffff;
$svglogo-ow-stroke: #ffffff;
$svglogo-circle-stroke-width: 3;
$svglogo-ow-stroke-width: 3;

$form-height: 390px;
$form-width: 750px;

#logo {
  pointer-events: none;
  background: red;
  &:hover .title {
    content: 'Submit';
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    background-color: white;
    color: black;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
  }
}
#svglogo {
  transform: rotate(0);
  transition: all 1.5s cubic-bezier(.18, .94, .26, .99);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 350px;
  height: 350px;
  .circle {
    pointer-events: visible;
    fill: rgba($svglogo-col,.6);
    stroke: $svglogo-circle-stroke;
    stroke-width: $svglogo-circle-stroke-width;
  }
  .ow {
    pointer-events: visible;
    fill: none;
    stroke: $svglogo-ow-stroke;
    stroke-width: $svglogo-ow-stroke-width;
  }
}
.title {
  //cursor: pointer;
  pointer-events: visible;
  color: rgba(0, 0, 0, .54);
  position: absolute;
  width: 100px;
  height: 100px;
  top: ( $form-height - 100px) /2;
  left: ( $form-height - 100px) /2;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .5);
  transition: all .75s cubic-bezier(0, 0, .38, 1);
  font-size: 20px;
  text-align: center;
  line-height: 100px;
  border: none;
  font-family: serif;
}
$num: 7;
$field-height: 350px / $num;
form {
  position: absolute;
  width: $form-width;
  height: $form-height;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 195px;
  background: rgba(255,255,255,.8);
  background: linear-gradient(to left, rgba(157, 145, 164,.4), transparent 80%);
  #fields {
    pointer-events: none;
    position: absolute;
    left: 20px + 175px;
    top: 20px;
    right: 0;
    bottom: 20px;
    .field {
      pointer-events: none;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: $field_height;
      svg {
        position: absolute;
        pointer-events: visible;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        .arctext {
          pointer-events: visible;
          cursor: text;
          fill: rgba(55, 33, 69, .6);
          stroke: rgba(124, 108, 135, .4);
          stroke-width: 3px;
        }
      }
      $input-padding: 20px;
      input.box {
        pointer-events: visible;
        display: block;
        position: absolute;
        top: $input-padding / 2;
        height: $field-height - $input-padding;
        padding: 10px;
        border: 1px solid rgba(103, 69, 46,0.8);
        outline: none;
        border-radius: 5px;
        background: rgba(86, 38, 61, .9);
        box-shadow: inset 0 -5px 45px rgba(202, 176, 158,0.2), 0 1px 1px rgba(255,255,255,0.2);
        text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
        &:focus {
          border: 1px solid transparent;
          box-shadow: inset 0 -5px 45px rgba(246, 228, 216,0.4), 0 1px 1px rgba(255,255,255,0.2);
        }
      }
      $input-radius: 200;
      $input-square: $input-radius * $input-radius;
      @for $index from 0 to $num {
        &:nth-child(#{$index+1}) {
          $top: 185 - (10 + $index * $field_height/1px + 2.5);
          $bottom:  185 - (10 + ($index + 1) * $field_height/1px + 2.5);
          $left: 0;
          $right: 0;
          @if $top * $bottom > 0 {
            @if $top > 0 {
              $left: #{sqrt($input-square - $bottom * $bottom)}px;
              $right: #{sqrt($input-square - $top * $top)}px + 750px - 40px - 350px;
            }
            @else {
              $left: #{sqrt($input-square - $top * $top)}px;
              $right: #{sqrt($input-square - $bottom * $bottom)}px + 750px - 40px - 350px;
            }
          }
          @else {
            $left: #{$input-radius}px;
            $right: #{sqrt($input-square - $top * $top)}px + 750px - 40px - 350px;
          }
          top: $index * $field-height;
          input.box {
            left: $left;
            width: $right - $left;
          }
        }
      }
    }
  }
}