@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap');

.wrapper{
  --_gap: .5rem;
  --_offset: 10%;
  --_offset-1: calc(var(--_offset) * 1);
  --_offset-2: calc(var(--_offset) * 2);
  --_offset-3: calc(var(--_offset) * 3);
  --_offset-7: calc(var(--_offset) * 7);
  --_offset-8: calc(var(--_offset) * 8);
  --_offset-9: calc(var(--_offset) * 9);
    
  width: calc(100% - 4rem);
  max-width: 800px;
  margin: 2rem auto;
  color: white;
  font-family: system-ui;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--_gap);
  pointer-events: none;
  transform-style: preserve-3d;
}
.wrapper > div{
  position: relative;
  pointer-events: auto;
  aspect-ratio: 1;
  transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
  clip-path: polygon(var(--_clip-path));
  transform: translate3d(0,0,0);
}
.wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wrapper > div:nth-child(n+4){
 margin-top: calc(var(--_offset-3) * -1 + var(--_gap));
}
/* define clip-path custom properties */
.wrapper > div:nth-child(1){ --_clip-path: 0 0, 100% 0, 100% var(--_offset-9), 0 100%;}
.wrapper > div:nth-child(2){ --_clip-path: 0 0, 100% 0, 100% var(--_offset-8), 0 var(--_offset-9);}
.wrapper > div:nth-child(3){ --_clip-path: 0 0, 100% 0, 100% var(--_offset-7), 0 var(--_offset-8);}
  
.wrapper > div:nth-child(4){ --_clip-path: 0 var(--_offset-3), 100% var(--_offset-2), 100% var(--_offset-8), 0 var(--_offset-7);}
.wrapper > div:nth-child(5){ --_clip-path: 0 var(--_offset-2), 100% var(--_offset-1), 100% var(--_offset-9), 0 var(--_offset-8);}
.wrapper > div:nth-child(6){ --_clip-path: 0 var(--_offset-1), 100% 0%, 100% 100%, 0 var(--_offset-9);}

.wrapper > div:nth-child(7){ --_clip-path: 0 0%, 100% var(--_offset-1), 100% 100%, 0 100%;}
.wrapper > div:nth-child(8){ --_clip-path: 0 var(--_offset-1), 100% var(--_offset-2), 100% 100%, 0 100%;}
.wrapper > div:nth-child(9){ --_clip-path: 0 var(--_offset-2), 100% var(--_offset-3), 100% 100%, 0 100%;}


.wrapper > div:hover{
  transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
  scale: 1.3;
  --_clip-path: 0 0, 100% 0, 100% 100%, 0 100%;
  z-index: 100;
  opacity: 1;
}

.wrapper:has(:hover) > div:not(:hover){
  filter: grayscale(1) blur(3px);
  opacity: .5;
  scale: 0.9;
}
.wrapper > div:not(:hover) {
  /*animation: zIndexHack 1000ms;*/

}

@keyframes zIndexHack {
  0%, 100% { z-index: 100; }
}
/* none of this CSS is relevant to the wave animation */
:root{
  --clr-bg: #222;
  --clr-txt: #F5F5F5;
  --clr-primary: #F5F5F5;
  --clr-secondary: #38BDF8;
  --clr-button: #0369A1;
}
html{
  background-color: var(--clr-bg);
  font-family: system-ui;
  color: var(--clr-txt);
}

body{
  min-height: 100svh;
  color: var(--clr-primary);
  padding: 1rem;
}
body::after{
  content: '';
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 32px;
  height: 32px;
  background-size: cover;
  background-image: url('./g.png');
}



h1{
  font-size: 1.2rem;
  font-weight: 500;
  margin-block-end: 1rem;
  text-align: center;

}
code{
  color: #48c;
  border: 1px solid rgba(from var(--clr-secondary) r g b / .25);
  padding-inline: .7rem;
  border-radius: 5px;
  font-family: "Khand", sans-serif;
}