/* ==========================================================================
   HERO-05: PARALLAX DEPTH SLIDER (.sentio-hpx)
   --------------------------------------------------------------------------
   Phase 2a redesign (2026-04-21) — restored 3-layer architecture
   (background / midground / foreground accent + content), introduced nav-dot
   variants (dot / bar / numbered), 44×44 touch targets, :focus-visible rings,
   visually-hidden SR announcer, prefers-reduced-motion short-circuit, and
   CSS custom properties scaffolding for the Phase 2b parallax engine.

   Cascade note: `.sentio-hpx__bg` still carries `transform: scale(1.15)` and
   transitions it during slide changes (2026-04-18 inline port behavior). In
   Phase 2b, JS will set per-layer transform CSS custom properties
   (--hpx-bg-mx, --hpx-bg-my, --hpx-bg-sy, --hpx-bg-scale) to drive real mouse
   and scroll parallax. Phase 2a leaves the static layout so the structural
   checkpoint can be visually verified without motion noise.

   Z-index within a slide (from bottom to top):
     0 — bg      (farthest; full-cover image)
     1 — mg      (midground; full-cover image with object-position)
     2 — overlay (tints bg + mg)
     3 — fg      (decorative accent; above overlay, stays bright)
     4 — content (text; always on top)
   ========================================================================== */

/* --- Wrapper + design tokens ---------------------------------------------- */
.sentio-hpx {
	position: relative;
	width: 100%;
	height: var(--hpx-height, 100vh);
	overflow: hidden;
	background: #111;

	/* Phase 2a custom properties — consumed by Phase 2b JS. */
	--hpx-content-tilt-ratio: 0.2;
	--hpx-intensity: 40;
	--hpx-focus-ring: #6C63FF;
}

/* --- Slides ---------------------------------------------------------------- */
.sentio-hpx__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	overflow: hidden;
	transition:
		opacity    var(--hpx-transition-speed, 1200ms) ease,
		visibility 0s var(--hpx-transition-speed, 1200ms);
}

.sentio-hpx__slide--active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition:
		opacity    var(--hpx-transition-speed, 1200ms) ease,
		visibility 0s 0s;
}

/* --- Background image layer (farthest; slowest) ---
 * Phase 2b: transform reads from CSS custom properties set by the JS parallax
 * engine. Base scale keeps the 1.15 buffer for parallax travel; `--hpx-bg-scale`
 * lets `enable_scroll_zoom` ramp it to 1.30 as the hero scrolls.
 */
.sentio-hpx__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
	will-change: transform;
	pointer-events: none;
	transform: translate3d(
			var(--hpx-bg-mx, 0px),
			calc(var(--hpx-bg-my, 0px) + var(--hpx-bg-sy, 0px)),
			0
		) scale(var(--hpx-bg-scale, 1.15));
}

/* --- Midground image layer (medium depth) ---
 * Moves more than bg (parallax multiplier 0.35 vs bg's 0.15 in JS).
 */
.sentio-hpx__mg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position set inline from PHP (slide_mg_position control) */
	z-index: 1;
	will-change: transform;
	pointer-events: none;
	transform: translate3d(
			var(--hpx-mg-mx, 0px),
			calc(var(--hpx-mg-my, 0px) + var(--hpx-mg-sy, 0px)),
			0
		) scale(1.1);
}

/* --- Overlay (tints bg + mg) ---------------------------------------------- */
.sentio-hpx__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* --- Foreground accent layer (decorative; stays above overlay) ---
 * Moves the most (parallax multiplier 0.55 in JS). Biggest shift = most
 * immediate "floating" feel. Corner-anchored variants compose the parallax
 * translation with their static base position.
 */
.sentio-hpx__fg {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	will-change: transform;
	max-width: 40%;
	height: auto;
	/* max-width set inline from PHP (slide_fg_max_width control) */
	transform: translate3d(
		var(--hpx-fg-mx, 0px),
		calc(var(--hpx-fg-my, 0px) + var(--hpx-fg-sy, 0px)),
		0
	);
}

