.image-wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  --boxesinrow: 5;
  pointer-events: none;
  z-index: -1;
  overflow: clip;
  filter: brightness(.5);
}

.box {
  width: calc(100% / var(--boxesinrow));
  aspect-ratio: 1;
  opacity: 0;
}

.box:nth-child(5n+2),
.box:nth-child(5n+4) {
  animation: translateup 10s linear alternate infinite, scaleIn .3s linear calc(var(--i) * 100ms) forwards;
  background: var(--url);
  background-size: cover;
}

.box:nth-child(5n+1),
.box:nth-child(5n+3),
.box:nth-child(5n+5) {
  background: var(--url);
  background-size: cover;
  animation: translatedown 10s linear alternate infinite, scaleIn .3s linear calc(var(--i) * 100ms) forwards;
}


@keyframes scaleIn {
  from {
    opacity: 0.1;
  }

  to {
    opacity: 1;
  }
}

@keyframes translateup {
  0% {
    translate: 0 -100%;
  }

  100% {
    translate: 0 0%;
  }
}

@keyframes translatedown {
  0% {
    translate: 0 0%;
  }

  100% {
    translate: 0 -100%;
  }
}


.g-col-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "g-col-1 g-col-2";
  width: 100%;
  overflow: clip;
  height: 1200px;
  position: relative;
}

.g-col-1 {
  grid-area: g-col-1;
}

.g-col-2 {
  grid-area: g-col-2;
}

.img-card {
  width: 220px;
  aspect-ratio: 9/16;
  border-radius: 10px;
  margin: 10px;
  object-fit: cover;
  transition: all .3s ease;

  &:hover {
    scale: 1.01;
  }
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.flex-col-rev {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
}

.transup {
  /*animation: translateup linear both;*/
  animation: translateup 30s linear infinite alternate;

  ;
}

.transdown {
  animation: translatedown 30s linear infinite alternate;
  /*animation: translatedown linear both;
        animation-timeline: scroll();
        animation-range: entry cover ;*/
  ;
}

@keyframes translateup {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes translatedown {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-50%);
  }
}



.text-animation-default div {
  letter-spacing: -0.15rem;

  & span {
    font-size: 1.2rem;
    position: relative;
    color: transparent;
    color: #000;
    pointer-events: none;
    animation: anim6 var(--duration) alternate infinite;
    /*animation: anim6 var(--duration) linear infinite;*/
    animation-delay: calc(var(--delay)*1);
    /* animation-timeline:scroll();
      animation-range:entry calc((var(--index) * (100/var(--totalChars))) * 1%) cover 100%;*/
  }
}

@keyframes anim6 {

  0% {
    font-weight: 100;
    font-size: 1.2rem;
  }

  100% {
    font-weight: 900;
    font-size: 1.2rem;
  }
}

.bg-pan-left {
  animation: bg-pan-left 8s var(--timing-function) alternate infinite;
  background-size: 200%;
}

@keyframes bg-pan-left {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


.fragment-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  background-color: var(--backgroundColor);
  grid-auto-flow: row;
  height: 100vh;
  pointer-events: none;
  animation: fade 1s var(--timing-function) forwards;
  animation-delay: 3s;

  & .fragment-left {
    animation: fragleft 1s var(--timing-function) forwards;
    animation-delay: 2s;
    grid-area: 1 / 1 / 4 / 3;

  }

  & .fragment-right {
    animation: fragright 1s var(--timing-function) forwards;
    animation-delay: 2s;
    grid-area: 1 / 3 / 4 / 5;

  }

  & .main-title {
    animation: fade 1s var(--timing-function) forwards;
    animation-delay: 3s;
    display: grid;
    place-items: center;
    text-align: center;
    grid-area: 2 / 2 / 3 / 4;

  }


}

