/* ========================================================================== EC Designs & Decor — Botanical scroll motion Three variants: stem · sprig · vine (set via ) All pure SVG + CSS. No dependencies. Disabled under reduced-motion. ========================================================================== */ :root{ --motion-gold:199,163,107; /* #C7A36B */ --motion-rail-w:46px; } /* The fixed rail that hosts the stem / vine variants */ .motion-rail{ position:fixed; top:0; left:0; width:var(--motion-rail-w); height:100vh; height:100svh; z-index:40; pointer-events:none; opacity:0; transition:opacity .9s cubic-bezier(.22,.61,.36,1); } .motion-rail svg{display:block;width:100%;height:100%;overflow:visible} /* Only show the rail for the variants that use it, and only once the reader has actually started scrolling. */ html[data-motion="stem"] .motion-rail, html[data-motion="vine"] .motion-rail{opacity:1} html[data-motion="stem"] .motion-rail[data-armed="false"], html[data-motion="vine"] .motion-rail[data-armed="false"]{opacity:0} /* The faint full-length track */ .motion-track{ fill:none; stroke:rgba(var(--motion-gold),.20); stroke-width:1; stroke-linecap:round; } /* The drawn-in progress line */ .motion-progress{ fill:none; stroke:rgba(var(--motion-gold),.85); stroke-width:1.15; stroke-linecap:round; transition:stroke-dashoffset .12s linear; } /* Leaves / nodes threaded along the rail */ .motion-leaf{ fill:rgba(var(--motion-gold),.9); opacity:0; transform-box:fill-box; transform-origin:0% 50%; transform:scale(.3); transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1); } .motion-leaf.is-open{opacity:1;transform:scale(1)} /* The travelling bud that sits at the head of the line */ .motion-bud{ fill:rgba(var(--motion-gold),.95); opacity:0; transition:opacity .5s ease; } .motion-rail[data-armed="true"] .motion-bud{opacity:1} /* -------------------------------------------------------------------------- Variant: sprig — botanical line drawings that draw themselves in the margin as each section arrives. No persistent rail. -------------------------------------------------------------------------- */ .motion-sprig{ position:absolute; top:clamp(2rem,6vw,5rem); width:64px; height:170px; pointer-events:none; z-index:1; opacity:0; transition:opacity .8s cubic-bezier(.22,.61,.36,1); } .motion-sprig svg{display:block;width:100%;height:100%;overflow:visible} html[data-motion="sprig"] .motion-sprig{opacity:1} /* Sits in the layout gutter inside .wrap — never outside the document box, so it cannot introduce horizontal overflow. */ .motion-sprig--left{left:0} .motion-sprig--right{right:0} .motion-sprig .sprig-stem{ fill:none; stroke:rgba(var(--motion-gold),.7); stroke-width:1.1; stroke-linecap:round; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.9s cubic-bezier(.33,.02,.24,1); } .motion-sprig .sprig-leaf{ fill:rgba(var(--motion-gold),.72); opacity:0; transform-box:fill-box; transform-origin:0% 50%; transform:scale(.2) rotate(-8deg); transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1); } .motion-sprig.is-drawn .sprig-stem{stroke-dashoffset:0} .motion-sprig.is-drawn .sprig-leaf{opacity:1;transform:none} /* Leaf stagger is set inline by scroll-motion.js — each leaf sits in its own , which breaks any :nth-of-type chain. */ /* The gutter needs a positioning context for the sprigs */ html[data-motion="sprig"] .section .wrap{position:relative} /* -------------------------------------------------------------------------- Sizing down: the rail is decoration, not content. Hide it where the layout has no gutter to spare. -------------------------------------------------------------------------- */ /* Below this the gutter is too narrow to hold a sprig without crowding text */ @media (max-width:1100px){ .motion-sprig{display:none} } @media (max-width:900px){ :root{--motion-rail-w:26px} .motion-leaf{display:none} /* keep the line, drop the foliage */ } @media (max-width:520px){ html[data-motion="stem"] .motion-rail, html[data-motion="vine"] .motion-rail{opacity:0} } /* -------------------------------------------------------------------------- Accessibility — no scroll-linked motion at all. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .motion-rail{display:none} .motion-sprig{display:none} }