/* A fixed body, registered eye cels, and one separately articulated ear. */
.fox-hero-image.wox-scene { width: min(43%, 256px); height: auto; aspect-ratio: 3 / 4; }
.wox-body { display: block; width: 100%; height: auto; }
.wox-loading { display: none; position: absolute; inset: 0; place-items: center; color: var(--muted); font-size: 12px; text-align: center; }
.wox-scene.is-loading .wox-loading, .wox-scene.load-error .wox-loading { display: grid; }
.wox-scene.is-loading .wox-body, .wox-scene.load-error .wox-body { opacity: 0; }
.wox-scene.is-loading .wox-ear, .wox-scene.load-error .wox-ear, .wox-scene.is-loading .wox-eye, .wox-scene.load-error .wox-eye { display: none; }
.wox-toggle { position: absolute; z-index: 3; right: 12px; bottom: 10px; width: 44px; height: 44px; color: var(--muted); }
.wox-toggle[hidden] { display: none; }
.wox-ear { display: none; position: absolute; inset: 0; width: 100%; height: 100%; clip-path: polygon(27% 4%, 55.5% 18.5%, 42% 31.5%, 26% 25%); transform-origin: 47% 24.5%; }
.wox-ready .wox-body { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 27.5% 4.375%, 54.0278% 19.1667%, 40.4167% 29.6875%, 27.5% 23.9583%, 27.5% 4.375%, 0 0); }
.wox-ready .wox-ear { display: block; }
.wox-eye { display: none; position: absolute; background-size: 100% 100%; background-repeat: no-repeat; mask-image: linear-gradient(to right, transparent, #000 5px, #000 calc(100% - 5px), transparent), linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent); mask-composite: intersect; }
.wox-eye-left { left: 44.4444%; top: 26.25%; width: 21.9444%; height: 6.0417%; }
.wox-eye-right { left: 66.3889%; top: 23.9583%; width: 9.4444%; height: 6.875%; }
.wox-ready[data-phase='half'] .wox-eye,
.wox-ready[data-phase='closed'] .wox-eye,
.wox-ready[data-phase='glance'] .wox-eye { display: block; }
[data-phase='half'] .wox-eye-left { background-image: url('mascot/wox-eye-left-half.webp'); }
[data-phase='half'] .wox-eye-right { background-image: url('mascot/wox-eye-right-half.webp'); }
[data-phase='closed'] .wox-eye-left { background-image: url('mascot/wox-eye-left-closed.webp'); }
[data-phase='closed'] .wox-eye-right { background-image: url('mascot/wox-eye-right-closed.webp'); }
[data-phase='glance'] .wox-eye-left { background-image: url('mascot/wox-eye-left-glance.webp'); }
[data-phase='glance'] .wox-eye-right { background-image: url('mascot/wox-eye-right-glance.webp'); }
@media (max-width: 1250px) and (min-width: 768px) {
  .fox-hero-image.wox-scene { width: min(36%, 256px); }
}
@media (max-width: 767px) {
  .fox-hero-image.wox-scene { width: min(43%, 145.5px); height: auto; bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .wox-ready .wox-body { clip-path: none; }
  .wox-ready .wox-ear, .wox-ready .wox-eye { display: none; }
}