/* DSD37 序列帧动画 - Elementor HTML 组件 */

.dsd37-anim-root {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0;
	line-height: 0;
}

.dsd37-anim-root .sequence-section {
	width: 100%;
	position: relative;
	background: transparent;
	margin: 0;
	padding: 0;
	height: 400vh;
	line-height: 0;
}

.dsd37-anim-root .sequence-section[data-scroll-height="600"] {
	height: 600vh;
}

.dsd37-anim-root .sequence-section[data-scroll-height="400"] {
	height: 400vh;
}

.dsd37-anim-root .sequence-section[data-scroll-height="500"] {
	height: 500vh;
}

.dsd37-anim-root .sequence-section .sequence-image-wrapper,
.dsd37-anim-root .sequence-section [class$="-image-wrapper"] {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	line-height: 0;
	overflow: hidden;
}

.dsd37-anim-root .anim1-image-wrapper {
	position: sticky;
	top: 0;
}

.dsd37-anim-root .anim1-overlay-title {
	position: absolute;
	left: 50%;
	right: auto;
	top: 52%;
	transform: translateY(-50%);
	z-index: 2;
	/* 按设计图：字高约 3.9vh，从画面中线起，避免盖住产品 */
	font-size: clamp(22px, 4.8vh, 48px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: #ffffff;
	text-align: left;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.75);
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	pointer-events: none;
	white-space: nowrap;
	max-width: 48%;
}

/* DS478B anim1：右侧文案再靠右一点，与光环留出间隙 */
.dsd37-anim-root[data-asset-pack="ds478b-anim"] .anim1-overlay-title {
	left: 60%;
	font-size: clamp(22px, 4.7vh, 46px);
}

.dsd37-anim-root .anim1-overlay-title.visible {
	opacity: 1;
}

.dsd37-anim-root .anim1-overlay-title.hidden {
	opacity: 0;
}

/* DSD37 固定文案层 — 比例按参考图 1024×479 实测 */
.dsd37-anim-root .dsd37-overlay-copy {
	position: absolute;
	z-index: 3;
	left: 9.8%;
	width: 34%;
	max-width: 34%;
	color: #000;
	pointer-events: none;
	text-align: left;
	line-height: normal;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	opacity: 0;
	transform: translate3d(0, 32px, 0);
	transition:
		opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

/* anim1：标题顶约 38.8%（仅 DSD37，避免与 DS478B #anim3 冲突） */
.dsd37-anim-root:not([data-asset-pack]) #anim1 .dsd37-overlay-copy--left {
	top: 38.8%;
}

/* anim3：标题顶约 28%（仅 DSD37） */
.dsd37-anim-root:not([data-asset-pack]) #anim3 .dsd37-overlay-copy--left {
	top: 28%;
}

