main.halloctober.p-flex
  .halloctober__banner.p-flex
    h1.typo Spooky
    .fog.p-circle
//- If you change the h1 word, don't forget to also replace it in the CSS before/after pseudo elements created for the text-shadow effects.

:root {
  // COLOR CSS VARIABLES
  --color_base: #191919; // Black 
  --color_pen: #fff; // White
  
  // SIZE VARIABLES
  --size: 20vmin; // Resize typo by only editing this variable
  --fog: calc(var(--size) / 1.2);
  --scale: 4.8; // Increase/decrease fog's size animation effect. Specially if you change the HTML h1, you might need to tweak this value.
}

// MIXINS
@mixin size($w, $h: $w) {
  width: $w;
  height: $h;
}

// PATTERNS
.p-flex {
  display: flex;
}

.p-circle {
  border-radius: 50%;
}

// LAYOUT
body {
  height: 100vh;
  background-color: var(--color_base);
  margin: 0;
  overflow: hidden;
}

::selection {
  background-color: transparent;
}

.halloctober {
  @include size(100%);
  
  &__banner {
    margin: auto; // Center magic after parent's display flex
    padding: 3%;
    position: relative; // To place fog
    overflow: hidden;
  }
}

// TYPOGRAPHY
.typo {
  color: var(--color_pen);
  cursor: default;
  font-family: 'Fredoka One', sans-serif;
  font-size: var(--size);
  font-weight: normal;
  letter-spacing: 0.1rem;
  margin: auto; // Center magic
  outline: none;
  position: relative; // To place text-shadows
  
  &:hover {
    + .fog {
      animation-play-state: paused;
    }
  }
  
  $red: #b30808; 
  $blue: #1A237E; 
  $anim: 2s ease-in-out infinite;

  // Text Shadow Effects
  // We add them here to improve animation's performance
  &::before,
  &::after {
    color: transparent;
    content: 'Spooky'; // Same word as in HTML h1
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
  }
  
  // Upper Shadow
  &::before {
    animation: move_upper_shadow $anim;
    opacity: 0;
    text-shadow: 
      6px 0 2px rgba($red, 0.4),
      12px 0 2px rgba($blue, 0.3);
  }
  
  // Bottom Shadow
  &::after {
    animation: move_bottom_shadow $anim;
    text-shadow: 
      2px 4px 2px rgba($red, 0.4),
      4px 8px 2px rgba($blue, 0.3);
  }

  transform: skew(10deg, 2deg);
  animation: float $anim;
  @at-root {    
    @keyframes move_upper_shadow {
      0%, 90%, 100% {
        opacity: 0;
        transform: translateX(-2%);
      }
      30% {
        opacity: 1;
        transform: translateX(0);
      }
    }
    @keyframes move_bottom_shadow {
      0%, 90%, 100% {
        opacity: 1;
        transform: translate(0, 0);
      }
      30% {
        opacity: 0;
        transform: translateY(-3.5%);
      }
    }
    @keyframes float {
      50% {
        transform: scaleY(1.01) skew(-10deg, -2deg);
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    animation: none;
    transform: none;
    
    &::before,
    &::after {
      animation: none;
    }
  }
}

.fog {
  --fog_neg: calc(var(--fog) * -1);
    
  @include size(var(--fog));
  background-color: var(--color_base);
  position: absolute;
  top: var(--fog_neg);
  left: var(--fog_neg);
  
  transform: translate3d(0, 0, 0); // Fixes Safari mouseover flickering bug
  transform-origin: 0 50%; // Fixes Firefox laggy animation bug and smooths animation across Browsers
  animation: move_fog 13s 2s ease-in-out alternate infinite;
  @at-root {
    @keyframes move_fog {
      50% {
        transform: scale(var(--scale));
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
  
  // Blurry Effect
  &::after {
    --blur: calc(var(--fog) * 2);
    --blur_neghalf: calc(var(--blur) / -2);
    --filter: calc(var(--fog) / 30);
    
    @extend .p-circle;
    
    @include size(var(--blur));
    content: '';
    background-color: var(--color_base);
    filter: blur(var(--filter));
    margin-top: var(--blur_neghalf);
    margin-left: var(--blur_neghalf);
    position: absolute;
    top: 50%;
    left: 50%;
  }
}

/* 
 * PURE CSS SPOOKY TYPO
 * Yet another Spooky Pen :)
 *
 * Experimenting with a CSS blur filter, text-shadow, and transform skew effects animated. Pause the animation on typo mouseover, not fog. 
 * On mobile touch typo to pause and touch anywhere else on the screen to run it again.
 * Firefox mouseover/touch is not as smooth x.x
 *
 * Prefers-reduced-motion is applied. To test it:
 * Windows 10, Settings > Ease of Access > Display > Show animations.
 * MacOS, System Preferences > Accessibility > Display > Reduce motion.
 *
 * #halloctober
 * #018 - #100DaysOfCode
 * By ilithya | 2019
 */