.anim-words {
  line-height: 1.15;
}

.split-word {
  display: inline-block;
  white-space: nowrap;
}

.split-char {
  display: inline-block;
  transform: translateY(0);
}

.anim-words {
  opacity: 1;
}

.anim-words .split-word {
  display: inline-block;
  white-space: nowrap;
}

.anim-words .split-char {
  display: inline-block;
  opacity: 0;
  transform: translateX(20px);
  transition:
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.anim-words.is-visible .split-char {
  opacity: 1;
  transform: translateX(0);
}

/* Fade Up Mask */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: 
        opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Card Fade In Up (For Staggered Animation) */
.card-fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: 
        opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.card-fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up.delay-1 {
    transition-delay: 0.45s;
}

.fade-in-up.delay-2 {
    transition-delay: 0.65s;
}

/* Style Image Reveal */
.reveal-image-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    visibility: hidden;
    will-change: transform;
}
.reveal-image-wrapper.is-visible {
    visibility: visible;
    animation: revealWrapper 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal-image-wrapper > picture,
.reveal-image-wrapper > .rating-card {
    display: block;
    width: 100%;
    transform: translateX(100%);
    will-change: transform;
}
.reveal-image-wrapper.is-visible > picture,
.reveal-image-wrapper.is-visible > .rating-card {
    animation: revealContent 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}
@keyframes revealWrapper {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}
@keyframes revealContent {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Shine Animation Class */
.image-anime,
.image-anime-dark {
    position: relative;
    overflow: hidden;
    display: block;
}
.image-anime picture,
.image-anime img,
.image-anime-dark img,
.image-anime-dark picture {
    transition: transform 0.5s ease;
}
.image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, .2);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
    pointer-events: none;
}
.image-anime-dark:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgb(30 76 157 / 3%);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
    pointer-events: none;
}
.image-anime:hover:after,
.image-anime-dark:hover:after {
    height: 300%;
    transition: all 750ms linear;
    background-color: transparent;
}