.sentio-hpx__fg--top-left     { top: 8%;    left: 8%;    }
.sentio-hpx__fg--top-right    { top: 8%;    right: 8%;   }
.sentio-hpx__fg--bottom-left  { bottom: 8%; left: 8%;    }
.sentio-hpx__fg--bottom-right { bottom: 8%; right: 8%;   }
.sentio-hpx__fg--center {
	top: 50%;
	left: 50%;
	/* Compose -50% centering with parallax offsets. */
	transform: translate3d(
		calc(-50% + var(--hpx-fg-mx, 0px)),
		calc(-50% + var(--hpx-fg-my, 0px) + var(--hpx-fg-sy, 0px)),
		0
	);
}

/* --- Content layer (text, CTA; always on top) ----------------------------- */
.sentio-hpx__content {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	will-change: transform, opacity;
	transition:
		transform calc(var(--hpx-transition-speed, 1200ms) * 0.7) ease-out,
		opacity   calc(var(--hpx-transition-speed, 1200ms) * 0.6) ease;
}

.sentio-hpx__content > * {
	pointer-events: auto;
}

.sentio-hpx__content-inner {
	max-width: 700px;
	width: 100%;
	box-sizing: border-box;
	transform-origin: center center;
	/* Phase 2b — tilt driven by JS writing --hpx-content-rx / --hpx-content-ry
	 * (0 when enable_tilt=no; scaled by --hpx-content-tilt-ratio when yes).
	 * The ratio (user-approved 0.2 default) means content tilts at 20% of
	 * the image-layer intensity — subtle by design.
	 */
	transform:
		perspective(1000px)
		rotateX(var(--hpx-content-rx, 0deg))
		rotateY(var(--hpx-content-ry, 0deg));
}

.sentio-hpx__content-inner > * + * {
	margin-top: 16px;
}

/* --- Typography defaults --- */
.sentio-hpx__subtitle {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	opacity: .85;
}

.sentio-hpx__title {
	margin: 0;
	line-height: 1.15;
}

.sentio-hpx__description {
	max-width: 560px;
	line-height: 1.6;
	opacity: .9;
}

.sentio-hpx__button {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	transition: background .3s, color .3s, transform .3s;
	text-align: center;
	box-sizing: border-box;
}

.sentio-hpx__button:hover {
	transform: translateY(-2px);
}

/* --- Arrows --------------------------------------------------------------- */
.sentio-hpx__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .4);
	color: #fff;
	cursor: pointer;
	transition: background .3s, transform .3s;
}

.sentio-hpx__arrow:hover {
	background: rgba(0, 0, 0, .6);
}

.sentio-hpx__arrow--prev { left: 20px; }
.sentio-hpx__arrow--next { right: 20px; }

/* ==========================================================================
   Nav dots — 2026-04-21 redesign
   --------------------------------------------------------------------------
   Container: aria-label="Slide navigation"; anchored to hero wrapper (not page).
   Position variants via wrapper prefix class: .sentio-hpx--dots-pos-{left|center|right}.
   Visual variants via wrapper prefix class: .sentio-hpx--dots-{dot|bar|numbered}.
   Touch target: 44×44 per dot (padding around visual indicator).
   ========================================================================== */
.sentio-hpx__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 6px;
	padding: 0 16px;
	box-sizing: border-box;
	max-width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

/* Position variants */
.sentio-hpx--dots-pos-left .sentio-hpx__dots {
	left: 16px;
	transform: none;
	justify-content: flex-start;
}

.sentio-hpx--dots-pos-right .sentio-hpx__dots {
	left: auto;
	right: 16px;
	transform: none;
	justify-content: flex-end;
}

/* Dot button — always 44×44 hitbox regardless of variant */
.sentio-hpx__dot {
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: inherit;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}

/* Visible-indicator label (used only by the numbered variant) */
.sentio-hpx__dot-label {
	display: none;
}

/* ---- Variant: Dot (default; 12px circle) --- */
.sentio-hpx__dot::before {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition:
		background .3s,
		transform .3s,
		width .3s,
		height .3s,
		box-shadow .3s;
}

.sentio-hpx__dot:hover::before {
	background: rgba(255, 255, 255, 0.9);
	transform: scale(1.1);
}

.sentio-hpx__dot--active::before {
	background: #fff;
	transform: scale(1.25);
}

/* ---- Variant: Bar --- */
.sentio-hpx--dots-bar .sentio-hpx__dot::before {
	width: 32px;
	height: 4px;
	border-radius: 2px;
	transform: none;
}

.sentio-hpx--dots-bar .sentio-hpx__dot:hover::before {
	transform: none;
	background: rgba(255, 255, 255, 0.9);
	width: 40px;
}

