/* A single, gentle arrival. The unchanged original remains the resting state. */
.brand{position:relative}
.brand-fragments{display:none;position:absolute;left:0;top:50%;width:100%;aspect-ratio:366/96;transform:translateY(-50%);pointer-events:none}
.brand.is-forming>img{opacity:0}
.brand:is(.is-forming,.is-reforming) .brand-fragments{display:block}
.brand-badge{position:absolute;inset:0 auto 0 0;width:26.2295082%;perspective:160px;transform-style:preserve-3d}
.brand-piece{position:absolute;left:calc(var(--col)*25%);top:calc(var(--row)*25%);width:25%;height:25%;transform-origin:center;animation:brandPieceIn .9s cubic-bezier(.22,1,.36,1) var(--delay) both}
.brand-piece-cut{position:absolute;inset:0;overflow:hidden}
.brand .brand-piece img{position:absolute;display:block;width:1525%;height:400%;max-width:none;left:calc(var(--col)*-100%);top:calc(var(--row)*-100%)}
.brand-piece-warm{position:absolute;inset:0;background:#fe5700;mask-image:var(--brand-art);mask-size:1525% 400%;mask-position:var(--mask-x) var(--mask-y);mask-repeat:no-repeat;animation:brandEmblemIn .34s ease calc(.38s + var(--delay)) both}
.brand-type{position:absolute;inset:0;clip-path:inset(0 0 0 28%);animation:brandTypeIn .52s cubic-bezier(.22,1,.36,1) .26s both}
.brand .brand-type img{display:block;width:100%;height:100%}
.brand.is-reforming>img{clip-path:inset(0 0 0 28%)}
.brand.is-reforming .brand-type,.brand.is-reforming .brand-piece-warm{display:none}
.brand.is-reforming .brand-piece{animation:brandPieceBreathe .92s cubic-bezier(.45,0,.2,1) var(--delay) both}
.brand.is-settling>img{opacity:1;clip-path:none;transition:opacity .16s ease}
.brand.is-settling .brand-fragments{opacity:0;transition:opacity .16s ease}
@keyframes brandPieceIn{0%{opacity:0;transform:translate3d(var(--dx),var(--dy),4px) rotateX(12deg) rotateY(-9deg) rotateZ(var(--angle)) scale(.94)}24%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1)}}
@keyframes brandPieceBreathe{0%,100%{transform:translate3d(0,0,0)}38%{transform:translate3d(calc(var(--dx)*.32),calc(var(--dy)*.32),1px)}}
@keyframes brandEmblemIn{from{opacity:1}to{opacity:0}}
@keyframes brandTypeIn{from{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.brand:is(.is-forming,.is-reforming)>img{opacity:1;clip-path:none}.brand:is(.is-forming,.is-reforming) .brand-fragments{display:none}}