/* =========================================
   NOTES
   ========================================= */
/* 

[x]fr = [x] fraction

px is an absolute unit
em is a relative unit based on actual size in px of the element
rem is a relative unit but based on user's browser settings [good for accessibility]

*/

/* =========================================
   MAIN ELEMENTS
   ========================================= */
.grid-page {
    margin: 0;
    padding: 0;
    background-image: url("https://deadjackdaw.com/assets/images/background_tiles/tumblr_f451b957bdbaba61d171ea45aa824a29_7eec8609_100.webp");
    background-repeat: repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3em;
}

.grid-square {
    width: 150px;
    height: 150px;
    padding: 25px;
    opacity: 0;
    cursor: crosshair;
    will-change: opacity, filter, transform, box-shadow, animation, background;
    
    transition: 
      opacity 0.3s ease-in-out,
      filter 0.3s ease,
      transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      box-shadow 0.5s ease,
      background 2s ease;
}

/* COLORS */
.red    { background-color: #FF0000; }
.orange { background-color: #FF7F00; }
.yellow { background-color: #FFFF00; }
.green  { background-color: #00FF00; }
.blue   { background-color: #0000FF; }
.indigo { background-color: #4B0082; }
.violet { background-color: #9400D3; }
.pink   { background-color: #FF00FF; }
.cyan   { background-color: #00FFFF; }

/* =========================================
   HOVERS
   ========================================= */

.grid-square:hover {
    opacity: 1;
}

/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes glitch {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes spinout {
	0% {
		opacity: 1;
		transform: rotate(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: rotate(-540deg) scale(2);
	}
}

@keyframes fade-in-bottom {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================
   JS INTERACTION STUFF
   ========================================= */

.grid-square.is-glitching {
    animation: glitch 0.2s infinite;
}

@keyframes ghostDrift {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    100% { transform: translate(100px, -100px) scale(1.5); opacity: 0; }
}

.ghost-trail {
    pointer-events: none;
    animation: ghostDrift 1s forwards;
    z-index: 10;
}

.grid-square.is-inverted {
    filter: hue-rotate(90deg) blur(5px) drop-shadow(16px 16px 20px red);
}

.grid-square.is-tilted {
    filter: blur(0px);
    transform: perspective(100px) rotateX(45deg) scale(1.2);
}

.grid-square.is-popped {
    transform: scale(1.2);
    z-index: 100;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.75);
}

.grid-square.blue {
    filter: blur(15px);
}

.grid-square.is-focused {
    filter: blur(0px);
}

.grid-square.is-spunout {
    animation: spinout 1s cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal both;
}

.grid-square.is-faded-in {
  animation: fade-in-bottom 1s ease 0s 1 normal none;
}

.grid-square.cyan {
    background-color: #00FFFF; 
    border: 20px inset #004080;
    position: relative;  
    box-sizing: border-box; 
    overflow: hidden; 
}

.grid-square.cyan::before,
.grid-square.cyan::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; 
    z-index: 1; 
}

.grid-square.cyan::before {
    background: linear-gradient(0deg, #9afd82 0%, #ffff80 32%, #ff80c0 75%);
}

.grid-square.cyan::after {
    background: linear-gradient(90deg, #9afd82 0%, #ffff80 32%, #ff80c0 75%);
}

.grid-square.is-rainbow::before {
    opacity: 1;
}

.grid-square.is-rainbow-tilted::after {
    opacity: 1;
}
.grid-square.is-rainbow-tilted::before {
    opacity: 0; 
}