/*
  CSS RESET
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 100%;
}

ul,
ol {
  list-style: none;
}

img,
video {
  width: 100%;
}

a {
  text-decoration: none;
  margin: 0 0 48px 0;
}





/*
  STYLES
*/

.lateef-extralight {
  font-family: "Lateef", serif;
  font-weight: 200;
  font-style: normal;
}

.lateef-light {
  font-family: "Lateef", serif;
  font-weight: 300;
  font-style: normal;
}

.lateef-regular {
  font-family: "Lateef", serif;
  font-weight: 400;
  font-style: normal;
}

.lateef-medium {
  font-family: "Lateef", serif;
  font-weight: 500;
  font-style: normal;
}

.lateef-semibold {
  font-family: "Lateef", serif;
  font-weight: 600;
  font-style: normal;
}

.lateef-bold {
  font-family: "Lateef", serif;
  font-weight: 700;
  font-style: normal;
}

.lateef-extrabold {
  font-family: "Lateef", serif;
  font-weight: 800;
  font-style: normal;
}

h1 { 
  font-family: "Lateef";
  font-size: 64px;
  font-weight: bold;
  text-align: center;
  line-height: 85%;
  margin: 0 20px 0 0;
} 

h2 { 
  font-family: "Lateef";
  font-size: 40px;
  font-style: bold;
  text-align: left;
  line-height: 85%;
  margin: 0 20px 0 0;
} 

h3 { 
  font-family: "Lateef";
  font-weight: lighter;
  color: white;
  font-size: 24px;
  font-style: italic;
  text-align: left;
  margin-top: 2%;
} 

h4 { 
  font-family: "Lateef";
  font-weight: lighter;
  color: rgb(255, 0, 0);
  font-size: 48px;
  font-style: italic;
  text-align: left;
  margin-top: 2%;
} 

h5 { 
  font-family: "Lateef";
  font-weight: lighter;
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-style: italic;
  text-align: left;
  margin-top: 2%;
} 

body {
  background-color: black;
  padding-top: 60px;
}


header {
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
}

header img {
  max-height: 50px;
  cursor: pointer; 
}

.statement {
  padding: 2%;
}


.outro {
  padding-top: 50vh;
  padding-bottom: 50vh;
}

@keyframes zoom-in {
  0% {
    transform: translateZ(-1000px);
    opacity: 0;
    filter: blur(5px);
  }
  50% {
    transform: translateZ(0px);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translateZ(1000px);
    opacity: 0;
    filter: blur(5px);
  }
}

