/* =========================================================================
   Premium Motion — front-end & editor styles
   Flowing banners · Scroll reveals · Premium hero sections
   ========================================================================= */

:root {
	--pm-gap: 48px;
	--pm-duration: 35s;
}

/* -------------------------------------------------------------------------
   1. Flowing banner / marquee
   ------------------------------------------------------------------------- */

.pm-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--pm-bg, transparent);
}

.pm-marquee__viewport {
	display: flex;
	width: max-content;
	gap: var(--pm-gap);
}

.pm-marquee.is-vertical,
.pm-marquee.is-vertical .pm-marquee__viewport {
	flex-direction: column;
}

.pm-marquee.is-vertical {
	height: var(--pm-height, 420px);
}

.pm-marquee__track {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--pm-gap);
	min-width: 100%;
	animation: pm-scroll-x var(--pm-duration) linear infinite;
	will-change: transform;
}

.pm-marquee.is-vertical .pm-marquee__viewport {
	width: 100%;
	height: 100%;
	flex-direction: row;
}

.pm-marquee.is-vertical .pm-marquee__track {
	flex-direction: column;
	min-width: 0;
	min-height: 100%;
	animation-name: pm-scroll-y;
}

.pm-marquee__track.is-reverse {
	animation-direction: reverse;
}

.pm-marquee.pause-on-hover:hover .pm-marquee__track {
	animation-play-state: paused;
}

/* Soft fade on the edges, like agency reels */
.pm-marquee.has-fade.is-horizontal {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.pm-marquee.has-fade.is-vertical {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}

.pm-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pm-marquee__item img {
	display: block;
	height: var(--pm-height, 120px);
	width: auto;
	max-width: none;
	object-fit: contain;
	border-radius: 14px;
}

.pm-marquee__text {
	flex-shrink: 0;
	font-size: clamp(1.6rem, 5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
	background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 55%, transparent));
	-webkit-background-clip: text;
	background-clip: text;
}

@keyframes pm-scroll-x {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - var(--pm-gap))); }
}

@keyframes pm-scroll-y {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(-100% - var(--pm-gap))); }
}

/* -------------------------------------------------------------------------
   2. Scroll reveal
   ------------------------------------------------------------------------- */

.pm-reveal {
	--pm-reveal-distance: 40px;
	--pm-reveal-duration: 0.8s;
	--pm-reveal-delay: 0s;
	opacity: 0;
	transition:
		opacity var(--pm-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--pm-reveal-delay),
		transform var(--pm-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--pm-reveal-delay),
		filter var(--pm-reveal-duration) ease var(--pm-reveal-delay);
	will-change: opacity, transform;
}

.pm-reveal[data-pm-reveal="fade-up"]    { transform: translateY(var(--pm-reveal-distance)); }
.pm-reveal[data-pm-reveal="fade-down"]  { transform: translateY(calc(-1 * var(--pm-reveal-distance))); }
.pm-reveal[data-pm-reveal="fade-left"]  { transform: translateX(var(--pm-reveal-distance)); }
.pm-reveal[data-pm-reveal="fade-right"] { transform: translateX(calc(-1 * var(--pm-reveal-distance))); }
.pm-reveal[data-pm-reveal="zoom-in"]    { transform: scale(0.9); }
.pm-reveal[data-pm-reveal="zoom-out"]   { transform: scale(1.06); }
.pm-reveal[data-pm-reveal="blur-in"]    { filter: blur(14px); }
.pm-reveal[data-pm-reveal="flip-up"]    { transform: perspective(900px) rotateX(18deg); transform-origin: bottom; }

.pm-reveal.pm-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* -------------------------------------------------------------------------
   3. Premium hero
   ------------------------------------------------------------------------- */

.pm-hero {
	--pm-hero-bg: #0b0b14;
	--pm-accent: #7c5cff;
	--pm-accent2: #22d3ee;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
	color: #fff;
	background: var(--pm-hero-bg);
	isolation: isolate;
}

.pm-hero.height-short { min-height: 48vh; }
.pm-hero.height-tall  { min-height: 78vh; }
.pm-hero.height-full  { min-height: 100vh; }
.pm-hero.height-auto  { min-height: 0; padding-block: clamp(3rem, 8vw, 7rem); }

.pm-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 5vw, 3rem);
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.pm-hero.align-center .pm-hero__inner { align-items: center; text-align: center; }
.pm-hero.align-left   .pm-hero__inner { align-items: flex-start; text-align: left; }

.pm-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: inherit;
}

.pm-hero__badge {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	animation: pm-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
	animation-delay: calc(var(--pm-i, 0) * 0.08s);
}

.pm-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 7vw, 5rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
	max-width: 16ch;
	background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.62));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: pm-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards;
}

.pm-hero.align-center .pm-hero__title { max-width: 18ch; }

