/* Generated by packages/brand/scripts/build.ts from src/clips.ts. Do not edit. */
/* Assets resolve from /brand/ by default; override --reid-sheet and --reid-sheet-2x to rehost. */

.reid {
  --reid-size: 96px;
  --reid-sheet: url(/brand/sprites/reid-sheet.webp);
  --reid-sheet-2x: url(/brand/sprites/reid-sheet@2x.webp);
  --reid-shadow: rgb(52 32 29 / .09);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--reid-size);
  height: var(--reid-size);
}
.reid::before {
  content: "";
  position: absolute;
  left: 22%;
  width: 56%;
  height: 7%;
  top: calc(87.5% - 3.5%);
  border-radius: 50%;
  background: var(--reid-shadow);
}
.reid__bird {
  position: absolute;
  inset: 0;
  background-image: var(--reid-sheet);
  background-image: image-set(var(--reid-sheet) 1x, var(--reid-sheet-2x) 2x);
  background-size: calc(var(--reid-size) * 5) calc(var(--reid-size) * 5);
  background-repeat: no-repeat;
  background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -0);
  transform-origin: 50% 87.5%;
}

/* Static poses */
.reid[data-frame="wink"] .reid__bird { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -0); }
.reid[data-frame="front"] .reid__bird { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -0); }
.reid[data-frame="side"] .reid__bird { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -0); }
.reid[data-frame="back"] .reid__bird { background-position: calc(var(--reid-size) * -3) calc(var(--reid-size) * -0); }
.reid[data-frame="happy"] .reid__bird { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
.reid[data-frame="curious"] .reid__bird { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -1); }
.reid[data-frame="excited"] .reid__bird { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -1); }
.reid[data-frame="thinking"] .reid__bird { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -1); }
.reid[data-frame="determined"] .reid__bird { background-position: calc(var(--reid-size) * -3) calc(var(--reid-size) * -1); }
.reid[data-frame="surprised"] .reid__bird { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -1); }
.reid[data-frame="concerned"] .reid__bird { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -2); }
.reid[data-frame="proud"] .reid__bird { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -2); }
.reid[data-frame="standing"] .reid__bird { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -2); }
.reid[data-frame="looking-up"] .reid__bird { background-position: calc(var(--reid-size) * -3) calc(var(--reid-size) * -2); }
.reid[data-frame="pointing"] .reid__bird { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -2); }
.reid[data-frame="blink"] .reid__bird { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -3); }
.reid[data-frame="wings-down"] .reid__bird { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -3); }
.reid[data-frame="wings-up"] .reid__bird { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -3); }
.reid[data-frame="airborne"] .reid__bird { background-position: calc(var(--reid-size) * -3) calc(var(--reid-size) * -3); }
.reid[data-frame="crouch"] .reid__bird { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -3); }
.reid[data-frame="tilt"] .reid__bird { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -4); }

/* Motion curves */
@keyframes reid-motion-breathe {
  0% { transform: none; }
  25% { transform: scale(1.012, 1.02); }
  50% { transform: none; }
  75% { transform: scale(1.012, 1.02); }
  100% { transform: none; }
}
@keyframes reid-motion-sway {
  0% { transform: none; }
  30% { transform: rotate(-3deg); }
  70% { transform: rotate(2.5deg); }
  100% { transform: none; }
}
@keyframes reid-motion-hop {
  0% { transform: none; }
  14% { transform: scale(1.04, .96); }
  30% { transform: translateY(-8%) scale(.96, 1.05); }
  44% { transform: translateY(-10%) scale(1, 1); }
  60% { transform: none; }
  64% { transform: scale(1.06, .92); }
  78% { transform: scale(.97, 1.03); }
  90% { transform: scale(1.01, .99); }
  100% { transform: none; }
}
@keyframes reid-shadow-hop {
  0%, 100% { transform: none; opacity: 1; }
  30% { transform: scale(0.82); opacity: 0.7; }
  44% { transform: scale(0.78); opacity: 0.65; }
  60% { transform: scale(1); opacity: 1; }
}
@keyframes reid-motion-hop2 {
  0% { transform: none; }
  8% { transform: scale(1.07, .9); }
  18% { transform: translateY(-16%) scale(.95, 1.08); }
  26% { transform: translateY(-19%) scale(1, 1); }
  36% { transform: scale(1.08, .9); }
  44% { transform: translateY(-12%) scale(.96, 1.06); }
  52% { transform: translateY(-14%) scale(1, 1); }
  62% { transform: scale(1.07, .91); }
  76% { transform: scale(.98, 1.02); }
  88% { transform: scale(1.01, .99); }
  100% { transform: none; }
}
@keyframes reid-shadow-hop2 {
  0%, 100% { transform: none; opacity: 1; }
  18% { transform: scale(0.7); opacity: 0.5; }
  26% { transform: scale(0.66); opacity: 0.5; }
  36% { transform: scale(1); opacity: 1; }
  44% { transform: scale(0.76); opacity: 0.6; }
  52% { transform: scale(0.74); opacity: 0.6; }
  62% { transform: scale(1); opacity: 1; }
}
@keyframes reid-motion-pop {
  0% { transform: none; }
  10% { transform: scale(1.05, .93); }
  24% { transform: translateY(-6%) scale(.93, 1.1); }
  40% { transform: scale(1.04, .97); }
  56% { transform: scale(.99, 1.01); }
  100% { transform: none; }
}
@keyframes reid-shadow-pop {
  0%, 100% { transform: none; opacity: 1; }
  24% { transform: scale(0.86); opacity: 0.75; }
  40% { transform: scale(1); opacity: 1; }
}
@keyframes reid-motion-puff {
  0% { transform: none; }
  18% { transform: scale(1.03, .96); }
  42% { transform: translateY(-2%) scale(1.06, 1.05); }
  70% { transform: translateY(-1%) scale(1.04, 1.035); }
  100% { transform: translateY(-1%) scale(1.04, 1.035); }
}
@keyframes reid-motion-bob {
  0% { transform: none; }
  11% { transform: scale(1.03, .98); }
  21% { transform: none; }
  33% { transform: translateY(-5%); }
  43% { transform: translateY(-3%); }
  55% { transform: translateY(-6%); }
  70% { transform: none; }
  76% { transform: scale(1.03, .97); }
  88% { transform: scale(.99, 1.01); }
  100% { transform: none; }
}
@keyframes reid-shadow-bob {
  0%, 100% { transform: none; opacity: 1; }
  33% { transform: scale(0.9); opacity: 0.85; }
  43% { transform: scale(0.93); opacity: 0.9; }
  55% { transform: scale(0.88); opacity: 0.8; }
  70% { transform: scale(1); opacity: 1; }
}
@keyframes reid-motion-droop {
  0% { transform: none; }
  35% { transform: scale(1.035, .95) rotate(-1.5deg); }
  100% { transform: scale(1.02, .97) rotate(-1deg); }
}

