@layer support, demo;

@import "https://unpkg.com/open-props" layer(support.design-system);

@keyframes fade {
  0% {
    opacity: 0;
    transform: perspective(1e3px) rotateY(90deg) rotateX(-5deg) rotate(10deg);
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: perspective(1e3px) rotateY(-30deg) rotateX(5deg) rotate(-1deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: perspective(1e3px) rotateY(-90deg) rotateX(10deg) rotate(10deg);
  }
}

@layer demo {
  main > section {
    &:nth-of-type(1) { view-timeline: --section-1 y }
    &:nth-of-type(2) { view-timeline: --section-2 y }
    &:nth-of-type(3) { view-timeline: --section-3 y }
    &:nth-of-type(4) { view-timeline: --section-4 y }
    &:nth-of-type(5) { view-timeline: --section-5 y }
  }
  
  body {
    timeline-scope: 
      --section-1, 
      --section-2, 
      --section-3, 
      --section-4, 
      --section-5
    ;
  }
  
  .face {
    animation: fade ease both;
    animation-range: contain;
  }
  
  .face-1 { 
    animation-name: fade;
    animation-timeline: --section-1; 
  }
  .face-2 { 
    animation-name: fade;
    animation-timeline: --section-2; 
  }
  .face-3 { 
    animation-name: fade;
    animation-timeline: --section-3; 
  }
  .face-4 { 
    animation-name: fade;
    animation-timeline: --section-4; 
  }
  .face-5 { 
    animation-name: fade;
    animation-timeline: --section-5; 
  }
}

@layer support.demo {
 
  
  * {
    box-sizing: border-box;
    margin: 0;
  }

 


  
  main {
    
   
  }
  
  .site-main {
    position: relative;
    
  }
  
  .hero-text {
    text-wrap: balance;
    max-inline-size: var(--size-header-1);
    font-size: var(--font-size-7);
    margin-inline: 0 auto;
    
    > div {
      display: inline;
    }
  }
  
  .gradient-text-1 {
    background: linear-gradient(
      to top right in oklab,
      oklch(55% .45 350), 
      oklch(95% .4 95)
    ) fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-text-2 {
    background: linear-gradient(
      to top right in oklch,
      oklch(75% 0.5 156), 
      oklch(70% 0.5 261)
    ) fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-text-3 {
    background: linear-gradient(
      to bottom in oklch,
      oklch(75% 0.5 156), 
      oklch(70% 0.5 261)
    ) fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-text-4 {
    background: linear-gradient(
      to top in oklab,
      oklch(60% .5 353) 0%, 
      oklch(80% 0.5 271) 100%
    ) fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-text-5 {
    background: linear-gradient(
      to bottom right in lch,
      color(display-p3 25% 25% 100%) 0%, 
      color(display-p3 100% 85% 30%) 100%
    ) fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .rotating-viewport {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    position: sticky;
    top: 10svh;
    right: 0;
    height: 0svh;
    aspect-ratio: var(--ratio-portrait);
    
    & .face {
      grid-area: 1 / 1;
      backface-visibility: hidden;
      display: grid;
      align-items: center;
      
      > img {
        inline-size: auto;
        opacity: .2;
      }
    }
  }
}