/* 12 · VOYAGER CANVAS — webbing, D-rings, tag plate, fabric breathing */
.variant-voyager.active { animation: voyager-sway 6s ease-in-out infinite; }
.voyager-waist { background: repeating-linear-gradient(90deg, #a89a78 0 12px, #8a7c5c 12px 16px); border: 2px solid #2e2a20; border-radius: 50%; box-shadow: 0 14px 26px rgba(0,0,0,0.5); height: 90px; left: 48px; position: absolute; top: 56px; width: 244px; }
.voyager-dring { animation: voyager-ring-clink 4s ease-in-out infinite; border: 5px solid #9aa7b4; border-radius: 50%; height: 34px; position: absolute; top: 24px; width: 34px; }
.voyager-dring.vd1 { left: 60px; } .voyager-dring.vd2 { animation-delay: 2s; right: 60px; }
.voyager-pack { background: linear-gradient(165deg, #b3a582 0%, #8a7c5c 45%, #57503e 100%); border: 2px solid #2e2a20; border-radius: 36px 36px 60px 60px / 26px 26px 84px 84px; box-shadow: 0 22px 32px rgba(0,0,0,0.5); height: 228px; left: 104px; overflow: hidden; position: absolute; top: 118px; width: 132px; }
.voyager-fabric { animation: asylum-fabric-breathe 4.5s ease-in-out infinite; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(46,42,32,0.16) 9px 11px); inset: 0; position: absolute; }
.voyager-webbing { background: linear-gradient(180deg, #6e6350, #3f3a2e); border: 1px solid #2e2a20; border-radius: 5px; height: 180px; left: 20px; position: absolute; top: 22px; width: 22px; }
.voyager-webbing.vw2 { left: auto; right: 20px; }
.voyager-tag { animation: asylum-tag-swing 5s ease-in-out infinite; background: linear-gradient(135deg, #dfe7ed, #7d8892); border: 1px solid #2e2a20; border-radius: 4px; color: #23282d; font-family: var(--mono); font-size: 0.6rem; left: 50%; letter-spacing: 0.1em; padding: 4px 8px; position: absolute; top: 60px; transform: translateX(-50%); transform-origin: top center; }
@keyframes voyager-sway { 0%, 100% { transform: rotate(1deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-9px); } }
@keyframes voyager-ring-clink { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }