.ui-crew { --cw-ink: var(--ink); --cw-head: var(--card); --cw-sail: var(--highlight); --cw-acc: var(--highlight); }
.ui-crew svg { display: block; width: 100%; height: auto; overflow: visible; }
.ui-cameo { display: inline-block; flex: 0 0 auto; }
.ui-cameo svg { display: block; width: 100%; height: auto; overflow: visible; }

.cw-ink { stroke: var(--cw-ink); }
.cw-fill-ink { fill: var(--cw-ink); }
.cw-head { fill: var(--cw-head); stroke: var(--cw-ink); }
.cw-sail { fill: var(--cw-sail); stroke: var(--cw-ink); }
.cw-acc { fill: var(--cw-acc); }
.cw-acc-line { stroke: var(--cw-acc); }
.cw-acc-ink { fill: var(--cw-acc); stroke: var(--cw-ink); }
.cw-water-line { stroke: var(--ink-2); }
.cw-card-ink { stroke: #0b0d0c; }
.cw-card-text { font: 700 10.5px var(--sans); fill: #0b0d0c; }
.cw-card-text--small { font-size: 10px; }
.cw-stripe { fill: var(--stripe); }

.cw-bob { transform-box: view-box; transform-origin: 270px 285px; animation: cwbob 6s ease-in-out infinite; }
@keyframes cwbob { 0%, 100% { transform: rotate(-1.4deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(-3px); } }
.cw-glass { transform-box: view-box; transform-origin: 256px 64px; animation: cwglass 7s ease-in-out infinite; }
@keyframes cwglass { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.cw-wave { transform-box: view-box; transform-origin: 304px 220px; animation: cwwave 2.6s ease-in-out infinite; }
@keyframes cwwave { 0%, 60%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-22deg); } 30% { transform: rotate(8deg); } }
.cw-reel { animation: cwreel 4.2s ease-in-out infinite; }
@keyframes cwreel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cw-toss { transform-box: fill-box; transform-origin: center; animation: cwtoss 7s ease-in-out infinite; }
@keyframes cwtoss {
  0%, 18% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(-38px, -24px) rotate(-30deg); opacity: 1; }
  72% { transform: translate(-78px, 66px) rotate(-80deg); opacity: 1; }
  82%, 100% { transform: translate(-80px, 76px) rotate(-90deg); opacity: 0; }
}
.cw-splash { transform-box: fill-box; transform-origin: center; animation: cwsplash 7s ease-out infinite; }
@keyframes cwsplash { 0%, 72% { transform: scale(0.2); opacity: 0; } 78% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.cw-water { animation: cwwater 8s linear infinite; }
@keyframes cwwater { from { transform: translateX(0); } to { transform: translateX(-80px); } }

.mini-glass { transform-box: view-box; transform-origin: 35px 34px; animation: cwglass 7s ease-in-out infinite; }
.mini-wave { transform-box: view-box; transform-origin: 35px 34px; animation: cwwave 2.6s ease-in-out infinite; }
.mini-hold { animation: cwreel 4.2s ease-in-out infinite; }

.t-drop { transform-box: fill-box; transform-origin: center; animation: tdrop 2.4s ease-in 0.6s 1 both; }
@keyframes tdrop { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { transform: translate(-5px, 30px) rotate(-28deg); opacity: 1; } 100% { transform: translate(-6px, 38px) rotate(-34deg); opacity: 0; } }
.t-splash { transform-box: fill-box; transform-origin: center; animation: tsplash 1.2s ease-out 2.3s 1 both; }
@keyframes tsplash { 0% { transform: scale(0.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.t-water { animation: cwwater 8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .t-drop { opacity: 1; transform: none; } .t-splash { opacity: 0; } }