/* Duon — motion layer. Everything below is a starting state. If JS never runs, or the visitor asks for reduced motion, .no-motion is set on and none of this applies. */ /* reveals are CSS transitions driven by a class, not tweens — a tween that never runs leaves text invisible, and that failure is silent */ html.motion .rv { opacity: 0; transform: translateY(14px); transition: opacity .95s cubic-bezier(.16,.84,.28,1), transform .95s cubic-bezier(.16,.84,.28,1) } html.motion .rv.in { opacity: 1; transform: none } html.motion .rv-mask { display: block; overflow: hidden } html.motion .rv-mask > .rv-inner { display: block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.16,.84,.28,1) } html.motion .rv-mask.in > .rv-inner { transform: none } /* full-bleed frames get a slow settle rather than a hard cut */ html.motion .shot .fill { transform: scale(1.06) } /* the entry diagram draws itself */ html.motion .track::after { transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.16,.84,.28,1) } html.motion .track.drawn::after { transform: scaleX(1) } html.motion .track .dot { transform: scale(0) } html.motion .stopmark { opacity: 0 } /* hairline rules sweep in under each service row */ html.motion .svc ol li { --rule: 0 } html.motion .svc ol li::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--acc); transform: scaleX(var(--rule)); transform-origin: left center; } .svc ol li { position: relative } /* notes: the thumbnail breathes on hover, the headline underlines from the left */ .row .thumb { transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease } .row:hover .thumb { transform: scale(1.03); filter: saturate(1.06) } .row h2 a { background-image: linear-gradient(var(--acc), var(--acc)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size .5s cubic-bezier(.2,.7,.2,1) } .row h2 a:hover { background-size: 100% 1px; border-color: transparent } /* links and buttons: slower, more deliberate than a default hover */ .nav a, .leglink, .srclist a, .mast .jump a { transition: opacity .45s ease, color .45s ease } .enq button { transition: background .45s cubic-bezier(.2,.7,.2,1), color .45s ease, letter-spacing .45s ease } .enq button:hover { letter-spacing: .26em } .ck button { transition: background .4s ease, color .4s ease, border-color .4s ease } /* the gold rule under a section heading draws when it arrives */ html.motion .hair { transform: scaleX(0); transform-origin: left center } @media (prefers-reduced-motion: reduce) { html.motion .rv, html.motion .rv-mask > .rv-inner, html.motion .shot .fill, html.motion .track::after, html.motion .track .dot, html.motion .stopmark, html.motion .hair { opacity: 1 !important; transform: none !important } }