/* 1. Define the Scroll Timeline (Optional but good practice for clarity) */
/* This creates a named timeline based on the document's scroll progress */
@scroll-timeline --page-scroll {
    source: selector(root);
    /* Use the document scrollbar */
    orientation: block;
    /* Track vertical scroll */
    /* Optionally define scroll range if needed, e.g.,
     scroll-offsets: 0%, 100%; */
}

/* Alternative Inline Definition (often simpler):
   We will use this in the examples below by directly referencing
   scroll(root block) in the animation-timeline property.
*/


/* 2. Define Keyframes for Speed Effects */

@keyframes scroll-effect {
    from {
        transform: translateY(0);
        /* Start at its original position */
    }

    to {
        /* Move upwards, but less than the 'natural' scroll distance */
        /* A smaller value means slower movement relative to scroll */
        /* Adjust '-30vh' based on desired slowness and element context */
        transform: translateY(calc(-10rem * var(--speed, 1)));
    }
}


/* 3. Apply to Decorative Elements */

/* General setup for absolutely positioned decorations */
.decoration {
    top: 0;
    position: absolute;
    width: 100%;
    /* z-index: -1; */
    height: 100%;
    pointer-events: none;
    /* Basic animation properties */
    animation-duration: 1ms;
    /* Duration doesn't matter for scroll timelines, but needs to be valid */
    animation-fill-mode: both;
    /* Keep styles from the 'to' keyframe after */
    animation-timing-function: linear;
    /* Usually linear for direct mapping */

    animation-name: scroll-effect;
    /* Link to the document's vertical scroll timeline */
    animation-timeline: scroll(root block);
}




.plus {
    --color: #000;
    --size: 1;
    --rotation: 0deg;
    position: absolute;
    display: flex;
    width: calc(1.5rem * var(--size, 1));
    height: calc(1.5rem * var(--size, 1));
    justify-content: center;
    transform-origin: 50% 50%;
    align-items: center;
    color: var(--color, #fde463);
    rotate: var(--rotation, 0deg);

    &::after {
        content: '';
        position: absolute;
        top: 0;
        width: calc(6rem * var(--size, 1));
        height: 100%;
        background-color: currentColor;
    }

    &::before {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: calc(6rem * var(--size, 1));
        background-color: currentColor;
    }
}