@import url(https://fonts.bunny.net/css?family=big-shoulders-text:400,700|inconsolata:400);


@layer base, controls, mouse, demo;

@layer demo {
  :root{
    --info-text-size: .75rem;
    --primary-color: rgb(255, 210, 48);
    --secondary-color: rgb(0 184 219);
    --title-font-family: Big Shoulders Text', display;
  
  }
  body{
    background-color: #111;
    height: 700svh;
    margin: 0;
    font-family: 'Inconsolata', monospace;
    padding: 2rem;
  
    /* space */
    &::before{
      content: '';
      position: fixed;
      inset: 0;
      z-index: -10;
      opacity: .2;
      background-image:
				radial-gradient( var(--secondary-color),#0000),
				url("https://raw.githubusercontent.com/cbolson/assets/refs/heads/main/codepen/star-trek/space.webp");
      background-size: cover;
    }
    
    
  }
  @property --focus{
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --angle{
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
  }
  .logo{
    width: min(80vw, 600px);
    margin: 5vh auto;
    img{
      width: 100%;
      object-fit: cover;
      filter:drop-shadow(2px 0 0 var(--secondary-color));
    }
  }
  .names{
    position: fixed;
    inset: 0;
    margin: auto;
    width: 100vw;
    display: grid;
    place-content: center;
    h2{
      --i: sibling-index();
			--total: sibling-count();
			@supports not (selector(:sibling-index(0))) { 
				--total: 7;
				&:nth-child(1){ --i: 1;}
				&:nth-child(2){ --i: 2;}
				&:nth-child(3){ --i: 3;}
				&:nth-child(4){ --i: 4;}
				&:nth-child(5){ --i: 5;}
				&:nth-child(6){ --i: 6;}
				&:nth-child(7){ --i: 7;}
			}
      /* for timing */
      --item-slot: calc(100% / var(--total));
      --item-entry: calc((var(--i) - 1) * var(--item-slot));
      --item-exit: calc(var(--item-entry) + var(--item-slot) * 2.5 - 22%); /* staggered entry and exits with a final offset to allow the last element to return to their original position */
      
      grid-area: 1/1;
     text-align:center;
      font-family: 'Big Shoulders Text', display;
      font-size: clamp(3rem, 15.5vw + .35rem,16rem);
      text-transform: uppercase;
      font-style: italic;
      color: var(--primary-color);
      filter:drop-shadow(2px 0 0 var(--secondary-color));
  
      animation-name: fade-in;
      animation-duration: 1ms;
      animation-delay: .2ms;
      animation-timeline: scroll();
      animation-range: var(--item-entry) var(--item-exit);
      animation-fill-mode: both;
    } 
    }
  
  @keyframes fade-in {
    0%,100%{ 
      opacity: 0; 
    }
    15%,75% { 
      opacity: 1;
      translate: 0 -27vh;
    }
  }
  .wrapper{
    position: fixed;
  container-type: size;
    inset: 0;
    margin: auto;
    width: min(80vw, 900px);
    height: 30vh;
    color: white;
    display: grid;
    place-content: center;
    
    /* floor line behind images*/
    &::after{
      content: '';
      position: absolute;
      top: 90cqh;
      left: 50%;
      translate: -50% 0;
      background: linear-gradient(90deg,#0000, var(--secondary-color), #0000);
      height: 1px;
      width: 90vw;
      z-index: -1;
    }
    
    .character{
      --i: sibling-index();
			--total: sibling-count();
			
			@supports not (selector(:sibling-index(0))) { 
				--total: 7;
				&:nth-child(1){ --i: 1;}
				&:nth-child(2){ --i: 2;}
				&:nth-child(3){ --i: 3;}
				&:nth-child(4){ --i: 4;}
				&:nth-child(5){ --i: 5;}
				&:nth-child(6){ --i: 6;}
				&:nth-child(7){ --i: 7;}
			}
      /* for timing */
      --item-slot: calc(100% / var(--total));
      --item-entry: calc((var(--i) - 1) * var(--item-slot));
      --item-exit: calc(var(--item-entry) + var(--item-slot) * 2.5 - 22%); /* staggered entry and exits with a final offset to allow the last element to return to their original position */
  
      /* for animations */
      --focus: 0;
      --item-x: calc(
        (var(--i) - (var(--total) + 1) / 2)  /*  offsets */
        * (100cqw / var(--total))            /* equal spacing */
        * (1 - var(--focus))                 /* collapse to center when focused */
      );
  
      grid-area: 1/1;
      place-self: center;
      width: 100%; 
      display: grid;
      place-self: end;
      isolation: isolate; 
      transition: 
       scale  300ms ease-in-out,
       translate  300ms ease-in-out,
       z-index  300ms ease-in-out,
       filter  500ms ease-in-out calc((sibling-index() - 1)  *  350ms);
      
      scale: calc(0.4 + var(--focus) * 0.8);
      /*opacity: calc(0.52 + var(--focus) * 0.8);*/
      z-index: calc(1 + var(--focus) * 100);
      translate: var(--item-x) 0;
      filter:  sepia(calc(1 - var(--focus))) blur(0px) hue-rotate(0deg);

      animation-name: --item-focus;
      animation-timeline: scroll();
      animation-range: var(--item-entry) var(--item-exit);
      animation-fill-mode: both;

      /* intro animation */
      @starting-style {
        filter: sepia(1) blur(80px) hue-rotate(80deg);
      }
    }
    img{
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    
    .data{
      position: absolute;
      inset: auto 5% 10%;
      @container (width > 600px){
        inset: auto -15% 15%;
      }
      transition: scale 150ms ease-in-out;
      scale:var(--info-scale-x) 1;
  backface-visibility: hidden;
      border-radius: 10px;
      border: 1px solid var(--secondary-color);
      background-color: rgb(0 184 219 / .2);
      backdrop-filter: sepia(1) brightness(20%);
      padding: 1rem;
      display: grid;
      gap: 1rem 2rem;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 
          'title  title' 
          'info  info' 
          'notes  notes';
      @container (width > 600px){
        grid-template-areas: 
          'title  title' 
          'info  notes' 
          'info  notes';
      } 
      h3{
        grid-area: title;
        font-family: 'Big Shoulders Text', display;
        font-size: clamp(1rem, 2.5vw + .045rem,1.2rem);
        line-height: 1;
        margin: 0;
      }     
      p,label{
        font-size: clamp(.7rem, 1.25vw + .045rem,.85rem);
        line-height: 1.3;
        margin: 0;
      }
      div{
        grid-area: info;
        display: grid;
        grid-template-columns: .5fr 1fr;
        gap: .5rem;    
        label{
          opacity: .7;
        }
      }
      
      .notes{
        grid-area: notes;
        place-self: center;
        text-wrap: pretty;
      }
    }
    
  }
  @keyframes --item-focus {
    0%   { 
      --focus: 0; 
      --info-scale-x: 0;
    }
    20%{
      --info-scale-x: 0;
    }
    30%  { 
      --focus: 1; 
      --info-scale-x: 1;
    }
    70%  { 
      --focus: 1; 
      --info-scale-x: 1;
    }
    80%{
      --info-scale-x: 0;
    }
    100% { 
      --focus: 0; 
      --info-scale-x: 0;
    }
  }
}

/* scroll indicator svg */
@layer mouse{
  .mouse {
		position: fixed;
		bottom:4rem;
		left: 50%;
    translate: -50% 0;
    rotate: 180deg;
		display: block;
		width: 50px;
		height: 50px;
		opacity: 1;
    color: rgb(255 255 255 / .1);
    display: none;
		animation-name: --mouse, --mouse-move;
    animation-duration: 1ms, 1.5s;
    animation-timing-function: linear, ease-in-out;
    animation-fill-mode: forwards, both;
    animation-iteration-count: 1, infinite;
    animation-timeline: scroll(), auto;
    @supports  (animation-timeline: scroll()) {
      display: block;
    }
	}
  @keyframes --mouse-move{
    50%{
      translate: -25px 20px;
    }
  }
	@keyframes --mouse {
		75% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
}

@layer base{
  body {
		@supports not  (animation-timeline: scroll()) {
			&::before {
				content:"Sorry, your browser doesn't support animation-timeline";
				position: fixed;
				top: 1rem;
				left: 50%;
				translate: -50% 0;
				font-size: 0.8rem;
        color: red;
			}
		}
}