/* [db8dd01c] Dải lụa "vẽ bằng đầu bút" dùng chung (silk-draw.js) — nhịp y lụa màn đầu (.ribbon-draw / .ribbon-full / .rb-sway / .rb-sheen trong index.html) */
.sd { position: absolute; overflow: visible; pointer-events: none; }
.sd__draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sd__full { opacity: 0; }
.sd.is-go .sd__draw { animation: sd-draw 2.8s cubic-bezier(.6, .05, .25, 1) forwards; }
/* mũi bút: nét mảnh (cuối) đi trước, nét rộng (đầu) theo sau — cùng độ lệch như màn đầu */
.sd.is-go .sd__draw:nth-child(1) { animation-delay: .24s; } .sd.is-go .sd__draw:nth-child(2) { animation-delay: .18s; }
.sd.is-go .sd__draw:nth-child(3) { animation-delay: .12s; } .sd.is-go .sd__draw:nth-child(4) { animation-delay: .06s; }
.sd.is-go .sd__full { animation: sd-rise .5s ease-out 2.94s forwards; } /* nét mặt nạ chạy hết → mở toàn bộ, không cắt sợi nào */
.sd__sheen { mix-blend-mode: screen; }
.sd.is-live .sd__sway { transform-box: fill-box; transform-origin: center; animation: sd-sway 9s ease-in-out infinite; }
.sd.is-live .sd__sheen { animation: sd-drift 6.4s ease-in-out infinite; }
.sd.is-off :is(.sd__sway, .sd__sheen) { animation-play-state: paused; }
@keyframes sd-draw { to { stroke-dashoffset: 0; } }
@keyframes sd-rise { to { opacity: 1; } }
/* khung đầu/cuối = vị trí gốc → bắt đầu lượn liền mạch, không giật */
@keyframes sd-sway { 25% { transform: translate(0, -2.5px) rotate(-.25deg); } 75% { transform: translate(0, 2.5px) rotate(.25deg); } }
@keyframes sd-drift { 25% { transform: translate(-2px, 1px); } 75% { transform: translate(2px, -1px); } }
@media (prefers-reduced-motion: reduce) { .sd__draw { stroke-dashoffset: 0; } .sd__full { opacity: 1; } .sd__sheen { display: none; } }