/* =========================================================
   depth.css — the depth system
   Layered shadows, edge highlights, gradient borders, glass,
   pointer tilt, floating decor and section backgrounds.
   Loaded after motion.css so it can build on its tokens.
   Everything here is transform/opacity/shadow only and
   switches off under prefers-reduced-motion.
   ========================================================= */

:root {
	/* Three elevation tiers: ambient + key + rim shadow each. */
	--elev-1: 0 1px 2px rgba(11, 26, 59, 0.05), 0 4px 10px -4px rgba(11, 26, 59, 0.08), 0 14px 30px -16px rgba(11, 26, 59, 0.16);
	--elev-2: 0 2px 4px rgba(11, 26, 59, 0.06), 0 12px 26px -12px rgba(11, 26, 59, 0.18), 0 30px 54px -26px rgba(11, 26, 59, 0.3);
	--elev-3: 0 4px 8px rgba(11, 26, 59, 0.08), 0 24px 44px -18px rgba(11, 26, 59, 0.3), 0 56px 90px -36px rgba(11, 26, 59, 0.42);
	/* A 1px light on the top edge sells a surface as raised. */
	--edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
	--edge-dark: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	--ring-teal: 0 0 0 1px rgba(20, 184, 201, 0.28);
	--surface-card: linear-gradient(180deg, #ffffff 0%, #fafcfe 100%);
}

/* ---------------------------------------------------------
   1. Elevated surfaces
   --------------------------------------------------------- */

.card,
.product,
.reward,
.benefit,
.stat,
.quote-card,
.post-card,
.contact-card,
.cert,
.dms__step,
.accordion,
.qr-card,
.wizard-card,
.contact-grid__form,
.gallery__tile,
.lightbox__panel {
	position: relative;
	background: var(--surface-card);
	box-shadow: var(--edge), var(--elev-1);
}

.stat,
.wizard-card,
.qr-card { box-shadow: var(--edge), var(--elev-2); }

.contact-grid__form,
.lightbox__panel { box-shadow: var(--edge), var(--elev-3); }

.reward--featured {
	background: linear-gradient(180deg, var(--teal-050), #fff 55%);
	box-shadow: var(--edge), var(--elev-1), 0 0 0 4px rgba(53, 208, 222, 0.16);
}

.card:hover,
.product:hover,
.reward:hover,
.benefit:hover,
.stat:hover,
.quote-card:hover,
.post-card:hover,
.contact-card:hover,
.cert:hover,
.dms__step:hover,
.gallery__tile:hover,
.product--linked:focus-within,
.reward--linked:focus-within {
	box-shadow: var(--edge), var(--elev-2), var(--ring-teal);
}

.reward--featured:hover {
	box-shadow: var(--edge), var(--elev-2), 0 0 0 4px rgba(53, 208, 222, 0.22);
}

/* Icon wells get a soft top light and a teal under-glow. */
.card__icon,
.benefit__icon,
.stat__icon,
.contact-card__icon,
.reward__icon {
	background: linear-gradient(160deg, #ffffff 0%, var(--teal-050) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(20, 184, 201, 0.12), 0 8px 16px -8px rgba(20, 184, 201, 0.45);
}

/* Inputs sink slightly into the form card. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {
	box-shadow: inset 0 1px 2px rgba(11, 26, 59, 0.06);
}

input:focus,
select:focus,
textarea:focus {
	box-shadow: inset 0 1px 2px rgba(11, 26, 59, 0.06), var(--ring);
}

/* ---------------------------------------------------------
   2. Pointer tilt + gradient border + sheen
   JS adds .is-tilt to cards on fine-pointer devices and sets
   --rx/--ry (rotation) and --mx/--my (light position).
   --------------------------------------------------------- */

.js .is-tilt {
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

/* Only after a scroll reveal has finished, so the fade-up is untouched. */
.js .is-tilt.is-in,
.js .is-tilt:not([data-reveal]) {
	transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0px), 0);
	transition:
		opacity var(--m-reveal) var(--m-out),
		transform 0.45s var(--m-out),
		box-shadow 0.4s var(--m-out),
		border-color 0.3s var(--m-out),
		background 0.3s var(--m-out);
}

.js .is-tilt.is-hover { --ty: -6px; will-change: transform; }

.js .is-tilt.is-hover.is-in,
.js .is-tilt.is-hover:not([data-reveal]) {
	transition-duration: 0.2s, 0.12s, 0.3s, 0.3s, 0.3s;
}

/* Gradient hairline that fades in on hover (masked padding trick). */
.js .is-tilt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(53, 208, 222, 0.95), rgba(47, 92, 179, 0.55) 45%, rgba(53, 208, 222, 0.15) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.35s var(--m-out);
	pointer-events: none;
}

/* A soft teal light that follows the pointer. */
.js .is-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(53, 208, 222, 0.16), transparent 62%);
	opacity: 0;
	transition: opacity 0.35s var(--m-out);
	pointer-events: none;
}

