.ice-break{position:relative;background:#dcecf0;isolation:isolate}
.ice-break:not(.is-resurfacer) .ice-crew{display:none}
.real-crew{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.is-resurfacer .real-crew{display:none}
.crew-travel{position:absolute;left:-30%;bottom:-6%;width:29%;height:100%;transform:translateX(0);will-change:transform}
.crew-travel.second{bottom:-12%;left:-55%;width:31%}
.crew-body{position:absolute;inset:0;background:url('/ice-crew-glide.png') center/contain no-repeat;filter:drop-shadow(0 1px 1px #253d4a33)}
.crew-shadow{position:absolute;left:19%;bottom:19%;width:44%;height:3%;background:#21374442;border-radius:50%;filter:blur(2px)}
.crew-snow{position:absolute;left:76%;bottom:19%;width:16%;height:5%;border-radius:65% 80% 15% 20%;background:radial-gradient(ellipse at 30% 20%,#fff 20%,#e6f1f7 58%,#b9d1dd 100%);box-shadow:0 2px 2px #54798742;transform-origin:left bottom}
.crew-snow i{position:absolute;width:3px;height:2px;border-radius:50%;background:#fff;left:70%;top:0;opacity:0}
.crew-snow i:nth-child(2){left:85%;animation-delay:.17s!important}
.crew-snow i:nth-child(3){left:50%;animation-delay:.31s!important}
.ice-break.is-running .crew-travel{animation:real-glide 9.5s cubic-bezier(.32,.16,.66,.85) both}
.ice-break.is-running .crew-travel.second{animation-delay:.45s}
.ice-break.is-running .crew-body{animation:glide-weight 1.8s ease-in-out infinite alternate}
.ice-break.is-running .crew-snow{animation:snow-gather 9s linear both}
.ice-break.is-running .crew-snow i{animation:real-snow .65s ease-out infinite}
@keyframes real-glide{to{transform:translateX(560%)}}
@keyframes glide-weight{to{transform:translateY(1px) rotate(.35deg)}}
@keyframes snow-gather{from{scale:.55 .5}to{scale:1.2 1.1}}
@keyframes real-snow{0%{opacity:0;transform:translate(0,0)}25%{opacity:.85}100%{opacity:0;transform:translate(8px,-6px)}}
@media(prefers-reduced-motion:reduce){
 .ice-break.is-running .crew-travel,.ice-break.is-running .crew-body,.ice-break.is-running .crew-snow,.ice-break.is-running .crew-snow i{animation:none}
 .crew-travel{left:22%}.crew-travel.second{left:52%}
}
.crew-travel{bottom:3%}.crew-travel.second{bottom:-1%}
.crew-shadow{left:24%;bottom:8%;width:28%}
.crew-snow{left:90%;bottom:7%;width:12%;height:3%}

.ice-break.still .crew-travel{left:22%;transform:none}.ice-break.still .crew-travel.second{left:52%}

/* Four distinct gait poses per skater, generated specifically for this cycle. */
.crew-body{background-image:url('/ice-crew-cycle.png');background-size:400% 200%;background-position:0 0}
.second .crew-body{background-position:0 100%}
.ice-break.is-running .crew-body{animation:crew-gait 1.2s steps(1,end) infinite}
.ice-break.is-running .second .crew-body{animation-name:crew-gait-blonde;animation-delay:-.6s;animation-duration:1.3s}
@keyframes crew-gait{0%,100%{background-position:0 0}25%{background-position:33.333333% 0}50%{background-position:66.666667% 0}75%{background-position:100% 0}}
@keyframes crew-gait-blonde{0%,100%{background-position:0 100%}25%{background-position:33.333333% 100%}50%{background-position:66.666667% 100%}75%{background-position:100% 100%}}
.ice-break.inspect .crew-travel{left:18%;animation:none;transform:none}
.ice-break.inspect .crew-travel.second{left:52%}
@media(prefers-reduced-motion:reduce){.ice-break.is-running .crew-body,.ice-break.is-running .second .crew-body{animation:none}}

/* Each pose is clipped independently and aligned at the shovel blade. */
.crew-body,.second .crew-body{background:none}
.ice-break.is-running .crew-body,.ice-break.is-running .second .crew-body{animation:none}
.gait-pose{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.gait-pose.pose-0{opacity:1}
.ice-break.is-running .gait-pose{animation:gait-frames 1.4s linear infinite;opacity:0}
.ice-break.is-running .pose-1{animation-delay:-1.05s}
.ice-break.is-running .pose-2{animation-delay:-.7s}
.ice-break.is-running .pose-3{animation-delay:-.35s}
.ice-break.is-running .second .gait-pose{animation-duration:1.4s}
.ice-break.is-running .second .pose-0{animation-delay:-.7s}
.ice-break.is-running .second .pose-1{animation-delay:-.35s}
.ice-break.is-running .second .pose-2{animation-delay:0s}
.ice-break.is-running .second .pose-3{animation-delay:-1.05s}
@keyframes gait-frames{0%,21%{opacity:1}25%,96%{opacity:0}100%{opacity:1}}
.crew-snow{bottom:6%;left:91%;width:10%}.crew-shadow{bottom:6%;left:40%;width:24%}
@media(prefers-reduced-motion:reduce){.ice-break.is-running .gait-pose{animation:none;opacity:0}.ice-break.is-running .pose-0{opacity:1}}
.crew-travel,.crew-travel.second{height:90%;width:29%;bottom:0}

.arena-real{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:1;display:block}
.ice-break:not(.is-resurfacer)>svg{opacity:0}
.real-crew{z-index:3}
.is-resurfacer .arena-real{display:none}

.bench-crests{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.ice-break:not(.is-resurfacer)>svg.bench-crests{opacity:1}.is-resurfacer .bench-crests{display:none}
.ice-break:not(.is-resurfacer){aspect-ratio:2059/764}
.ice-break:not(.is-resurfacer)>svg:not(.bench-crests){position:absolute;inset:0;width:100%;height:100%}
.ice-break>svg.bench-crests{width:100%;height:100%}

.ice-break .gait-pose{width:100%;height:100%}.crew-shadow{bottom:3%}.crew-snow{bottom:1%;left:91%}
