/* Slalom Skier — kabdalis2 design system. The block wrapper is invisible in the flow; view.js appends .kab2-ski-layer (fixed, full-width, zero-height, on top of everything, click-through) to and animates .kab2-ski inside it. */ .kabdalis-slalom-skier{ display: none; } /* Editor placeholder so the block is visible/selectable in the canvas */ .kabdalis-slalom-skier--editor{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--line, #c9c9c9); border-radius: var(--radius-sm, 8px); background: var(--surface2, #f5f5f5); } .kabdalis-slalom-skier__editor-icon{ font-size: 22px; } .kabdalis-slalom-skier__editor-note{ font-size: 12px; color: var(--muted, #777); line-height: 1.4; } .kab2-ski-layer{ position: fixed; left: 0; right: 0; bottom: 0; height: 0; overflow: visible; pointer-events: none; z-index: 2147483000; } .kab2-ski{ position: absolute; bottom: 3px; left: 0; will-change: transform; transform-origin: 50% 82%; color: var(--ink, #243648); opacity: .92; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); } .kab2-ski svg{ display: block; width: 100%; height: auto; overflow: visible; } /* Posture states — view.js toggles .is-fast / .is-air on .kab2-ski. Origin at the feet so the skis stay planted while the body crouches. */ .kab2-ski .ski-figure{ transition: transform .28s cubic-bezier(.3, .7, .3, 1); transform-origin: 36px 46px; transform-box: view-box; } .kab2-ski.is-fast .ski-figure{ /* deeper tuck: lower and slightly forward into the wind */ transform: translateX(1.5px) scaleY(.88); } .kab2-ski.is-air .ski-figure{ /* open up in the air before re-tucking on landing */ transform: scaleY(1.05); } /* Speed streaks behind the skier, only visible at speed */ .kab2-ski .ski-wind{ opacity: 0; transition: opacity .25s ease; } .kab2-ski.is-fast .ski-wind{ opacity: .3; } /* Scarf flutters harder at speed */ .kab2-ski .ski-scarf{ transform-origin: 46px 12px; transform-box: view-box; } .kab2-ski.is-fast .ski-scarf{ animation: kab2-scarf-flutter .5s ease-in-out infinite alternate; } @keyframes kab2-scarf-flutter{ from{ transform: rotate(-4deg); } to{ transform: rotate(7deg); } } .kab2-ski-snow{ position: absolute; border-radius: 50%; /* Snow over arbitrary page backgrounds — scoped token with snowy default */ background: var(--kab2-ski-snow, #e9f3fa); box-shadow: 0 0 2px rgba(255, 255, 255, .8); will-change: transform, opacity; } @media (prefers-reduced-motion: reduce){ .kab2-ski-layer{ display: none; } }