/*
 * 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 <head> 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 18px;
}

.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.5s var(--ds-ease) calc(min(var(--ds-i, 0), 5) * 55ms),
		translate 0.6s var(--ds-ease) calc(min(var(--ds-i, 0), 5) * 55ms),
		scale 0.6s var(--ds-spring) calc(min(var(--ds-i, 0), 5) * 55ms);
}

/* After the reveal, drop the stagger delay so hover responds instantly. */
.ds-motion .ds-in.ds-done.ds-done {
	transition:
		scale 0.4s var(--ds-ease),
		translate 0.4s var(--ds-ease),
		rotate 0.4s var(--ds-spring),
		box-shadow 0.4s var(--ds-ease),
		border-color 0.3s ease,
		background-color 0.3s ease,
		filter 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), scale 0.3s var(--ds-spring), box-shadow 0.3s var(--ds-ease);
	}
	a.framer-wysEi:hover {
		translate: 0 -3px;
		scale: 1.025;
		box-shadow: 0 16px 28px -14px rgba(36, 40, 32, 0.6);
	}
	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(#b9903d, #b9903d) 0 100% / 0 2px no-repeat;
		padding-bottom: 3px;
		transition: background-size 0.3s var(--ds-ease), color 0.2s ease;
	}
	[data-framer-name="Links"] a.framer-text:hover {
		background-size: 100% 2px;
	}

	/* Brand lock-up: a small lift, never a rotation — it is a wordmark now. */
	.dsu-brand,
	.dsu-footer__mark {
		transition: translate 0.4s var(--ds-spring), filter 0.4s var(--ds-ease);
	}
	.dsu-brand:hover,
	.dsu-footer__brand:hover .dsu-footer__mark {
		translate: 0 -3px;
		filter: drop-shadow(0 10px 14px rgba(36, 40, 32, 0.22));
	}

	/* Service cards — the primary button's lift, scale and shadow. */
	[data-framer-name="Service cards"] [data-framer-name="Default"] {
		transition: translate 0.3s var(--ds-ease), scale 0.3s var(--ds-spring), box-shadow 0.3s var(--ds-ease);
	}
	[data-framer-name="Service cards"] [data-framer-name="Default"]:hover {
		translate: 0 -3px;
		scale: 1.025;
		box-shadow: 0 16px 28px -14px rgba(36, 40, 32, 0.6);
	}
	[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;
	}
}

/* ---------- The sections added in the September 2026 round ---------- */

