/* ═══ SCROLL REVEAL ═══ Everything is visible by default. The hiding rules only apply once JS adds .rv to , so a failed script or a bot crawl still sees the whole page. */ @media (prefers-reduced-motion:no-preference){ .rv [data-rv]{opacity:0;transform:translateY(42px); transition:opacity 1.15s cubic-bezier(.16,.84,.32,1), transform 1.15s cubic-bezier(.16,.84,.32,1); transition-delay:var(--d,0ms)} .rv [data-rv].in{opacity:1;transform:none} /* editorial images wipe up from their own frame instead of fading */ .rv .cell .ph img, .rv .person .shot img{clip-path:inset(0 0 100% 0);transform:scale(1.08); transition:clip-path 1.5s cubic-bezier(.16,.84,.32,1), transform 1.9s cubic-bezier(.16,.84,.32,1); transition-delay:var(--d,0ms)} .rv .cell.in .ph img, .rv .person.in .shot img{clip-path:inset(0 0 0 0);transform:scale(1)} /* the two navy bands drift their photography as you pass them */ .bandimg i{will-change:transform} .rv .bandimg i{transform:scale(1.10) translateY(var(--par,0px)); transition:transform .45s linear} /* signage plate holds a slow push-in */ .rv .signband i{transform:scale(1.09); transition:transform 2.4s cubic-bezier(.16,.84,.32,1)} .rv .signband.in i{transform:scale(1)} /* anything that is one sequence arrives as one sequence */ .rv .ledger .row, .rv #pitch .pwhat > div, .rv .steps .step, .rv .tiles .t, .rv .quotes .q, .rv .pt{opacity:0;transform:translateY(34px); transition:opacity 1s cubic-bezier(.16,.84,.32,1), transform 1s cubic-bezier(.16,.84,.32,1); transition-delay:var(--d,0ms)} .rv .ledger .row.in, .rv #pitch .pwhat > div.in, .rv .steps .step.in, .rv .tiles .t.in, .rv .quotes .q.in, .rv .pt.in{opacity:1;transform:none} /* the mark settles rather than slides */ .rv .markbl{opacity:0;transform:scale(.94); transition:opacity 1.4s cubic-bezier(.16,.84,.32,1), transform 1.4s cubic-bezier(.16,.84,.32,1)} .rv .markbl.in{opacity:1;transform:none} /* hero comes up on load, line by line */ .rv .hero .eyebrow,.rv .hero .hl .a,.rv .hero .hl .b, .rv .hero .wordwrap,.rv .hero footer{opacity:0;transform:translateY(24px); animation:rise 1.25s cubic-bezier(.16,.84,.32,1) forwards} .rv .hero .eyebrow{animation-delay:.10s} .rv .hero .hl .a{animation-delay:.22s} .rv .hero .hl .b{animation-delay:.34s} .rv .hero .wordwrap{animation-delay:.46s} .rv .hero footer{animation-delay:.92s} @keyframes rise{to{opacity:1;transform:none}} /* the demo layer arrives last so it does not compete with the hero */ .rv .sandbox,.rv .pkdock{opacity:0;animation:fadein .9s ease forwards} .rv .sandbox{animation-delay:.05s} .rv .pkdock{animation-delay:1.5s} @keyframes fadein{to{opacity:1}} /* buttons and slots earn a hover now that the page moves */ .btn,.cell .go span,.bkslots span,.pklaunch{ transition:transform .5s cubic-bezier(.16,.84,.32,1), background-color .4s ease, border-color .4s ease, color .4s ease} .btn:hover{transform:translateY(-2px)} .cell:hover .go span{transform:translateX(6px)} .bkslots span:hover{border-color:var(--navy)} .pklaunch:hover{transform:translateY(-2px)} .cell .ph img{transition:transform 1.2s cubic-bezier(.16,.84,.32,1)} .cell:hover .ph img{transform:scale(1.035)} }