.inkyy-seq { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.inkyy-seq * { box-sizing: border-box; }
.inkyy-seq__pin { position: relative; width: 100%; height: var(--seq-h, 100vh); overflow: hidden; background: var(--seq-bg, #F1EFEA); }
.inkyy-seq__canvas { display: block; width: 100%; max-width: 100%; height: 100%; }
/* Loader markup was removed in v1.2.5. Keep these rules harmless in case an old cached shortcode still contains it. */
.inkyy-seq__loader { display: none !important; }
.inkyy-seq__bar { display: none !important; }

/* Beaver Builder row/section pin mode.
   Add .inkyy-seq-row-pin or .scroll-sequence-row-pin to the row, or use
   [scroll_sequence pin=".your-row-class"].

   Stable structure:
   .fl-row                         = ScrollTrigger trigger only
     .fl-row-content-wrap          = stable Beaver wrapper, not pinned
       .inkyy-seq-pin-shell        = neutral wrapper pinned by GSAP
         .inkyy-seq                = canvas/full viewport background layer
         .fl-row-content           = normal Beaver content above canvas

   GSAP should never pin .fl-row / .fl-row-content-wrap / .fl-row-content directly,
   because Beaver's own animation observer can retrigger fade-up columns when those
   wrappers are constantly rewritten during pin refresh/idle checks. */
.inkyy-seq-pin-target,
.inkyy-seq-visual-host {
	position: relative;
	min-height: var(--inkyy-seq-target-h, 100vh);
}

.inkyy-seq-visual-host {
	overflow: hidden;
}

.inkyy-seq-pin-shell,
.inkyy-seq-pinned-stage {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: var(--inkyy-seq-target-h, 100vh);
	min-height: 0;
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.inkyy-seq--external-pin {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	max-width: none;
	height: var(--inkyy-seq-target-h, 100vh);
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.inkyy-seq--external-pin .inkyy-seq__pin {
	width: 100%;
	height: 100%;
}

.inkyy-seq--external-pin .inkyy-seq__canvas {
	width: 100%;
	height: 100%;
	max-width: none;
}


/* Keep GSAP's generated spacer constrained to the row width. The spacer is still
   required for scroll distance, but it should not visually break outside the
   Beaver section or create horizontal overflow. */
.inkyy-seq-pin-spacer {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.inkyy-seq-content-host,
.inkyy-seq-pin-shell > .fl-row-content {
	position: relative;
	z-index: 2;
	height: auto;
	min-height: var(--inkyy-seq-target-h, 100vh);
}

/* Beaver's fade-up classes can restart when a pinned section is idle because
   Beaver re-checks viewport animations after scroll stop. Once the section has
   entered and its animation has had time to run, JS adds this class to freeze
   the final state and stop the bounce/glitch loop. */
.inkyy-seq-bb-anim-locked {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}

/* Optional explore-column animation targets. JS activates this only on desktop
   when .explore-left-wrap / .explore-col-right exist inside the pinned row. */
.inkyy-seq-row-pin .explore-left-wrap,
.scroll-sequence-row-pin .explore-left-wrap,
.inkyy-seq-row-pin .explore-col-left,
.scroll-sequence-row-pin .explore-col-left,
.inkyy-seq-row-pin .explore-col-right,
.scroll-sequence-row-pin .explore-col-right,
.inkyy-seq-row-pin .explore-text,
.scroll-sequence-row-pin .explore-text {
	will-change: transform, opacity;
	backface-visibility: hidden;
}


/* Mobile/off breakpoint: the shortcode stays harmless below 768px.
   JS also skips initialization here, so no frame preload, no pin-spacer and no
   Beaver DOM moves happen on mobile. */
@media (max-width: 767px) {
	.inkyy-seq,
	.inkyy-seq--mobile-disabled {
		display: none !important;
	}

	.inkyy-seq-pin-target,
	.inkyy-seq-visual-host,
	.inkyy-seq-pin-shell,
	.inkyy-seq-pinned-stage {
		min-height: 0 !important;
	}
}


/* Optional end-state enhancement: slightly oversized canvas for subtle mouse parallax. */
.inkyy-seq--canvas-parallax .inkyy-seq__pin {
	position: relative;
}

.inkyy-seq--canvas-parallax .inkyy-seq__canvas {
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: none;
	will-change: transform;
	backface-visibility: hidden;
	transform: translate3d(calc(-50% + var(--inkyy-parallax-x, 0px)), -50%, 0);
}

/* Animated cloud overlay that fades in only at the bottom of the sequence.
   The clouds are separate DOM layers placed above the canvas and below Beaver content. */
.inkyy-seq-clouds-stage {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--inkyy-cloud-stage-bottom, -4rem);
	width: 100%;
	height: 30rem;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.28s ease;
	will-change: opacity;
	contain: paint;
	transform: translateZ(0);
}

.inkyy-seq-clouds-stage::before {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 6vw;
	background-image: linear-gradient(to top, #F6F4F2, transparent);
	z-index: 20;
	pointer-events: none;
}

.inkyy-seq-clouds-stage.is-active {
	opacity: 1;
}

.inkyy-seq-clouds-layer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--inkyy-cloud-bottom, 0);
	height: var(--inkyy-cloud-height, 28rem);
	z-index: var(--inkyy-cloud-z, 9);
	overflow: hidden;
	opacity: var(--inkyy-cloud-opacity, 1);
}

.inkyy-seq-clouds-layer-1 {
	--inkyy-cloud-speed: 65s;
	--inkyy-cloud-delay: 0s;
	--inkyy-cloud-z: 9;
	--inkyy-cloud-bottom: 0;
}

.inkyy-seq-clouds-layer-2 {
	--inkyy-cloud-speed: 78s;
	--inkyy-cloud-delay: -24s;
	--inkyy-cloud-z: 10;
	--inkyy-cloud-bottom: 1.5rem;
}

.inkyy-seq-clouds-layer-3 {
	--inkyy-cloud-speed: 54s;
	--inkyy-cloud-delay: -38s;
	--inkyy-cloud-z: 12;
	--inkyy-cloud-bottom: -1rem;
}

.inkyy-seq-clouds-track {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: flex-start;
	width: max-content;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	animation: none !important;
}

.inkyy-seq-cloud {
	position: relative;
	display: block;
	flex: 0 0 auto;
	max-width: none;
	opacity: 1;
	user-select: none;
	pointer-events: none;
	animation: none !important;
	will-change: transform;
	backface-visibility: hidden;
}

.inkyy-seq-cloud-1 {
	width: 64rem;
	margin-right: -18rem;
	margin-top: 0;
	z-index: 4;
}

.inkyy-seq-cloud-2 {
	width: 58rem;
	margin-right: -16rem;
	margin-top: 0.8rem;
	z-index: 2;
}

.inkyy-seq-cloud-3 {
	width: 70rem;
	margin-right: -20rem;
	margin-top: 0.2rem;
	z-index: 3;
}

.inkyy-seq-cloud-4 {
	width: 62rem;
	margin-right: -14rem;
	margin-top: 1rem;
	z-index: 1;
}

@keyframes inkyySeqCloudsInfinity {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
	.inkyy-seq-clouds-stage {
		display: none !important;
	}
}

/* Simulated mix-blend contrast for text that sits above the canvas.
   JS samples the actual canvas pixels behind each character/word and toggles this class
   only when the background under that piece of text is dark. */
.inkyy-seq-content-host .explore-col-left .fl-animated-text .inkyy-seq-pixel-contrast-target,
.inkyy-seq-content-host .explore-col-right .fl-animated-text .inkyy-seq-pixel-contrast-target {
	transition: color 0.08s linear, -webkit-text-fill-color 0.08s linear;
}

.inkyy-seq-content-host .explore-col-left .fl-animated-text .inkyy-seq-pixel-dark,
.inkyy-seq-content-host .explore-col-right .fl-animated-text .inkyy-seq-pixel-dark,
.inkyy-seq-content-host .explore-col-left .fl-animated-text .inkyy-seq-pixel-dark *,
.inkyy-seq-content-host .explore-col-right .fl-animated-text .inkyy-seq-pixel-dark * {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}