*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--theme-color: 150}html,body{height:100dvh;background-image:radial-gradient(circle,oklch(50% .2 calc(var(--theme-color) + 180)) 200px,#144d6e)}body{display:flex;flex-direction:column;height:100dvh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;justify-content:center;align-items:center}.card-component{position:relative;height:500px;width:100cqw;display:flex;justify-content:center;align-items:center;margin:2rem;container-type:size;container-name:card-component}.card-component>*{aspect-ratio:auto 1 / 1.6;border-radius:25px;--arc-spread: 50deg;--card-depth: 5%;--height: 100cqh;position:absolute;top:calc(var(--radius-vertical) + var(--height) / 2);height:var(--scale-from-center-height);--total-siblings: sibling-count();--index: sibling-index();--radius-horizontal: 100cqw;--cards-from-center: calc(var(--index) - (var(--total-siblings) + 1) / 2);--offset-angle: calc(var(--arc-spread) / var(--total-siblings));--angle: calc(var(--cards-from-center) * var(--offset-angle) + 270deg);--layer: calc(var(--total-siblings) - abs(var(--cards-from-center)));--radius-vertical: calc( var(--radius-horizontal) + (var(--height) - var(--scale-from-center-height)) );--scale-from-center-height: calc( var(--height) - abs(var(--cards-from-center)) * var(--card-depth) );background-color:oklch(calc(var(--index) * 7% + 30%) .15 var(--theme-color));transform:translateY(-50%) translate(calc(cos(var(--angle)) * var(--radius-horizontal)),calc(sin(var(--angle)) * var(--radius-vertical))) rotate(calc(var(--angle) - 270deg));transition:transform .3s linear(0,1 44.7%,.898 51.8%,.874 55.1%,.866 58.4%,.888 64.3%,1 77.4%,.98 84.5%,1),z-index .3s;transition-behavior:allow-discrete;z-index:var(--layer)}.card-component>*:hover{box-shadow:0 10px 10px #000c;transform:translateY(-45%) translate(calc(cos(var(--angle)) * var(--radius-horizontal)),calc(sin(var(--angle)) * var(--radius-vertical) - 40px)) scale(1.25) rotate(calc(var(--angle) - 270deg - var(--cards-from-center) * var(--offset-angle) / 1.5));cursor:pointer;z-index:100}.card-component>*:hover+*{transform:translateY(-45%) translate(calc(cos(var(--angle)) * var(--radius-horizontal) + 60px),calc(sin(var(--angle)) * var(--radius-vertical) - 20px)) rotate(calc(var(--angle) - 270deg - var(--offset-angle) / 2))}.card-component>*:hover+*+*{transform:translateY(-45%) translate(calc(cos(var(--angle)) * var(--radius-horizontal) + 60px),calc(sin(var(--angle)) * var(--radius-vertical))) rotate(calc(var(--angle) - 270deg - var(--offset-angle) / 3))}.card-component>*:has(+*:hover){transform:translateY(-45%) translate(calc(cos(var(--angle)) * var(--radius-horizontal) - 60px),calc(sin(var(--angle)) * var(--radius-vertical) - 20px)) rotate(calc(var(--angle) - 270deg + var(--offset-angle) / 2))}.card-component>*:has(+*+*:hover){transform:translateY(-45%) translate(calc(cos(var(--angle)) * var(--radius-horizontal) - 60px),calc(sin(var(--angle)) * var(--radius-vertical))) rotate(calc(var(--angle) - 270deg + var(--offset-angle) / 3))}