/* The original flag covers the edges while the cloth moves inside its frame. */
.flag-band.flag-wind-enabled{position:relative;overflow:hidden;isolation:isolate;background-image:var(--oa-flag-source);background-size:100% 100%;background-position:center}
.flag-band.flag-wind-enabled>img{visibility:hidden;transform:none;filter:none}
.flag-cloth-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.flag-wind-enabled>.flag-cloth-canvas{display:block}
.flag-band.flag-wind-enabled::before{content:"";position:absolute;z-index:2;inset:auto 0 0;height:5%;background-image:var(--oa-flag-source);background-size:100% auto;background-position:center bottom;pointer-events:none}
body.oa-memorial .flag-band.flag-wind-enabled>img{filter:grayscale(1)}
.flag-band.flag-wind-enabled::after{content:"";position:absolute;inset:0 0 5%;pointer-events:none;background-image:linear-gradient(112deg,transparent 0%,#07151c85 12%,#ffffffe0 24%,transparent 34%,#07151c99 46%,#fffffff0 58%,transparent 69%,#07151c70 81%,#ffffffc0 93%,transparent 100%),linear-gradient(98deg,transparent 8%,#ffffffa0 30%,#07151c70 52%,transparent 74%);background-size:210% 145%,175% 130%;background-position:0% 45%,100% 55%;mix-blend-mode:soft-light;opacity:.95;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 78%,transparent 100%);animation:oa-flag-light 9s cubic-bezier(.45,0,.55,1) infinite alternate}
.flag-cloth-folds{position:absolute;inset:0 0 5%;pointer-events:none;background:repeating-linear-gradient(116deg,transparent 0%,transparent 9%,#06131d33 15%,#ffffff73 20%,transparent 27%,transparent 37%);background-size:165% 160%;mix-blend-mode:soft-light;opacity:.65;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 70%,transparent);animation:oa-cloth-folds 6.7s ease-in-out infinite alternate}
.flag-wind-paused .flag-cloth-folds{animation-play-state:paused}
@keyframes oa-cloth-folds{from{background-position:100% 55%;opacity:.45}to{background-position:0% 40%;opacity:.75}}
body.oa-memorial .flag-band.flag-wind-enabled::before{filter:grayscale(1)}
body.oa-memorial .flag-band.flag-wind-enabled{filter:grayscale(1)}
.flag-band.flag-wind-paused::after{animation-play-state:paused}
@keyframes oa-flag-light{from{background-position:0% 45%,100% 55%}to{background-position:100% 55%,0% 45%}}
@media(prefers-reduced-motion:reduce){.flag-band.flag-wind-enabled>img{transform:none;filter:none}body.oa-memorial .flag-band.flag-wind-enabled>img{filter:grayscale(1)}.flag-band.flag-wind-enabled::after,.flag-cloth-folds{display:none;animation:none}}

.flag-band:not(.flag-wind-enabled) .flag-cloth-folds{display:none}
