/*   CSS-only with use of:
    - offset path/anchor/distance
    - trigonometric function sin(),
    - sibling- count()/index() => only in Chromium (fallback in JS)
    - container-units
    - @property rule
    - :has()/:not() selectors
*/

@property --gallery-rotation {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
@keyframes gallery-rotation { to { --gallery-rotation: 1 } }

#gallery {
  --rotate-direction: 1; /* -1 or 1 */
  --rotate-duration: 20s;
  --item-size: 100%; /* 100% is no distance between items */
  --item-transition-duration: 0.5s;
  
  width: min(80vmin, 800px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  animation: gallery-rotation var(--rotate-duration) linear infinite;
  container-type: inline-size;
  isolation: isolate;
  
  > img {
    --count: sibling-count();
    --index: calc(sibling-index() - 1);
    box-sizing: border-box;
    grid-area: 1/1;
    width: calc(var(--item-size) / (1 + (1 / sin(180deg / var(--count)))));
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: calc(5cqi / var(--count)) solid red;
    object-fit: cover;
    offset-path: border-box;
    offset-anchor: top center;
    offset-distance: calc((100% * (var(--index) / var(--count) + var(--gallery-rotation, 0))) * var(--rotate-direction));
    transform: rotate(calc(-360deg * var(--rotate-direction) * (var(--index) / var(--count) + var(--gallery-rotation, 0))));
    z-index: 0;
    transition: 
      width var(--item-transition-duration), 
      filter var(--item-transition-duration), 
      z-index 0s calc(var(--item-transition-duration) * var(--transition-delay-z, 1));
    &:hover{
      --transition-delay-z: 0;
      z-index: 1;
      width: 100%;
    }
  }
  &:has(img:hover)>img:not(:hover){ filter: grayscale(1) }
}



html{ height: 100%}
body{
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  margin:0; 
  padding: 2rem;
  gap: 1rem;
  background-color: #1d1e22;
  > #gallery { place-self: center }
  input { accent-color: red }
}