/* ── Scroll motion ──────────────────────────────────────────────────────────── RULE: every element below is fully visible and usable with NO JavaScript. GSAP only enhances. If the CDN is blocked or slow, the page still reads and the horizontal strip still swipes natively. */ /* ---------- parallax layers ---------- */ .hero-img{will-change:transform} .px{overflow:hidden;border-radius:var(--r)} .px img{will-change:transform;transform:scale(1.14)} /* ---------- horizontal scroll strip ---------- Default (and mobile): a normal swipeable rail with scroll-snap — good UX on its own. On desktop, JS upgrades it to a pinned sideways-scroll section. */ .hsec{padding:var(--sp) 0;overflow:hidden} .hrail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory; padding:.4rem .4rem 1.4rem;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--line-2) transparent} .hrail::-webkit-scrollbar{height:6px} .hrail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px} .hcard{flex:0 0 clamp(230px,74vw,310px);scroll-snap-align:center; background:#fff;border:1px solid var(--line-2); border-radius:var(--r);overflow:hidden;transition:border-color .3s} .hcard:hover{border-color:var(--gold)} .hcard img{width:100%;aspect-ratio:4/3;object-fit:cover} .hcard .b{padding:1.2rem 1.3rem 1.5rem} .hcard h3{color:var(--ink);font-size:1.06rem;margin-bottom:.35rem} .hcard p{color:var(--body);font-size:.92rem} .hhint{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.85rem;margin-top:.4rem} /* desktop pinned mode — only switched on by JS once GSAP is confirmed */ .hrail>button{scroll-snap-align:center} .pinned .hrail{overflow:visible;scroll-snap-type:none;padding-bottom:0; width:max-content;flex-wrap:nowrap} .pinned .hhint{display:none} @media(min-width:900px){ .hcard{flex:0 0 360px} } /* ---------- marquee band ---------- */ .marq{overflow:hidden;padding:0 0 var(--sp)} .marq-t{display:flex;gap:.7rem;width:max-content;animation:drift 46s linear infinite} .marq-t img{width:230px;height:150px;object-fit:cover;border-radius:11px;opacity:.85} @keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .marq:hover .marq-t{animation-play-state:paused} /* ---------- count-up ---------- */ .stat b{font-variant-numeric:tabular-nums} /* ---------- directional reveals (JS adds .dir-* ; harmless without JS) ---------- */ .js-reveal .reveal.from-l{transform:translate3d(-34px,0,0)} .js-reveal .reveal.from-r{transform:translate3d(34px,0,0)} .js-reveal .reveal.from-s{transform:scale(.94)} .js-reveal .reveal.from-l.in, .js-reveal .reveal.from-r.in, .js-reveal .reveal.from-s.in{transform:none} /* ---------- respect the user ---------- */ /* ══════════════ RICH-BUT-DIGNIFIED PASS ══════════════ Same contract as above: everything here is visible and usable with no JS. Classes that hide things are added BY JavaScript only after it has proven itself, exactly like .js-reveal. */ /* ---------- 1. scroll progress bar ---------- */ .progress{position:fixed;top:0;left:0;height:3px;z-index:90;transform-origin:0 50%; transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-lt)); width:100%;pointer-events:none} @supports (animation-timeline: scroll()){ .progress{animation:grow linear both;animation-timeline:scroll(root block)} @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}} } /* ---------- 2. word-by-word heading reveal ---------- .w is the clipping frame, i is the moving word. Both are neutral until JS adds .split-ready to , so an un-split heading is simply normal text. */ .w{display:inline-block;overflow:hidden;vertical-align:bottom} .w > i{display:inline-block;font-style:inherit;will-change:transform} .split-ready .w > i{transform:translateY(105%);transition:transform .72s cubic-bezier(.22,1,.36,1)} .split-ready .w.in > i{transform:none} /* ---------- 3. clip-path image wipe ---------- */ .js-reveal .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.22,1,.36,1)} .js-reveal .wipe.in{clip-path:inset(0 0 0 0)} /* ---------- 4. hover tilt — pointer devices only ---------- */ @media (hover:hover) and (pointer:fine){ .gal button,.hcard{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.22,1,.36,1)} .gal button{will-change:transform} } /* ---------- 5. SVG icon draw ---------- */ .draw path,.draw circle,.draw rect{stroke-dasharray:var(--len);stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)} .draw.in path,.draw.in circle,.draw.in rect{stroke-dashoffset:0} /* ---------- 6. hero entrance ---------- */ .hero-in .hero .eyebrow,.hero-in .hero p,.hero-in .hero .hero-cta,.hero-in .hero .scripture{ opacity:0;transform:translateY(16px); animation:heroUp .8s cubic-bezier(.22,1,.36,1) forwards} .hero-in .hero .eyebrow{animation-delay:.05s} .hero-in .hero > .wrap > p{animation-delay:.42s} .hero-in .hero .hero-cta{animation-delay:.54s} .hero-in .hero .scripture{animation-delay:.66s} @keyframes heroUp{to{opacity:1;transform:none}} /* ---------- 7. button affordance ---------- */ .btn{position:relative;overflow:hidden} .btn .arw{transition:transform .25s cubic-bezier(.22,1,.36,1)} .btn:hover .arw{transform:translateX(4px)} .btn-gold::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%); transform:translateX(-120%);transition:transform .65s ease} .btn-gold:hover::after{transform:translateX(120%)} /* ---------- 9. brand watermark (inline SVG, no extra request) ---------- */ .alt{position:relative} .alt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%230E2A5C' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M28 44c8-9 20-9 27-2 7-7 19-7 27 2-9 12-22 17-27 17S37 56 28 44z'/%3E%3Cpath d='M55 42c6-14 22-18 33-9'/%3E%3Cpath d='M104 108c-9-2-15-10-14-19 9-2 18 3 21 12z'/%3E%3Cpath d='M111 101c3-11 14-17 24-13'/%3E%3Ccircle cx='120' cy='40' r='3'/%3E%3Ccircle cx='34' cy='112' r='3'/%3E%3C/g%3E%3C/svg%3E"); background-size:150px 150px} .alt > *{position:relative;z-index:1} /* ---------- 10. curved dividers ---------- */ .divider{display:block;width:100%;height:clamp(38px,5vw,70px);line-height:0} .divider svg{display:block;width:100%;height:100%} .divider--to-navy{background:var(--bg-2)} .divider--to-navy svg{fill:var(--navy)} .divider--from-navy{background:var(--bg)} .divider--from-navy svg{fill:var(--navy)} /* ---------- 11. editorial gallery rhythm (desktop only) ---------- */ @media(min-width:760px){ .gal{grid-auto-flow:dense} .gal button:nth-child(1),.gal button:nth-child(8){grid-column:span 2;grid-row:span 2} .gal button:nth-child(1) img,.gal button:nth-child(8) img{aspect-ratio:1} } /* ---------- 12. editorial type ---------- */ .dropcap::first-letter{float:left;font-family:Fraunces,Georgia,serif;font-weight:600; font-size:3.3em;line-height:.84;padding:.06em .12em 0 0;color:var(--navy)} .pullquote{position:relative;padding-left:1.5rem;border-left:3px solid var(--gold)} .pullquote::before{content:"\201C";position:absolute;left:-.1rem;top:-1.4rem; font-family:Fraunces,serif;font-size:4.4rem;line-height:1;color:var(--gold);opacity:.32} /* ---------- 13. card refinement ---------- */ .card,.tier{position:relative;overflow:hidden} .card::before,.tier::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--teal),var(--gold),var(--magenta)); transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.22,1,.36,1)} .card:hover::before,.tier:hover::before{transform:scaleX(1)} .card .badge{transition:box-shadow .3s,transform .3s} .card:hover .badge{box-shadow:0 0 0 6px rgba(201,153,46,.16);transform:translateY(-2px)} /* ---------- 14. depth behind flat colour blocks ---------- */ .hero{background-image:radial-gradient(900px 480px at 78% 8%,rgba(20,128,140,.42),transparent 62%), radial-gradient(760px 420px at 8% 92%,rgba(201,153,46,.20),transparent 60%)} .band{background-image:radial-gradient(680px 380px at 88% 6%,rgba(20,128,140,.44),transparent 60%), radial-gradient(620px 340px at 6% 94%,rgba(208,24,123,.20),transparent 58%)} .hsec{background-image:radial-gradient(820px 460px at 92% 4%,rgba(20,128,140,.30),transparent 62%)} /* ---------- respect the user — everything above goes quiet ---------- */ @media(prefers-reduced-motion:reduce){ .marq-t{animation:none;width:auto;flex-wrap:wrap} .px img{transform:none} .hero-img{transform:none!important} .progress{display:none} .split-ready .w > i{transform:none!important;transition:none} .js-reveal .wipe{clip-path:none!important;transition:none} .draw path,.draw circle,.draw rect{stroke-dasharray:none!important;stroke-dashoffset:0!important} .hero-in .hero .eyebrow,.hero-in .hero p,.hero-in .hero .hero-cta,.hero-in .hero .scripture{ opacity:1;transform:none;animation:none} .btn-gold::after{display:none} .gal button,.hcard{transform:none!important} }