/* ============================================================================ Restructuring Advisory — motion + atmosphere layer ("wow" pass) Loaded only on restructuring_advisory.html. Reveal system: js/restructuring-ui.js adds .rv-armed to and flips .in on [data-rv] containers as they enter the viewport. Every hidden-initial state is scoped under .rv-armed so a JS failure leaves the page fully visible. The ported legacy sections keep their own original animations. Variants (one per content type, deliberately not the same move twice): hero — Ken Burns bg, eyebrow tracking settles, title rises from a clip title — section headings: clip-rise + eyebrow letter-spacing settle fade-up — prose blocks: soft rise glass — Why We're Different cards: rise + condense from blur draw — Our Process: the rule draws itself, number stamps, bullets cascade pop — lender/servicer bubbles: spring into place, then drift cols — FAQ columns: left column slides in from left, right from right ========================================================================== */ /* ---------------------------------------------------------------- hero ---- */ .page-hero { overflow: hidden; } .page-hero-bg { transform: scale(1.14); transition: transform 4s cubic-bezier(.16, .55, .25, 1); } .page-hero.in .page-hero-bg { transform: scale(1.02); } /* keep breathing after the arrival */ .page-hero.in .page-hero-bg { animation: hero-breathe 26s ease-in-out 4s infinite; } @keyframes hero-breathe { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.07); } } .rv-armed .page-hero .page-eyebrow { opacity: 0; letter-spacing: .55em; transition: opacity .9s ease .15s, letter-spacing 1.2s cubic-bezier(.22,.61,.36,1) .15s; } .page-hero.in .page-eyebrow { opacity: 1; letter-spacing: .22em; } /* masked rise: the heading is the mask, the inner span does the moving — transform-only, which is reliable everywhere clip-path transitions are not */ .rv-armed .page-hero .page-title { overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; } .rv-armed .page-hero .page-title .ttl-in { display: inline-block; transform: translateY(108%); transition: transform .95s cubic-bezier(.22,.61,.36,1) .3s; } .page-hero.in .page-title .ttl-in { transform: none; } .rv-armed .page-hero .page-hero-lede { opacity: 0; transform: translateY(18px); transition: opacity .8s ease .75s, transform .8s cubic-bezier(.22,.61,.36,1) .75s; } .page-hero.in .page-hero-lede { opacity: 1; transform: none; } /* ------------------------------------------------------ section titles ---- */ .rv-armed [data-rv="title"] .section-eyebrow { opacity: 0; letter-spacing: .42em; transition: opacity .7s ease, letter-spacing 1s cubic-bezier(.22,.61,.36,1); } [data-rv="title"].in .section-eyebrow { opacity: 1; letter-spacing: .16em; } .rv-armed [data-rv="title"] .section-h2 { overflow: hidden; padding-bottom: .2em; margin-bottom: calc(20px - .2em); } .rv-armed [data-rv="title"] .section-h2 .ttl-in { display: inline-block; transform: translateY(108%); transition: transform .85s cubic-bezier(.22,.61,.36,1) .12s; } [data-rv="title"].in .section-h2 .ttl-in { transform: none; } /* -------------------------------------------------------------- prose ---- */ .rv-armed [data-rv="fade-up"] { opacity: 0; transform: translateY(26px); transition: opacity .85s ease var(--rvd, 0s), transform .85s cubic-bezier(.22,.61,.36,1) var(--rvd, 0s); } [data-rv="fade-up"].in { opacity: 1; transform: none; } /* -------------------------------------- Why We're Different glass cards ---- */ .rv-armed [data-rv="glass"] > .card-feature { opacity: 0; transform: translateY(30px) scale(.965); filter: blur(7px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1), filter .8s ease; } [data-rv="glass"].in > .card-feature { opacity: 1; transform: none; filter: blur(0); } [data-rv="glass"].in > .card-feature:nth-child(2) { transition-delay: .12s; } [data-rv="glass"].in > .card-feature:nth-child(3) { transition-delay: .24s; } [data-rv="glass"].in > .card-feature:nth-child(4) { transition-delay: .36s; } [data-rv="glass"].in > .card-feature:nth-child(5) { transition-delay: .48s; } /* -------------------------------------------------- Our Process (draw) ---- */ /* each point owns a base delay; every piece inside offsets from it */ [data-rv="draw"] .proc-point:nth-child(1) { --pd: 0s; } [data-rv="draw"] .proc-point:nth-child(2) { --pd: .18s; } [data-rv="draw"] .proc-point:nth-child(3) { --pd: .36s; } [data-rv="draw"] .proc-point:nth-child(4) { --pd: .54s; } .rv-armed [data-rv="draw"] .proc-title { opacity: 0; transform: translateX(-16px); transition: opacity .6s ease var(--pd), transform .6s cubic-bezier(.22,.61,.36,1) var(--pd); } .rv-armed [data-rv="draw"] .proc-rule { transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--pd) + .22s); } .rv-armed [data-rv="draw"] .proc-num { opacity: 0; transform: translateY(10px) scale(.72); transition: opacity .45s ease calc(var(--pd) + .5s), transform .45s cubic-bezier(.34,1.45,.5,1) calc(var(--pd) + .5s); /* stamp */ } .rv-armed [data-rv="draw"] .proc-list li { opacity: 0; transform: translateX(-14px); transition: opacity .55s ease calc(var(--pd) + .5s + var(--ld, 0s)), transform .55s cubic-bezier(.22,.61,.36,1) calc(var(--pd) + .5s + var(--ld, 0s)); } [data-rv="draw"] .proc-list li:nth-child(2) { --ld: .12s; } [data-rv="draw"] .proc-list li:nth-child(3) { --ld: .24s; } [data-rv="draw"].in .proc-title, [data-rv="draw"].in .proc-num, [data-rv="draw"].in .proc-list li { opacity: 1; transform: none; } [data-rv="draw"].in .proc-rule { transform: scaleX(1); } /* ----------------------------------------------------- bubble pop-in ----- */ .rv-armed .bubble-field:not(.in) .bub-in { opacity: 0; } .bubble-field.in .bub-in { /* fill "backwards" only: a forwards fill would pin transform at scale(1) forever and break the pointer-proximity zoom that lives on this element */ animation: bub-pop .65s cubic-bezier(.34, 1.4, .45, 1) backwards; animation-delay: calc(var(--d, 0) * 95ms); } @keyframes bub-pop { 0% { opacity: 0; transform: scale(.25); } 70% { opacity: 1; transform: scale(1.07); } 100% { opacity: 1; transform: scale(1); } } /* --------------------------------------------------------- FAQ columns ---- */ .rv-armed [data-rv="cols"] .faq-col:first-child .faq-item { opacity: 0; transform: translateX(-38px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } .rv-armed [data-rv="cols"] .faq-col:last-child .faq-item { opacity: 0; transform: translateX(38px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } /* must out-rank the hidden rules above (they carry :first/:last-child) */ .rv-armed [data-rv="cols"].in .faq-col:first-child .faq-item, .rv-armed [data-rv="cols"].in .faq-col:last-child .faq-item { opacity: 1; transform: none; } [data-rv="cols"].in .faq-item:nth-child(1) { transition-delay: .05s; } [data-rv="cols"].in .faq-item:nth-child(2) { transition-delay: .17s; } [data-rv="cols"].in .faq-item:nth-child(3) { transition-delay: .29s; } /* ============================================================ atmosphere === Decorative layers. Sections get position:relative + clipped decor behind a z-raised .section-inner. All decor is aria-hidden and pointer-events:none. */ #overview, #our-process, #faqs { position: relative; overflow: hidden; } #overview .section-inner, #our-process .section-inner, #faqs .section-inner { position: relative; z-index: 1; } .decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .decor .blob { position: absolute; display: block; border-radius: 50%; filter: blur(70px); will-change: transform; animation: blob-drift 34s ease-in-out infinite alternate; } .decor .blob.b2 { animation-duration: 44s; animation-delay: -12s; } @keyframes blob-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -40px) scale(1.18); } } .decor .ring { position: absolute; display: block; border-radius: 50%; border: 1.5px dashed rgba(58, 90, 156, .18); animation: ring-turn 80s linear infinite; } @keyframes ring-turn { to { transform: rotate(360deg); } } /* The Practice — quiet aurora + a large capital-cycle ring */ #overview .blob.b1 { width: 560px; height: 560px; left: -180px; top: -160px; background: radial-gradient(circle, rgba(58, 90, 156, .16), transparent 65%); } #overview .blob.b2 { width: 480px; height: 480px; right: -140px; bottom: -180px; background: radial-gradient(circle, rgba(33, 153, 232, .14), transparent 65%); } #overview .ring { width: 440px; height: 440px; right: 6%; top: -120px; } /* Our Process — fine diagonal pinstripes + wash (method = structure) */ #our-process .decor::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(58, 90, 156, .05) 0 1px, transparent 1px 16px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); } #our-process .blob.b1 { width: 640px; height: 640px; left: -220px; top: 60px; background: radial-gradient(circle, rgba(58, 90, 156, .12), transparent 65%); } #our-process .blob.b2 { width: 460px; height: 460px; right: -150px; bottom: -120px; background: radial-gradient(circle, rgba(80, 175, 163, .12), transparent 65%); } #our-process .ring { width: 380px; height: 380px; left: 4%; bottom: -140px; border-color: rgba(58, 90, 156, .14); } /* FAQs — soft settle from the tinted band above + teal counterpoint */ #faqs .blob.b1 { width: 520px; height: 520px; right: -160px; top: -140px; background: radial-gradient(circle, rgba(33, 153, 232, .12), transparent 65%); } #faqs .blob.b2 { width: 440px; height: 440px; left: -150px; bottom: -160px; background: radial-gradient(circle, rgba(80, 175, 163, .10), transparent 65%); } #faqs .ring { width: 300px; height: 300px; left: 10%; top: -90px; border-color: rgba(58, 90, 156, .12); } /* Lenders & Servicers — livelier wash behind the drifting bubbles */ .bubble-field::before { background: radial-gradient(46% 60% at 20% 30%, rgba(58, 90, 156, .13), transparent 68%), radial-gradient(40% 58% at 78% 62%, rgba(33, 153, 232, .12), transparent 68%), radial-gradient(34% 50% at 52% 86%, rgba(80, 175, 163, .10), transparent 70%); background-size: 130% 130%; animation: wash-drift 28s ease-in-out infinite alternate; } @keyframes wash-drift { from { background-position: 0% 0%, 100% 100%, 50% 100%; } to { background-position: 60% 40%, 40% 60%, 60% 40%; } } /* Loan Modification band — depth instead of a flat fill (color stays as base) */ .legacy-restr .loan-modification { background-image: radial-gradient(55% 85% at 10% 8%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(48% 75% at 90% 92%, rgba(33, 153, 232, .16), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(58, 90, 156, .06)); } /* ------------------------------------------------------ reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .rv-armed [data-rv] *, .rv-armed [data-rv], .rv-armed .page-hero .page-eyebrow, .rv-armed .page-hero .page-title, .rv-armed .page-hero .page-hero-lede, .rv-armed .ov-lotus, .ov-lotus.in, .rv-armed .ttl-in, .rv-armed .bubble-field .bub-in { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; animation: none !important; } .page-hero-bg, .page-hero.in .page-hero-bg { transform: none; animation: none; transition: none; } .decor .blob, .decor .ring, .bubble-field::before, .proc-grid .proc-point::before { animation: none; } } /* ============================== fix pass 2 ============================== */ /* Why We're Different: its glowing title cannot live inside an overflow clip — the glow shears into a hard rectangle. Fade-rise instead, no mask. */ #why-were-different [data-rv="title"] .section-h2 { overflow: visible; } .rv-armed #why-were-different [data-rv="title"] .section-h2 .ttl-in { transform: translateY(26px); opacity: 0; transition: transform .85s cubic-bezier(.22,.61,.36,1) .12s, opacity .85s ease .12s; } #why-were-different [data-rv="title"].in .section-h2 .ttl-in { transform: none; opacity: 1; } /* breathing room above "Our negotiated outcomes" */ .legacy-restr .negotiated-title { padding-top: 72px; } /* Our Process points -> light-blue cards with a slow edge shimmer */ @property --shim { syntax: ""; initial-value: 0deg; inherits: false; } [data-rv="draw"] .proc-point, .proc-grid .proc-point { position: relative; background: linear-gradient(180deg, #eaf1fb, #e2ebf8); padding: 30px 32px 26px; box-shadow: 0 14px 34px rgba(10, 22, 38, .07); } .proc-grid .proc-point::before { content: ""; position: absolute; inset: 0; padding: 1.5px; /* ring thickness */ background: conic-gradient(from var(--shim), rgba(58, 90, 156, .10) 0deg, rgba(33, 153, 232, .85) 40deg, rgba(58, 90, 156, .10) 90deg, rgba(58, 90, 156, .10) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: proc-shimmer 7s linear infinite; pointer-events: none; } .proc-grid .proc-point:nth-child(2)::before { animation-delay: -1.75s; } .proc-grid .proc-point:nth-child(3)::before { animation-delay: -3.5s; } .proc-grid .proc-point:nth-child(4)::before { animation-delay: -5.25s; } @keyframes proc-shimmer { to { --shim: 360deg; } } /* the number chip sat on the section tint before; on a card it needs no change, but the head spacing tightens slightly inside the padding */ .proc-grid .proc-head { padding-top: 26px; } /* Lenders & Servicers: one continuous background for title, chips and bubbles — the field-level wash (which cut off hard at its top/bottom edges) is gone. */ #our-lenders-and-servicers { position: relative; overflow: hidden; /* starts on the process tint and exits on FAQ white, so even the joins are seamless */ background: linear-gradient(180deg, #f4f5f7 0%, #eef4fc 22%, #e9f1fb 58%, #ffffff 100%); } #our-lenders-and-servicers .section-inner { position: relative; z-index: 1; } #our-lenders-and-servicers .blob.b1 { width: 720px; height: 720px; left: -240px; top: -140px; background: radial-gradient(circle, rgba(58, 90, 156, .13), transparent 65%); } #our-lenders-and-servicers .blob.b2 { width: 620px; height: 620px; right: -200px; bottom: -160px; background: radial-gradient(circle, rgba(80, 175, 163, .12), transparent 65%); } #our-lenders-and-servicers .ring { width: 480px; height: 480px; right: 10%; top: -160px; border-color: rgba(58, 90, 156, .13); } .bubble-field::before { content: none; } /* ============================== fix pass 3 ============================== */ /* Expertise tiles — their original code slides the whole row in as one block; retire that and cascade the tiles individually instead (skew preserved: transitioning transform must restate the tile's skew or it would flatten). */ .legacy-restr .expertise-container.slide-right, .legacy-restr .expertise-container.slide-right.slide { transform: none; transition: none; } .rv-armed [data-rv="tiles"] .expertise-point { opacity: 0; transform: translateX(90px) skew(-15deg); transition: opacity .6s ease calc(var(--ti, 0) * 95ms), transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--ti, 0) * 95ms); } [data-rv="tiles"].in .expertise-point { opacity: 1; transform: skew(-15deg); } [data-rv="tiles"] .expertise-point:nth-child(2) { --ti: 1; } [data-rv="tiles"] .expertise-point:nth-child(3) { --ti: 2; } [data-rv="tiles"] .expertise-point:nth-child(4) { --ti: 3; } [data-rv="tiles"] .expertise-point:nth-child(5) { --ti: 4; } [data-rv="tiles"] .expertise-point:nth-child(6) { --ti: 5; } /* Overview lotus — slides in from the right of "The Practice" section. Generated on pure white; multiply-blending sinks the white into the light section background so the petals read as if printed on the page. */ /* keep the copy clear of the flower */ #overview .section-head, #overview .prose { max-width: 780px; } .ov-lotus { position: absolute; right: 2vw; bottom: 0; height: 84%; width: auto; mix-blend-mode: multiply; pointer-events: none; z-index: 0; } .rv-armed .ov-lotus { opacity: 0; transform: translateX(54px) rotate(2deg); /* fade-led entrance: the opacity carries the reveal, the drift just supports it */ transition: opacity 1.8s ease .15s, transform 1.9s cubic-bezier(.22,.61,.36,1) .15s; } .ov-lotus.in { opacity: .94; transform: none; } .ov-lotus.in { animation: lotus-float 13s ease-in-out 2.2s infinite; } @keyframes lotus-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1deg); } } @media (max-width: 1180px) { .ov-lotus { height: 64%; opacity: 0; } .ov-lotus.in { opacity: .55; } } @media (max-width: 860px) { .ov-lotus { display: none; } } /* ============================== fix pass 4 ============================== */ /* Hero overlay was drowning the boardroom image (bg at .62 opacity under a .34/.55/.8 scrim). ~70% lighter, scoped to this page only — pages.css rule is shared by every page hero. */ .page-hero.has-image .page-hero-bg { opacity: .94; } .page-hero.has-image::after { background: linear-gradient(180deg, rgba(8, 15, 27, .10) 0%, rgba(8, 15, 27, .16) 55%, rgba(8, 15, 27, .26) 100%), rgba(0, 0, 0, .10); /* +10% flat black for hero text readability */ }