@media (prefers-reduced-motion: no-preference) {

	/* The hero lock-up breathes, so the panel is never completely still. */
	.dsu-hero__mark {
		animation: ds-breathe 7s ease-in-out infinite;
	}

	@keyframes ds-breathe {
		50% {
			translate: 0 -6px;
			scale: 1.012;
		}
	}

	/* The line that just arrived draws the eye without moving the layout. */
	.dsu-slides__line.is-current .dsu-slides__heading {
		animation: ds-rise 0.7s var(--ds-ease) both;
	}

	.dsu-slides__line.is-current .dsu-slides__text {
		animation: ds-rise 0.7s var(--ds-ease) 0.08s both;
	}

	@keyframes ds-rise {
		from {
			opacity: 0;
			translate: 0 10px;
		}
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	/* A light sweep across the filled buttons on the way in. */
	a.framer-wysEi,
	.dsu-popup__submit {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	a.framer-wysEi::after,
	.dsu-popup__submit::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 -60%;
		z-index: -1;
		width: 45%;
		background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
		translate: -100% 0;
		transition: translate 0s;
	}

	a.framer-wysEi:hover::after,
	.dsu-popup__submit:hover::after {
		translate: 420% 0;
		transition: translate 0.75s var(--ds-ease);
	}

	/* Testimonials: the primary button's lift, scale and shadow, plus the warm
	   border the cards already had. */
	.dsu-quotes__card {
		transition:
			translate 0.3s var(--ds-ease),
			scale 0.3s var(--ds-spring),
			box-shadow 0.3s var(--ds-ease),
			border-color 0.3s ease;
	}

	.dsu-quotes__card:hover {
		translate: 0 -3px;
		scale: 1.025;
		border-color: rgba(185, 144, 61, 0.55);
		box-shadow: 0 16px 28px -14px rgba(36, 40, 32, 0.6);
	}

	/* …and the buttons' light sweep. The cards are cream rather than gold, so the
	   sheen is tinted gold to stay visible. Framer draws the service card's border
	   with ::after, hence ::before here. */
	[data-framer-name="Service cards"] [data-framer-name="Default"],
	.dsu-quotes__card {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	[data-framer-name="Service cards"] [data-framer-name="Default"]::before,
	.dsu-quotes__card::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 -60%;
		z-index: -1;
		width: 45%;
		background: linear-gradient(100deg, transparent, rgba(185, 144, 61, 0.26), transparent);
		translate: -100% 0;
		transition: translate 0s;
		pointer-events: none;
	}

	[data-framer-name="Service cards"] [data-framer-name="Default"]:hover::before,
	.dsu-quotes__card:hover::before {
		translate: 420% 0;
		transition: translate 0.75s var(--ds-ease);
	}

	/* Client tiles: the wordmark warms up with the card. */
	.dsu-clients__link {
		transition:
			translate 0.35s var(--ds-ease),
			border-color 0.3s ease,
			box-shadow 0.35s var(--ds-ease);
	}

	a.dsu-clients__link:hover {
		translate: 0 -5px;
		box-shadow: 0 20px 36px -24px rgba(36, 40, 32, 0.45);
	}

	a.dsu-clients__link:hover .dsu-clients__wordmark {
		color: var(--dsu-gold);
	}

	.dsu-clients__wordmark,
	.dsu-clients__logo {
		transition: color 0.3s ease, scale 0.4s var(--ds-spring);
	}

	a.dsu-clients__link:hover .dsu-clients__logo {
		scale: 1.06;
	}

	/* Brand videos: the frame lifts, the picture inside eases in a touch. */
	.dsu-video__frame {
		transition: translate 0.45s var(--ds-ease), box-shadow 0.45s var(--ds-ease);
	}

	.dsu-video__frame:hover {
		translate: 0 -5px;
		box-shadow: 0 30px 56px -28px rgba(36, 40, 32, 0.42);
	}

	.dsu-video__media {
		transition: scale 0.9s var(--ds-ease);
	}

	.dsu-video__frame:hover .dsu-video__media {
		scale: 1.03;
	}

	/* Footer icons grow into the ink colour. */
	.dsu-footer__social a {
		transition: color 0.2s ease, translate 0.35s var(--ds-spring), scale 0.35s var(--ds-spring);
	}

	.dsu-footer__social a:hover {
		translate: 0 -2px;
		scale: 1.12;
	}

	/* Contact rail: the pill opens on a spring and leans out of the edge. */
	.dsu-rail__btn {
		transition:
			max-width 0.38s var(--ds-spring),
			translate 0.3s var(--ds-ease),
			box-shadow 0.3s var(--ds-ease),
			background-color 0.2s ease,
			color 0.2s ease;
	}

	.dsu-rail__btn:hover {
		translate: -3px 0;
		box-shadow: 0 12px 26px rgba(36, 40, 32, 0.22);
	}

	/* Enquiry fields settle into focus instead of snapping. */
	.framer-form-input,
	.dsu-popup__field input,
	.dsu-popup__field textarea {
		transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.3s var(--ds-ease);
	}

	.dsu-popup__field input:focus,
	.dsu-popup__field textarea:focus {
		box-shadow: 0 8px 20px -14px rgba(36, 40, 32, 0.55);
	}
}

/* A full-bleed reel sliding into place would show a seam at the screen edges,
   so on phones it only fades. */
@media (max-width: 809.98px) {
	.ds-motion .dsu-video--portrait .dsu-video__frame {
		translate: none;
	}
}

/* ---------- Hover lifts on elements that also scroll-reveal ----------
 *
 * `.ds-motion .ds-in.ds-in.ds-in` has to out-rank the reveal's start state, so it
 * also out-ranks every plain `:hover` rule and pins `translate`/`scale` to `none` —
 * which silently killed the lift on every card, tile and step that reveals on scroll.
 * Re-stating those two properties here, qualified with `.ds-in.ds-done`, puts them
 * back: same weight, later in the file, and only once the reveal has finished so a
 * hover can never fight the entrance animation. Colour, border and shadow stay in the
 * rules above, so they still work when motion is off.
 *
 * Only the elements that actually reveal are listed. Service cards, proof items and
 * result stats are children of a reveal target rather than targets themselves, so the
 * plain rules above already reach them.
 */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.ds-motion .ds-in.ds-done[data-framer-name^="Step 0"]:hover {
		scale: 1.03;
	}

	.ds-motion .ds-in.ds-done: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;
	}

	.ds-motion .ds-in.ds-done[data-framer-name="Campaign sticker"]:hover {
		scale: 1.1;
	}

	.ds-motion .ds-in.ds-done.dsu-quotes__card:hover {
		translate: 0 -3px;
		scale: 1.025;
	}

	.ds-motion .ds-in.ds-done.dsu-video__frame:hover {
		translate: 0 -5px;
	}
}

