// strip-units required by spread mixin
// http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
@function strip-units($number)
  @return $number / ($number * 0 + 1)


// pow and sqrt required by ease function
// adapted from https://github.com/at-import/Sassy-math/blob/master/sass/math.scss
@function pow($base, $exponent)
  $value: $base
  @if $exponent > 1
    @for $i from 2 through $exponent
      $value: $value * $base
  @if $exponent < 1
    @for $i from 0 through -$exponent
      $value: $value / $base
  @return $value

@function sqrt($number)
  $root: 4
  @for $i from 1 through 50
    $root: $root - (pow($root, 2) - $number) / (2 * $root)
  @return $root


// adapted from https://www.kirupa.com/forum/showthread.php?378287-Robert-Penner-s-Easing-Equations-in-Pure-JS-%28no-jQuery%29
@function ease($iteration, $start-value, $change, $total-iterations, $ease)
  $progress: $iteration / $total-iterations

  // value increases evenly
  @if $ease == linear
    @return $change * $progress + $start-value

  // value increases on a curve, accelerating
  @if $ease == in-quad
    @return $change * $progress * $progress + $start-value

  // value increases on a curve, decelerating
  @if $ease == out-quad
    @return -$change * $progress * ($progress - 2) + $start-value

  // value accelerates sharply
  @if $ease == in-cubic
    @return $change * pow($progress, 3) + $start-value

  // value decelerates sharply
  @if $ease == out-cubic
    @return $change * (pow($progress - 1, 3) + 1) + $start-value

  // value accelerates more sharply
  @if $ease == in-quart
    @return $change * pow($progress, 4) + $start-value

  // value decelerates more sharply
  @if $ease == out-quart
    @return -$change * (pow($progress - 1, 4) - 1) + $start-value

  // value accelerates very sharply
  @if $ease == in-quint
    @return $change * pow($progress, 5) + $start-value

  // value decelerates very sharply
  @if $ease == out-quint
    @return $change * (pow($progress - 1, 5) + 1) + $start-value


// spreads a property value from min to max across media queries
//   $property:      CSS property to set
//   $property-min:  min value of the property
//   $property-max:  max value of the property
//   $dimension:     media query dimension - either min-width or min-height
//   $dimension-min: first media query of the chosen dimension
//   $dimension-max: final media query of the chosen dimension
//   $default-value: true/false (defaults to true).
//                   Should a default value (min for min-width/height,
//                   max for max-width/height) be included outside the query?
//   $precision:     how many pixels each media query should cover
//   $ease:          easing function to use when calculating value
//                   helpful for fine-tuning some widths in the mid-range
=spread($property, $property-min, $property-max, $dimension: min-width, $dimension-min: 400px, $dimension-max: 1400px, $default-value: true, $precision: 50px, $ease: linear)
  $total-iterations: abs(strip-units(ceil(($dimension-max - $dimension-min) / $precision))) - 1
  $max-dimension:    $dimension == max-width or $dimension == max-height

  @if $default-value
    #{$property}: if($max-dimension, $property-max, $property-min)

  @for $iteration from 0 through $total-iterations
    $iteration: if($max-dimension, $total-iterations - $iteration, $iteration)
    @media (#{$dimension}: $dimension-min + ($iteration * $precision))
      #{$property}: ease($iteration, $property-min, $property-max - $property-min, $total-iterations, $ease)


// demo styles
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz)
body
  line-height: 1.45
  margin: 0

.card
  background: #000
  margin: 0 auto
  max-width: 1400px

.card-inner
  position: relative
  overflow: hidden

  @media (min-width: 800px)
    height: 0
    // fixed aspect ratio trick
    // https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
    +spread(padding-bottom, percentage(740/1440), percentage(1035/1440), $dimension: min-height)

.content
  +spread(margin-bottom, 10px, 125px, $dimension: min-height)
  +spread(margin-left, 10px, 125px)
  +spread(margin-right, 10px, 125px)
  +spread(margin-top, 10px, 125px, $dimension: min-height)
  position: relative

  @media (min-width: 800px)
    bottom: 0
    left: 0
    position: absolute
    top: 0
    right: 0

img
  width: 100%

  @media (min-width: 800px)
    position: absolute
    left: 0
    top: 0
    +spread(top, -150px, 0, $dimension: min-height)

h2
  color: #cfb791
  font-family: 'Yanone Kaffeesatz', sans-serif
  +spread(font-size, 13px, 35px, $ease: out-quad)
  line-height: 1
  text-transform: uppercase

  b
    color: #c43539
    display: block
    +spread(font-size, 20px, 100px, $ease: out-quad)

.text
  color: #fff
  font-family: Baskerville, Georgia, serif
  +spread(font-size, 16px, 22px, $ease: out-quad)
  +spread(width, 75%, 35%, $dimension-min: 800px, $default-value: false, $ease: out-quad)

  @media (min-width: 800px)
    bottom: 0
    left: 0
    position: absolute