@import url(https://fonts.bunny.net/css?family=jura:300,500);

@layer base, demo;

@layer demo {
  body{
    font-family: "Jura", sans-serif;
    height: 100svh;
  }

  @property --rotation{
    syntax: "<angle>";
    inherits: true;
    initial-value: 0;
  }
  input{
    z-index: 190;
    position: absolute;
    top: 1rem;
    left: 1rem;
  }
	.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-width: clamp(40px,7vw, 120px);
		--card-border-radius: 1vw;

		--radius: 40vmin; 
		--cards: sibling-count();
		--arc-size: .95;             /* essentially the distance between cards */
		--arc-center: 0.275;        /* start at bottom to last card will be at the top */
		--arc-start: calc(var(--arc-center) - var(--arc-size) / 2);

		--arc-shift-delta: 0.0075;
	
	
		anchor-name: --center;

		position: fixed; 
		inset: 0;
		margin: auto;
		width: var(--radius) ;
		height: var(--radius);
		aspect-ratio:1;
		transform: rotate(var(--rotation));
		transition: transform 700ms linear;
		display: grid;
		place-content: center;
		h1{
			margin: 0;
			text-align: center;
			font-size: clamp(1.2rem, 3.5vw + 0.045rem, 3rem);
		}
 
		div {
		--card-i: var(--i);
		--arc-step: calc(var(--arc-size) / (20 - 1));
		--arc-shift: calc(var(--arc-shift-delta) * var(--d, 1));

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

   
		 &:has(a:hover),
		 &:target{
			 --title-opacity: 1;
		 }
		 &:target{
			--zindex: 2;
			--center-opacity: 1;
			--center-scale: 1;
			--image-outline-color: var(--clr-lines);
		}
		&::before,
		&::after{
			 content: '';
			 position: fixed;
			 position-anchor: --center;
			transform: rotate(calc(var(--rotation) * -1));
			 transition-timing-function: ease-in-out;

		 }
		 /* large image  in center of wrapper */
		 &::before{
			 position-area: span-all;
			 width: calc(var(--radius) );
			 aspect-ratio: 1;
			 border-radius: 9in;
			 background: var(--bg-img);
			 box-sizing: border-box;

			 outline: 10px solid var(--clr-lines);
			 outline-offset: -10px;
			 background-size: cover;
			 background-repeat: no-repeat;
			 background-attachment: fixed;
			 opacity: var(--center-opacity, 0);
			 scale: var(--center-scale, 0);
			 pointer-events: none;
			 transition-property: scale,opacity;
			 transition-duration: 300ms, 150ms;

		 }
		 /* image title - over thumb */
		 &::after{
			 content: attr(data-title);
			 position-anchor: --card;
			 position-area: center span-all;
			 z-index: 2;
			 pointer-events: none;
			 opacity: var(--title-opacity, 0);
			 transition-property: opacity,transform;
			 transition-duration: 150ms;
			 border: 1px solid rgb(255 255 255 / .75 );
			 background: rgb(0 0 0  / .25);
			 backdrop-filter: blur(3px);
			 padding: .25em 1em;
			 border-radius: 5px;
			 font-size: clamp(.6rem, 1vw + .045rem,.85rem);
			 @starting-style{
				 opacity: 0;
			 }
		 }
   
   /* links with images are placed in a circle */
		a{
			position: absolute;
			display: block;
			width: var(--card-width);
			aspect-ratio:4/6;
			border-radius: var(--card-border-radius);
			border: 2px solid var(--clr-bg);
			offset-path: circle(var(--radius) at 50% 50%);
			offset-distance: var(--card-offset-distance);
			offset-rotate: auto;
			offset-anchor:50% 0%;
			transition: offset var(--card-trans-duration) var(--card-trans-easing);
			z-index: var(--zindex, 1);
			anchor-name: --card;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				border-radius: inherit;
				outline: 5px solid var(--image-outline-color,transparent);
				outline-offset: -5px;
				transition: outline 300ms ease-in-out;
			} 
		}
  }
}

/* ============================================================
   FORWARD siblings (clockwise / +)
   ============================================================ */
/* +1 */
.wrapper:has(> *:hover) > *:hover + * ,
.wrapper:has(> :last-child:hover) > :nth-child(1)         { --d:  3; }

/* +2 */
.wrapper:has(> *:hover) > *:hover + * + * ,
.wrapper:has(> :last-child:hover) > :nth-child(2),
.wrapper:has(> :nth-last-child(2):hover) > :nth-child(1)  { --d:  2; }

/* +3 */
.wrapper:has(> *:hover) > *:hover + * + * + * ,
.wrapper:has(> :last-child:hover) > :nth-child(3),
.wrapper:has(> :nth-last-child(2):hover) > :nth-child(2),
.wrapper:has(> :nth-last-child(3):hover) > :nth-child(1)  { --d:  1; }

/* +4 */
.wrapper:has(> *:hover) > *:hover + * + * + * + *,
.wrapper:has(> :last-child:hover) > :nth-child(4),
.wrapper:has(> :nth-last-child(2):hover) > :nth-child(3),
.wrapper:has(> :nth-last-child(3):hover) > :nth-child(2),
.wrapper:has(> :nth-last-child(4):hover) > :nth-child(1)  { --d:  .5; }

/* ============================================================
   BACKWARD siblings (counter-clockwise / −)
   ============================================================ */
/* −1 */
.wrapper *:has(+ *:hover), 
.wrapper:has(> :nth-child(1):hover) :nth-last-child(1)    { --d: -3; }

/* −2 */
.wrapper *:has(+ * + *:hover), 
.wrapper:has(> :nth-child(1):hover) :nth-last-child(2),
.wrapper:has(> :nth-child(2):hover) :nth-last-child(1)    { --d: -2; }

/* −3 */
.wrapper *:has(+ * + * + *:hover),
.wrapper:has(> :nth-child(1):hover) :nth-last-child(3),
.wrapper:has(> :nth-child(2):hover) :nth-last-child(2),
.wrapper:has(> :nth-child(3):hover) :nth-last-child(1)    { --d: -1; }

/* −4 */
.wrapper *:has(+ * + * + * + *:hover),
.wrapper:has(> :nth-child(1):hover) :nth-last-child(4),
.wrapper:has(> :nth-child(2):hover) :nth-last-child(3),
.wrapper:has(> :nth-child(3):hover) :nth-last-child(2),
.wrapper:has(> :nth-child(4):hover) :nth-last-child(1)    { --d: -.5; }


}
 

  /* general styling not relevant for this demo */
@layer base {
	*,::before,::after {
		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;
		& > * {
			/*outline: 1px dashed red;*/
		}
	}
	h1 {
		margin: 0;
		font-size: 1.2rem;
	}


}