/* Everything the timeline reveals should start hidden */

                    #heroBackgroundImage,
                    #folderComponent,
                    #heroHeading,
                    #heroParagraph,
                    #heroButton,
                    #greyBox,
                    #seafoamBox,
                    #popBox,
                    #clayBox,
                    [contact-hero-item] {
                        opacity: 0;
                        /* matches autoAlpha:0 */
                        visibility: hidden;
                        /* prevents focus/hover while hidden */
                        transform: translateY(16px) scale(1);
                        /* match your JS “set” positions */
                        transform-origin: 50% 50%;
                        will-change: transform, opacity;
                    }

                    /* For elements that shouldn't shift layout while images load */

                    #heroBackgroundImage {
                        opacity: 0;
                        visibility: hidden;
                        transform: scale(1.08);
                        /* match your JS start */
                    }