/* Start custom CSS */.old-film-image {
    animation: old-film-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    
    transform-origin: center center;
    will-change: transform, opacity, filter;
}

@keyframes old-film-enter {
    0% {
        opacity: 0;
        transform: scale(1.035) translate(2px, -1px);
        filter: brightness(0.8);
    }

    12% {
        opacity: 0.35;
    }

    16% {
        opacity: 0.05;
    }

    20% {
        opacity: 0.65;
    }

    25% {
        opacity: 0.15;
    }

    32% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.95;
        transform: scale(1.015) translate(-1px, 1px);
    }

    75% {
        opacity: 1;
        transform: scale(1.005) translate(0, -0.5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
        filter: brightness(1);
    }
}


.old-film-text {
    overflow: hidden;
    white-space: nowrap;
    width: 0;

    animation: old-typewriter linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}

@keyframes old-typewriter {

    0%,
    75% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}



.quote {
  direction: rtl;
  position: relative;
  margin: 1rem 0;
  padding: 0.75rem 1rem 0.75rem 2rem ;
  border-radius: 8px;
  border-right: 4px solid var(--primary-500);
  background: var(--primary-100);
  line-height: 1.7;
}/* End custom CSS */