<header class="header">
  <div class="header__title">
    <h1>
      <code>drop-shadow()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-filters">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we have a blurry pink Space Invader hiding behind our green one! What's especially cool about this is that the green Space Invader is a rectangular raster PNG image, but <code>drop-shadow()</code> works with the image's transparent areas. 
    </p>
    <p>
      If you hover over the example area, we're able to animate the filter effect to increase the blur effect and darken the pink color:
    </p>

    <div class="example__demo example__demo--drop-shadow">
      <img 
        class="space-invader" 
        alt="A lime green, 3D Space Invader from the game of the same name." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/space-invader.png" />
    </div>
  </div>
</main>

// Demo
.space-invader {
  height: auto;
  filter: drop-shadow(3rem 0 0.5rem #e486da);
  margin-right: 2rem;
  width: 50%;
  transition: 
    filter var(--transition-duration-long) ease-in-out,
    transform var(--transition-duration-long) ease-in-out;
}

.example__demo--drop-shadow:hover {
  .space-invader {
    transform: translateX(-2rem);
    filter: drop-shadow(7rem 0 1rem #965990);    
  }
}


// Pen Setup
.example__demo--drop-shadow {
  background-color: var(--color-cinder);
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}