/* ============================================================ SCROLL CINEMA — v4 layer · seattlenaturaldoctor.com Scroll-driven transformation system. Every effect is scrubbed directly by scroll position via the --sc custom property (0 = entering the viewport bottom, 1 = leaving the top), set per-element by /assets/js/scroll-cinema.js. · Effects only activate when has .sc-on (JS + motion OK). · prefers-reduced-motion users, no-JS users, and printers get the static site untouched. · Any section (or
) with data-cinema="off" is skipped. ============================================================ */ /* The eased progress every rule consumes. --sc : raw progress through the viewport (0→1) --si : stagger index within a group (0,1,2…) */ html.sc-on [data-sc] { will-change: transform, opacity; } /* ---------- Scroll progress bar (the "you are the camera" cue) ---------- */ .sc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 60%, #E8CFA0 100%); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } html:not(.sc-on) .sc-progress { display: none; } /* ---------- Headline choreography ---------- */ html.sc-on [data-sc="kicker"] { opacity: calc(var(--sc, 0) * 3); letter-spacing: calc(.22em + (1 - min(var(--sc, 0) * 2.5, 1)) * .3em); transform: translateY(calc((1 - min(var(--sc, 0) * 2.5, 1)) * 14px)); } html.sc-on [data-sc="h2"] { opacity: calc(.02 + min(var(--sc, 0) * 2.6, 1) * .98); transform: translateY(calc((1 - min(var(--sc, 0) * 2.6, 1)) * 30px)); } html.sc-on [data-sc="dek"] { opacity: calc(min(max(var(--sc, 0) - .06, 0) * 2.6, 1)); transform: translateY(calc((1 - min(max(var(--sc, 0) - .06, 0) * 2.6, 1)) * 24px)); } /* ---------- Photos develop as you scroll ---------- */ html.sc-on [data-sc="photo"] { --e: min(var(--sc, 0) * 2.1, 1); clip-path: inset(calc((1 - var(--e)) * 11%) calc((1 - var(--e)) * 7%) calc((1 - var(--e)) * 11%) calc((1 - var(--e)) * 7%)); filter: grayscale(calc((1 - var(--e)) * 85%)) brightness(calc(1 - (1 - var(--e)) * .18)); transform: scale(calc(1.06 - var(--e) * .06)) translateY(calc((1 - var(--e)) * 26px)); } html.sc-on figure[data-sc="photo"] figcaption { opacity: calc(min(max(var(--sc, 0) - .18, 0) * 3, 1)); transform: translateX(calc((1 - min(max(var(--sc, 0) - .18, 0) * 3, 1)) * -14px)); } html.sc-on [data-sc="video"] { --e: min(var(--sc, 0) * 2.1, 1); filter: grayscale(calc((1 - var(--e)) * 80%)); transform: scale(calc(1.05 - var(--e) * .05)) translateY(calc((1 - var(--e)) * 22px)); } /* ---------- Cards rise and flatten from a tilted deck ---------- */ html.sc-on .cards, html.sc-on .post-grid, html.sc-on .video-grid { perspective: 1100px; } html.sc-on [data-sc="card"] { --e: min(max(var(--sc, 0) - var(--si, 0) * .05, 0) * 2.4, 1); opacity: calc(.05 + var(--e) * .95); transform: translateY(calc((1 - var(--e)) * 52px)) rotateX(calc((1 - var(--e)) * 8deg)) scale(calc(.96 + var(--e) * .04)); transform-origin: 50% 100%; } /* ---------- Stat band: hairlines draw, numbers rise ---------- */ html.sc-on [data-sc="stat"] { --e: min(max(var(--sc, 0) - var(--si, 0) * .06, 0) * 2.6, 1); border-top-color: transparent; background-image: linear-gradient(90deg, var(--gold), var(--gold)); background-repeat: no-repeat; background-size: calc(var(--e) * 100%) 2px; background-position: 0 0; opacity: calc(.1 + var(--e) * .9); } html.sc-on [data-sc="stat"] b { display: block; transform: translateY(calc((1 - var(--e)) * 18px)); opacity: calc(var(--e)); } /* ---------- Gold rules & category headings draw across ---------- */ html.sc-on hr[data-sc="rule"] { transform: scaleX(var(--sc-e, calc(min(var(--sc, 0) * 2.4, 1)))); transform-origin: 0 50%; } html.sc-on [data-sc="answer"] { --e: min(var(--sc, 0) * 2.4, 1); transform: translateX(calc((1 - var(--e)) * -26px)); opacity: calc(.05 + var(--e) * .95); border-left-width: calc(3px + (1 - var(--e)) * 30px); } /* ---------- Pull-quotes surface like captions in a film ---------- */ html.sc-on [data-sc="quote"] { --e: min(var(--sc, 0) * 2.2, 1); opacity: calc(var(--e)); transform: translateY(calc((1 - var(--e)) * 34px)) scale(calc(.985 + var(--e) * .015)); } html.sc-on [data-sc="attr"] { --e: min(max(var(--sc, 0) - .1, 0) * 2.6, 1); opacity: calc(var(--e)); transform: translateX(calc((1 - var(--e)) * 22px)); letter-spacing: calc(.18em + (1 - var(--e)) * .2em); } /* ---------- Two-column layouts slide together ---------- */ html.sc-on [data-sc="col-l"] { --e: min(var(--sc, 0) * 2.2, 1); opacity: calc(.05 + var(--e) * .95); transform: translateX(calc((1 - var(--e)) * -44px)); } html.sc-on [data-sc="col-r"] { --e: min(var(--sc, 0) * 2.2, 1); opacity: calc(.05 + var(--e) * .95); transform: translateX(calc((1 - var(--e)) * 44px)); } @media (max-width: 820px) { html.sc-on [data-sc="col-l"], html.sc-on [data-sc="col-r"] { transform: translateY(calc((1 - var(--e)) * 30px)); } } /* ---------- Award strip: credentials rise into rank ---------- */ html.sc-on [data-sc="award"] { --e: min(max(var(--sc, 0) - var(--si, 0) * .07, 0) * 3, 1); opacity: calc(var(--e)); transform: translateY(calc((1 - var(--e)) * 16px)); letter-spacing: calc(.2em + (1 - var(--e)) * .12em); } /* ---------- Dark sections: the navy itself drifts as you scroll ---------- */ html.sc-on section.dark[data-sc="band"], html.sc-on section.dark[data-sc="band"].cta-band { background: linear-gradient(135deg, #0C1728 0%, var(--deep) 30%, #16294a 55%, var(--navy) 78%, #0C1728 100%); background-size: 300% 300%; background-position: calc(var(--sc, 0) * 100%) calc(var(--sc, 0) * 60%); } /* ---------- CTA bands: the gold light rises to meet you ---------- */ html.sc-on [data-sc="cta"] { position: relative; isolation: isolate; overflow: hidden; } html.sc-on [data-sc="cta"]::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(55% 70% at 50% 115%, rgba(176,133,58,.5), rgba(176,133,58,.12) 55%, transparent 75%); opacity: calc(var(--sc, 0) * 1.2); transform: translateY(calc((1 - var(--sc, 0)) * 24%)); } html.sc-on [data-sc="cta"] .btn { transform: translateY(calc((1 - min(var(--sc, 0) * 1.8, 1)) * 18px)); } /* ---------- Interior page hero: cinematic departure ---------- */ html.sc-on .hero[data-sc="hero"]::before { transform: scale(calc(1.04 + var(--hp, 0) * .12)) translateY(calc(var(--hp, 0) * 7%)); opacity: calc(.18 - var(--hp, 0) * .1); } html.sc-on .hero[data-sc="hero"] .wrap { transform: translateY(calc(var(--hp, 0) * 54px)); opacity: calc(1 - var(--hp, 0) * 1.15); } /* ---------- Home hero slideshow: parallax + hand-off ---------- */ html.sc-on .hero-slideshow[data-sc="heroHome"] .slides { transform: translateY(calc(var(--hp, 0) * 12%)) scale(calc(1 + var(--hp, 0) * .05)); } html.sc-on .hero-slideshow[data-sc="heroHome"] .hero-content { transform: translateY(calc(var(--hp, 0) * 70px)); opacity: calc(1 - var(--hp, 0) * 1.25); } html.sc-on .hero-slideshow[data-sc="heroHome"] .scrim { background: linear-gradient(to top, rgba(12,23,40,calc(.94 + var(--hp, 0) * .06)) 8%, rgba(12,23,40,calc(.55 + var(--hp, 0) * .3)) 48%, rgba(12,23,40,.38) 100%), radial-gradient(80% 120% at 90% 0%, rgba(176,133,58,.14), transparent 55%); } /* ---------- Ridge divider (logo motif) — drawn by scroll ---------- */ .sc-ridge { display: block; width: 100%; height: 84px; margin: 0; background: transparent; } .sc-ridge svg { display: block; width: 100%; height: 100%; } .sc-ridge .ridge-path { fill: none; stroke: var(--gold); stroke-width: 1.6; } .sc-ridge .ridge-sun { fill: var(--gold-light); opacity: 0; transition: opacity .5s ease; } .sc-ridge.lit .ridge-sun { opacity: 1; } html:not(.sc-on) .sc-ridge { display: none; } /* ---------- FAQ items: fan open slightly as they arrive ---------- */ html.sc-on [data-sc="faq"] { --e: min(max(var(--sc, 0) - var(--si, 0) * .04, 0) * 2.8, 1); opacity: calc(.08 + var(--e) * .92); transform: translateY(calc((1 - var(--e)) * 22px)); } /* ---------- Tables: rows resolve top-to-bottom ---------- */ html.sc-on table[data-sc="table"] { --e: min(var(--sc, 0) * 2.2, 1); opacity: calc(.1 + var(--e) * .9); transform: translateY(calc((1 - var(--e)) * 26px)); } /* ---------- Safety: neutralize legacy reveal when cinema is running ---------- */ html.sc-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* ---------- Full stop for reduced motion (belt & suspenders) ---------- */ @media (prefers-reduced-motion: reduce) { html.sc-on [data-sc] { transform: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important; } .sc-progress, .sc-ridge { display: none !important; } }