/* Clips: frame cuts (steps) layered with a motion curve */
@keyframes reid-frames-idle {
  0% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  57.692% { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -3); }
  60% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  90.769% { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -3); }
  92.5% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  94.615% { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -3); }
  96.346% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  100% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
}
.reid[data-clip="idle"] .reid__bird {
  background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0);
  animation: reid-frames-idle 5200ms steps(1, end) infinite, reid-motion-breathe 5200ms cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes reid-frames-listen {
  0% { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -1); }
  55% { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -4); }
  100% { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -4); }
}
.reid[data-clip="listen"] .reid__bird {
  background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -1);
  animation: reid-frames-listen 4000ms steps(1, end) infinite, reid-motion-sway 4000ms cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes reid-frames-think { from, to { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -1); } }
.reid[data-clip="think"] .reid__bird {
  background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -1);
  animation: reid-frames-think 4800ms steps(1, end) infinite, reid-motion-breathe 4800ms cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes reid-frames-greet {
  0% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  4.286% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -3); }
  14.286% { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -3); }
  44.286% { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -0); }
  78.571% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  100% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
}
.reid[data-clip="greet"] .reid__bird {
  background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -0);
  animation: reid-frames-greet 1400ms steps(1, end) 1 both, reid-motion-hop 1400ms cubic-bezier(.33,0,.2,1) 1 both;
}
.reid[data-clip="greet"]::before { animation: reid-shadow-hop 1400ms cubic-bezier(.33,0,.2,1) 1 both; }
@keyframes reid-frames-celebrate {
  0% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -1); }
  10% { background-position: calc(var(--reid-size) * -3) calc(var(--reid-size) * -3); }
  34.615% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -1); }
  43.077% { background-position: calc(var(--reid-size) * -3) calc(var(--reid-size) * -3); }
  60.769% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -1); }
  100% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -1); }
}
.reid[data-clip="celebrate"] .reid__bird {
  background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -1);
  animation: reid-frames-celebrate 1300ms steps(1, end) 1 both, reid-motion-hop2 1300ms cubic-bezier(.33,0,.2,1) 1 both;
}
.reid[data-clip="celebrate"]::before { animation: reid-shadow-hop2 1300ms cubic-bezier(.33,0,.2,1) 1 both; }
@keyframes reid-frames-surprise {
  0% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  11% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -1); }
  100% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -1); }
}
.reid[data-clip="surprise"] .reid__bird {
  background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -1);
  animation: reid-frames-surprise 1000ms steps(1, end) 1 both, reid-motion-pop 1000ms cubic-bezier(.2,.7,.3,1) 1 both;
}
.reid[data-clip="surprise"]::before { animation: reid-shadow-pop 1000ms cubic-bezier(.2,.7,.3,1) 1 both; }
@keyframes reid-frames-proud {
  0% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  15% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -2); }
  100% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -2); }
}
.reid[data-clip="proud"] .reid__bird {
  background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -2);
  animation: reid-frames-proud 1200ms steps(1, end) 1 both, reid-motion-puff 1200ms cubic-bezier(.3,0,.2,1) 1 both;
}
@keyframes reid-frames-flutter {
  0% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -3); }
  11.111% { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -3); }
  21.111% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -3); }
  33.333% { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -3); }
  43.333% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -3); }
  55.556% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
  100% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -0); }
}
.reid[data-clip="flutter"] .reid__bird {
  background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -3);
  animation: reid-frames-flutter 900ms steps(1, end) 1 both, reid-motion-bob 900ms cubic-bezier(.33,0,.2,1) 1 both;
}
.reid[data-clip="flutter"]::before { animation: reid-shadow-bob 900ms cubic-bezier(.33,0,.2,1) 1 both; }
@keyframes reid-frames-concern { from, to { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -2); } }
.reid[data-clip="concern"] .reid__bird {
  background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -2);
  animation: reid-frames-concern 1100ms steps(1, end) 1 both, reid-motion-droop 1100ms cubic-bezier(.4,0,.2,1) 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .reid .reid__bird, .reid::before { animation: none !important; }
}