.stuck-grid {
  block-size: 100svh;
  perspective: 1000px;
  transform-style: preserve-3d;

  display: grid;
  grid: repeat(4, 25dvh) / repeat(4, 25dvw);;
  place-items: center;

  position: sticky;
  top: 0;

  overflow: clip;

  > .grid-item {
    transform-style: preserve-3d;

    font-size: 5vmin;
    font-weight: lighter;

    text-wrap: nowrap;

    @supports (animation-timeline: scroll()) {
      @media (prefers-reduced-motion: no-preference) {
        animation: zoom-in linear both;
        animation-timeline: scroll(root block);
        will-change: transform, opacity, filter;
      }
    }

    &.special.special {
      grid-row: 2 / span 2;
      grid-column: 2 / span 2;
    }

    > b {
      font-size: 15vmin;
    }

    &:nth-of-type(1)  { animation-range: 40% 50% }
    &:nth-of-type(2)  { animation-range: 20% 30% }
    &:nth-of-type(3)  { animation-range: 52% 62% }
    &:nth-of-type(4)  { animation-range: 50% 60% }
    &:nth-of-type(5)  { animation-range: 45% 55% }
    &:nth-of-type(6)  { animation-range: 10% 20% }
    &:nth-of-type(7)  { animation-range: 90% 100% }
    &:nth-of-type(8)  { animation-range: 30% 40% }
    &:nth-of-type(9)  { animation-range: 80% 90% }
    &:nth-of-type(10) { animation-range: 70% 80% }
    &:nth-of-type(11) { animation-range: -10% 50% }
    &:nth-of-type(12) { animation-range: 52% 62% }
    &:nth-of-type(13) { animation-range: 15% 25% }
    &:nth-of-type(14) { animation-range: 7% 17% }
    &:nth-of-type(15) { animation-range: 75% 85% }
    &:nth-of-type(16) { animation-range: 3% 13% }
    &:nth-of-type(17) { animation-range: 87% 97% }
    &:nth-of-type(18) { animation-range: 42% 52% }
    &:nth-of-type(19) { animation-range: 57% 67% }
    &:nth-of-type(20) { animation-range: 37% 47% }
    &:nth-of-type(21) { animation-range: 12% 22% }
    &:nth-of-type(22) { animation-range: 8% 18% }
    &:nth-of-type(23) { animation-range: 84% 94% }
    &:nth-of-type(24) { animation-range: 33% 43% }
    &:nth-of-type(25) { animation-range: 48% 58% }
    &:nth-of-type(26) { animation-range: 13% 23% }
    &:nth-of-type(27) { animation-range: 78% 88% }
    &:nth-of-type(28) { animation-range: 62% 72% }
    &:nth-of-type(29) { animation-range: 31% 41% }
    &:nth-of-type(30) { animation-range: 8% 18% }
    &:nth-of-type(31) { animation-range: 4% 14% }
    &:nth-of-type(32) { animation-range: 74% 84% }
    &:nth-of-type(33) { animation-range: 61% 71% }
    &:nth-of-type(34) { animation-range: 26% 36% }
    &:nth-of-type(35) { animation-range: 63% 73% }
    &:nth-of-type(36) { animation-range: 11% 21% }
    &:nth-of-type(37) { animation-range: 89% 99% }
    &:nth-of-type(38) { animation-range: 33% 43% }
    &:nth-of-type(39) { animation-range: 88% 98% }
    &:nth-of-type(40) { animation-range: 22% 32% }
    &:nth-of-type(41) { animation-range: 16% 26% }
    &:nth-of-type(42) { animation-range: 26% 36% }
    &:nth-of-type(43) { animation-range: 66% 76% }
    &:nth-of-type(44) { animation-range: 3% 13% }
    &:nth-of-type(45) { animation-range: 44% 54% }
    &:nth-of-type(46) { animation-range: 11% 21% }
    &:nth-of-type(47) { animation-range: 23% 33% }
    &:nth-of-type(48) { animation-range: 39% 49% }
    &:nth-of-type(49) { animation-range: 59% 69% }
    &:nth-of-type(50) { animation-range: 6% 16% }
    
    @supports (animation-timeline: scroll()) {

      &:nth-of-type(1) { grid-area: 1/1 }
      &:nth-of-type(2) { grid-area: 1/2 }
      &:nth-of-type(3) { grid-area: 1/3 }
      &:nth-of-type(4) { grid-area: 1/4 }
      &:nth-of-type(5) { grid-area: 2/1 }
      &:nth-of-type(6) { grid-area: 2/2 }
      &:nth-of-type(7) { grid-area: 2/3 }
      &:nth-of-type(8) { grid-area: 2/4 }
      &:nth-of-type(9) { grid-area: 3/1 }
      &:nth-of-type(10) { grid-area: 3/2 }
      &:nth-of-type(11) { grid-area: 3/3 }
      &:nth-of-type(12) { grid-area: 3/4 }
      &:nth-of-type(13) { grid-area: 4/1 }
      &:nth-of-type(14) { grid-area: 4/2 }
      &:nth-of-type(15) { grid-area: 4/3 }
      &:nth-of-type(16) { grid-area: 4/4 }
      &:nth-of-type(17) { grid-area: 2/1 }
      &:nth-of-type(18) { grid-area: 2/2 }
      &:nth-of-type(19) { grid-area: 2/3 }
      &:nth-of-type(20) { grid-area: 2/4 }
      &:nth-of-type(21) { grid-area: 3/1 }
      &:nth-of-type(22) { grid-area: 3/2 }
      &:nth-of-type(23) { grid-area: 3/3 }
      &:nth-of-type(24) { grid-area: 3/4 }
      &:nth-of-type(25) { grid-area: 1/1 }
      &:nth-of-type(26) { grid-area: 1/2 }
      &:nth-of-type(27) { grid-area: 1/3 }
      &:nth-of-type(28) { grid-area: 1/4 }
      &:nth-of-type(29) { grid-area: 4/1 }
      &:nth-of-type(30) { grid-area: 4/2 }
      &:nth-of-type(31) { grid-area: 4/3 }
      &:nth-of-type(32) { grid-area: 4/4 }
      &:nth-of-type(33) { grid-area: 2/1 }
      &:nth-of-type(34) { grid-area: 2/2 }
      &:nth-of-type(35) { grid-area: 2/3 }
      &:nth-of-type(36) { grid-area: 2/4 }
      &:nth-of-type(37) { grid-area: 3/1 }
      &:nth-of-type(38) { grid-area: 3/2 }
      &:nth-of-type(39) { grid-area: 3/3 }
      &:nth-of-type(40) { grid-area: 3/4 }
      &:nth-of-type(41) { grid-area: 1/1 }
      &:nth-of-type(42) { grid-area: 1/2 }
      &:nth-of-type(43) { grid-area: 1/3 }
      &:nth-of-type(44) { grid-area: 1/4 }
      &:nth-of-type(45) { grid-area: 4/1 }
      &:nth-of-type(46) { grid-area: 4/2 }
      &:nth-of-type(47) { grid-area: 4/3 }
      &:nth-of-type(48) { grid-area: 4/4 }
      &:nth-of-type(49) { grid-area: 3/1 }
      &:nth-of-type(50) { grid-area: 3/2 }
      &:nth-of-type(51) { grid-area: 3/3 }
      &:nth-of-type(52) { grid-area: 3/4 }
    }
  }
}





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

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 400vh;
    font-family: system-ui, sans-serif;
  }
}