@import url(https://fonts.bunny.net/css?family=crushed:400);
@layer base, demo;

@layer demo {
  body{
    font-family: 'Crushed', display;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100svh;
    overflow: hidden;
    margin: 0;
    background-color: black;
  }
.wrapper {
  --card-trans-duration: 1000ms;
  --card-trans-easing:linear(0, 0.01 0.8%, 0.038 1.6%, 0.154 3.4%, 0.781 9.7%, 1.01 12.5%, 1.089 13.8%, 1.153 15.2%, 1.195 16.6%, 1.219 18%, 1.224 19.7%, 1.208 21.6%, 1.172 23.6%, 1.057 28.6%, 1.007 31.2%, 0.969 34.1%, 0.951 37.1%, 0.953 40.9%, 0.998 50.4%, 1.011 56%, 0.998 74.7%, 1);
  
  
  --card-border-radius: 10px;
  --card-width: 20vmin;
  --radius: 50vmin; 
  --cards: sibling-count();
  @supports not (order:sibling-index()) {
    --cards: 7;
  }
  --arc-size: 0.25;          /* essentially the distance between cards */
  --arc-center: 0.75;        /* top */
  --arc-start: calc(var(--arc-center) - var(--arc-size) / 2);
  --arc-shift: 0;
  --arc-shift-delta: 0.01;

  position: relative;
  width: var(--card-width);
  aspect-ratio:4/6;
  /*outline: 1px dashed red;*/
 & > div {
   --card-i: sibling-index();
   @supports not (order:sibling-index()) {
     &:nth-child(1){--card-i:1}
     &:nth-child(2){--card-i:2}
     &:nth-child(3){--card-i:3}
     &:nth-child(4){--card-i:4}
     &:nth-child(5){--card-i:5}
     &:nth-child(6){--card-i:6}
     &:nth-child(7){--card-i:7}
   }
  --arc-step: calc(var(--arc-size) / (var(--cards) - 1));
    
  position: absolute;
  width: var(--card-width);
  aspect-ratio:4/6;
  background: white;
  border-radius: var(--card-border-radius);

  offset-path: circle(var(--radius) at 50% 100%);
  offset-distance: calc(
    (var(--arc-start)
     + (var(--card-i) - 1) * var(--arc-step)
     + var(--arc-shift)
    ) * 100%
  );
	

  offset-rotate: auto;
  offset-anchor:50% 0%;
  transition: all var(--card-trans-duration) var(--card-trans-easing);

   &:where(:nth-child(1),:nth-child(7)){
     z-index: 0;
   }
    &:where(:nth-child(2),:nth-child(6)){
     z-index: 1;
   }
    &:where(:nth-child(3),:nth-child(5)){
     z-index: 3;
   }
    &:nth-child(4){
     z-index: 4;
   }
   &:hover{
     offset-anchor: 50% 10%;
     & + div{
      --arc-shift: calc(var(--arc-shift-delta) * 3);  
     }
    & + div + div{
      --arc-shift: calc(var(--arc-shift-delta) * 2);   
     }
      & + div + div + div{
      --arc-shift: calc(var(--arc-shift-delta) * 1);    
     }
    }
    &:has(+*:hover){
      --arc-shift: calc(var(--arc-shift-delta) * -3);    
    }
     &:has(+*+*:hover){
      --arc-shift: calc(var(--arc-shift-delta) * -2);    
    }
     &:has(+*+*+*:hover){
      --arc-shift: calc(var(--arc-shift-delta) * -1);   
    }

  
    & > img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: inherit;
    } 
  }
}

  
  /* general styling not relevant for this demo */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
		color-scheme: light dark;
		--bg-dark: rgb(16, 24, 40);
		--bg-light: rgb(248, 244, 238);
		--txt-light: rgb(10, 10, 10);
		--txt-dark: rgb(245, 245, 245););
		--line-light: rgba(0 0 0 / .25);
		--line-dark: rgba(255 255 255 / .25);
    
    --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
    --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
    --clr-lines: light-dark(var(--line-light), var(--line-dark));
	}
 
	body {
		background-color: var(--clr-bg);
		color: var(--clr-txt);
		min-height: 100svh;
		margin: 0;
		padding: 2rem;
		font-family: "Jura", sans-serif;
		font-size: 1rem;
		line-height: 1.5;
    display: grid;
    place-items: center;
    gap: 2rem;
	}

}