body {
    font-family: 'Inter', sans-serif;
    timeline-scope: --header-scroll;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
}

/* Scroll Driven Animation Setup */
#scroll-watcher {
    height: 20vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: -1;
    view-timeline-name: --header-scroll;
    view-timeline-axis: block;
}

#main-header,
#header-container,
#header-logo,
#header-text,
#header-text>span:first-child,
#header-text>span:last-child {
    animation-timeline: --header-scroll;
    animation-range: exit 0% exit 100%;
    animation-duration: 1ms;
    /* Required for some browsers to trigger animation */
    animation-fill-mode: both;
    animation-timing-function: linear;
}

/* Header Layout & Styles */
@keyframes header-base {
    to {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        justify-content: center;
    }
}

@keyframes header-height-mobile {
    to {
        height: 8rem;
    }
}

@keyframes header-height-desktop {
    to {
        height: 6rem;
    }
}

#main-header {
    animation-name: header-base, header-height-mobile;
}

@media (min-width: 768px) {
    #main-header {
        animation-name: header-base, header-height-desktop;
    }
}

/* Logo Size */
@keyframes logo-size {
    to {
        height: 4rem;
        width: 4rem;
    }
}

#header-logo {
    animation-name: logo-size;
}

/* Text Container Size */
@keyframes text-container {
    to {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

#header-text {
    animation-name: text-container;
}

/* "Isabel Soler" Text */
@keyframes isabel-text {
    to {
        font-size: 1.25rem;
        font-weight: 700;
    }
}

#header-text>span:first-child {
    animation-name: isabel-text;
}

/* "Craft & Create" Text */
@keyframes craft-text {
    to {
        font-size: 0.875rem;
    }
}

#header-text>span:last-child {
    animation-name: craft-text;
}

/* Nav Link Size */
@keyframes nav-text-mobile {
    to {
        font-size: 0.75rem;
    }
}

@keyframes nav-text-desktop {
    to {
        font-size: 1rem;
    }
}

#main-header nav ul {
    animation-timeline: --header-scroll;
    animation-range: exit 0% exit 100%;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-name: nav-text-mobile;
}

@media (min-width: 768px) {
    #main-header nav ul {
        animation-name: nav-text-desktop;
    }
}