<!-- Code by Fedyaeva -->
<style>
    @media screen and (min-width: 768px) {
        .custom-font {
            display: flex;
            font-variation-settings: 'wght' 300;
            animation: sample-width-1 5s ease-in-out infinite 0s;
            will-change: transform;
            animation-fill-mode: backwards;
        }
        .custom-font div {
            display: flex!important;
            justify-content: space-around;
        } }
    @keyframes sample-width-1 {
        10%, 30% {
            font-variation-settings: 'wght' 300;
        }
        35% {
            font-variation-settings: 'wght' 100;
        }
    }
</style>

<!-- Code by Fedyaeva -->
<!-- Анимация с вариативным шрифтом -->
<style>
    @media screen and (min-width: 768px) {
        .custom-font-3 {
            font-variation-settings: 'wght' 100;
        }
        .custom-font-4 strong {
            font-weight: 100!important;
            animation: sample-width-2 5s ease-in-out infinite 0s;
            will-change: transform;
            animation-fill-mode: backwards;
        }
    }
    @keyframes sample-width-2 {
        10%, 30% {
            font-variation-settings: 'wght' 600;
        }
        40% {
            font-variation-settings: 'wght' 100;
        }
    }
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
    let strongText = document.querySelectorAll('.custom-font-3');
    let textAnimDelay = 0;
    
    strongText.forEach((el) => {
        if (strongText.length > 1) {
            textAnimDelay += 0.25;
            el.style.animationDelay = "" + textAnimDelay + "s";
        }
    })
});
</script>

<!-- Code by Fedyaeva -->
<!-- Анимация с вариативным шрифтом -->
<style>
    @media screen and (min-width: 768px) {
        .custom-font-5 span {
            font-variation-settings: 'wght' 200;
            animation: sample-width-3 5s ease-in-out infinite;
            will-change: transform;
            animation-fill-mode: backwards;
        }
    }
    @keyframes sample-width-3 {
        10%, 30% {
            font-variation-settings: "wght" 600;
        }
        40% {
            font-variation-settings: 'wght' 200;
        }
    }
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){function splitText(el) {let elem = document.querySelectorAll(el);elem.forEach((elm) => {let textContainer = elm.querySelector('div');textContainer.innerHTML = '<span>' + elm.textContent.trim().split('').join('</span><span>') + '</span>';})}
function addAnimation(el, time) {let elem = document.querySelector(el);let textLength = elem.querySelectorAll('div span').length;let delay = 0;for (let i = 0; i <= textLength; i += 1) {let textSymbol = `div span:nth-of-type(${i})`;let span = elem.querySelector(textSymbol);if (span) {span.style.animationDelay = `${delay}s`;delay += time;}}}
splitText('.custom-font-5');
addAnimation('.custom-font-5', 0.25);});
</script>

<!-- Code by Fedyaeva -->
<!-- Анимация с вариативным шрифтом -->
<style>
    @media screen and (min-width: 768px) {
        .custom-font-6 span {
            font-variation-settings: "wght" var(--font-weight, 100);
        }
    }
</style>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function(){
function splitText(el) {let elem = document.querySelectorAll(el);elem.forEach((elm) => {let textContainer = elm.querySelector('div');textContainer.innerHTML = '<span>' + elm.textContent.trim().split('').join('</span><span>') + '</span>';})}
function obs() {let allAnimation = document.querySelectorAll('.custom-font-6');allAnimation.forEach((el) => el.classList.add('page-animation-js'));var callback = function (entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {entry.target.timeline.play();} else {entry.target.timeline.pause(0);}});};
let observer = new IntersectionObserver(callback);let targets = document.querySelectorAll(".page-animation-js");let chars = document.querySelectorAll('.custom-font-6 span');
targets.forEach(function(target) {const action = gsap.timeline({paused: true}).from(chars, {opacity: 1, scale: 0, ease: "sine", delay: 0.25}).to(chars, {"--font-weight": 600,duration: 2,
ease: "sine.inOut",stagger: {yoyo: true,each: 0.1,repeat: -1}}, 1);target.timeline = action;});Array.prototype.forEach.call(targets, (el) => {observer.observe(el);}); };if (window.matchMedia("(min-width: 768px)").matches) {splitText('.custom-font-6');obs();};});
</script>

<!-- Code by Fedyaeva -->
<!-- Анимация с вариативным шрифтом -->
<style>
    @media screen and (min-width: 768px) {
        .custom-font-7 span:first-child {
            animation: sample-width-5 3s ease-in-out infinite both 0s;
            font-variation-settings: "wght" 100, "wdth" 50;
            will-change: transform;
            animation-fill-mode: backwards;
        }
        .custom-font-7 span:last-child {
            animation: sample-width-6--left 3s ease-in-out infinite both 0s;
            font-variation-settings: "wght" 400, "wdth" 100;
            will-change: transform;
            animation-fill-mode: backwards;
        }
    }
    @keyframes sample-width-5 {
        0%, 100% {
            font-variation-settings: "wght" 100, "wdth" 50;
        }
        50% {
            font-variation-settings: "wght" 400, "wdth" 100;
        }
    }
    @keyframes sample-width-6--left {
        0%, 100% {
            font-variation-settings: "wght" 400, "wdth" 100;
        }
        50% {
            font-variation-settings: "wght" 100, "wdth" 50;
        }
    }
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
    let text = document.querySelectorAll('.custom-font-7 div');
    if (text.length > 1) {
        text.forEach((el) => el.innerHTML = '<span class="left">' + el.textContent.trim().split(' ').join('</span><span class="right">') + '</span>');
    } else {
        text = document.querySelector('.custom-font-7 div');
        text.innerHTML = '<span class="left">' + text.textContent.trim().split(' ').join('</span><span class="right">') + '</span>';
    }
})
</script>