.pm-hero__subtitle {
	margin: 0;
	font-size: clamp(1.05rem, 2.2vw, 1.4rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
	max-width: 56ch;
	animation: pm-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.pm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 0.6rem;
	justify-content: inherit;
	animation: pm-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.pm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.7rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
	cursor: pointer;
}

.pm-btn--primary {
	color: #0b0b14;
	background: linear-gradient(135deg, var(--pm-accent), var(--pm-accent2));
	box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--pm-accent) 70%, transparent);
}

.pm-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--pm-accent) 80%, transparent);
}

.pm-btn--ghost {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.pm-btn--ghost:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.12);
}

.pm-hero__content { width: 100%; margin-top: 1rem; }

/* --- Hero background variants --- */
.pm-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Spotlight: a soft moving glow that follows the cursor (JS sets --mx/--my) */
.pm-hero.is-style-spotlight .pm-hero__bg {
	background:
		radial-gradient(60rem 60rem at var(--mx, 50%) var(--my, 30%),
			color-mix(in srgb, var(--pm-accent) 38%, transparent), transparent 60%),
		radial-gradient(40rem 40rem at 80% 110%,
			color-mix(in srgb, var(--pm-accent2) 30%, transparent), transparent 55%);
	transition: background 0.2s ease;
	/* Gentle ambient drift so the glow feels alive before the cursor moves
	   (and when the visitor prefers reduced motion). */
	animation: pm-glow-drift 14s ease-in-out infinite alternate;
}

@keyframes pm-glow-drift {
	from { transform: translate3d(-1.5%, -1%, 0) scale(1.03); }
	to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.07); }
}

/* Aurora: slow flowing conic gradients */
.pm-hero.is-style-aurora .pm-hero__bg {
	background:
		conic-gradient(from 120deg at 30% 20%,
			color-mix(in srgb, var(--pm-accent) 55%, transparent),
			transparent 40%),
		conic-gradient(from 300deg at 70% 80%,
			color-mix(in srgb, var(--pm-accent2) 55%, transparent),
			transparent 45%);
	filter: blur(60px);
	opacity: 0.85;
	animation: pm-aurora 16s ease-in-out infinite alternate;
}

/* Grid: subtle animated tech grid */
.pm-hero.is-style-grid .pm-hero__bg {
	background-image:
		linear-gradient(color-mix(in srgb, var(--pm-accent) 18%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--pm-accent) 18%, transparent) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent);
	mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent);
	animation: pm-grid 22s linear infinite;
}

/* Mesh: layered blobs */
.pm-hero.is-style-mesh .pm-hero__bg {
	background:
		radial-gradient(35rem 35rem at 15% 20%, color-mix(in srgb, var(--pm-accent) 40%, transparent), transparent 60%),
		radial-gradient(30rem 30rem at 85% 30%, color-mix(in srgb, var(--pm-accent2) 38%, transparent), transparent 60%),
		radial-gradient(40rem 40rem at 50% 100%, color-mix(in srgb, var(--pm-accent) 26%, transparent), transparent 65%);
	filter: saturate(1.1);
	animation: pm-mesh 18s ease-in-out infinite alternate;
}

@keyframes pm-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pm-aurora {
	from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1.1); }
	to   { transform: translate3d(4%, 3%, 0) rotate(12deg) scale(1.25); }
}

@keyframes pm-grid {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 46px 46px, 46px 46px; }
}

@keyframes pm-mesh {
	from { transform: translate3d(-2%, -1%, 0) scale(1.05); }
	to   { transform: translate3d(2%, 2%, 0) scale(1.15); }
}

/* -------------------------------------------------------------------------
   4. Floating elements
   ------------------------------------------------------------------------- */

.pm-float {
	position: relative;
	width: 100%;
	min-height: var(--pm-float-height, 460px);
	overflow: hidden;
}

.pm-float__item {
	position: absolute;
	transform: translate3d(var(--px, 0), var(--py, 0), 0);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.pm-float__item > * {
	display: block;
	animation: pm-bob var(--pm-bob, 7s) ease-in-out var(--pm-bob-delay, 0s) infinite alternate;
}

.pm-float__item img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 18px;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}

/* Scatter presets for up to 8 children */
.pm-float__item:nth-child(1) { left: 6%;  top: 12%; --pm-bob: 6.5s; --pm-bob-delay: 0s;   }
.pm-float__item:nth-child(2) { left: 70%; top: 8%;  --pm-bob: 8s;   --pm-bob-delay: .6s;  }
.pm-float__item:nth-child(3) { left: 38%; top: 30%; --pm-bob: 7.2s; --pm-bob-delay: 1.1s; }
.pm-float__item:nth-child(4) { left: 14%; top: 58%; --pm-bob: 9s;   --pm-bob-delay: .3s;  }
.pm-float__item:nth-child(5) { left: 80%; top: 54%; --pm-bob: 6.8s; --pm-bob-delay: 1.4s; }
.pm-float__item:nth-child(6) { left: 55%; top: 66%; --pm-bob: 8.4s; --pm-bob-delay: .9s;  }
.pm-float__item:nth-child(7) { left: 28%; top: 6%;  --pm-bob: 7.6s; --pm-bob-delay: 1.7s; }
.pm-float__item:nth-child(8) { left: 88%; top: 24%; --pm-bob: 8.8s; --pm-bob-delay: .5s;  }

