/* * Motion layer: scroll reveals, hover lifts and gentle ambient loops. * Uses the individual `translate` / `scale` / `rotate` properties so Framer's inline * `transform` values (e.g. the rotated stickers) are never overwritten, and every * element returns to its exact original position once revealed. * `.ds-motion` is added in only when JS runs and motion is not reduced. */ :root { --ds-ease: cubic-bezier(0.2, 0.65, 0.2, 1); --ds-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---------- Scroll reveal ---------- */ .ds-motion :is( [data-framer-name="Opening copy"], [data-framer-name="Opening visual collage"], [data-framer-name="Services heading row"], [data-framer-name="Service cards"], [data-framer-name="Campaign top"], [data-framer-name="Campaign collage grid"], [data-framer-name="Process steps"], [data-framer-name="Results row"], [data-framer-name="Contact call to action"] ) > :not(.ssr-variant, [data-framer-name="Floating graphic circle"]), .ds-motion :is( [data-framer-name="Opening copy"], [data-framer-name="Services heading row"], [data-framer-name="Service cards"], [data-framer-name="Campaign top"], [data-framer-name="Campaign collage grid"], [data-framer-name="Process inner"], [data-framer-name="Contact call to action"] ) > .ssr-variant > *, .ds-motion .ds-reveal { opacity: 0; translate: 0 28px; } .ds-motion [data-framer-name="Floating graphic circle"] { opacity: 0; scale: 0.3; } .ds-motion .ds-in.ds-in.ds-in { opacity: 1; translate: none; scale: none; transition: opacity 0.8s var(--ds-ease) calc(min(var(--ds-i, 0), 6) * 90ms), translate 0.9s var(--ds-ease) calc(min(var(--ds-i, 0), 6) * 90ms), scale 0.9s var(--ds-spring) calc(min(var(--ds-i, 0), 6) * 90ms); } /* After the reveal, drop the stagger delay so hover responds instantly. */ .ds-motion .ds-in.ds-done.ds-done { transition: scale 0.45s var(--ds-ease), translate 0.45s var(--ds-ease), box-shadow 0.45s var(--ds-ease), background-color 0.3s ease, color 0.3s ease; } @media (prefers-reduced-motion: no-preference) { /* ---------- Ambient loops ---------- */ [data-framer-name="Floating graphic circle"] > * { animation: ds-bob 4.8s ease-in-out infinite; } [data-framer-name="Campaign sticker"] { animation: ds-wobble 6s ease-in-out infinite; } [data-framer-name="Gold note"] > :last-child, .ds-pill__spark, .ds-empty__spark { animation: ds-twinkle 5s ease-in-out infinite; } .ds-sticker, .ds-float-badge { animation: ds-bob 4.8s ease-in-out infinite; } @keyframes ds-bob { 50% { translate: 0 -10px; } } @keyframes ds-wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: -10deg; } } @keyframes ds-twinkle { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 0.82; rotate: 45deg; } } } /* ---------- Hover (pointer devices only) ---------- */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { /* Buttons */ a.framer-wysEi { transition: translate 0.3s var(--ds-ease), box-shadow 0.3s var(--ds-ease); } a.framer-wysEi:hover { translate: 0 -2px; box-shadow: 0 12px 24px -14px rgba(36, 40, 32, 0.55); } a.framer-wysEi svg { transition: translate 0.3s var(--ds-ease); } a.framer-wysEi.framer-v-16quawx:hover svg { translate: 2px -2px; } a.framer-wysEi.framer-v-3yjwta:hover svg { translate: 0 2px; } /* Nav links: ink colour + growing underline */ [data-framer-name="Links"] { --framer-link-hover-text-color: #242820; } [data-framer-name="Links"] a.framer-text { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.3s var(--ds-ease), color 0.2s ease; } [data-framer-name="Links"] a.framer-text:hover { background-size: 100% 1.5px; } [data-framer-name="Logo mark"], [data-framer-name="Footer logo"] { transition: rotate 0.5s var(--ds-spring); } [data-framer-name="Brand"]:hover [data-framer-name="Logo mark"], [data-framer-name="Footer brand"]:hover [data-framer-name="Footer logo"] { rotate: -10deg; } /* Service cards */ [data-framer-name="Service cards"] [data-framer-name="Default"] { transition: translate 0.45s var(--ds-ease), box-shadow 0.45s var(--ds-ease); } [data-framer-name="Service cards"] [data-framer-name="Default"]:hover { translate: 0 -8px; box-shadow: 0 26px 50px -30px rgba(36, 40, 32, 0.45); } [data-framer-name="Icon chip"] { transition: rotate 0.5s var(--ds-spring), scale 0.5s var(--ds-spring); } [data-framer-name="Default"]:hover [data-framer-name="Icon chip"] { rotate: -14deg; scale: 1.08; } /* Tiles and stats (these are reveal targets, so they lift with `scale`) */ [data-framer-name="Proof item"], [data-framer-name="Research wall"], [data-framer-name="Text burst"], [data-framer-name="Gold graphic"], [data-framer-name="Dark note"], [data-framer-name="Blue wall image"], [data-framer-name^="Step 0"], [data-framer-name="Result stat"] { transition: scale 0.45s var(--ds-ease), box-shadow 0.45s var(--ds-ease); } [data-framer-name="Proof item"]:hover, [data-framer-name^="Step 0"]:hover, [data-framer-name="Result stat"]:hover { scale: 1.03; box-shadow: 0 20px 40px -26px rgba(36, 40, 32, 0.5); } :is( [data-framer-name="Research wall"], [data-framer-name="Text burst"], [data-framer-name="Gold graphic"], [data-framer-name="Dark note"], [data-framer-name="Blue wall image"] ):hover { scale: 1.02; } [data-framer-name="Campaign sticker"]:hover { scale: 1.1; } /* Image zoom inside rounded tiles */ :is( [data-framer-name="Campaign board image"], [data-framer-name="Research wall"], [data-framer-name="Blue wall image"] ) [data-framer-background-image-wrapper] { overflow: hidden; } :is( [data-framer-name="Campaign board image"], [data-framer-name="Research wall"], [data-framer-name="Blue wall image"] ) img { transition: scale 0.8s var(--ds-ease); } :is( [data-framer-name="Campaign board image"], [data-framer-name="Research wall"], [data-framer-name="Blue wall image"] ):hover img { scale: 1.06; } }