.js .is-tilt.is-hover::before,
.js .is-tilt.is-hover::after { opacity: 1; }

/* ---------------------------------------------------------
   3. Buttons with a top light, a base shade and a sheen sweep
   --------------------------------------------------------- */

.btn--accent {
	position: relative;
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -2px 0 rgba(11, 26, 59, 0.16),
		0 8px 20px -8px rgba(20, 184, 201, 0.7);
}

.btn--accent::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
	transform: translateX(-130%);
	transition: transform 0.8s var(--m-out);
	pointer-events: none;
}

.btn--accent:hover::after { transform: translateX(130%); }

.btn--accent:hover {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -2px 0 rgba(11, 26, 59, 0.16),
		0 18px 36px -12px rgba(20, 184, 201, 0.8);
}

.btn--accent:active { box-shadow: inset 0 2px 6px rgba(11, 26, 59, 0.28); }

.btn--primary {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset 0 -2px 0 rgba(0, 0, 0, 0.22),
		0 8px 20px -8px rgba(36, 64, 130, 0.6);
}

.btn--primary:hover {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -2px 0 rgba(0, 0, 0, 0.22),
		0 18px 36px -12px rgba(36, 64, 130, 0.7);
}

.btn--white {
	box-shadow: var(--edge), inset 0 -2px 0 rgba(11, 26, 59, 0.08), 0 10px 24px -10px rgba(11, 26, 59, 0.5);
}

.btn--ghost { backdrop-filter: blur(6px); }

/* ---------------------------------------------------------
   4. Header turns to glass once it is stuck
   --------------------------------------------------------- */

.site-header {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(1.4) blur(12px);
}

.site-header.is-stuck {
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 1px 0 rgba(11, 26, 59, 0.06), 0 14px 34px -22px rgba(11, 26, 59, 0.4);
}

/* ---------------------------------------------------------
   5. Section backgrounds and stacking
   --------------------------------------------------------- */

/* Dark bands: a hairline on the top edge and a shade that rolls in
   from above, so each one reads as sitting under the section before. */
.section--dark,
.page-hero {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		inset 0 44px 70px -50px rgba(3, 8, 24, 0.75);
}

/* Fine grid, faded towards the edges. */
.section--grid {
	--sec-bg: var(--surface);
	position: relative;
	isolation: isolate;
	background: var(--surface);
}

.section--grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(36, 64, 130, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(36, 64, 130, 0.07) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 100%);
	pointer-events: none;
}

/* Two soft colour pools, usable on top of any light surface. */
.section--glow {
	position: relative;
	isolation: isolate;
}

.section--glow::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(720px 440px at 8% 12%, rgba(53, 208, 222, 0.1), transparent 62%),
		radial-gradient(640px 400px at 92% 88%, rgba(47, 92, 179, 0.1), transparent 62%);
	pointer-events: none;
}

/* Floating decor: blurred colour orbs and thin vector rings. */
.orbs {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(52px);
	opacity: 0.38;
	will-change: transform;
}

.orb--1 {
	width: 520px;
	height: 520px;
	right: -8%;
	top: -20%;
	background: radial-gradient(circle, rgba(53, 208, 222, 0.6), rgba(53, 208, 222, 0) 66%);
	animation: m-drift-a 18s ease-in-out infinite;
}

.orb--2 {
	width: 440px;
	height: 440px;
	left: -10%;
	bottom: -22%;
	background: radial-gradient(circle, rgba(47, 92, 179, 0.75), rgba(47, 92, 179, 0) 66%);
	animation: m-drift-b 22s ease-in-out infinite;
}

.orb--3 {
	width: 260px;
	height: 260px;
	left: 42%;
	top: 58%;
	background: radial-gradient(circle, rgba(20, 184, 201, 0.4), transparent 66%);
	animation: m-drift-a 26s ease-in-out infinite reverse;
}

.ring {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	pointer-events: none;
}

.ring--1 {
	width: 640px;
	height: 640px;
	right: -12%;
	top: -34%;
	border-style: dashed;
	animation: m-spin 90s linear infinite;
}

.ring--2 {
	width: 300px;
	height: 300px;
	left: -6%;
	bottom: -12%;
	border-color: rgba(53, 208, 222, 0.22);
}

@keyframes m-drift-a {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(-40px, 30px, 0); }
}

@keyframes m-drift-b {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(36px, -28px, 0); }
}

@keyframes m-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------
   6. Hero stage: glass panel, artwork and floating cards on
      separate depth layers that follow the pointer
   --------------------------------------------------------- */

.hero__bg {
	background:
		url("../img/pattern-waves.svg") center / 1200px auto repeat,
		url("../img/pattern-pipes.svg") center / 520px auto repeat;
	opacity: 0.09;
}

