/* เส้นคลื่นเสียง — ลายเซ็นของแบรนด์
   ความยาวเส้นคำนวณมาจาก PHP แล้วส่งมาทาง --tw-wave-len
   จึงตั้ง stroke-dasharray ได้ถูกตั้งแต่เฟรมแรก ไม่ต้องรอ JS วัด */

.tw-wave {
	width: 100%;
	line-height: 0;
}

.tw-wave svg {
	display: block;
	width: 100%;
	height: var(--tw-wave-h, 60px);
	overflow: visible;
}

.tw-wave path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tw-wave--flip {
	transform: scaleX(-1);
}

/* ---- อนิเมชันลากเส้น ---- */
.tw-wave--anim path {
	stroke-dasharray: var(--tw-wave-len, 2400);
	stroke-dashoffset: var(--tw-wave-len, 2400);
}

@keyframes tw-wave-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* วาดทันทีที่เปิดหน้า — ใช้กับ hero */
.tw-wave--load path {
	animation: tw-wave-draw var(--tw-wave-dur, 2.2s) ease-out .25s forwards;
}

/* วาดตอนเลื่อนมาถึง — คลาส is-drawn มาจาก tewan-wave.js */
.tw-wave--view.is-drawn path {
	animation: tw-wave-draw var(--tw-wave-dur, 2.2s) ease-out forwards;
}

/* ถ้า JS ไม่ทำงาน เส้นต้องยังเห็นครบ ไม่ใช่หายไปทั้งเส้น */
.tw-wave--view.tw-wave--nojs path {
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tw-wave--anim path {
		stroke-dashoffset: 0;
		animation: none;
	}
}

@media print {
	.tw-wave--anim path {
		stroke-dashoffset: 0;
		animation: none;
	}
}