.os-bw-kinetic{position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:none;visibility:hidden;background:var(--os-bg);color:var(--os-text)}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic{visibility:visible}.os-bw-kinetic__wash{position:absolute;inset:0;transform:translateY(102%);background:radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--os-b) 36%,transparent),transparent 34%),linear-gradient(135deg,var(--os-bg),color-mix(in srgb,var(--os-bg) 82%,var(--os-b)))}.os-bw-kinetic__rows{position:absolute;inset:0;display:grid;align-content:center;gap:clamp(6px,1.2vw,16px);opacity:0;transform:rotate(-4deg) scale(1.08)}.os-bw-kinetic-row{width:max-content;white-space:nowrap;font-size:clamp(58px,12vw,170px);line-height:.78;font-weight:950;letter-spacing:-.095em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--os-text) 34%,transparent);opacity:.82}.os-bw-kinetic-row:nth-child(odd){transform:translate(-20%)}.os-bw-kinetic-row:nth-child(2n){transform:translate(-4%);color:color-mix(in srgb,var(--os-text) 10%,transparent)}.os-bw-kinetic__cut{position:absolute;inset:0;display:grid;grid-template-rows:repeat(5,1fr);opacity:0}.os-bw-kinetic-slice{background:color-mix(in srgb,var(--os-b) 86%,var(--os-bg));transform:scaleX(0);transform-origin:left}.os-bw-kinetic-slice:nth-child(2n){transform-origin:right;background:color-mix(in srgb,var(--os-text) 12%,var(--os-bg))}.os-bw-kinetic__headline{position:absolute;left:50%;top:50%;width:min(900px,calc(100vw - 36px));transform:translate(-50%,-44%);text-align:center;opacity:0}.os-bw-kinetic__headline strong{color:var(--os-title, var(--os-text))}.os-bw-kinetic__headline span{display:block;margin-bottom:14px;color:var(--os-eyebrow, var(--os-b));font-size:12px;font-weight:950;letter-spacing:.18em;text-transform:uppercase}.os-bw-kinetic__headline strong{display:block;font-size:clamp(46px,10vw,132px);line-height:.82;letter-spacing:-.1em;text-transform:uppercase}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic__wash{animation:washInOut calc(var(--os-speed, 1) * var(--os-x-kineticText, 1) * 1.32s) var(--os-ease) both}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic__rows{animation:rowsReveal calc(var(--os-speed, 1) * var(--os-x-kineticText, 1) * 1.32s) var(--os-ease) both}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic-row:nth-child(odd){animation:marqueeLeft calc(var(--os-speed, 1) * var(--os-x-kineticText, 1) * 1.32s) var(--os-ease) both}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic-row:nth-child(2n){animation:marqueeRight calc(var(--os-speed, 1) * var(--os-x-kineticText, 1) * 1.32s) var(--os-ease) both}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic__cut{animation:cutOpacity calc(var(--os-speed, 1) * .9s) ease calc(var(--os-speed, 1) * .23s) both}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic-slice{animation:sliceCut calc(var(--os-speed, 1) * .78s) var(--os-ease) var(--slice-delay) both}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic__headline{animation:headlinePop calc(var(--os-speed, 1) * .94s) var(--os-ease) calc(var(--os-speed, 1) * .26s) both}.os-bw-kinetic-slice:nth-child(1){--slice-delay: calc(var(--os-speed, 1) * 0ms)}.os-bw-kinetic-slice:nth-child(2){--slice-delay: calc(var(--os-speed, 1) * 70ms)}.os-bw-kinetic-slice:nth-child(3){--slice-delay: calc(var(--os-speed, 1) * .11s)}.os-bw-kinetic-slice:nth-child(4){--slice-delay: calc(var(--os-speed, 1) * .15s)}.os-bw-kinetic-slice:nth-child(5){--slice-delay: calc(var(--os-speed, 1) * .19s)}@keyframes washInOut{0%{transform:translateY(102%)}30%,72%{transform:translateY(0)}to{transform:translateY(-102%)}}@keyframes rowsReveal{0%,to{opacity:0}22%,78%{opacity:1}}@keyframes marqueeLeft{0%{transform:translate(-34%)}72%{transform:translate(-18%)}to{transform:translate(-7%)}}@keyframes marqueeRight{0%{transform:translate(8%)}72%{transform:translate(-10%)}to{transform:translate(-24%)}}@keyframes cutOpacity{0%,to{opacity:0}24%,70%{opacity:1}}@keyframes sliceCut{0%{transform:scaleX(0)}42%,66%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes headlinePop{0%,to{opacity:0;transform:translate(-50%,-38%) scale(.95);filter:blur(8px)}30%,74%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}@media(max-width:640px){.demo-shell{padding:18px}.demo-panel{border-radius:24px}.demo-link{width:100%}.os-bw-kinetic-row{font-size:72px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:calc(var(--os-speed, 1) * 1ms)!important;transition-duration:calc(var(--os-speed, 1) * 1ms)!important}}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic__wash{animation-name:washCover}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic__rows{animation-name:rowsCover}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic-row:nth-child(odd){animation-name:marqueeLeftCover}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic-row:nth-child(2n){animation-name:marqueeRightCover}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic__cut{animation-name:cutCover}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic-slice{animation-name:sliceCover}.os-bw-stage--kinetic.os-bw--cover .os-bw-kinetic__headline{animation-name:headlineCover}.os-bw-stage--kinetic.os-bw--reveal .os-bw-kinetic__wash{animation:washReveal calc(var(--os-speed, 1) * var(--os-x-kineticText, 1) * .37s) var(--os-ease) both}.os-bw-stage--kinetic.os-bw--reveal .os-bw-kinetic__rows{animation:rowsRevealOut calc(var(--os-speed, 1) * var(--os-x-kineticText, 1) * .29s) var(--os-ease) both}.os-bw-stage--kinetic.os-bw--reveal .os-bw-kinetic-row:nth-child(odd){animation:marqueeLeftReveal calc(var(--os-speed, 1) * var(--os-x-kineticText, 1) * .37s) var(--os-ease) both}.os-bw-stage--kinetic.os-bw--reveal .os-bw-kinetic-row:nth-child(2n){animation:marqueeRightReveal calc(var(--os-speed, 1) * var(--os-x-kineticText, 1) * .37s) var(--os-ease) both}.os-bw-stage--kinetic.os-bw--reveal .os-bw-kinetic__cut{animation:cutReveal calc(var(--os-speed, 1) * .27s) ease both}.os-bw-stage--kinetic.os-bw--reveal .os-bw-kinetic-slice{animation:sliceReveal calc(var(--os-speed, 1) * 265ms) var(--os-ease) var(--slice-delay) both}.os-bw-stage--kinetic.os-bw--reveal .os-bw-kinetic__headline{animation:headlineReveal calc(var(--os-speed, 1) * 244ms) var(--os-ease) both}@keyframes washCover{0%{transform:translateY(102%)}30%,to{transform:translateY(0)}}@keyframes washReveal{0%{transform:translateY(0)}to{transform:translateY(-102%)}}@keyframes rowsCover{0%{opacity:0}22%,to{opacity:1}}@keyframes rowsRevealOut{0%{opacity:1}to{opacity:0}}@keyframes marqueeLeftCover{0%{transform:translate(-34%)}72%,to{transform:translate(-18%)}}@keyframes marqueeLeftReveal{0%{transform:translate(-18%)}to{transform:translate(-7%)}}@keyframes marqueeRightCover{0%{transform:translate(8%)}72%,to{transform:translate(-10%)}}@keyframes marqueeRightReveal{0%{transform:translate(-10%)}to{transform:translate(-24%)}}@keyframes cutCover{0%{opacity:0}24%,to{opacity:1}}@keyframes cutReveal{0%{opacity:1}to{opacity:0}}@keyframes sliceCover{0%{transform:scaleX(0)}42%,to{transform:scaleX(1)}}@keyframes sliceReveal{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes headlineCover{0%{opacity:0;transform:translate(-50%,-38%) scale(.95);filter:blur(8px)}30%,to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}@keyframes headlineReveal{0%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}to{opacity:0;transform:translate(-50%,-38%) scale(.95);filter:blur(8px)}}.os-bw-stage.os-bw--covered.os-bw-stage--kinetic .os-bw-kinetic__wash{transform:translateY(0)}.os-bw-stage.os-bw--covered.os-bw-stage--kinetic .os-bw-kinetic__rows,.os-bw-stage.os-bw--covered.os-bw-stage--kinetic .os-bw-kinetic__cut{opacity:1}.os-bw-stage.os-bw--covered.os-bw-stage--kinetic .os-bw-kinetic__headline{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}
