/* based on http://www.fivesitesfordavid.com/ */
/* Recommended styles for Splitting */
    .splitting .word,
    .splitting .char {
      display: inline-block;
    }
    
    /* Psuedo-element chars */
    .splitting .char {
      position: relative;
    }
    
    /**
     * Populate the psuedo elements with the character to allow for expanded effects
     * Set to `display: none` by default; just add `display: block` when you want
     * to use the psuedo elements
     */
    .splitting .char::before,
    .splitting .char::after {
      content: attr(data-char);
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
      transition: inherit;
      user-select: none;
    }
    
    /* Expanded CSS Variables */
    
    .splitting {
      /* The center word index */
      --word-center: calc((var(--word-total) - 1) / 2);
    
      /* The center character index */
      --char-center: calc((var(--char-total) - 1) / 2);
    
      /* The center character index */
      --line-center: calc((var(--line-total) - 1) / 2);
    }
    
    .splitting .word {
      /* Pecent (0-1) of the word's position */
      --word-percent: calc(var(--word-index) / var(--word-total));
    
      /* Pecent (0-1) of the line's position */
      --line-percent: calc(var(--line-index) / var(--line-total));
    }
    
    .splitting .char {
      /* Percent (0-1) of the char's position */
      --char-percent: calc(var(--char-index) / var(--char-total));
    
      /* Offset from center, positive & negative */
      --char-offset: calc(var(--char-index) - var(--char-center));
    
      /* Absolute distance from center, only positive */
      --distance: calc(
         (var(--char-offset) * var(--char-offset)) / var(--char-center)
      );
    
      /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
      --distance-sine: calc(var(--char-offset) / var(--char-center));
    
      /* Distance from center where 1 is far left/far right, 0 is center */
      --distance-percent: calc((var(--distance) / var(--char-center)));
    }
    .splitting.cells img { width: 100%; display: block; }
    
    @supports ( display: grid ) {
      .splitting.cells {
        position: relative;
        overflow: hidden;
        background-size: cover;
        visibility: hidden;
      }
    
      .splitting .cell-grid {
        background: inherit;
        position: absolute;
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        display: grid;
        grid-template: repeat( var(--row-total), 1fr ) / repeat( var(--col-total), 1fr );
      }
    
      .splitting .cell {
        background: inherit;
        position: relative;
        overflow: hidden;
      }
    
      .splitting .cell-inner {
        background: inherit;
        position: absolute;
        visibility: visible;
        /* Size to fit the whole container size */
        width: calc(100% * var(--col-total));
        height: calc(100% * var(--row-total));
        /* Position properly */
        left: calc(-100% * var(--col-index));
        top: calc(-100% * var(--row-index));
      }
    
      /* Helper variables for advanced effects */
      .splitting .cell {
        --center-x: calc((var(--col-total) - 1) / 2);
        --center-y: calc((var(--row-total) - 1) / 2);
    
        /* Offset from center, positive & negative */
        --offset-x: calc(var(--col-index) - var(--center-x));
        --offset-y: calc(var(--row-index) - var(--center-y));
    
        /* Absolute distance from center, only positive */
        --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );
    
        /* Absolute distance from center, only positive */
        --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
      }
    }