/* ========================================================================== A1A Surveying — Optional motion (parked, not running by default) Four effects that were built and liked but are deliberately switched off on the home page for now: parallax — the service word strip under the hero becomes a slow marquee (the hero drawing's own scroll behaviour is not optional — it ships as the fixed backdrop, see site.css and main.js) reveal — sections fade and rise as they come into view rail — a fixed station rail down the left edge tracking scroll position, with a live STA read-out trail — a survey traverse line drawn down the whole page as you scroll, diving behind the cards and out the other side TO TURN ONE ON PERMANENTLY Add it to the data-motion attribute on in index.html, e.g. TO PREVIEW WITHOUT EDITING ANYTHING Append ?motion= to the URL: index.html?motion=reveal index.html?motion=trail index.html?motion=parallax,reveal,rail,trail index.html?motion=all The styles below only take effect once js/motion-optional.js has switched the matching module on, so leaving this stylesheet linked costs nothing. ========================================================================== */ /* -------------------------------------------------------------------------- parallax — hero drift + marquee word strip -------------------------------------------------------------------------- */ .marquee { overflow: hidden; position: relative; display: block; justify-content: flex-start; } .marquee__track { display: flex; align-items: center; gap: var(--space-6); width: max-content; animation: marqueeSlide 34s linear infinite; } /* Pause on hover so the words stay readable. */ .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- reveal — fade and rise on scroll The [data-reveal] attribute is only ever added by JS, so content can never be left invisible if the script does not run. -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } [data-reveal="in"] { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- rail — fixed station rail with scroll read-out -------------------------------------------------------------------------- */ .station-rail { position: fixed; left: 26px; top: 18vh; height: 64vh; width: 34px; z-index: 35; pointer-events: none; display: flex; align-items: stretch; gap: 10px; } .station-rail__track { position: relative; width: 2px; background: var(--hair-soft); } .station-rail__fill { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--ink); } .station-rail__tick { position: absolute; left: -5px; width: 12px; height: 1px; background: var(--hair); transition: width var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .station-rail__tick.is-on { background: var(--ink); width: 16px; } .station-rail__puck { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); transition: top .12s linear; } .station-rail__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--ink-faint); writing-mode: vertical-rl; align-self: flex-start; } /* No room for it beside the content on narrow screens. */ @media (max-width: 1100px) { .station-rail { display: none; } } /* -------------------------------------------------------------------------- trail — survey traverse ARCHIVED, NOT RUNNING. Parked here because the line worked visually but ran across text in a few places where it hurt readability. Switch it on with ?motion=trail to look at it again; the fix, if it is ever wanted, is to move the offending turns in the VERTICES list in motion-optional.js rather than to change anything here. One line run down the whole page: a faint dashed route showing where it goes, and a solid line that draws in behind you as you scroll, with station dots at each turn and a marker at the head. The route is not hard-coded. js/motion-optional.js measures the live bounding boxes of the page's own elements and strings the vertices between them, so it re-fits itself whenever the layout changes — a different screen size, a rotated phone, a font finishing loading. Nothing is pinned to a coordinate. It sits behind the page content, so it passes under the near-opaque cards and reappears on the other side, and shows through the thin section washes in between. -------------------------------------------------------------------------- */ .trail { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; } /* The whole route, faint — you can see where the line is headed. */ .trail__route { fill: none; stroke: var(--ink); stroke-opacity: .13; stroke-width: 1.25; stroke-dasharray: 5 7; stroke-linecap: round; stroke-linejoin: round; } /* The part you have scrolled past, solid. */ .trail__run { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Station dots at each turn, set as the line reaches them. */ .trail__vertex { fill: var(--paper); stroke: var(--ink); stroke-width: 1.25; opacity: 0; transition: opacity var(--dur-slow) var(--ease); } .trail__vertex.is-set { opacity: .55; } /* The instrument at the head of the line. */ .trail__head { fill: var(--aqua-600); stroke: var(--paper); stroke-width: 2; opacity: 0; transition: opacity var(--dur-base) var(--ease); } .trail__head.is-on { opacity: 1; } /* Thinner on phones, where it runs close to the text. */ @media (max-width: 720px) { .trail__run { stroke-width: 1.35; stroke-opacity: .42; } .trail__route { stroke-opacity: .1; } } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } [data-reveal] { opacity: 1; transform: none; transition: none; } /* The traverse is laid down in full and never follows the scroll. */ .trail__vertex { opacity: .55; transition: none; } .trail__head { display: none; } }