.dsd37-anim-root .dsd37-overlay-heading {
	margin: 0 0 1.15em;
	padding: 0;
	font-size: clamp(22px, 5.6vh, 64px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	color: #000;
}

.dsd37-anim-root .dsd37-overlay-text {
	margin: 0;
	padding: 0;
	font-size: clamp(11px, 2.1vh, 24px);
	font-weight: 400;
	line-height: 1.45;
	color: #000;
}

/* FLAVOR 徽章：右缘约 19%，顶约 29.2%，高约 7.7vh，间距约 5vh */
.dsd37-anim-root .dsd37-overlay-flavors {
	position: absolute;
	right: 19.1%;
	top: 29.2%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 5vh;
	pointer-events: none;
	line-height: 1;
}

.dsd37-anim-root .dsd37-overlay-flavor {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 7.7vh;
	min-width: 12.5vw;
	padding: 0 1.4em;
	border-radius: 999px;
	background: #2ad4f0;
	box-shadow:
		0 0 12px 4px rgba(42, 212, 240, 0.85),
		0 0 28px 8px rgba(42, 212, 240, 0.45);
	color: #fff;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(10px, 2.5vh, 18px);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	white-space: nowrap;
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition:
		opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.dsd37-anim-root .dsd37-overlay-flavor:nth-child(1) {
	transition-delay: 0.12s;
}

.dsd37-anim-root .dsd37-overlay-flavor:nth-child(2) {
	transition-delay: 0.22s;
}

.dsd37-anim-root .dsd37-overlay-flavor:nth-child(3) {
	transition-delay: 0.32s;
}

/* fade-up 入场 */
.dsd37-anim-root .sequence-section.dsd37-overlays-in .dsd37-overlay-copy,
.dsd37-anim-root .sequence-section.dsd37-overlays-in .dsd37-overlay-flavor {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* —— DS478B 白字文案（按参考图像素） —— */
.dsd37-anim-root .dsd37-overlay-copy--light,
.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-heading,
.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-text {
	color: #fff;
}

.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-heading {
	font-size: clamp(22px, 3.8vh, 52px);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0.7em;
}

.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-text {
	font-size: clamp(12px, 1.85vh, 20px);
	line-height: 1.55;
	font-weight: 400;
}

/* anim2：顶部居中（避开固定导航） */
.dsd37-anim-root .dsd37-overlay-copy--center-top {
	left: 50%;
	top: max(96px, 14%);
	width: 72%;
	max-width: 72%;
	text-align: center;
	transform: translate3d(-50%, 32px, 0);
}

.dsd37-anim-root .sequence-section.dsd37-overlays-in .dsd37-overlay-copy--center-top {
	transform: translate3d(-50%, 0, 0);
}

.dsd37-anim-root .dsd37-overlay-copy--center-top .dsd37-overlay-text {
	margin-left: auto;
	margin-right: auto;
	max-width: 92%;
}

/* anim3 / anim4：右侧左对齐 */
.dsd37-anim-root .dsd37-overlay-copy--right {
	left: auto;
	text-align: left;
}

.dsd37-anim-root[data-asset-pack="ds478b-anim"] [data-animation="anim3"] .dsd37-overlay-copy--right {
	right: 17%;
	top: auto;
	bottom: 5rem;
	width: 30%;
	max-width: 30%;
}

.dsd37-anim-root[data-asset-pack="ds478b-anim"] [data-animation="anim4"] .dsd37-overlay-copy--right {
	right: 12%;
	top: 38.6%;
	width: 36%;
	max-width: 36%;
}

.dsd37-anim-root[data-asset-pack="ds478b-anim"] [data-animation="anim4"] .dsd37-overlay-copy--light .dsd37-overlay-text {
	max-width: 18em;
}

@media (prefers-reduced-motion: reduce) {
	.dsd37-anim-root .dsd37-overlay-copy,
	.dsd37-anim-root .dsd37-overlay-flavor {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.dsd37-anim-root .dsd37-overlay-copy--center-top {
		transform: translate3d(-50%, 0, 0);
	}
}

/* —— 平板 —— */
@media (max-width: 1024px) {
	.dsd37-anim-root[data-asset-pack="ds478b-anim"] .anim1-overlay-title {
		left: 55%;
		font-size: clamp(20px, 3.6vh, 36px);
		max-width: 42%;
	}

	.dsd37-anim-root[data-asset-pack="ds478b-anim"] [data-animation="anim3"] .dsd37-overlay-copy--right {
		right: 6%;
		width: 42%;
		max-width: 42%;
		top: auto;
		bottom: 5rem;
	}

	.dsd37-anim-root[data-asset-pack="ds478b-anim"] [data-animation="anim4"] .dsd37-overlay-copy--right {
		right: 6%;
		width: 42%;
		max-width: 42%;
	}

	.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-heading {
		font-size: clamp(18px, 3.2vh, 36px);
	}

	.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-text {
		font-size: clamp(12px, 1.7vh, 16px);
	}
}

/* —— 手机 —— */
@media (max-width: 767px) {
	/* 避免 100vw 横向溢出 */
	.dsd37-anim-root {
		width: 100%;
		max-width: 100%;
		left: 0;
		right: 0;
		margin-left: 0;
		margin-right: 0;
	}

	/* 手机滚动段缩短，减少刷屏感 */
	.dsd37-anim-root .sequence-section[data-scroll-height="600"] {
		height: 320vh;
	}

	.dsd37-anim-root .sequence-section[data-scroll-height="500"] {
		height: 280vh;
	}

	.dsd37-anim-root .sequence-section[data-scroll-height="400"] {
		height: 240vh;
	}

	.dsd37-anim-root .sequence-image {
		object-position: center center;
	}

	.dsd37-anim-root .dsd37-overlay-copy {
		left: 4%;
		width: 92%;
		max-width: 92%;
	}

	.dsd37-anim-root:not([data-asset-pack]) #anim1 .dsd37-overlay-copy--left {
		top: 12%;
	}

	.dsd37-anim-root:not([data-asset-pack]) #anim3 .dsd37-overlay-copy--left {
		top: 10%;
	}

	.dsd37-anim-root .dsd37-overlay-heading {
		font-size: clamp(18px, 4.2vh, 36px);
		margin-bottom: 0.7em;
	}

	.dsd37-anim-root .dsd37-overlay-text {
		font-size: clamp(11px, 1.8vh, 16px);
	}

	.dsd37-anim-root .dsd37-overlay-flavors {
		right: 4%;
		top: auto;
		bottom: 10%;
		gap: 1.8vh;
	}

	.dsd37-anim-root .dsd37-overlay-flavor {
		height: 4.8vh;
		min-width: 0;
		font-size: clamp(9px, 1.8vh, 13px);
	}

	/* DS478B anim1 标题：底部居中，避免盖住产品 */
	.dsd37-anim-root .anim1-overlay-title,
	.dsd37-anim-root[data-asset-pack="ds478b-anim"] .anim1-overlay-title {
		left: 50%;
		right: auto;
		top: auto;
		bottom: max(18px, 8%);
		transform: translateX(-50%);
		width: 90%;
		max-width: 90%;
		text-align: center;
		white-space: normal;
		font-size: clamp(18px, 5.2vw, 26px);
		line-height: 1.2;
	}

	/* anim2：顶部居中文案 */
	.dsd37-anim-root .dsd37-overlay-copy--center-top {
		top: max(64px, 9%);
		width: 92%;
		max-width: 92%;
		padding: 0 2%;
		box-sizing: border-box;
	}

	.dsd37-anim-root .dsd37-overlay-copy--center-top .dsd37-overlay-heading {
		font-size: clamp(18px, 5vw, 26px);
		line-height: 1.25;
		margin-bottom: 0.55em;
	}

	.dsd37-anim-root .dsd37-overlay-copy--center-top .dsd37-overlay-text {
		font-size: clamp(11px, 3.2vw, 14px);
		line-height: 1.45;
		max-width: 100%;
	}

	/* anim3：底部通栏，距底 5rem，避免挡产品 */
	.dsd37-anim-root[data-asset-pack="ds478b-anim"] [data-animation="anim3"] .dsd37-overlay-copy--right {
		left: 4%;
		right: 4%;
		width: auto;
		max-width: none;
		top: auto;
		bottom: 5rem;
		text-align: left;
	}

	/* anim4：顶部通栏，可读且不挡主体 */
	.dsd37-anim-root[data-asset-pack="ds478b-anim"] [data-animation="anim4"] .dsd37-overlay-copy--right {
		left: 4%;
		right: 4%;
		width: auto;
		max-width: none;
		top: max(68px, 10%);
		text-align: left;
	}

	.dsd37-anim-root[data-asset-pack="ds478b-anim"] [data-animation="anim4"] .dsd37-overlay-copy--light .dsd37-overlay-text {
		max-width: none;
	}

	.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-heading {
		font-size: clamp(16px, 4.6vw, 24px);
		line-height: 1.25;
		margin-bottom: 0.5em;
	}

	.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-text {
		font-size: clamp(11px, 3.3vw, 14px);
		line-height: 1.45;
	}

	/* 手机端文案可读性：轻微阴影底 */
	.dsd37-anim-root[data-asset-pack="ds478b-anim"] .dsd37-overlay-copy--light {
		text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
	}

	.dsd37-anim-root[data-asset-pack="ds478b-anim"] .anim1-overlay-title {
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
	}
}

/* 超小屏再收紧 */
@media (max-width: 380px) {
	.dsd37-anim-root[data-asset-pack="ds478b-anim"] .anim1-overlay-title {
		font-size: clamp(16px, 4.8vw, 22px);
		bottom: max(14px, 6%);
	}

	.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-heading {
		font-size: clamp(15px, 4.4vw, 20px);
	}

	.dsd37-anim-root .dsd37-overlay-copy--light .dsd37-overlay-text {
		font-size: clamp(10px, 3.1vw, 13px);
	}
}

.dsd37-anim-root .sequence-image {
	width: 100%;
	min-width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	aspect-ratio: unset !important;
}

/* Elementor HTML 组件：去掉内边距并允许全宽 */
.elementor-widget-html:has(.dsd37-anim-root) {
	width: 100% !important;
	max-width: none !important;
}

.elementor-widget-html:has(.dsd37-anim-root) .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

.elementor-column:has(.dsd37-anim-root),
.elementor-container:has(.dsd37-anim-root) {
	max-width: 100% !important;
}

/* Elementor 编辑器：压缩超高滚动段，避免画布卡死/图片抢连接 */
.elementor-editor-active .dsd37-anim-root .sequence-section,
.elementor-editor-preview .dsd37-anim-root .sequence-section,
.dsd37-anim-root .sequence-section.dsd37-editor-preview {
	height: 100vh !important;
	height: 100dvh !important;
	min-height: 320px;
}

.elementor-editor-active .dsd37-anim-root .dsd37-overlay-copy,
.elementor-editor-active .dsd37-anim-root .dsd37-overlay-flavor,
.elementor-editor-preview .dsd37-anim-root .dsd37-overlay-copy,
.elementor-editor-preview .dsd37-anim-root .dsd37-overlay-flavor,
.dsd37-anim-root .sequence-section.dsd37-editor-preview .dsd37-overlay-copy,
.dsd37-anim-root .sequence-section.dsd37-editor-preview .dsd37-overlay-flavor {
	opacity: 1;
	transform: none;
}

.elementor-editor-active .dsd37-anim-root .dsd37-overlay-copy--center-top,
.elementor-editor-preview .dsd37-anim-root .dsd37-overlay-copy--center-top,
.dsd37-anim-root .sequence-section.dsd37-editor-preview .dsd37-overlay-copy--center-top {
	transform: translate3d(-50%, 0, 0);
}