.hero__stage {
	--px: 0px;
	--py: 0px;
	position: relative;
	order: -1;
	display: grid;
	place-items: center;
	perspective: 1200px;
	padding: clamp(1.5rem, 1rem + 3vw, 3rem) clamp(0.5rem, 2vw, 2rem);
}

@media (min-width: 900px) {
	.hero__stage { order: 0; }
}

/* Replaces the flat art container rules: the art now sits inside the stage. */
.hero__stage .hero__art {
	order: 0;
	position: relative;
	z-index: 1;
	width: min(100%, 560px);
	justify-items: center;
}

.hero__stage .hero__art img {
	width: 100%;
	filter: drop-shadow(0 34px 60px rgba(3, 8, 24, 0.6));
}

/* Glass panel tilted back behind the art. */
.hero__glass {
	position: absolute;
	inset: 4% 3% 2% 9%;
	border-radius: 32px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 70%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: var(--edge-dark), 0 50px 90px -40px rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(10px);
	transform: rotateY(-12deg) rotateX(6deg) translate3d(calc(var(--px) * 0.35), calc(var(--py) * 0.35), 0);
	transition: transform 0.6s var(--m-out);
}

.hero__glass::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(60% 50% at 28% 18%, rgba(255, 255, 255, 0.16), transparent 70%);
}

/* Floating mini-cards: the outer element follows the pointer, the inner
   card bobs, so the two transforms never fight. */
.hero__float {
	position: absolute;
	z-index: 2;
	transition: transform 0.5s var(--m-out);
}

.hero__float--a {
	left: 0;
	top: 10%;
	transform: translate3d(calc(var(--px) * 1.7), calc(var(--py) * 1.7), 0);
}

.hero__float--b {
	right: 0;
	bottom: 8%;
	transform: translate3d(calc(var(--px) * 1.3), calc(var(--py) * 1.3), 0);
}

.hero__float-card {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0.7rem 1rem 0.7rem 0.75rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--navy-900);
	box-shadow: var(--edge), var(--elev-2);
	backdrop-filter: blur(8px);
	animation: m-float 6.5s ease-in-out infinite;
}

.hero__float--b .hero__float-card { animation-duration: 8s; animation-delay: -3s; }

.hero__float-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--grad-accent);
	color: var(--navy-900);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.hero__float-text { display: grid; line-height: 1.2; }
.hero__float-title { font-weight: 700; font-size: 0.9375rem; }
.hero__float-sub { font-size: 0.75rem; color: var(--ink-500); }

@media (max-width: 479px) {
	.hero__float { display: none; }
	.hero__glass { inset: 8% 6% 4% 10%; }
}

/* ---------------------------------------------------------
   7. Other layered pieces
   --------------------------------------------------------- */

/* Banner slider: framed, deeply raised, slides drift in from the right. */
.banner__track {
	background: var(--surface-card);
	box-shadow: var(--edge), var(--elev-3);
}

.banner__track::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(53, 208, 222, 0.7), rgba(255, 255, 255, 0.35) 40%, rgba(47, 92, 179, 0.5));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.banner__slide { transform: scale(1.04) translate3d(2%, 0, 0); }
.banner__slide.is-active { transform: none; }

/* MD portrait: a slow dashed ring behind the shoulders. */
.md__figure::after {
	content: "";
	position: absolute;
	left: -12%;
	bottom: -34%;
	width: 124%;
	aspect-ratio: 1;
	z-index: -1;
	border-radius: 50%;
	border: 1px dashed rgba(53, 208, 222, 0.35);
	animation: m-spin 80s linear infinite;
	pointer-events: none;
}

/* Illustrations drift gently. */
.js .intro__art img,
.js .dms__art img,
.js .cta-final__art img { animation: m-float 7s ease-in-out infinite; }
.js .dms__art img { animation-duration: 8s; animation-delay: -2s; }

/* CTA panel gets its own orbs and a top light. */
.cta-final__inner { box-shadow: var(--edge-dark), var(--elev-3); }

/* Quick actions float with a glow. */
.quick-actions__btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 26px -10px rgba(11, 26, 59, 0.5); }

/* Wizard rail dot glow while current. */
.wizard__dot.is-current { box-shadow: 0 0 0 6px rgba(53, 208, 222, 0.2), 0 12px 24px -10px rgba(11, 26, 59, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

/* ---------------------------------------------------------
   8. Reduced motion: drop every animation and the tilt
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.orb, .ring--1, .hero__float-card, .md__figure::after,
	.js .intro__art img, .js .dms__art img, .js .cta-final__art img { animation: none; }
	.hero__glass { transform: rotateY(-12deg) rotateX(6deg); }
	.hero__float, .hero__glass { transition: none; }
	.btn--accent::after { display: none; }
	.js .is-tilt.is-in, .js .is-tilt:not([data-reveal]) { transform: none; transition: box-shadow 0.2s; }
	.banner__slide { transform: none; }
}