/*!
 * Sentio for Elementor - hero-kenburns widget
 * Extracted from frontend.css during Batch 2356 Checkpoint 1 mechanical extraction (2026-04-19).
 * Tier 3 mechanical extraction — verbatim from monolith.
 */

/* ==========================================================================
   HERO-01: KEN BURNS (.sentio-hkb)
   ========================================================================== */

.sentio-hkb {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000;
}
.sentio-hkb--fullscreen { height: 100vh; }
.sentio-hkb--fixed { height: var(--hkb-height, 700px); }
.sentio-hkb--ratio-16-9 { aspect-ratio: 16/9; }
.sentio-hkb--ratio-21-9 { aspect-ratio: 21/9; }
.sentio-hkb--ratio-4-3 { aspect-ratio: 4/3; }

/* Preloader */
.sentio-hkb__preloader {
	position: absolute; inset: 0; z-index: 50;
	background: #000; display: flex; align-items: center; justify-content: center;
	transition: opacity 0.5s ease;
}
.sentio-hkb__preloader--hidden { opacity: 0; pointer-events: none; }
.sentio-hkb__spinner {
	width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.2);
	border-top-color: #fff; border-radius: 50%;
	animation: sentio-hkb-spin 0.8s linear infinite;
}
@keyframes sentio-hkb-spin { to { transform: rotate(360deg); } }

/* Slides */
.sentio-hkb__slides { position: relative; width: 100%; height: 100%; overflow: hidden; }
.sentio-hkb__slide {
	position: absolute; inset: 0; opacity: 0; z-index: 1;
	transition: opacity var(--hkb-transition-speed, 1000ms) ease;
}
.sentio-hkb__slide--active { opacity: 1; z-index: 2; }
.sentio-hkb__slide--exit { z-index: 1; }

