<div class="animated-text" id="animatedText"></div>

/* 
	Weight axis: 100 – 700
	Width axis: 85 – 100
*/
/* @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@100..900&display=swap */

@font-face {
  font-family: 'Heading Now'; 
  src: url('https://fonts.vdhazel.com/headingnow/Heading-Now-Variable-Regular-trial.woff2') format('woff2'); 
  font-weight: normal; 
  font-style: normal; 
}

* {
	box-sizing: border-box;
}

body {
	font-family: "Heading Now", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 100vh;
	background-color: #fff;
  color: black;
}


        .animated-text {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
          font-size: 10vw;
	line-height: 10vw;
        }

.letter {
            display: inline-block;
            --wght: 100;
            --wdth: 85;
            --opacity: 0.25;
            --letter-spacing: 0;
            --font-size: 10vw;
            font-variation-settings: "wght" var(--wght), "wdth" var(--wdth);
            opacity: var(--opacity);
            letter-spacing: var(--letter-spacing);
            font-size: var(--font-size);
            transition: 
                font-variation-settings 1s ease-in-out,
                opacity 1s ease-in-out,
                letter-spacing 2s ease-in-out,
                font-size 1s ease-in-out;
        }

document.addEventListener("DOMContentLoaded", () => {
    const text = "FUTURE TODAY";
    const container = document.getElementById("animatedText");  
    
    // Создание спанов для каждой буквы
    text.split("").forEach(char => {
        const span = document.createElement("span");
        span.className = "letter";
        span.innerHTML = char === " " ? " " : char; // Используем   для пробелов
        container.appendChild(span);
    });

    const letters = document.querySelectorAll(".letter");
    const totalLetters = letters.length;
    const delayIncrement = 100; // Задержка в миллисекундах

    function easeInOutQuart(t) {
        return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
    }

    function animateLetters(forward = true) {
        letters.forEach((letter, index) => {
            const normalizedIndex = Math.max(index, totalLetters - 1 - index) / (totalLetters - 1);
            const easedDelay = easeInOutQuart(normalizedIndex);
            const delay = easedDelay * (totalLetters - 1) * delayIncrement;
          
            setTimeout(() => {
                letter.style.setProperty("--wght", forward ? 700 : 100);
                letter.style.setProperty("--wdth", forward ? 400 : 150);
                letter.style.setProperty("--opacity", forward ? 1 : 0.25);
                letter.style.setProperty("--letter-spacing", forward ? '0.05em' : '0em');
            }, delay);
        });
    }

    animateLetters();
});