/* ============================================================ DIGITAGIOUS scroll "slideshow" enhancement (home + about) Progressive enhancement: only active when gets .digi-anim (added by digi-enhance.js). If JS is off, nothing is hidden. ============================================================ */ /* --- spacing: give each section room so it reads as its own slide --- */ .digi-anim #sections > section.page-section, html.digi-anim #sections > section.page-section { scroll-snap-align: start; scroll-snap-stop: normal; } /* breathing room between slides (Squarespace often stacks them tight) */ .digi-anim #sections > section.page-section { padding-top: clamp(48px, 8vh, 120px); padding-bottom: clamp(48px, 8vh, 120px); } /* --- reveal animation for each slide --- */ .digi-anim #sections > section.page-section { opacity: 0; transform: translateY(46px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .digi-anim #sections > section.page-section.is-in { opacity: 1; transform: none; } /* --- staggered reveal of the blocks inside each slide --- */ .digi-anim #sections > section.page-section .fe-block { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); } .digi-anim #sections > section.page-section.is-in .fe-block { opacity: 1; transform: none; } /* cascade the inner blocks so a slide "builds" as it enters */ .digi-anim #sections > section.page-section.is-in .fe-block:nth-child(1){transition-delay:.06s} .digi-anim #sections > section.page-section.is-in .fe-block:nth-child(2){transition-delay:.14s} .digi-anim #sections > section.page-section.is-in .fe-block:nth-child(3){transition-delay:.22s} .digi-anim #sections > section.page-section.is-in .fe-block:nth-child(4){transition-delay:.30s} .digi-anim #sections > section.page-section.is-in .fe-block:nth-child(5){transition-delay:.38s} .digi-anim #sections > section.page-section.is-in .fe-block:nth-child(n+6){transition-delay:.44s} /* optional gentle scroll snapping on the scroll container */ .digi-anim.digi-snap, .digi-anim.digi-snap body { scroll-snap-type: y proximity; } /* never hide content for reduced-motion users */ @media (prefers-reduced-motion: reduce) { .digi-anim #sections > section.page-section, .digi-anim #sections > section.page-section .fe-block { opacity: 1 !important; transform: none !important; transition: none !important; } }