html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    color: #3f4859;
}

.font-display {
    font-family: "Manrope", sans-serif;
}

.font-mono {
    font-family: "Space Grotesk", monospace;
    font-variant-numeric: tabular-nums;
}

/* =========================================
   FLIP WORD
========================================= */

.flip-word {
    display: inline-block;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   PROCESS LINE
========================================= */

#timeline-path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 2.2s ease;
}

#timeline-path.draw {
    stroke-dashoffset: 0;
}

.step-node {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.step-node.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   FLOATING ELEMENTS
========================================= */

@keyframes floatY {

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

    50% {
        transform: translateY(-10px);
    }
}

.float-slow {
    animation: floatY 5s ease-in-out infinite;
}

.float-slow-delay {
    animation: floatY 5s ease-in-out infinite;
    animation-delay: -2.4s;
}

/* =========================================
   MOBILE MENU
========================================= */

#menu-toggle:checked~#mobile-menu {
    max-height: 560px;
    opacity: 1;
}

#menu-toggle:checked~label #burger-open {
    display: none;
}

#menu-toggle:checked~label #burger-close {
    display: block;
}

/* =========================================
   RESPONSIVE IMPROVEMENTS
========================================= */

@media (max-width: 640px) {
    .reveal {
        transform: translateY(15px);
    }
}