/* The icon chip's wrapper clips to the chip's own box, which cut the scaled,
   turning chip into an octagon on hover and on the touch highlight. */
:has(> [data-framer-name="Icon chip"]) {
	overflow: visible !important;
}

/* ---------- Touch screens ----------
 *
 * Phones have no hover, so assets/js/ds-ui.js marks the card crossing the middle
 * of the screen with .dsu-live, and a tap presses it with :active. Same lift,
 * border, icon turn and gold sheen as the pointer hover above.
 */

@media (hover: none) and (prefers-reduced-motion: no-preference) {

	[data-framer-name="Service cards"] [data-framer-name="Default"],
	[data-framer-name^="Step 0"],
	[data-framer-name="Proof item"],
	[data-framer-name="Result stat"],
	.dsu-quotes__card {
		transition:
			translate 0.45s var(--ds-ease),
			scale 0.45s var(--ds-spring),
			box-shadow 0.45s var(--ds-ease),
			border-color 0.3s ease;
		-webkit-tap-highlight-color: transparent;
	}

	[data-framer-name="Service cards"] [data-framer-name="Default"].dsu-live,
	.ds-motion .ds-in.ds-done.dsu-quotes__card.dsu-live,
	.dsu-quotes__card.dsu-live {
		translate: 0 -4px;
		scale: 1.02;
		border-color: rgba(185, 144, 61, 0.55);
		box-shadow: 0 18px 30px -16px rgba(36, 40, 32, 0.5);
	}

	.ds-motion .ds-in.ds-done[data-framer-name^="Step 0"].dsu-live,
	[data-framer-name^="Step 0"].dsu-live,
	[data-framer-name="Proof item"].dsu-live,
	[data-framer-name="Result stat"].dsu-live {
		scale: 1.03;
		box-shadow: 0 20px 40px -26px rgba(36, 40, 32, 0.5);
	}

	[data-framer-name="Service cards"] [data-framer-name="Default"]:active,
	.ds-motion .ds-in.ds-done.dsu-quotes__card:active,
	.dsu-quotes__card:active {
		scale: 0.985;
		transition-duration: 0.12s;
	}

	[data-framer-name="Icon chip"] {
		transition: rotate 0.6s var(--ds-spring), scale 0.6s var(--ds-spring);
	}

	.dsu-live [data-framer-name="Icon chip"] {
		rotate: -14deg;
		scale: 1.1;
	}

	[data-framer-name="Service cards"] [data-framer-name="Default"],
	.dsu-quotes__card {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	[data-framer-name="Service cards"] [data-framer-name="Default"]::before,
	.dsu-quotes__card::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 -60%;
		z-index: -1;
		width: 45%;
		background: linear-gradient(100deg, transparent, rgba(185, 144, 61, 0.26), transparent);
		translate: -100% 0;
		transition: translate 0s;
		pointer-events: none;
	}

	[data-framer-name="Service cards"] [data-framer-name="Default"].dsu-live::before,
	.dsu-quotes__card.dsu-live::before {
		translate: 420% 0;
		transition: translate 0.9s var(--ds-ease) 0.1s;
	}
}