$background: #E4FFF7;

@function textShadow($precision, $size, $color){
  $value: null;
  $offset: 0;
  $length: $size * calc(1 / $precision) - 1;

  @for $i from 0 through $length {
    $offset: $offset + $precision;
    $shadow: $offset + px $offset + px $color;
    $value: append($value, $shadow, comma);
  }

  @return $value;
}

.playful span {
  position: relative;
  color: #850F78;
  text-shadow: textShadow(0.25, 6, #ca17b6);
  animation: scatter 1.75s infinite;
}

.playful span:nth-child(2n) {
  color: #F57D22;
  text-shadow: textShadow(0.25, 6, #f8a86b);
  animation-delay: 0.3s;
}

.playful span:nth-child(3n) {
  color: #F4CC1E;
  text-shadow: textShadow(0.25, 6, #f8dd67);
  animation-delay: 0.15s;
}

.playful span:nth-child(5n) {
  color: #5c68ea;
  text-shadow: textShadow(0.25, 6, #A0A7F3);
  animation-delay: 0.4s;
}

.playful span:nth-child(7n), .playful span:nth-child(11n) {
  color: #bc15aa;
  text-shadow: textShadow(0.25, 6, #ff1ce4);
  animation-delay: 0.25s;
}

@keyframes scatter {
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  100% {
    top: 0;
  }
}



.smoke span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s 3s both;
}

.smoke span:nth-child(even){
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(3 + (calc($item / 10)))}s; 
  }
} 



$size: 6;
#gallery {
  display: grid;
  height: calc(100vh - 10px);
  grid-template: repeat($size,   1fr) / repeat($size, 1fr);
  grid-gap: 0.5em;
  @media (max-width: 800px) {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    & > div {
      width: 48%;
      margin: 1%;
      @media (max-width: 350px) {
        width: 98%;
      }
    }
  }
  & > div {
    //Grid Structure
    &:nth-child(#{$size}n + 1) {
      grid-column: span 2;
      grid-row: span 2;
    }
    &:nth-child(2) {
      grid-column: span 3;
      grid-row: span 3;
    }
    &:nth-child(4) {
      grid-column: span 1;
      grid-row: span 2;
    }
    & > a {
      opacity: 0;
      position: absolute;
      color: #000;
      background-color: #000;
      font: bold 4em "Helvetica";
      $shadow: 5px #fff;
      text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
        1px 0px $shadow;
      padding: 2rem;
      mix-blend-mode: difference;
      width: 100%;
      height: 100%;
      transition: all ease 1s;
    }
    & > img {
      width: 100%;
      min-height: 100%;
      transition: all ease 1s;
    }

    
  }
  & > div {
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
  }
  div,
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }
}
//
// lightbox
//
[id^="lightbox-"] {
  &:target {
    opacity:1;
    pointer-events:inherit;
    img{
      filter:blur(0);
    }
  }
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(black, 0.5);
  display: flex;
  opacity:0;
  transition: opacity 450ms ease-in-out;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  .content {
    max-width: 90%;
    position: relative;
    color: #fff;
    &:hover > a.close {
      opacity: 1;
      transform: scale(1, 1);
    }
    &:hover > .title {
      opacity: 1;
      transform: translateY(-3px); //Fix extra line at end
      &::after{
        opacity:1;
      }
    }
    & > * {
      transition: all 450ms ease-in-out;
    }
  }
  .title {
    display: block;
    margin: 0;
    padding: 1em;
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(50%);
    font-size:1.5em;
    opacity:0;
    &::after{
      content: ' ';
      background-color: rgba(black, 0.4);
      bottom:0;
      left:0;
      height:100%;
      width:100%;
      position:absolute;
      transition: all 350ms ease-in-out 250ms;
      opacity:0;
      transform-origin:bottom;
      mix-blend-mode: soft-light;
    }
  }
  img {
    max-height: 90vh;
    max-width: 100%;
    margin: 0;
    padding: 0;
    filter: blur(50px);
  }
  a.close {
    width: 2em;
    height: 2em;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(black, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0, 0);
    opacity: 0;
    transform-origin: right top;
    text-decoration:none;
    color:#fff;
    &::after {
      content: "X";
    }
  }
}


.fancy {
  position: relative;
  white-space: nowrap;
  &:after {
    --deco-height: 0.3125em;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--deco-height) * -0.625);
    height: var(--deco-height);
    background-image: url("../components/data/stroke.svg"); 
    background-size: auto 100%;
    background-repeat: round;
    background-position: 0em;
  }
}

