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

@layer demo {
	:root{
		--gallery-gap:10px;
		--gallery-text-color: white;
		
		/* indicator */
		--gallery-indicator-color: rgb(0 132 209);
		
		--gallery-indicator-hover-border: 1px solid var(--gallery-indicator-color);
		--gallery-indicator-hover-bg: oklch(from var(--gallery-indicator-color) l c h / 0.75);
		--gallery-indicator-hover-trans-duration: 300ms;
		--gallery-indicator-hover-trans-easing: ease-in-out;

		--gallery-img-border: 1px solid light-dark(rgb(11 11 11 / .25),rgb(255 255 255 / .5));
		--gallery-img-scale: .9;
		@supports not (corner-shape: notch) {
			--gallery-img-scale: .75;
		}
	}

	
	.wrapper {
		display: grid;
		grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    @media (width < 500px){
      grid-template-columns: 0fr 0fr;
    }
		gap: 0;
		/* psuedo element to anchor the indicator to the center when no hover */
		&::before{
			content: '';
			position: absolute;
			inset: 0;
			margin: auto;
			translate: -50% -50%;
			width: 0px;
			aspect-ratio:1;
			anchor-name: --hovered-item;
      z-index: -1;
		}
    
		
		/* indicator - hover */
		&::after{
			content: '';
			position: absolute;
			pointer-events:none;	
			background-color: var(--gallery-indicator-hover-bg);
			border: var(--gallery-indicator-hover-border);
			transition-property: top,right,bottom,left,background,opacity;
			transition-duration: var(--gallery-indicator-hover-trans-duration);
			transition-timing-function: var(--gallery-indicator-hover-trans-easing);
			z-index: -2;
			opacity: 0;
			border-radius: 20px;
      @supports  (corner-shape: notch) {
  			border-radius: 33%;
				corner-shape: bevel;
			}
			
	    position-anchor: --hovered-item;
			top:    anchor(top);
      right:  anchor(right);
      bottom: anchor(bottom);
      left:   anchor(left);
			width: anchor(width);
			height: anchor(height);
		
		}
		/* indicator visible only when we have hover */
		&:has(:hover:not(:first-child),:focus-visible)::after{
			opacity: 1;
		}
		/* title text scale down on hover */
		&:has(:hover,:focus-visible) :first-child h1 {
			scale: 0;
			opacity: 0;
		}
		/* item hover siblings images scale down and filter */
		&:has(:hover,:focus-visible) :not(:hover,:focus-visible) img{
			scale: .75;
		}
		
		/* the avatars */
		& > * {
			
			&:first-child{
				grid-row: 5 / span 3;
				grid-column: 5 / span 3;

				/* title and team member data is displayed within this element using anchor positioning */
				anchor-name: --label;
				position: relative;
	      display: grid;
	      place-content: center;
	      overflow: hidden;
        pointer-events: none;
        border: var(--gallery-indicator-hover-border);
				@supports not (corner-shape: notch) {
					scale: .75;
				}
				h1{
					color: white;
					text-align: center;
		      font-size: clamp(1rem,  1.5vw + .045rem, 2rem);
					transition-property: opacity,scale;
					transition-duration: 300ms;
					transition-timing-function: ease-in-out;;
				}
				/* title background */
				&::before{
					content: '';
					position: absolute;
					inset: 0;
					background: var(--gallery-indicator-hover-bg);
					border-radius: inherit;
					corner-shape: inherit;
					z-index: -1;
				}
			}
			/* position each avatar within the grid */
			&:nth-child(2){
				grid-row: 1 / span 3;
				grid-column: 5 / span 3;
			}
			&:nth-child(3){
				grid-row: 3 / span 3;
				grid-column: 3 / span 3;
			}
			&:nth-child(4){
				grid-row: 3 / span 3;
				grid-column: 7 / span 3;
			}
      &:nth-child(5){
  			grid-row:11 / span 3;
  			grid-column: 3 / span 3;
  		}
  		&:nth-child(6){
  			grid-row:11 / span 3;
  			grid-column: 7 / span 3;
  		}
      @media (width > 500px){
  			&:nth-child(5){
  				grid-row:5 / span 3;
  				grid-column: 1 / span 3;
  			}
  			&:nth-child(6){
  				grid-row:5 / span 3;
  				grid-column: 9 / span 3;
  			}
      }
			&:nth-child(7){
				grid-row:7 / span 3;
				grid-column: 3 / span 3;
			}
			&:nth-child(8){
				grid-row:7 / span 3;
				grid-column: 7 / span 3;
			}
			&:nth-child(9){
				grid-row:9 / span 3;
				grid-column: 5 / span 3;
			}
			aspect-ratio: 1/1;
			color: var(--gallery-text-color);
			background: transparent;
			padding: var(--gallery-gap);
			border: none;
			outline: none;
			transition: all 500ms ease-in-out;
			position-anchor: --current-item;
			border-radius: 20px;
      @supports  (corner-shape: notch) {
  			border-radius: 33%;
				corner-shape: bevel;
			}
			img {
				width: auto;
				height: 100%;
				object-fit: cover;
        display: block;
				border-radius: inherit;
				corner-shape: inherit;
				border: var(--gallery-img-border);
				transition-property:scale,filter;
				transition-duration: 300ms;
				transition-timing-function: ease-in-out;
				scale: var(--gallery-img-scale,.9);
				filter: grayscale(var(--img-filter,1));
			}

			/* use anchor positioning to place the hgroup within the title element defined earlier */
			hgroup{
				position: absolute;
				position-anchor: --label;
				position-area: center;
        /* alterantive method using inset - this would be better if the element needed to be the same size as the anchor */
				/* 
				inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
				display: grid;
				place-content: center;
        */
				:where(h2,p) {
					margin: 0;
					text-align:center;
					opacity: var(--label-opacity,0);
					scale: var(--label-scale,0);
					transition-property: opacity,scale, translate;
					transition-duration: 300ms;
					transition-timing-function: ease-in-out;
					transition-delay: 150ms;
					@starting-style{
						/* ensure that the elements do not display on load */
						transition-delay: 0ms;
						transition-duration: 0ms;
					}
				}
				h2{
					font-size: clamp(1rem,  2.5vw + .045rem, 1.4rem);
					translate: var(--label-x,-50px) 0;
				}
				p{
					font-size: clamp(.7rem,  1.5vw + .045rem, .8rem);
					translate: var(--label-x,50px) 0;
				}
			}
		}
		/* detecting link hovers via the parent so that we can avoid having a conflict with :hover and :focus-visible */
    &:has(a:hover) > a:hover,
    &:not(:has(a:hover)) > a:focus-visible{
				anchor-name: --hovered-item;
				--img-scale: 1;
				--img-filter: 0;
				--label-opacity: 1;
				--label-scale: 1;
				--label-x: 0;
				--position-x: 0;
			}
	}
}

/* general styling not relevant for this demo */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
		color-scheme: light dark;
		--bg-dark: rgb(23 23 23);
		--bg-light: rgb(255 237 212);

		--txt-light: rgb(10 10 10);
		--txt-dark: rgb(245 245 245);

		--bg-color: light-dark(var(--bg-light), var(--bg-dark));
		--txt-color: light-dark(var(--txt-light), var(--txt-dark));
	}

	body {
		min-height: 100svh;
		margin: 0;
		padding: 1rem;
		background-color: var(--bg-color);
		color: var(--txt-color);
		font-family: "Jura", sans-serif;
		font-size: 1rem;
		line-height: 1.5;
		display: grid;
		place-content: center;
		
		@supports not (corner-shape: notch) {
			&::before {
					content:"Sorry, your browser doesn't support corner-shape. ";
					position: fixed;
					top: 2rem;
					left: 50%;
					translate: -50% -50%;
					font-size: 0.8rem;
					color: white;
					background-color: red;
					padding: .25em 1em;
				}
			}
		}
	}
}