:root {
  interpolate-size: allow-keywords;
}

@view-transition {
  navigation: auto;
}


::view-transition-group(root) {
  animation-duration: 1.3s;
}

/* SCROLL

.card, .card-gallery, .circle-img, .post-img, .inline-image, .profile-img, .carousel, .carousel2, .carousel3, .carousel4 {
  
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%; 
}


@keyframes fade-in {

from {
  opacity: .3;
  translate: 0 1rem;
  scale: .8;
}

to {
  opacity: 1;
  translate: 0;
  scale: 1;
}
  
}

/* DEFAULT LOAD ANIMATION */

.load1 {
animation-name: animation1;
  animation-duration: 1s;
}


@keyframes animation1 {
  from {
  opacity: .3;
  translate: 0 1rem;
  scale: .8;
}
  to {
  opacity: 1;
  translate: 0;
  scale: 1;
}
}

/* LONG BOI */

.load2 {
animation-name: animation2;
  animation-duration: 1s;
}


@keyframes animation2 {
  from {
  opacity: .3;
  translate: 0 10rem;
}
  to {
  opacity: 1;
  translate: 0
}
}

/* TIMER */

.load3 {
animation-name: animation3;
  animation-duration: 2s;
}


@keyframes animation3 {
  from {
  opacity: 0;

}
  to {
  opacity: 1;

}
}

/* PROFILE PICTURE */

.load4 {
animation-name: animation4;
  animation-duration: 1.2s;
}

@keyframes animation4 {
  from {
  opacity: .3;
  scale: .8;
}
  to {
  opacity: 1;
  scale: 1;
}
}

/* BUTTONS */

.load5 {
animation: animation5 1.4s ease-out forwards;
}


@keyframes animation5 {
  from {
    opacity: .6;
    scale: .8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}