.lines {
  $color: #59c1fe;
  position: fixed;
  width: 100vw;
  height: 4em;
  background: linear-gradient(rgba($color, 0.2) 20%, $color 40%, $color 60%, rgba($color, 0.2) 80%);
  background-size: 1px 0.5em;
  box-shadow: 0 0 1em rgba($color, 0.4);
  transform: translateY(-1em);
  left: 0;
}

/* STROKE TEXT */
$stroke: #111827;
$shadow: #bc15aa;
@mixin stroke-width($property) {
	-webkit-text-stroke-width: $property;
	-moz-text-stroke-width: $property;
}

@mixin stroke-color($property) {
	-webkit-text-stroke-color: $property;
	-moz-text-stroke-color: $property;
}
.stroke {
	@include stroke-width(2px);
	@include stroke-color($stroke);
	color: transparent;
  font-size: 5vw;
}
.shadow-stroke {
	text-shadow: 0.25vw 0.25vw $shadow;
}



/* Main Styles */
.button {
	display: block;
	background-color: var(--accent-primary);
	width: 300px;
	height: 100px;
	line-height: 100px;
	margin: auto;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: pointer;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
	transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
	
	.but-span ,
	.icon {
		display: block;
		height: 100%;
		text-align: center;
		position: absolute;
		top: 0;
	}
	
	.but-span {
		width: 72%;
		line-height: inherit;
		font-size: 22px;
		text-transform: uppercase;
		left: 0;
		transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
		
		&:after {
			content: '';
			background-color: var(--text-primary);
			width: 2px;
			height: 70%;
			position: absolute;
			top: 15%;
			right: -1px;
		}
	}
	
	.icon {
		width: 28%;
		right: 0;
		transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
		
		.fa {
			font-size: 30px;
			vertical-align: middle;
			transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400), height #{"0.25s"} ease;
		}
		
		.fa-remove {
			height: 36px;
		}
		
		.fa-check {
			display: none;
		}
	}
	
	&.success,
	&:hover {
		
		.but-span  {
			left: -72%;
			opacity: 0;
		}
		
		.icon {
			width: 100%;
			
			.fa {
				font-size: 45px;
			}
		}
	}
	
	&.success {
		background-color: #27ae60;
		
		.icon {
			
			.fa-remove {
				display: none;
			}
			
			.fa-check {
				display: inline-block;
			}
		}
	}
	
	&:hover {
		opacity: .9;
		
		.icon .fa-remove {
			height: 46px;
		}
	}
	
	&:active {
		opacity: 1;
	}
}

.icon{
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 60px;
	height: 60px;
	margin-left: 60px/5;
	margin-right: 60px/5;
	border-radius: 60px*0.5;
	overflow: hidden;
	&::before, &::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		transition: all 0.25s ease;
		border-radius: 60px*0.5;
	}
	i{
		position: relative;
		color: white;
		font-size: 60px/2;
		margin-top: 60px/4;
		transition: all 0.25s ease;
	}
}

.icon-fill{
	&::before{
		transition-duration: 0.5s;
		box-shadow: inset 0 0 0 1px green;
	}
	&:hover::before{
		box-shadow: inset 0 0 0 60px green;
	}
}

.icon-enter{
	&::after{
		box-shadow: inset 0 0 0 1px orange;
	}
	&::before{
		border-radius: 0;
		margin-left: -100%;
		box-shadow: inset 0 0 0 60px orange;
	}
	&:hover::before{
		margin-left: 0; 
	}
}

.icon-expand{
	&::after{
		box-shadow: inset 0 0 0 1px red;
	}
	&::before{
		background: red;
		box-shadow: inset 0 0 0 60px $background;
	}
	&:hover::before{
		box-shadow: inset 0 0 0 1px $background;
	}
}

.icon-collapse{
	&::before{
		border-radius: 0;
	}
	&:hover::before{
		box-shadow: 
		inset 0 60px/2 0 0 green,
		inset 0 60px/-2 0 0 green;
	}
	&::after{
		box-shadow: inset 0 0 0 1px green;
	}
}

.icon-rotate{
	box-shadow: inset 0 0 0 1px purple;
	&::after, &::before{
		border: 0px solid transparent;
	}
	&:hover::before{
		transition:
			border-top-width 0.3s ease,
			border-top-color 0.3s ease;
		border-width: 60px;
		border-top-color: purple;
	}
	&:hover::after{
		transition:
			border-left-width 0.3s ease,
			border-left-color 0.3s ease;
		border-width: 60px;
		border-left-color: purple;
	}
	&:hover{
		transition: background 0.001s ease 0.3s;
		background: purple;
	}
	i{
		z-index: 1;
	}
}