.sentio-hpx--dots-bar .sentio-hpx__dot--active::before {
	width: 48px;
	transform: none;
	background: #fff;
}

/* ---- Variant: Numbered --- */
.sentio-hpx--dots-numbered .sentio-hpx__dot::before {
	display: none;
}

.sentio-hpx--dots-numbered .sentio-hpx__dot-label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition: background .3s, color .3s, transform .3s;
}

.sentio-hpx--dots-numbered .sentio-hpx__dot:hover .sentio-hpx__dot-label {
	background: rgba(255, 255, 255, 0.32);
}

.sentio-hpx--dots-numbered .sentio-hpx__dot--active .sentio-hpx__dot-label {
	background: #fff;
	color: #111;
	transform: scale(1.05);
}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

/* Visually-hidden SR announcer (Phase 2b JS writes here on slide change). */
.sentio-hpx__sr-announce {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus-visible rings — never remove outlines for keyboard users. */
.sentio-hpx__dot:focus-visible,
.sentio-hpx__arrow:focus-visible,
.sentio-hpx__button:focus-visible {
	outline: 3px solid var(--hpx-focus-ring, #6C63FF);
	outline-offset: 2px;
}

/* Reinforce focus ring for numbered variant (since dot itself is the label). */
.sentio-hpx--dots-numbered .sentio-hpx__dot:focus-visible {
	outline: none;
}

.sentio-hpx--dots-numbered .sentio-hpx__dot:focus-visible .sentio-hpx__dot-label {
	outline: 3px solid var(--hpx-focus-ring, #6C63FF);
	outline-offset: 2px;
}

/* ==========================================================================
   Ambient — subtle looping motion on mg + fg when enable_ambient=yes.
   --------------------------------------------------------------------------
   Phase 2b: implemented as OPACITY breathing to avoid transform conflicts
   with the parallax engine (which owns the transform property on these
   layers). A "drift" illusion is achieved via filter-hue + opacity, which
   the compositor can animate without touching transform.
   ========================================================================== */
.sentio-hpx--ambient .sentio-hpx__mg {
	animation: sentio-hpx-ambient-breathe 9s ease-in-out infinite;
}

.sentio-hpx--ambient .sentio-hpx__fg {
	animation: sentio-hpx-ambient-breathe 11s ease-in-out infinite 1.5s;
}

@keyframes sentio-hpx-ambient-breathe {
	0%, 100% { opacity: 1; filter: saturate(1); }
	50%      { opacity: 0.92; filter: saturate(1.05); }
}

/* ==========================================================================
   Particles (unchanged from 2026-04-18 port)
   ========================================================================== */
.sentio-hpx__particles {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	overflow: hidden;
}

.sentio-hpx__particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	animation: sentio-hpx-float linear infinite;
}

@keyframes sentio-hpx-float {
	0%   { transform: translateY(0)     scale(1);   opacity: .6; }
	50%  { transform: translateY(-60px) scale(1.1); opacity: 1; }
	100% { transform: translateY(-120px) scale(.8); opacity: 0; }
}

/* ==========================================================================
   Prefers-reduced-motion — per authoring guide §8.6
   --------------------------------------------------------------------------
   CSS side zeros durations and locks layer/content transforms. JS side
   (Phase 2b) short-circuits the parallax engine entirely.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sentio-hpx,
	.sentio-hpx *,
	.sentio-hpx *::before,
	.sentio-hpx *::after {
		transition-duration: 0.001s !important;
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
	}

	/* Kill decorative motion entirely. */
	.sentio-hpx__particle {
		animation: none !important;
		opacity: 0 !important;
	}

	/* Ambient is also decorative — stop it. */
	.sentio-hpx--ambient .sentio-hpx__mg,
	.sentio-hpx--ambient .sentio-hpx__fg {
		animation: none !important;
	}

	/* Lock layers at their rest positions — no parallax drift. */
	.sentio-hpx__bg {
		transform: scale(1.15) !important;
	}

	.sentio-hpx__mg {
		transform: scale(1.1) !important;
	}

	.sentio-hpx__fg {
		transform: none !important;
	}

	.sentio-hpx__fg--center {
		transform: translate(-50%, -50%) !important;
	}

	.sentio-hpx__content-inner {
		transform: none !important;
	}
}