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

@layer demo {

.carousel{
	/* prev & next buttons */
  --nav-btn-size: 40px;
  --nav-btn-bg: rgb(15, 23, 43);
  --nav-btn-txt: white;
  
	/* item markers */
  --nav-marker-bg: 20px;
  --nav-marker-bg: rgb(15, 23, 43);
  
  width: min(calc(100% - 2rem), 700px);
  list-style: none;
  padding-block: 2rem; /* create space for drop shadows */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 250px; 
  gap:0;
  /*outline: 1px dashed red;*/
  anchor-name: --carousel;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behaviour-x: contain; 
  scroll-behavior: smooth; /* keep things smooth (should probably be wihtin a prefers query) */
  scrollbar-width: none;

  /* empty pseudo elements to push first and last items to the middle */
  &::before,
  &::after{
      content: '';
  }
  
  
  /**************** MARKERS GROUP *******************/
  /* the item markers will be dynamically placed within this element */
  scroll-marker-group: after; /* place after elements*/
  &::scroll-marker-group{
    position: absolute;
    position-anchor: --carousel;
    inline-size: min(90cqi, 400px);
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: .25rem;
    padding-block-start: 1rem;
    top: anchor( bottom );
    left: calc(anchor(left) - 10%);
    right: calc(anchor(right) - 10%);
  }
  /* carousel item*/
  > div{
    position: relative;
    scroll-snap-align: center; /* centers snap */
    scroll-snap-stop: always; /* ensures that the scroll stops at each element */
    container-type: scroll-state; /* define container for child animations */
     
    display: grid;
    grid-template-areas: 'img' 'title' 'desc';
    text-align: center;
		
		/* scroll to this item on load */
		&.scroll-start {
				scroll-initial-target: nearest;
		}
    > * {
      /*outline: 1px dashed red;*/
    }
    /* item title/name */
    > h2{
      grid-area: title;
      margin: 1rem 0 0 0;
			font-size: 1.3rem;
			white-space: nowrap;
      transition: all 300ms ease-in-out;
      /* not current item */
      @container not scroll-state(snapped: inline) {
        scale: .5;
        opacity: .5;
        translate: 0 -100px;
      }
    }
    > p{
      grid-area: desc;
      margin: 0;
			white-space: nowrap;
      transition: all 300ms ease-in-out;
      @container not scroll-state(snapped: inline) {
        scale: .5;
        opacity: 0;
        /*translate: 0 100px;*/
      }
    }
    > .img{
      grid-area: img;
      width: 100%;
      aspect-ratio:3/4;
      transition: all 300ms ease-in-out;
      transform-origin: center center;
      /* not current item */
      @container not scroll-state(snapped: inline) {
        scale: .5;
        opacity: .5;
      }
      & > img{
        width:100%;
        height: 100%;
        object-fit:cover;
        border-radius: 20px;
        box-shadow: 0 10px 20px  rgba(0 0 0 / .25);
      }
      
    }


    /************** MARKERS **************/
    &::scroll-marker{
      content: ' ';
      height:20px;
      aspect-ratio: 1;
      background-color: var(--nav-marker-bg);
      border-radius:50%;
      transition: 150ms ease-in-out;
      scale: .75;
      opacity: .25;
    }
    /* current item marker */
    &::scroll-marker:target-current{
      opacity: 1;
      scale: 1;
    }
    /* hover and keyboard focus */
    &::scroll-marker:where(:hover,:focus-visible){
      opacity: 1;
    }
    /* keybaord focus-*/
    &::scroll-marker:focus-visible{
      outline: 1px dashed var(--nav-marker-bg);
      outline-offset: 4px;
    }
  }

  
  /************* NAV BUTTONS(left and right) ************/
  &::scroll-button(*){
    position: absolute;
    position-anchor: --carousel;
    width: var(--nav-btn-size);
    aspect-ratio: 1/1;
    font: inherit;
    background-color: var(--nav-btn-bg);
    display: grid;
    place-content: center;
    color: #FFF;
    border:none;
    border-radius: 50%;
    opacity: 0.7;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    outline: 1px dashed transparent;
    outline-offset: 0px;
  }
  /* button - prev */
  &::scroll-button(inline-start){
    content: '❮';
    left: calc(anchor(left) - var(--nav-btn-size));
  }
  /* button - next */
  &::scroll-button(inline-end){
    content: '❯';
    right: calc(anchor(right) - var(--nav-btn-size));
  }
  /* hover and keyboard focus */
  &::scroll-button(*):not(:disabled):where(:hover,:focus-visible){
    opacity: 1;
    scale: 1.1;
  }
  /* keyboard focus*/
  &::scroll-button(*):focus-visible{
    outline: 1px dashed var(--nav-btn-bg);
    outline-offset: 4px;
  }
  /* disabled */
  &::scroll-button(*):disabled{
    opacity: .25;
    cursor: unset;
  }
}
  
  /* 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: #FFF;
		color: var(--txt-light);
		min-height: 100svh;
		margin: 0;
		padding: 2rem;
		font-family: "Jura", sans-serif;
		font-size: 1rem;
		line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
		& > * {
			/*outline: 1px dashed red;*/
		}
	}
	h1 {
		margin: 0;
		font-size: 1.2rem;
	}

	.msg-supports {
		font-size: 0.8rem;
		/*
    @supports (animation-timeline: scroll()) {
			display: none;
		}
    @supports (order:sibling-index()) {
			display: none;
		}
    @supports (x: attr(x type(*))) {
			display: none;
		}
    */
    @supports selector(::scroll-marker-group) {
			display: none;
		}
	}
}