/* ========================================================================= SINERG - motion layer Depth, not decoration. Every effect here is transform/opacity only so it stays on the compositor, and every one of them is switched off wholesale for `prefers-reduced-motion`. Pointer-driven effects additionally require a real pointer, so a touch device never pays for hover work it cannot use. Nothing in this file is required for the page to be usable: motion.js adds `s-motion` to only after it has decided the visitor wants it, and every rule below is scoped to that class. ========================================================================= */ :root { --m-ease: cubic-bezier(.22, .61, .36, 1); --m-ease-out: cubic-bezier(.16, 1, .3, 1); --m-spring: cubic-bezier(.34, 1.56, .64, 1); --m-depth: 1100px; } /* ------------------------------------------------------------------------- 1. Scroll progress A hairline of gold across the top, driven by a single custom property. ------------------------------------------------------------------------- */ .s-motion .s-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 100000; pointer-events: none; background: linear-gradient(90deg, var(--gold, #d4ad78), var(--gold2, #efd5ae)); transform: scaleX(var(--s-progress, 0)); transform-origin: right center; /* RTL: the bar grows leftward */ will-change: transform; } /* ------------------------------------------------------------------------- 2. Entrance Elements arrive from below with a slight rotation on X, so the page reads as a stack of planes rather than a list of fades. ------------------------------------------------------------------------- */ /* The entrance is expressed as custom properties rather than as a `transform` of its own, because a card that also tilts needs both in a single transform. A rule that set `transform:none` at the end of the entrance would otherwise outrank the tilt and freeze the card the moment it finished arriving. */ .s-motion [data-m-in] { --m-y: 34px; --m-z: -60px; --m-rx: 7deg; --m-ry: 0deg; --m-x: 0px; --m-s: 1; opacity: 0; transform: translate3d(var(--m-x), var(--m-y), var(--m-z)) rotateX(var(--m-rx)) rotateY(var(--m-ry)) scale(var(--m-s)); transform-origin: 50% 100%; transition: opacity .72s var(--m-ease-out) var(--m-delay, 0ms), transform .82s var(--m-ease-out) var(--m-delay, 0ms); /* No `will-change` here on purpose. Transitions on transform and opacity are composited anyway, and promoting forty elements up front costs memory and delays first paint enough to drag the font swap into the CLS window. */ } /* A heading leans in from the start edge instead of from below. */ .s-motion [data-m-in="side"] { --m-x: 46px; --m-y: 0px; --m-z: -40px; --m-rx: 0deg; --m-ry: -9deg; } /* Media settles forward out of the page. */ .s-motion [data-m-in="media"] { --m-y: 26px; --m-z: -140px; --m-rx: 0deg; --m-s: .94; } .s-motion [data-m-in].is-in { --m-x: 0px; --m-y: 0px; --m-z: 0px; --m-rx: 0deg; --m-ry: 0deg; --m-s: 1; opacity: 1; } /* ------------------------------------------------------------------------- 3. Pointer tilt The card itself rotates; its contents ride at different depths so the parallax between them reads as real thickness. ------------------------------------------------------------------------- */ .s-motion .s-tilt-scene { perspective: var(--m-depth); perspective-origin: 50% 40%; } /* Doubled class so this outranks `[data-m-in].is-in`, and the entrance properties are carried through so a card can arrive and tilt at once. */ .s-motion .s-tilt.s-tilt { transform-style: preserve-3d; transform: translate3d(var(--m-x, 0px), var(--m-y, 0px), var(--m-z, 0px)) rotateX(var(--m-rx, 0deg)) rotateY(var(--m-ry, 0deg)) scale(var(--m-s, 1)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translate3d(0, var(--lift, 0px), var(--tz, 0px)); transition: transform .5s var(--m-ease-out), box-shadow .5s var(--m-ease-out), border-color .4s ease; position: relative; } .s-motion .s-tilt.s-tilt.is-live { transition: transform .09s linear, box-shadow .4s var(--m-ease-out), border-color .4s ease; will-change: transform; } .s-motion .s-tilt.is-live, .s-motion .s-tilt:focus-within { box-shadow: 0 26px 60px -26px rgba(28, 24, 18, .5), 0 4px 14px -6px rgba(28, 24, 18, .18); border-color: #e0cba6; } /* The lit edge that follows the pointer. Purely decorative, never hit-tested. */ .s-motion .s-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient( 440px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 32%, transparent 62%); mix-blend-mode: soft-light; } .s-motion .s-tilt.is-live::after { opacity: 1; } /* Contents lift off the card face. */ .s-motion .s-tilt > * { transform: translateZ(0); transition: transform .5s var(--m-ease-out); } .s-motion .s-tilt.is-live .s-card-img, .s-motion .s-tilt.is-live .sr-prod-img, .s-motion .s-tilt.is-live .sr-tile-icon { transform: translateZ(52px) scale(1.045); } .s-motion .s-tilt.is-live .sr-card-head, .s-motion .s-tilt.is-live h3 { transform: translateZ(30px); } .s-motion .s-tilt.is-live p, .s-motion .s-tilt.is-live .sr-prod-body { transform: translateZ(16px); } /* Dark bands get a cooler sheen so the gradient does not grey them out. */ .s-motion .sr-hero .s-tilt::after, .s-motion .sr-cta .s-tilt::after, .s-motion .sr-feature .s-tilt::after { background: radial-gradient( 420px circle at var(--mx, 50%) var(--my, 50%), rgba(224, 188, 136, .34), transparent 60%); mix-blend-mode: screen; } /* ------------------------------------------------------------------------- 4. Magnetic buttons ------------------------------------------------------------------------- */ .s-motion .s-magnet { transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0); transition: transform .45s var(--m-spring), background-color .3s ease, color .3s ease, border-color .3s ease; } .s-motion .s-magnet.is-live { transition: transform .12s var(--m-ease); will-change: transform; } /* The gold wash sweeps out from where the pointer entered. `overflow:hidden` would be the obvious way to clip it, but on an inline-flex button that changes the baseline to the bottom margin edge, which resizes the line box and shifts the whole page below it. clip-path does the same job without touching layout. */ .s-motion .s-magnet { position: relative; isolation: isolate; clip-path: inset(0 round 6px); } .s-motion .s-magnet::before { /* Physical `left`/`top` on purpose: the coordinates come from the pointer against the element box, so they must not be flipped by RTL. The property names are distinct from the tilt sheen's, which is a percentage and would otherwise leak into a button sitting inside a tilting card. */ content: ""; position: absolute; z-index: -1; left: var(--gmx, 50%); top: var(--gmy, 50%); width: 0; height: 0; border-radius: 50%; background: rgba(212, 173, 120, .5); transform: translate(50%, -50%); transition: width .5s var(--m-ease-out), height .5s var(--m-ease-out), opacity .4s ease; opacity: 0; } .s-motion .s-magnet:hover::before { width: 260%; height: 620%; opacity: 1; } /* ------------------------------------------------------------------------- 5. Hero The device floats, and the light rays drift on scroll. Both are driven by properties motion.js writes, so there is one source of truth for position. ------------------------------------------------------------------------- */ .s-motion .sr-hero { perspective: 1400px; } .s-motion .sr-device-stage img, .s-motion .sr-hero--page .sr-device-stage img { transform: translate3d(var(--hx, 0px), calc(var(--hy, 0px) + var(--float, 0px)), 0) rotateY(var(--hry, 0deg)) rotateX(var(--hrx, 0deg)); transition: transform .6s var(--m-ease-out); animation: s-float 7s ease-in-out infinite; } .s-motion .sr-device-stage.is-live img { transition: transform .12s linear; } @keyframes s-float { 0%, 100% { --float: 0px; } 50% { --float: -14px; } } @property --float { syntax: ""; inherits: true; initial-value: 0px; } .s-motion .sr-hero::before, .s-motion .sr-hero::after { transition: transform .8s var(--m-ease-out), opacity .8s ease; } .s-motion .sr-hero.is-lit::before { transform: skewY(-5deg) translate3d(0, var(--ray, 0px), 0); } .s-motion .sr-hero.is-lit::after { transform: skewY(6deg) translate3d(0, calc(var(--ray, 0px) * -.6), 0); } /* The hero copy arrives line by line. */ .s-motion .sr-hero-copy > * { animation: s-rise .9s var(--m-ease-out) both; } .s-motion .sr-hero-copy > :nth-child(1) { animation-delay: .05s; } .s-motion .sr-hero-copy > :nth-child(2) { animation-delay: .16s; } .s-motion .sr-hero-copy > :nth-child(3) { animation-delay: .27s; } .s-motion .sr-hero-copy > :nth-child(4) { animation-delay: .38s; } @keyframes s-rise { from { opacity: 0; transform: translate3d(0, 26px, -50px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------------- 6. Spotlight on the dark bands ------------------------------------------------------------------------- */ .s-motion .s-spot { position: relative; isolation: isolate; } .s-motion .s-spot::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( 620px circle at var(--mx, 50%) var(--my, 50%), rgba(224, 188, 136, .14), transparent 55%); opacity: 0; transition: opacity .5s ease; } .s-motion .s-spot.is-live::before { opacity: 1; } .s-motion .s-spot > * { position: relative; z-index: 1; } /* ------------------------------------------------------------------------- 7. Counters and small flourishes ------------------------------------------------------------------------- */ .s-motion .s-count { font-variant-numeric: tabular-nums; } /* Section rules draw themselves in when the heading arrives. */ .s-motion .sr-section-title::after { transform: scaleX(0); transform-origin: center; transition: transform .7s var(--m-ease-out) .15s; } .s-motion .sr-section-title.is-in::after, .s-motion .is-in .sr-section-title::after { transform: scaleX(1); } /* Links pull their arrow along on hover. */ .s-motion a:hover > .sr-chev { transform: translateX(-4px); } .s-motion .sr-chev { transition: transform .3s var(--m-spring); } /* Images inside a settling card breathe slightly. */ .s-motion .sr-prod:hover .sr-prod-img img, .s-motion .sr-shot:hover img { transform: scale(1.05); } .s-motion .sr-prod-img img, .s-motion .sr-shot img { transition: transform .6s var(--m-ease-out); } /* The FAQ panel opens with height rather than snapping. */ .s-motion .sr-faq details[open] .sr-faq-body { animation: s-open .45s var(--m-ease-out) both; } @keyframes s-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------------- 8. Opt out Belt and braces: motion.js will not add `s-motion` when reduced motion is requested, and the query below neutralises anything that slipped through. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .s-motion [data-m-in], .s-motion [data-m-in].is-in { opacity: 1 !important; transform: none !important; transition: none !important; } .s-motion .s-tilt, .s-motion .s-tilt.s-tilt, .s-motion .s-tilt > *, .s-motion .s-magnet, .s-motion .sr-device-stage img, .s-motion .sr-hero-copy > * { transform: none !important; animation: none !important; transition: none !important; } .s-motion .s-tilt::after, .s-motion .s-spot::before, .s-motion .s-magnet::before { display: none !important; } .s-motion .s-progress { display: none !important; } .s-motion .sr-section-title::after { transform: scaleX(1) !important; } } /* Tilt and magnetism need a pointer that can hover. */ @media (hover: none), (pointer: coarse) { /* No tilt without a pointer, but the entrance still runs. */ .s-motion .s-tilt.s-tilt { --tx:0deg; --ty:0deg; --lift:0px; --tz:0px; } .s-motion .s-tilt::after, .s-motion .s-magnet::before { display: none; } .s-motion .s-magnet { transform: none !important; } }