@keyframes fade {
  0% {
    opacity: 1;

  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes fragleft {
  0% {
    translate: 0%;
    display: block;
  }

  99% {
    translate: -100%;
    display: block;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes fragright {
  0% {
    translate: 0%;
    display: block;
  }

  99% {
    translate: 100%;
    display: block;
  }

  100% {
    opacity: 0;
    display: none;
  }
}


.bird {
  position: absolute;
  top: 0%;
  left: 0%;
  pointer-events: none;
  animation: path calc(var(--duration) * 1ms) linear infinite;
}

.bird-rev {
  position: absolute;
  top: 0%;
  left: 0%;
  animation: path calc(var(--duration) * 1ms) linear reverse infinite;
  pointer-events: none;
  scale: -1 1;
}

@keyframes path {
  0% {
    translate: calc(var(--x1)*1px) calc(var(--y1)*1px);
  }

  20% {
    translate: calc(var(--x2)*1px) calc(var(--y2)*1px);
  }

  40% {
    translate: calc(var(--x3)*1px) calc(var(--y3)*1px);
  }

  60% {
    translate: calc(var(--x4)*1px) calc(var(--y4)*1px);
  }

  80% {
    translate: calc(var(--x5)*1px) calc(var(--y5)*1px);
  }

  100% {
    translate: calc(var(--x6)*1px) calc(var(--y6)*1px);
  }
}

.wobble-hor-bottom {
  -webkit-animation: wobble-hor-bottom 0.8s linear forwards;
  animation: wobble-hor-bottom 0.8s linear forwards;
}

.dest-anim {
  animation: none;

  &:hover {
    animation: wobble-hor-bottom 0.8s linear forwards;
  }
}


@keyframes wobble-hor-bottom {

  0%,
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }

  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }

  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }

  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }

  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }

  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}

.glittering-text {
  background-image: url('/assets/svg/glitteranim.svg');
  background-size: 200%;
  background-position: center;
  background-repeat: repeat;
  animation: bg-pan-left 10s linear infinite;
}

@keyframes bg-pan-left {
  0% {

    background-position: 0% 0%;
  }

  100% {
    background-position: -200% 0%;
  }
}


.plane-wrapper {
  height: 10px;
  width: 100%;
  position: relative;

  & img {
    position: absolute;
    animation: plane 10s linear infinite;
    rotate: 180deg;
    scale: 0.5;
    pointer-events: none;
  }
}

@keyframes plane {
  0% {
    translate: -100% -45.5%;
  }

  100% {
    translate: calc(100vw + 50%) -45.5%;
  }
}


.plane-wrapper-vertical {
  position: absolute;
  top: 0%;
  left: 50%;
  animation: plane-vertical 3s linear forwards;
  rotate: 90deg;
  scale: 0.5;
  pointer-events: none;
  z-index: 10;
}

@keyframes plane-vertical {
  0% {
    translate: -50% calc(100vh + -50%);
  }

  100% {
    translate: -50% -100%;

  }
}

.plane-vertical2{
  position: fixed;
 animation: plane-vertical2  linear both;
  animation-timeline: scroll();
  left:50%;
  rotate: -90deg;
  scale: 0.25;
  pointer-events: none;
  z-index: 10;
  
}

@keyframes plane-vertical2 {
  0% {
     top:0%;
     translate:-50% -100%;
  }

  100% {
     top:100%;
    translate:-50% 100%;
  }
}


.ring-3d {
  position: relative;
  top: 0%;
  scale: 1;
  height: 200px;
  width: var(--width);
  object-fit: cover;
  transform-style: preserve-3d;
  animation: ringanim 30s linear infinite;

  &:hover {
    animation-play-state: paused;
  }

  /*animation-timeline:scroll();
    animation-range:exit exit;
  animation: animate linear both;
    animation-timeline:scroll();
    animation-range:exit exit;*/
}

@keyframes ringanim {
  0% {

    transform: perspective(1000px) rotatey(0deg);
  }

  100% {

    transform: perspective(1000px) rotatey(360deg);
  }
}

.ring-3d span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * var(--total))) translateZ(clamp(200px, calc(100vw / 3), 300px));
  color: #fff;
}

.ring-3d span img {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  transition: all 1s ease-in-out;

  &:hover {
    translate: 0 -50px;
  }
}

.ring-3d span video {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  transition: all 1s ease-in-out;
}

.text2 div {
  height:var(--fz);
  
  
  perspective:5000px;

    & span{
      opacity: 0;
      font-weight:bold;
  font-size:var(--fz);
  color:#fff;
  display:inline-block;
  transition:all .5s ease;
  position:relative;
      transform-style:preserve-3d;
      letter-spacing: -28px;
    transform-origin:center;
    animation: bounce-top  2s linear forwards;
    animation-delay:calc(var(--delay)*1);
    }
  
}

@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}