/* Slide transition */
.sentio-hkb--transition-slide .sentio-hkb__slide {
	opacity: 1; transition: none; transform: translateX(0);
}
.sentio-hkb--transition-slide .sentio-hkb__slide:not(.sentio-hkb__slide--active):not(.sentio-hkb__slide--exit) {
	opacity: 0;
}
.sentio-hkb--transition-slide .sentio-hkb__slide--slide-in-next {
	animation: sentio-hkb-slideInNext var(--hkb-transition-speed, 1000ms) ease forwards;
}
.sentio-hkb--transition-slide .sentio-hkb__slide--slide-in-prev {
	animation: sentio-hkb-slideInPrev var(--hkb-transition-speed, 1000ms) ease forwards;
}
.sentio-hkb--transition-slide .sentio-hkb__slide--slide-out-next {
	animation: sentio-hkb-slideOutNext var(--hkb-transition-speed, 1000ms) ease forwards;
}
.sentio-hkb--transition-slide .sentio-hkb__slide--slide-out-prev {
	animation: sentio-hkb-slideOutPrev var(--hkb-transition-speed, 1000ms) ease forwards;
}
@keyframes sentio-hkb-slideInNext { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sentio-hkb-slideInPrev { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes sentio-hkb-slideOutNext { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes sentio-hkb-slideOutPrev { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* Wipe transition */
.sentio-hkb--transition-wipe .sentio-hkb__slide {
	opacity: 1; transition: none;
	clip-path: inset(0 0 0 0);
}
.sentio-hkb--transition-wipe .sentio-hkb__slide:not(.sentio-hkb__slide--active):not(.sentio-hkb__slide--exit) {
	opacity: 0;
}
.sentio-hkb--transition-wipe .sentio-hkb__slide--wipe-in {
	z-index: 3;
	animation: sentio-hkb-wipeIn var(--hkb-transition-speed, 1000ms) ease forwards;
}
.sentio-hkb--transition-wipe .sentio-hkb__slide--wipe-out {
	z-index: 2; opacity: 1;
}
@keyframes sentio-hkb-wipeIn {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* Background image + Ken Burns */
.sentio-hkb__bg { position: absolute; inset: 0; overflow: hidden; }
.sentio-hkb__img {
	width: 100%; height: 100%; object-fit: cover;
	will-change: transform;
	/* Prevents the sub-pixel shimmer/flicker some GPUs show while a large
	   image is transform-animated for many seconds. translateZ(0) is NOT
	   added here — will-change already promotes the layer, and stacking a
	   redundant 3D transform costs memory for no gain. Add it only if a
	   device test shows flicker persisting. */
	backface-visibility: hidden;
}
.sentio-hkb__slide--active .sentio-hkb__img {
	/* linear, NOT ease-out: ease-out decelerates to a near-stop well before the
	   duration ends, which reads as the pan "freezing" partway through the slide
	   — the residual not-smooth/not-continuous symptom. Constant drift for the
	   full duration is the Ken Burns look. Duration comes from the JS-computed
	   --hkb-kenburns-dur / inline animation-duration, which enforces
	   duration >= autoplay delay + transition. */
	animation: sentio-hkb-zoom-in var(--hkb-kenburns-dur, 8000ms) linear forwards;
}
@keyframes sentio-hkb-zoom-in {
	from { transform: scale(1) translate(0, 0); }
	to { transform: scale(var(--hkb-kenburns-scale, 1.15)) translate(-1%, -1%); }
}
@keyframes sentio-hkb-zoom-out {
	from { transform: scale(var(--hkb-kenburns-scale, 1.15)); }
	to { transform: scale(1); }
}
@keyframes sentio-hkb-pan-left {
	from { transform: scale(1.05) translateX(0); }
	to { transform: scale(1.05) translateX(-3%); }
}
@keyframes sentio-hkb-pan-right {
	from { transform: scale(1.05) translateX(0); }
	to { transform: scale(1.05) translateX(3%); }
}
@keyframes sentio-hkb-pan-up {
	from { transform: scale(1.05) translateY(0); }
	to { transform: scale(1.05) translateY(-3%); }
}
.sentio-hkb__slide[data-kenburns="zoom-out"] .sentio-hkb__img { animation-name: sentio-hkb-zoom-out; }
.sentio-hkb__slide[data-kenburns="pan-left"] .sentio-hkb__img { animation-name: sentio-hkb-pan-left; }
.sentio-hkb__slide[data-kenburns="pan-right"] .sentio-hkb__img { animation-name: sentio-hkb-pan-right; }
.sentio-hkb__slide[data-kenburns="pan-up"] .sentio-hkb__img { animation-name: sentio-hkb-pan-up; }

/* Video */
.sentio-hkb__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 1;
}

/* Overlay */
.sentio-hkb__overlay {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(var(--hkb-overlay-dir, to right), var(--hkb-overlay-start, rgba(0,0,0,0.6)), var(--hkb-overlay-end, rgba(0,0,0,0.1)));
}
.sentio-hkb__overlay--radial {
	background: radial-gradient(ellipse at center, var(--hkb-overlay-from, transparent), var(--hkb-overlay-to, rgba(0,0,0,0.6))) !important;
}

/* Content */
.sentio-hkb__content {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center;
	padding: var(--hkb-content-pad, 60px);
}
.sentio-hkb__content--left { justify-content: flex-start; }
.sentio-hkb__content--center { justify-content: center; text-align: center; }
.sentio-hkb__content--right { justify-content: flex-end; text-align: right; }
.sentio-hkb__content--center .sentio-hkb__buttons { justify-content: center; }
.sentio-hkb__content--right .sentio-hkb__buttons { justify-content: flex-end; }

.sentio-hkb__content-inner { max-width: var(--hkb-content-max-w, 700px); }

.sentio-hkb__subtitle {
	font-size: 16px; font-weight: 600; color: var(--hkb-subtitle-color, rgba(255,255,255,0.85));
	margin: 0 0 12px; text-transform: uppercase; letter-spacing: 2px;
}
.sentio-hkb__title {
	font-size: 52px; font-weight: 800; color: var(--hkb-title-color, #fff);
	margin: 0 0 16px; line-height: 1.15;
}
.sentio-hkb__desc {
	font-size: 18px; color: var(--hkb-desc-color, rgba(255,255,255,0.8));
	margin: 0 0 28px; line-height: 1.6; max-width: var(--hkb-desc-max-w, 600px);
}
.sentio-hkb__buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.sentio-hkb__btn {
	display: inline-flex; align-items: center; padding: var(--hkb-btn-pad, 14px 36px);
	border-radius: var(--hkb-btn-radius, 8px); font-size: 16px; font-weight: 600;
	text-decoration: none; transition: all 0.3s ease; line-height: 1.2;
}
.sentio-hkb__btn--primary {
	background: var(--hkb-btn-bg, #fff); color: var(--hkb-btn-color, #111);
}
.sentio-hkb__btn--primary:hover { background: var(--hkb-btn-hover, #f0f0f0); transform: translateY(-2px); }
.sentio-hkb__btn--secondary {
	background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5);
}
.sentio-hkb__btn--secondary:hover { background: rgba(255,255,255,0.1); }

/* Content entrance animations */
@keyframes sentio-hkb-fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes sentio-hkb-slideLeft { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes sentio-hkb-scaleIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }

.sentio-hkb__slide--active .sentio-hkb__content-inner > * {
	opacity: 0; animation-fill-mode: forwards; animation-duration: 0.7s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.sentio-hkb[data-content-animation="fade-up"] .sentio-hkb__slide--active .sentio-hkb__content-inner > * { animation-name: sentio-hkb-fadeUp; }
.sentio-hkb[data-content-animation="slide-left"] .sentio-hkb__slide--active .sentio-hkb__content-inner > * { animation-name: sentio-hkb-slideLeft; }
.sentio-hkb[data-content-animation="scale"] .sentio-hkb__slide--active .sentio-hkb__content-inner > * { animation-name: sentio-hkb-scaleIn; }
.sentio-hkb[data-content-animation="none"] .sentio-hkb__slide--active .sentio-hkb__content-inner > * { opacity: 1; animation: none; }

.sentio-hkb__slide--active .sentio-hkb__subtitle { animation-delay: calc(var(--hkb-stagger, 100ms) * 0); }
.sentio-hkb__slide--active .sentio-hkb__title { animation-delay: calc(var(--hkb-stagger, 100ms) * 1); }
.sentio-hkb__slide--active .sentio-hkb__desc { animation-delay: calc(var(--hkb-stagger, 100ms) * 2); }
.sentio-hkb__slide--active .sentio-hkb__buttons { animation-delay: calc(var(--hkb-stagger, 100ms) * 3); }

/* Arrows */
.sentio-hkb__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
	width: var(--hkb-arrow-size, 48px); height: var(--hkb-arrow-size, 48px);
	border-radius: var(--hkb-arrow-radius, 50%);
	background: var(--hkb-arrow-bg, rgba(255,255,255,0.15));
	color: var(--hkb-arrow-color, #fff); border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; font-size: 20px;
	transition: background 0.2s, transform 0.2s;
}
.sentio-hkb__arrow:hover { background: rgba(255,255,255,0.3); }
.sentio-hkb__arrow--prev { left: 24px; }
.sentio-hkb__arrow--next { right: 24px; }

/* Dots */
.sentio-hkb__dots {
	position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10;
	display: flex; gap: 10px;
}
.sentio-hkb__dot {
	width: var(--hkb-dot-size, 10px); height: var(--hkb-dot-size, 10px);
	border-radius: 50%; background: var(--hkb-dot-color, rgba(255,255,255,0.4));
	border: none; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s;
}
.sentio-hkb__dot--active { background: var(--hkb-dot-active, #fff); transform: scale(1.3); }

/* Progress bar */
.sentio-hkb__progress {
	position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
	height: var(--hkb-progress-h, 3px); background: rgba(255,255,255,0.15);
}
.sentio-hkb__progress-bar {
	height: 100%; width: 0; background: var(--hkb-progress-color, #fff);
	transition: width 0.1s linear;
}

@media (max-width: 767px) {
	.sentio-hkb__title { font-size: 32px; }
	.sentio-hkb__desc { font-size: 15px; }
	.sentio-hkb__content { padding: 30px 20px; }
	.sentio-hkb__arrow { width: 40px; height: 40px; }
	.sentio-hkb__arrow--prev { left: 12px; }
	.sentio-hkb__arrow--next { right: 12px; }
}