@keyframes pm-bob {
	from { transform: translateY(-14px) rotate(-2deg); }
	to   { transform: translateY(14px) rotate(2deg); }
}

/* -------------------------------------------------------------------------
   5. 3D tilt cards
   ------------------------------------------------------------------------- */

.pm-tilt {
	position: relative;
	display: inline-block;
	perspective: 900px;
}

.pm-tilt__inner {
	position: relative;
	transform: perspective(900px) rotateX(0) rotateY(0);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	transform-style: preserve-3d;
	border-radius: 18px;
	overflow: hidden;
}

.pm-tilt.has-glare .pm-tilt__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(30rem 30rem at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.35), transparent 45%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	mix-blend-mode: overlay;
}

.pm-tilt.has-glare:hover .pm-tilt__inner::after { opacity: 1; }

.pm-tilt__inner img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------------------
   6. Color-shift showcase
   ------------------------------------------------------------------------- */

.pm-colorshift {
	--pm-cs-bg: #0b0b14;
	background: var(--pm-cs-bg);
	color: #fff;
	transition: background 0.8s ease;
}

.pm-colorshift__item {
	min-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 6vw, 6rem) 1.25rem;
}

.pm-colorshift__inner {
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   7. Horizontal scroll
   ------------------------------------------------------------------------- */

.pm-hscroll {
	position: relative;
	/* height = (panels) * 100vh, set inline by the renderer */
}

.pm-hscroll__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.pm-hscroll__track {
	display: flex;
	gap: 0;
	height: 100%;
	will-change: transform;
}

.pm-hscroll__panel {
	flex: 0 0 100vw;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 6vw, 6rem);
	box-sizing: border-box;
}

/* No-JS / reduced motion fallback: stack panels and scroll the row normally */
@media (prefers-reduced-motion: reduce) {
	.pm-hscroll { height: auto !important; }
	.pm-hscroll__sticky { position: static; height: auto; overflow-x: auto; }
	.pm-hscroll__track { transform: none !important; }
}

/* -------------------------------------------------------------------------
   8. Vertical scroll story
   ------------------------------------------------------------------------- */

.pm-vscroll {
	position: relative;
	/* height = (panels) * 100vh, set inline by the renderer */
}

.pm-vscroll__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.pm-vscroll__panel {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 6vw, 6rem);
	box-sizing: border-box;
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.pm-vscroll { height: auto !important; }
	.pm-vscroll__sticky { position: static; height: auto; }
	.pm-vscroll__panel { position: relative; inset: auto; opacity: 1 !important; transform: none !important; min-height: 80vh; }
}

/* -------------------------------------------------------------------------
   9. Fade to black / white
   ------------------------------------------------------------------------- */

.pm-fade { position: relative; }

.pm-fade__overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
}

.pm-fade.to-black .pm-fade__overlay { background: #000; }
.pm-fade.to-white .pm-fade__overlay { background: #fff; }

/* "Fade to clear": the content itself dissolves to transparent as it
   scrolls past the viewport centre (JS sets the opacity). */
.pm-fade.to-clear .pm-fade__content {
	opacity: 1;
	will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
	.pm-fade__overlay { display: none; }
	.pm-fade.to-clear .pm-fade__content { opacity: 1 !important; }
}

/* -------------------------------------------------------------------------
   10. Editor-only helpers
   ------------------------------------------------------------------------- */

.pm-editor-hint {
	margin: 0 0 0.6rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.6;
}

.pm-editor-marquee {
	padding: 1rem;
	border: 1px dashed rgba(124, 92, 255, 0.5);
	border-radius: 12px;
	background: rgba(124, 92, 255, 0.04);
}

.pm-editor-marquee__row > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.pm-editor-reveal {
	outline: 1px dashed rgba(124, 92, 255, 0.4);
	outline-offset: 6px;
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
   5. Accessibility — respect reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	/*
	 * Keep the gentle, continuous, non-jarring loops so the page still feels
	 * alive even when the visitor prefers reduced motion: the flowing banner
	 * and the hero's ambient background glow. The large, scroll-linked and
	 * one-shot "travel" animations below stay disabled.
	 */
	.pm-hero__badge,
	.pm-hero__title,
	.pm-hero__subtitle,
	.pm-hero__actions {
		animation: none !important;
	}
	.pm-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}